Refactor: Changed the name of the "assets/" folder to "public/"
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 790 B |
@@ -0,0 +1,87 @@
|
||||
<svg width="1000" height="500" viewBox="0 0 1000 500" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="80" y="190" width="60" height="120" fill="#1E6733"/>
|
||||
<rect x="160" y="50" width="150" height="60" fill="#1E6733"/>
|
||||
<rect x="140" y="90" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="140" y="200" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="140" y="410" width="10" height="20" fill="#ECC333"/>
|
||||
<rect x="140" y="350" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="240" y="110" width="70" height="10" fill="#ECC333"/>
|
||||
<rect x="250" y="130" width="60" height="130" fill="#1E6733"/>
|
||||
<rect x="340" y="50" width="60" height="120" fill="#1E6733"/>
|
||||
<rect x="340" y="190" width="60" height="120" fill="#1E6733"/>
|
||||
<rect x="590" y="190" width="60" height="120" fill="#1E6733"/>
|
||||
<rect x="690" y="180" width="60" height="120" fill="#1E6733"/>
|
||||
<rect x="690" y="310" width="60" height="140" fill="#1E6733"/>
|
||||
<rect x="690" y="50" width="60" height="120" fill="#1E6733"/>
|
||||
<rect x="590" y="320" width="60" height="130" fill="#1E6733"/>
|
||||
<rect x="590" y="50" width="60" height="130" fill="#1E6733"/>
|
||||
<rect x="420" y="240" width="150" height="60" fill="#1E6733"/>
|
||||
<rect x="340" y="320" width="60" height="130" fill="#1E6733"/>
|
||||
<rect x="240" y="140" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="350" y="170" width="40" height="10" fill="#ECC333"/>
|
||||
<rect x="330" y="330" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="160" y="200" width="80" height="60" fill="#1E6733"/>
|
||||
<rect x="650" y="200" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="750" y="330" width="10" height="60" fill="#ECC333"/>
|
||||
<rect x="800" y="450" width="40" height="10" fill="#ECC333"/>
|
||||
<rect x="850" y="450" width="30" height="10" fill="#ECC333"/>
|
||||
<rect x="750" y="90" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="810" y="110" width="60" height="10" fill="#ECC333"/>
|
||||
<rect x="580" y="330" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="580" y="60" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="710" y="420" width="20" height="20" fill="#C4C4C4"/>
|
||||
<rect x="710" y="390" width="20" height="20" fill="#C4C4C4"/>
|
||||
<rect x="100" y="280" width="20" height="10" fill="#C4C4C4"/>
|
||||
<rect x="100" y="260" width="20" height="10" fill="#C4C4C4"/>
|
||||
<rect x="110" y="210" width="20" height="20" fill="#C4C4C4"/>
|
||||
<rect x="350" y="430" width="40" height="10" fill="#303030"/>
|
||||
<rect x="350" y="410" width="40" height="10" fill="#303030"/>
|
||||
<rect x="350" y="390" width="40" height="10" fill="#303030"/>
|
||||
<rect x="700" y="70" width="20" height="40" fill="#303030"/>
|
||||
<rect x="700" y="120" width="20" height="40" fill="#303030"/>
|
||||
<rect x="610" y="280" width="20" height="20" fill="#C4C4C4"/>
|
||||
<rect x="600" y="240" width="20" height="20" fill="#C4C4C4"/>
|
||||
<rect x="430" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="430" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="430" y="280" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="445" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="445" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="460" y="280" width="40" height="10" fill="#C4C4C4"/>
|
||||
<rect x="475" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="475" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="505" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="505" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="520" y="265" width="10" height="15" fill="#C4C4C4"/>
|
||||
<rect x="505" y="280" width="25" height="10" fill="#C4C4C4"/>
|
||||
<rect x="535" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="535" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="535" y="280" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="445" y="280" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="460" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="460" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="490" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="490" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="520" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="550" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="550" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="550" y="280" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="620" y="210" width="20" height="20" fill="#C4C4C4"/>
|
||||
<rect x="370" y="70" width="20" height="30" fill="#303030"/>
|
||||
<rect x="370" y="110" width="20" height="30" fill="#303030"/>
|
||||
<rect x="870" y="440" width="40" height="10" transform="rotate(-90 870 440)" fill="#303030"/>
|
||||
<rect x="890" y="440" width="40" height="10" transform="rotate(-90 890 440)" fill="#303030"/>
|
||||
<rect x="810" y="440" width="40" height="10" transform="rotate(-90 810 440)" fill="#303030"/>
|
||||
<rect x="790" y="440" width="40" height="10" transform="rotate(-90 790 440)" fill="#303030"/>
|
||||
<rect x="270" y="100" width="40" height="10" transform="rotate(-90 270 100)" fill="#303030"/>
|
||||
<rect x="290" y="100" width="40" height="10" transform="rotate(-90 290 100)" fill="#303030"/>
|
||||
<rect x="190" y="100" width="40" height="10" transform="rotate(-90 190 100)" fill="#303030"/>
|
||||
<rect x="170" y="100" width="40" height="10" transform="rotate(-90 170 100)" fill="#303030"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M140 60V170C134.477 170 130 174.477 130 180H90C90 174.477 85.5228 170 80 170V60C85.5228 60 90 55.5228 90 50H130C130 55.5228 134.477 60 140 60Z" fill="#1E6733"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M130 320H90C90 325.523 85.5229 330 80 330V440C85.5229 440 90 444.477 90 450H130C130 444.477 134.477 440 140 440V330C134.477 330 130 325.523 130 320Z" fill="#1E6733"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M770 60C775.523 60 780 55.5228 780 50H910C910 55.5228 914.477 60 920 60V100C914.477 100 910 104.477 910 110H780C780 104.477 775.523 100 770 100V60Z" fill="#1E6733"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M770 400C775.523 400 780 395.523 780 390H910C910 395.523 914.477 400 920 400V440C914.477 440 910 444.477 910 450H780C780 444.477 775.523 440 770 440V400Z" fill="#1E6733"/>
|
||||
<rect x="750" y="190" width="10" height="40" fill="#ECC333"/>
|
||||
<rect x="750" y="240" width="10" height="20" fill="#ECC333"/>
|
||||
<rect x="400" y="200" width="10" height="40" fill="#ECC333"/>
|
||||
<rect x="400" y="250" width="10" height="20" fill="#ECC333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 765 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
@@ -0,0 +1,354 @@
|
||||
/* TODO: Don't use CDN and serve as assets */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
|
||||
|
||||
:root {
|
||||
--bg: #eaeaea;
|
||||
--fg: #333;
|
||||
|
||||
--bg-dark: hsl(220, 5%, 93%);
|
||||
--bg-darker: hsl(220, 5%, 90%);
|
||||
--bg-darker-2: #dadada;
|
||||
|
||||
--accent-1: #278542;
|
||||
--accent-1-fg: #154d24;
|
||||
|
||||
--card-date: #666;
|
||||
--card-content: #222;
|
||||
|
||||
--font-sf: 'Inter', sans-serif;
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
--shadow-1: 0 0 16px 0 #00000018;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
|
||||
font-family: var(--font-sf);
|
||||
font-size: 17px;
|
||||
font-weight: var(--font-weight-normal);
|
||||
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main {
|
||||
max-width: 70ch;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 8rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 1rem 0;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: var(--font-weight-medium);
|
||||
|
||||
color: var(--accent-1-fg);
|
||||
}
|
||||
|
||||
/* Tutti i link dentro la navbar sono speciali e non sembrano link */
|
||||
nav .nav-element {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: var(--accent-1-fg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav .nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.25rem 0;
|
||||
|
||||
background: var(--bg-dark);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--bg-darker-2);
|
||||
box-shadow: var(--shadow-1);
|
||||
|
||||
transition: transform 150ms ease-in-out;
|
||||
}
|
||||
|
||||
nav .nav-logo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
nav .nav-logo img {
|
||||
width: 150px;
|
||||
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
|
||||
nav .nav-main {
|
||||
display: flex;
|
||||
/* grid-template-columns: repeat(5, 1fr) 1fr auto 1fr; */
|
||||
|
||||
background: var(--bg-dark);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--bg-darker-2);
|
||||
box-shadow: var(--shadow-1);
|
||||
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
nav .nav-item.filler {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
nav .nav-main .nav-element {
|
||||
padding: 1rem 1.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav .nav-main .nav-button {
|
||||
margin: 0 0.5rem;
|
||||
/* padding: 0.5rem; */
|
||||
|
||||
aspect-ratio: 1;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
|
||||
/* background: var(--bg-darker-2); */
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border: 1px solid var(--bg-darker-2);
|
||||
border-radius: 1rem;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav .nav-main .nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background: var(--bg-dark);
|
||||
|
||||
user-select: none;
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
nav .nav-main .nav-element:hover, nav .nav-main .nav-button:hover {
|
||||
background: var(--bg-darker);
|
||||
}
|
||||
|
||||
nav .nav-main .nav-item.dropdown {
|
||||
position: relative;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
nav .nav-main .nav-item.dropdown .nav-items .nav-item:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
nav .nav-main .nav-item.dropdown .name {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background: var(--bg-dark);
|
||||
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
nav .nav-main .nav-item.dropdown .name:hover {
|
||||
background: var(--bg-darker);
|
||||
}
|
||||
|
||||
nav .nav-main .nav-item.dropdown .nav-items {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
|
||||
display: none;
|
||||
|
||||
background: var(--bg-dark);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--bg-darker-2);
|
||||
box-shadow: var(--shadow-1);
|
||||
}
|
||||
/*
|
||||
nav .nav-main .nav-item.dropdown .nav-items::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -2px;
|
||||
height: 2px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
|
||||
background: var(--bg-darker);
|
||||
} */
|
||||
|
||||
nav .nav-main .nav-item.dropdown .name:hover + .nav-items, nav .nav-main .nav-item.dropdown .name + .nav-items:hover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* .nav-main borders */
|
||||
.nav-main > .nav-item:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.nav-main > .nav-item:last-child {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
height: 3rem;
|
||||
|
||||
width: 80ch;
|
||||
|
||||
transform: translate(-50%, 0);
|
||||
|
||||
background: var(--bg-dark);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--bg-darker-2);
|
||||
border-bottom: none;
|
||||
box-shadow: var(--shadow-1);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
/* Components */
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
gap: 1rem;
|
||||
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--bg-dark);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--bg-darker-2);
|
||||
box-shadow: var(--shadow-1);
|
||||
|
||||
max-width: 60ch;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card .title {
|
||||
font-size: 22px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.card .date {
|
||||
font-size: 15px;
|
||||
color: var(--card-date);
|
||||
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card .description {
|
||||
font-weight: var(--font-weight-light);
|
||||
color: var(--card-content);
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
font-weight: var(--font-weight-light);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
a {
|
||||
color: var(--accent-1-fg);
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent-1);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Responsiveness */
|
||||
|
||||
@media screen and (max-width: 950px) {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
|
||||
body.dark-mode {
|
||||
--bg: #282828;
|
||||
--fg: #6eac4d;
|
||||
|
||||
--bg-dark: hsl(10, 10%, 20%);
|
||||
--bg-darker: hsl(10, 10%, 17%);
|
||||
--bg-darker-2: #1d2021;
|
||||
|
||||
--accent-1: #154d24;
|
||||
--accent-1-fg: #278542;
|
||||
|
||||
--card-date: #928374;
|
||||
--card-content: #d4be98;
|
||||
|
||||
--font-sf: 'Inter', sans-serif;
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
--shadow-1: 0 0 16px 0 #16182077;
|
||||
}
|
||||
|
||||
.dark-mode nav .nav-logo img {
|
||||
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
|
||||
}
|
||||
Reference in New Issue
Block a user