CSS Spring Cleaning #3
8 changed files with 2 additions and 98 deletions
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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);
|
||||
|
|
|
@ -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));
|
||||
}
|
|
@ -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%;
|
||||
}
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
|
|
@ -27,10 +27,6 @@
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
|
@ -33,7 +33,3 @@
|
|||
.line-height-xl {
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.text-skew {
|
||||
transform: var(--text-skew);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue