chore: added some scss mixins

dev
Antonio De Lucreziis 8 months ago
parent d34d169d17
commit 16c8a6dd7a

@ -142,7 +142,7 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="title">Progetti</div> <div class="title">Progetti</div>
<div class="project-list"> <div class="project-list">
<a target="_blank" href="https://git.phc.dm.unipi.it/"> <a target="_blank" href="https://git.phc.dm.unipi.it/" style="--masonry-height: 3;">
<div class="project" style="--card-bg: #272;"> <div class="project" style="--card-bg: #272;">
<div class="image"> <div class="image">
<div class="box"></div> <div class="box"></div>
@ -154,7 +154,7 @@ import PageLayout from '../layouts/PageLayout.astro'
</div> </div>
</div> </div>
</a> </a>
<a href="#"> <a href="#" style="--masonry-height: 2;">
<div class="project"> <div class="project">
<div class="image"> <div class="image">
<div class="box"></div> <div class="box"></div>
@ -165,7 +165,7 @@ import PageLayout from '../layouts/PageLayout.astro'
</div> </div>
</div> </div>
</a> </a>
<a target="_blank" href="https://lab.phc.dm.unipi.it/orario/"> <a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 3;">
<div class="project" style="--card-bg: #75ca75;"> <div class="project" style="--card-bg: #75ca75;">
<div class="image"> <div class="image">
<div class="box"></div> <div class="box"></div>
@ -177,7 +177,7 @@ import PageLayout from '../layouts/PageLayout.astro'
</div> </div>
</div> </div>
</a> </a>
<a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/"> <a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/" style="--masonry-height: 2;">
<div class="project" style="--card-bg: #8d5fac;"> <div class="project" style="--card-bg: #8d5fac;">
<div class="image"> <div class="image">
<div class="box"></div> <div class="box"></div>
@ -189,7 +189,7 @@ import PageLayout from '../layouts/PageLayout.astro'
</div> </div>
</div> </div>
</a> </a>
<a href="#"> <a href="#" style="--masonry-height: 3;">
<div class="project"> <div class="project">
<div class="image"> <div class="image">
<div class="box"></div> <div class="box"></div>

@ -1,3 +1,5 @@
@import './mixins.scss';
// //
// Components - for complex parts of the UI like search bars or compound buttons // Components - for complex parts of the UI like search bars or compound buttons
// //
@ -11,9 +13,10 @@
} }
.search { .search {
@extend .input-text; width: 100%;
height: 2.5rem;
padding: 0; @include neo-brutalist-card;
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
@ -53,6 +56,17 @@
gap: 1rem; gap: 1rem;
} }
// just to know for reference
.fake-masonry {
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
grid-auto-flow: dense;
& > * {
grid-row: span var(--masonry-height);
}
}
.search-results { .search-results {
width: 100%; width: 100%;
@ -75,9 +89,7 @@
background: #fff; background: #fff;
border: 3px solid #222; @include neo-brutalist-card;
border-radius: 6px;
box-shadow: 4px 4px 0 0 #222;
& > .icon { & > .icon {
grid-area: icon; grid-area: icon;

@ -1,3 +1,5 @@
@import './mixins.scss';
// //
// Controls - for things like buttons, input, select // Controls - for things like buttons, input, select
// //
@ -9,9 +11,7 @@ button,
background: #fff; background: #fff;
border: 3px solid #222; @include neo-brutalist-card;
border-radius: 6px;
box-shadow: 4px 4px 0 0 #222;
transition: all 64ms linear; transition: all 64ms linear;
@ -51,18 +51,15 @@ button,
} }
} }
.input-text,
input[type='text'] { input[type='text'] {
width: 100%; width: 100%;
height: 2.5rem; height: 2.5rem;
border: 3px solid #222; @include neo-brutalist-card;
border-radius: 6px;
box-shadow: 4px 4px 0 0 #222;
padding: 0 0.25rem; padding: 0 0.25rem;
&:hover { &:hover {
background: #f8f8f8; background: #fdfdfd;
} }
} }

@ -1,3 +1,4 @@
@import './mixins.scss';
@import './typography.scss'; @import './typography.scss';
*, *,
@ -212,9 +213,7 @@ body {
.whats-phc { .whats-phc {
background: #e4c5ff; background: #e4c5ff;
border: 4px solid #222; @include neo-brutalist-card($size: 4px, $offset: 8px);
border-radius: 8px;
box-shadow: 6px 6px 0 0 #222;
padding: 2rem; padding: 2rem;
@ -258,9 +257,7 @@ body {
.news { .news {
background: #fffbeb; background: #fffbeb;
border: 3px solid #222; @include neo-brutalist-card($size: 3px, $offset: 9px);
border-radius: 9px;
box-shadow: 9px 9px 0 0 #222;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -347,21 +344,25 @@ body {
.project-list { .project-list {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 3rem; grid-auto-flow: dense;
padding: 0 6rem; & > * {
grid-row: span var(--masonry-height);
}
gap: 1.5rem;
align-items: start; padding: 0 6rem;
.project { .project {
height: 100%;
// background: #fcddff; // background: #fcddff;
// background: #ffa89c; // background: #ffa89c;
background: var(--card-bg, #a2d4f3); background: var(--card-bg, #a2d4f3);
color: #000e; color: #000e;
border: 3px solid #222; @include neo-brutalist-card($size: 3px, $offset: 9px);
border-radius: 9px;
box-shadow: 9px 9px 0 0 #222;
padding: 1rem; padding: 1rem;
@ -397,7 +398,8 @@ body {
transition: all 128ms ease-out; transition: all 128ms ease-out;
&:hover { &:hover {
transform: translate(0, -8px); transform: translate(0, -4px);
box-shadow: 9px 13px 0 0 #222;
} }
} }
} }

@ -0,0 +1,18 @@
@mixin neo-brutalist-card($size: 3px, $offset: $size + 1, $shadow: true) {
border: $size solid #222;
border-radius: $size * 2;
@if $shadow {
box-shadow: $offset $offset 0 0 #222;
}
}
// homepage / project
// border: 3px solid #222;
// border-radius: 9px;
// box-shadow: 9px 9px 0 0 #222;
// homepage / whats phc
// border: 4px solid #222;
// border-radius: 8px;
// box-shadow: 6px 6px 0 0 #222;
Loading…
Cancel
Save