phc
/
website
6
4
Fork 0
Code Issues 8 Pull Requests Projects 1 Releases Wiki Activity

chore: added some scss mixins

Browse Source
dev
Antonio De Lucreziis 9 months ago
parent d34d169d17
commit 16c8a6dd7a
5 changed files with 60 additions and 31 deletions
Show Stats Download Patch File Download Diff File

10
src/pages/index.astro
Unescape Escape View File

@ -142,7 +142,7 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="title">Progetti</div>
<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="image">
<div class="box"></div>
@ -154,7 +154,7 @@ import PageLayout from '../layouts/PageLayout.astro'
</div>
</div>
</a>
<a href="#">
<a href="#" style="--masonry-height: 2;">
<div class="project">
<div class="image">
<div class="box"></div>
@ -165,7 +165,7 @@ import PageLayout from '../layouts/PageLayout.astro'
</div>
</div>
</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="image">
<div class="box"></div>
@ -177,7 +177,7 @@ import PageLayout from '../layouts/PageLayout.astro'
</div>
</div>
</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="image">
<div class="box"></div>
@ -189,7 +189,7 @@ import PageLayout from '../layouts/PageLayout.astro'
</div>
</div>
</a>
<a href="#">
<a href="#" style="--masonry-height: 3;">
<div class="project">
<div class="image">
<div class="box"></div>

22
src/styles/components.scss
Unescape Escape View File

@ -1,3 +1,5 @@
@import './mixins.scss';
//
// Components - for complex parts of the UI like search bars or compound buttons
//
@ -11,9 +13,10 @@
}
.search {
@extend .input-text;
width: 100%;
height: 2.5rem;
padding: 0;
@include neo-brutalist-card;
display: grid;
grid-template-columns: 1fr auto;
@ -53,6 +56,17 @@
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 {
width: 100%;
@ -75,9 +89,7 @@
background: #fff;
border: 3px solid #222;
border-radius: 6px;
box-shadow: 4px 4px 0 0 #222;
@include neo-brutalist-card;
& > .icon {
grid-area: icon;

13
src/styles/controls.scss
Unescape Escape View File

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

28
src/styles/main.scss
Unescape Escape View File

@ -1,3 +1,4 @@
@import './mixins.scss';
@import './typography.scss';
*,
@ -212,9 +213,7 @@ body {
.whats-phc {
background: #e4c5ff;
border: 4px solid #222;
border-radius: 8px;
box-shadow: 6px 6px 0 0 #222;
@include neo-brutalist-card($size: 4px, $offset: 8px);
padding: 2rem;
@ -258,9 +257,7 @@ body {
.news {
background: #fffbeb;
border: 3px solid #222;
border-radius: 9px;
box-shadow: 9px 9px 0 0 #222;
@include neo-brutalist-card($size: 3px, $offset: 9px);
display: flex;
flex-direction: column;
@ -347,21 +344,25 @@ body {
.project-list {
display: grid;
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 {
height: 100%;
// background: #fcddff;
// background: #ffa89c;
background: var(--card-bg, #a2d4f3);
color: #000e;
border: 3px solid #222;
border-radius: 9px;
box-shadow: 9px 9px 0 0 #222;
@include neo-brutalist-card($size: 3px, $offset: 9px);
padding: 1rem;
@ -397,7 +398,8 @@ body {
transition: all 128ms ease-out;
&:hover {
transform: translate(0, -8px);
transform: translate(0, -4px);
box-shadow: 9px 13px 0 0 #222;
}
}
}

18
src/styles/mixins.scss
Unescape Escape View File

@ -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;
Write Preview
Loading…
Cancel
Save