CSS Spring Cleaning (#3)

Reviewed-on: #3
Co-authored-by: Devin Haska <wonderfulfrog@noreply.git.cloud.haska.me>
Co-committed-by: Devin Haska <wonderfulfrog@noreply.git.cloud.haska.me>

src/includes/css/blocks/catalogue.css

@@ -1,16 +0,0 @@
-.catalogue-list-item {
-  display: grid;
-  grid-template-columns: 1fr auto auto;
-  gap: var(--spacing-1);
-}
-
-.catalogue-header h2 {
-  --flow-space: var(--spacing-0\.5);
-  transform: var(--text-skew);
-  color: var(--color-fadeText);
-}
-
-.catalogue source,
-.catalogue img {
-  max-width: 300px;
-}

src/includes/css/blocks/image-placeholder.css

@@ -1,13 +0,0 @@
-.image-placeholder {
-  background-color: var(--color-surface);
-  border-radius: var(--spacing-1);
-  width: 100%;
-  height: 100%;
-  font-size: 0.8em;
-  line-height: 1.125em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-1);
-  text-align: center;
-}

src/includes/css/blocks/media-grid.css

@@ -4,6 +4,7 @@
 
   display: grid;
   grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
+  grid-gap: var(--spacing-0\.5);
 
   li {
     border: 1px solid var(--color-shadow);

src/includes/css/blocks/now.css

@@ -1,18 +0,0 @@
-/*
- * From Every Layout
- * GRID
- * https://every-layout.dev/layouts/grid/
- */
-
-.media-grid {
-  display: grid;
-  grid-gap: var(--spacing-0\.5);
-}
-
-.media-grid.square {
-  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
-}
-
-.media-grid.poster {
-  grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
-}

src/includes/css/compositions/switcher.css

@@ -1,21 +0,0 @@
-/*
-SWITCHER
-More info: https://every-layout.dev/layouts/switcher/
-A layout that allows you to lay **2** items next to each other
-until there is not enough horizontal space to allow that.
-*/
-
-.switcher {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.switcher > * {
-  flex-grow: 1;
-  flex-basis: calc((32rem - 100%) * 999);
-}
-
-.switcher > :nth-last-child(n + 3),
-.switcher > :nth-last-child(n + 3) ~ * {
-  flex-basis: 100%;
-}

src/includes/css/global/variables.css

@@ -1,35 +1,14 @@
 /* Global variables */
 :root {
   --transition-duration: 250ms;
-  --transition-timing: ease;
+  --transition-bounce: cubic-bezier(0.3, 1.6, 0.35, 1.25);
 
   --color-white: white;
   --color-black: black;
 
-  --text-skew: skew(0deg, -1deg);
-
   --font-weight-normal: 300;
   --font-weight-bold: 700;
   --font-weight-black: 900;
 
   --triangles: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path stroke-width="0" d="M0,0 40,40 80,0z" /></svg>');
-
-  --transition-bounce: linear(
-    0,
-    0.544 5.5%,
-    0.947 11.5%,
-    1.213 18.1%,
-    1.298 21.7%,
-    1.352 25.5%,
-    1.372 28.2%,
-    1.379 31.1%,
-    1.374 34.2%,
-    1.357 37.6%,
-    1.307 43.7%,
-    1.121 61.8%,
-    1.074 67.8%,
-    1.04 73.7%,
-    1.007 84.7%,
-    1
-  );
 }

src/includes/css/utilities/flex.css

@@ -27,10 +27,6 @@
   flex-wrap: wrap;
 }
 
-.flex-nowrap {
-  flex-wrap: nowrap;
-}
-
 .flex-1 {
   flex: 1;
 }

src/includes/css/utilities/fonts.css

@@ -33,7 +33,3 @@
 .line-height-xl {
   line-height: 2rem;
 }
-
-.text-skew {
-  transform: var(--text-skew);
-}