started work on design page
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
---
|
||||
const { size, ...rest } = Astro.props
|
||||
---
|
||||
|
||||
<div class:list={['container', size ?? 'normal']} {...rest}>
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
---
|
||||
type Props = {
|
||||
colors: string[]
|
||||
}
|
||||
|
||||
const { colors } = Astro.props
|
||||
---
|
||||
|
||||
<div class="palette">
|
||||
{
|
||||
colors.map(value => (
|
||||
<>
|
||||
<div class="color">
|
||||
<div class="region" style={{ backgroundColor: value }} />
|
||||
</div>
|
||||
<div class="label">{value}</div>
|
||||
</>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,45 @@
|
||||
import Container from '../../components/meta/Container.astro'
|
||||
import Palette from '../../components/meta/Palette.astro'
|
||||
|
||||
import ArticleCard from '../../components/ArticleCard.astro'
|
||||
|
||||
# Meta / Design
|
||||
|
||||
In questa pagina tento di spiegare come funziona il design di questo sito.
|
||||
|
||||
## Card
|
||||
|
||||
Le card sono uno dei componenti più importanti di questo sito. Sono utilizzate per mostrare i post, i progetti e le pagine. Ecco alcuni esempi per dare un'idea
|
||||
|
||||
### Lista di articoli
|
||||
|
||||
Una lista di articoli è composta da più card, ognuna delle quali rappresenta un articolo. Ogni card ha un titolo, una descrizione e una lista di tag.
|
||||
|
||||
<Container size="large" style={{ '--zone-color': 'var(--guide-base-color)' }}>
|
||||
<div class="article-list">
|
||||
<ArticleCard id="article-1" title="Titolo 1" description="Descrizione 1" tags={['tag1', 'tag2']} />
|
||||
<ArticleCard id="article-2" title="Titolo 2" description="Descrizione 2" tags={['tag2', 'tag3']} />
|
||||
<ArticleCard id="article-3" title="Titolo 3" description="Descrizione 3" tags={['tag3', 'tag4']} />
|
||||
<ArticleCard id="article-3" title="Titolo 3" description="Descrizione 3" tags={['tag3', 'tag4']} />
|
||||
<ArticleCard id="article-3" title="Titolo 3" description="Descrizione 3" tags={['tag3', 'tag4']} />
|
||||
<ArticleCard id="article-3" title="Titolo 3" description="Descrizione 3" tags={['tag3', 'tag4']} />
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
## Palette
|
||||
|
||||
Varie sezioni del sito utilizzano diverse palette di colori. Questa è la palette di base.
|
||||
|
||||
### Guide
|
||||
|
||||
<Palette
|
||||
colors={[
|
||||
'var(--guide-base)',
|
||||
'var(--guide-darkest)',
|
||||
'var(--guide-darker)',
|
||||
'var(--guide-dark)',
|
||||
'var(--guide-light)',
|
||||
'var(--guide-lighter)',
|
||||
'var(--guide-lightest)',
|
||||
]}
|
||||
/>
|
||||
@@ -0,0 +1,16 @@
|
||||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro'
|
||||
|
||||
import Header from '../../components/Header.astro'
|
||||
import Footer from '../../components/Footer.astro'
|
||||
|
||||
import { Content } from '../../content/meta/design.mdx'
|
||||
---
|
||||
|
||||
<BaseLayout {...Astro.props} pageName="design">
|
||||
<Header />
|
||||
<main class="text-content center">
|
||||
<Content />
|
||||
</main>
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
@@ -175,10 +175,13 @@ $news-accent-bg: #f8e8b1;
|
||||
|
||||
.article-list {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-flow: row;
|
||||
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
max-width: 100%;
|
||||
|
||||
gap: 2rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
|
||||
grid-auto-rows: auto;
|
||||
|
||||
.article {
|
||||
display: grid;
|
||||
|
||||
+2
-404
@@ -131,7 +131,7 @@ body {
|
||||
a {
|
||||
font-family: 'Iosevka', monospace;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
color: #333;
|
||||
}
|
||||
@@ -156,409 +156,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.homepage {
|
||||
header .logo {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
|
||||
min-height: calc(100vh - 6rem);
|
||||
|
||||
&:last-of-type {
|
||||
min-height: calc(100vh - 10rem);
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
gap: 2rem;
|
||||
|
||||
scroll-snap-align: start;
|
||||
|
||||
& > .title {
|
||||
font-size: 48px;
|
||||
padding-top: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.zig-zag {
|
||||
z-index: 5;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
|
||||
&:first-child {
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
section.principal {
|
||||
z-index: 2;
|
||||
|
||||
min-height: calc(100vh - 7rem);
|
||||
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4rem;
|
||||
|
||||
padding: 3rem 0 6rem;
|
||||
|
||||
background: $homepage-principal-bg;
|
||||
|
||||
flex-wrap: wrap;
|
||||
|
||||
position: relative;
|
||||
|
||||
.circuit-layer {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& > .logo {
|
||||
z-index: 2;
|
||||
max-width: 640px;
|
||||
position: relative;
|
||||
|
||||
user-select: none;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
filter: drop-shadow(6px 6px 0 $black) drop-shadow(4px 0 0 $black) drop-shadow(0 4px 0 $black)
|
||||
drop-shadow(-4px 0 0 $black) drop-shadow(0 -4px 0 $black);
|
||||
}
|
||||
}
|
||||
|
||||
& > .whats-phc {
|
||||
z-index: 2;
|
||||
background: $homepage-whatsphc-bg;
|
||||
|
||||
@include neo-brutalist-card($size: 4px, $offset: 8px);
|
||||
|
||||
padding: 2rem;
|
||||
|
||||
max-width: 37rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
gap: 1rem;
|
||||
|
||||
.title {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.content {
|
||||
@extend .text;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.news {
|
||||
background: $homepage-news-bg;
|
||||
|
||||
gap: 3rem;
|
||||
|
||||
padding-bottom: 6rem;
|
||||
|
||||
& > .news-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 3rem;
|
||||
|
||||
align-items: flex-start;
|
||||
|
||||
padding: 0 3rem;
|
||||
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
[role='button'] {
|
||||
padding: 0.5rem 2rem;
|
||||
|
||||
&.primary {
|
||||
// background: #824ed4;
|
||||
// color: #f0e6ff;
|
||||
background: #f8e8b1;
|
||||
color: #000d;
|
||||
|
||||
// &:hover {
|
||||
// // background: #8e5ddd;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.projects {
|
||||
background: $homepage-projects-bg;
|
||||
|
||||
padding-bottom: 6rem;
|
||||
|
||||
.project-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
||||
grid-auto-flow: dense;
|
||||
|
||||
& > * {
|
||||
grid-row: span var(--masonry-height);
|
||||
}
|
||||
|
||||
gap: 1.5rem;
|
||||
|
||||
padding: 0 6rem;
|
||||
|
||||
.project {
|
||||
height: 100%;
|
||||
|
||||
// background: #fcddff;
|
||||
// background: #ffa89c;
|
||||
background: var(--card-bg, $project-card-bg);
|
||||
color: #000e;
|
||||
|
||||
@include neo-brutalist-card($size: 3px, $offset: 9px);
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
gap: 0.25rem 1rem;
|
||||
|
||||
.title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.image {
|
||||
grid-row: span 2;
|
||||
// place-self: center;
|
||||
|
||||
.box {
|
||||
background: #0003;
|
||||
border: 3px solid #0006;
|
||||
border-radius: 6px;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 16px;
|
||||
@extend .text;
|
||||
}
|
||||
|
||||
transition: all 128ms ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: translate(0, -4px);
|
||||
box-shadow: 9px 13px 0 0 #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.wanna-be-macchinista {
|
||||
background: $homepage-macchinisti-bg;
|
||||
color: #fdfdfd;
|
||||
|
||||
.content {
|
||||
@extend .text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.utenti {
|
||||
main {
|
||||
justify-self: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
max-width: 80ch;
|
||||
padding: 5rem 0;
|
||||
|
||||
gap: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.appunti {
|
||||
main {
|
||||
background: #fdfdf0;
|
||||
|
||||
justify-self: center;
|
||||
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
|
||||
justify-items: center;
|
||||
|
||||
padding: 3rem;
|
||||
|
||||
gap: 3rem;
|
||||
|
||||
width: 100%;
|
||||
|
||||
.search {
|
||||
max-width: 80ch;
|
||||
}
|
||||
|
||||
.appunti-scrollable {
|
||||
justify-self: stretch;
|
||||
|
||||
&.center {
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login {
|
||||
background: #ddfaff;
|
||||
|
||||
main {
|
||||
justify-self: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
max-width: 80ch;
|
||||
padding: 3rem 0;
|
||||
|
||||
gap: 3rem;
|
||||
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.guida {
|
||||
background: #f0f0f0;
|
||||
|
||||
&.series {
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.series {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 6rem;
|
||||
|
||||
background: #fff;
|
||||
max-width: calc(46rem + 2rem * 2);
|
||||
justify-self: center;
|
||||
padding: 3rem 2rem 2rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-desktop-min) {
|
||||
main {
|
||||
@include neo-brutalist-card($size: 3px, $offset: 9px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notizia {
|
||||
background: #fffced;
|
||||
--zone-color: #ac8919;
|
||||
|
||||
main {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 6rem;
|
||||
|
||||
background: #fff2c9;
|
||||
max-width: calc(46rem + 2rem * 2);
|
||||
justify-self: center;
|
||||
padding: 3rem 2rem 2rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-desktop-min) {
|
||||
main {
|
||||
@include neo-brutalist-card($size: 3px, $offset: 9px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notizie {
|
||||
background: #fffced;
|
||||
}
|
||||
|
||||
.guide {
|
||||
main {
|
||||
justify-self: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
max-width: 80ch;
|
||||
padding: 5rem 0;
|
||||
|
||||
gap: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.notizie {
|
||||
main {
|
||||
justify-self: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
max-width: 80ch;
|
||||
padding: 5rem 0;
|
||||
|
||||
gap: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
main {
|
||||
justify-self: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
max-width: 80ch;
|
||||
padding: 5rem 0;
|
||||
|
||||
gap: 5rem;
|
||||
}
|
||||
}
|
||||
@import './pages.scss';
|
||||
|
||||
//
|
||||
// Misc
|
||||
|
||||
@@ -0,0 +1,520 @@
|
||||
:root {
|
||||
--guide-base: #a2d4f3;
|
||||
|
||||
--guide-darkest: color-mix(in srgb, var(--guide-base), #000 75%);
|
||||
--guide-darker: color-mix(in srgb, var(--guide-base), #000 50%);
|
||||
--guide-dark: color-mix(in srgb, var(--guide-base), #000 25%);
|
||||
|
||||
--guide-light: color-mix(in srgb, var(--guide-base), #fff 25%);
|
||||
--guide-lighter: color-mix(in srgb, var(--guide-base), #fff 50%);
|
||||
--guide-lightest: color-mix(in srgb, var(--guide-base), #fff 75%);
|
||||
}
|
||||
|
||||
.homepage {
|
||||
header .logo {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
|
||||
min-height: calc(100vh - 6rem);
|
||||
|
||||
&:last-of-type {
|
||||
min-height: calc(100vh - 10rem);
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
gap: 2rem;
|
||||
|
||||
scroll-snap-align: start;
|
||||
|
||||
& > .title {
|
||||
font-size: 48px;
|
||||
padding-top: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.zig-zag {
|
||||
z-index: 5;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
|
||||
&:first-child {
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
section.principal {
|
||||
z-index: 2;
|
||||
|
||||
min-height: calc(100vh - 7rem);
|
||||
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4rem;
|
||||
|
||||
padding: 3rem 0 6rem;
|
||||
|
||||
background: $homepage-principal-bg;
|
||||
|
||||
flex-wrap: wrap;
|
||||
|
||||
position: relative;
|
||||
|
||||
.circuit-layer {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& > .logo {
|
||||
z-index: 2;
|
||||
max-width: 640px;
|
||||
position: relative;
|
||||
|
||||
user-select: none;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
filter: drop-shadow(6px 6px 0 $black) drop-shadow(4px 0 0 $black) drop-shadow(0 4px 0 $black)
|
||||
drop-shadow(-4px 0 0 $black) drop-shadow(0 -4px 0 $black);
|
||||
}
|
||||
}
|
||||
|
||||
& > .whats-phc {
|
||||
z-index: 2;
|
||||
background: $homepage-whatsphc-bg;
|
||||
|
||||
@include neo-brutalist-card($size: 4px, $offset: 8px);
|
||||
|
||||
padding: 2rem;
|
||||
|
||||
max-width: 37rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
gap: 1rem;
|
||||
|
||||
.title {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.content {
|
||||
@extend .text;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.news {
|
||||
background: $homepage-news-bg;
|
||||
|
||||
gap: 3rem;
|
||||
|
||||
padding-bottom: 6rem;
|
||||
|
||||
& > .news-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 3rem;
|
||||
|
||||
align-items: flex-start;
|
||||
|
||||
padding: 0 3rem;
|
||||
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
[role='button'] {
|
||||
padding: 0.5rem 2rem;
|
||||
|
||||
&.primary {
|
||||
// background: #824ed4;
|
||||
// color: #f0e6ff;
|
||||
background: #f8e8b1;
|
||||
color: #000d;
|
||||
|
||||
// &:hover {
|
||||
// // background: #8e5ddd;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.projects {
|
||||
background: $homepage-projects-bg;
|
||||
|
||||
padding-bottom: 6rem;
|
||||
|
||||
.project-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
||||
grid-auto-flow: dense;
|
||||
|
||||
& > * {
|
||||
grid-row: span var(--masonry-height);
|
||||
}
|
||||
|
||||
gap: 1.5rem;
|
||||
|
||||
padding: 0 6rem;
|
||||
|
||||
.project {
|
||||
height: 100%;
|
||||
|
||||
// background: #fcddff;
|
||||
// background: #ffa89c;
|
||||
background: var(--card-bg, $project-card-bg);
|
||||
color: #000e;
|
||||
|
||||
@include neo-brutalist-card($size: 3px, $offset: 9px);
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
gap: 0.25rem 1rem;
|
||||
|
||||
.title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.image {
|
||||
grid-row: span 2;
|
||||
// place-self: center;
|
||||
|
||||
.box {
|
||||
background: #0003;
|
||||
border: 3px solid #0006;
|
||||
border-radius: 6px;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 16px;
|
||||
@extend .text;
|
||||
}
|
||||
|
||||
transition: all 128ms ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: translate(0, -4px);
|
||||
box-shadow: 9px 13px 0 0 #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.wanna-be-macchinista {
|
||||
background: $homepage-macchinisti-bg;
|
||||
color: #fdfdfd;
|
||||
|
||||
.content {
|
||||
@extend .text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.utenti {
|
||||
main {
|
||||
justify-self: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
max-width: 80ch;
|
||||
padding: 5rem 0;
|
||||
|
||||
gap: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.appunti {
|
||||
main {
|
||||
background: #fdfdf0;
|
||||
|
||||
justify-self: center;
|
||||
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
|
||||
justify-items: center;
|
||||
|
||||
padding: 3rem;
|
||||
|
||||
gap: 3rem;
|
||||
|
||||
width: 100%;
|
||||
|
||||
.search {
|
||||
max-width: 80ch;
|
||||
}
|
||||
|
||||
.appunti-scrollable {
|
||||
justify-self: stretch;
|
||||
|
||||
&.center {
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login {
|
||||
background: #ddfaff;
|
||||
|
||||
main {
|
||||
justify-self: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
max-width: 80ch;
|
||||
padding: 3rem 0;
|
||||
|
||||
gap: 3rem;
|
||||
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notizie {
|
||||
background: #fffced;
|
||||
|
||||
main {
|
||||
justify-self: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
max-width: 80ch;
|
||||
padding: 5rem 0;
|
||||
|
||||
gap: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.notizia {
|
||||
background: #fffced;
|
||||
--zone-color: #ac8919;
|
||||
|
||||
main {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 6rem;
|
||||
|
||||
background: #fff2c9;
|
||||
max-width: calc(46rem + 2rem * 2);
|
||||
justify-self: center;
|
||||
padding: 3rem 2rem 2rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-desktop-min) {
|
||||
main {
|
||||
@include neo-brutalist-card($size: 3px, $offset: 9px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.guida {
|
||||
background: #f0fdff;
|
||||
--zone-color: #2c7c9b;
|
||||
|
||||
&.series {
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.series {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 6rem;
|
||||
|
||||
background: #fff;
|
||||
max-width: calc(46rem + 2rem * 2);
|
||||
justify-self: center;
|
||||
padding: 3rem 2rem 2rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-desktop-min) {
|
||||
main {
|
||||
@include neo-brutalist-card($size: 3px, $offset: 9px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.guide {
|
||||
background: #f0fdff;
|
||||
--zone-color: #2c8c9b;
|
||||
|
||||
main {
|
||||
justify-self: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
max-width: calc(25rem * 3 + 2rem * 2);
|
||||
padding: 5rem 0;
|
||||
|
||||
gap: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
main {
|
||||
justify-self: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
max-width: 80ch;
|
||||
padding: 5rem 0;
|
||||
|
||||
gap: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.design {
|
||||
main {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 2rem auto;
|
||||
|
||||
border: 2px dashed #ddd;
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&.large {
|
||||
min-width: calc(100vw - 4rem);
|
||||
}
|
||||
|
||||
& > .content {
|
||||
padding: 2rem;
|
||||
|
||||
// display: grid;
|
||||
// place-content: center;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// label in the top left corner
|
||||
&::before {
|
||||
content: 'Result';
|
||||
position: absolute;
|
||||
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
|
||||
padding: 0.125rem 0.5rem;
|
||||
|
||||
background: #eee;
|
||||
color: #000;
|
||||
|
||||
font-family: 'Iosevka', monospace;
|
||||
font-size: 14px;
|
||||
|
||||
border-radius: 0.25rem;
|
||||
|
||||
z-index: -1;
|
||||
|
||||
transform: translate(-2px, -4px);
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 64ms ease-in;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #bbb;
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.palette {
|
||||
margin: 2rem auto;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
|
||||
gap: 1rem;
|
||||
|
||||
place-content: center;
|
||||
|
||||
& > .color {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
border: 2px solid #000;
|
||||
box-shadow: 4px 4px 0 0 #000;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
& > .region {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 2px solid #fff;
|
||||
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
& > .label {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 16px;
|
||||
|
||||
user-select: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user