primo prototipo della homepage del sito
parent
15bc406494
commit
762d350898
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="astro/client" />
|
||||||
@ -1,7 +1,198 @@
|
|||||||
---
|
---
|
||||||
import BaseLayout from '../layouts/BaseLayout.astro'
|
import PageLayout from '../layouts/PageLayout.astro'
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout>
|
<PageLayout pageName="homepage">
|
||||||
<h1>Homepage</h1>
|
<section class="principal">
|
||||||
</BaseLayout>
|
<div class="circuit-layer">
|
||||||
|
<canvas id="circuits-art"></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="logo">
|
||||||
|
<img src="/images/logo-circuit-board.svg" alt="phc logo" />
|
||||||
|
</div>
|
||||||
|
<div class="whats-phc">
|
||||||
|
<div class="title">Cos'è il PHC?</div>
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam vero deserunt tempore reprehenderit atque, voluptate
|
||||||
|
dolorum excepturi libero pariatur sequi?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Laboriosam soluta ab a illum mollitia quaerat quia, veniam consequatur expedita dolore autem reiciendis quae rem
|
||||||
|
excepturi optio? Maiores, hic?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem error atque amet. Tempora earum nemo eveniet
|
||||||
|
aspernatur quam quas, doloribus expedita quisquam dignissimos cupiditate inventore a modi optio harum veritatis,
|
||||||
|
adipisci ab ullam distinctio odio quod delectus ipsum, rerum animi.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="news">
|
||||||
|
<div class="zig-zag">
|
||||||
|
<svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
|
||||||
|
<defs>
|
||||||
|
<pattern id="zig-zag-1" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
|
||||||
|
<path fill="#C2A8EB" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect fill="url(#zig-zag-1)" x="0" y="0" width="1000" height="1"></rect>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="title">Ultime Notizie</div>
|
||||||
|
|
||||||
|
<div class="news-list">
|
||||||
|
<div class="news">
|
||||||
|
<div class="title">Lorem ipsum dolor sit.</div>
|
||||||
|
<div class="abstract">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
|
||||||
|
architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
|
||||||
|
voluptatem pariatur eius!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
|
||||||
|
nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="news">
|
||||||
|
<div class="title">Tempore provident impedit libero?</div>
|
||||||
|
<div class="abstract">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
|
||||||
|
architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
|
||||||
|
voluptatem pariatur eius!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
|
||||||
|
nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
|
||||||
|
nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
|
||||||
|
nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="news">
|
||||||
|
<div class="title">Alias molestias consectetur quam</div>
|
||||||
|
<div class="abstract">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
|
||||||
|
architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
|
||||||
|
voluptatem pariatur eius!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="news">
|
||||||
|
<div class="title">Inventore dignissimos sapiente nulla</div>
|
||||||
|
<div class="abstract">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
|
||||||
|
architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
|
||||||
|
voluptatem pariatur eius!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
|
||||||
|
nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a class="primary" href="#" role="button">Vai all'Archivio</a>
|
||||||
|
</section>
|
||||||
|
<section class="projects">
|
||||||
|
<div class="zig-zag">
|
||||||
|
<svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
|
||||||
|
<defs>
|
||||||
|
<pattern id="zig-zag-2" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
|
||||||
|
<path fill="#ccf5ce" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect fill="url(#zig-zag-2)" x="0" y="0" width="1000" height="1"></rect>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="title">Progetti</div>
|
||||||
|
|
||||||
|
<div class="project-list">
|
||||||
|
<a href="#">
|
||||||
|
<div class="project">
|
||||||
|
<div class="image">
|
||||||
|
<div class="box"></div>
|
||||||
|
</div>
|
||||||
|
<div class="title">Gitea</div>
|
||||||
|
<div class="description">
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa
|
||||||
|
accusantium labore explicabo quaerat incidunt.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#">
|
||||||
|
<div class="project">
|
||||||
|
<div class="image">
|
||||||
|
<div class="box"></div>
|
||||||
|
</div>
|
||||||
|
<div class="title">Zulip</div>
|
||||||
|
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, veritatis.</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#">
|
||||||
|
<div class="project">
|
||||||
|
<div class="image">
|
||||||
|
<div class="box"></div>
|
||||||
|
</div>
|
||||||
|
<div class="title">Orario</div>
|
||||||
|
<div class="description">
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa
|
||||||
|
accusantium labore explicabo quaerat incidunt.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#">
|
||||||
|
<div class="project">
|
||||||
|
<div class="image">
|
||||||
|
<div class="box"></div>
|
||||||
|
</div>
|
||||||
|
<div class="title">Problemi</div>
|
||||||
|
<div class="description">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, hic libero beatae voluptatem incidunt.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#">
|
||||||
|
<div class="project">
|
||||||
|
<div class="image">
|
||||||
|
<div class="box"></div>
|
||||||
|
</div>
|
||||||
|
<div class="title">Cluster "Steffè"</div>
|
||||||
|
<div class="description">
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa
|
||||||
|
accusantium labore explicabo quaerat incidunt.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="wanna-be-macchinista">
|
||||||
|
<div class="zig-zag">
|
||||||
|
<svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
|
||||||
|
<defs>
|
||||||
|
<pattern id="zig-zag-3" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
|
||||||
|
<path fill="#888" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect fill="url(#zig-zag-3)" x="0" y="0" width="1000" height="1"></rect>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="title">Vuoi diventare macchinsta?</div>
|
||||||
|
</section>
|
||||||
|
</PageLayout>
|
||||||
|
|||||||
@ -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,8 @@
|
|||||||
|
<svg width="100%" height="2rem" viewBox="0 0 1 1" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<pattern id="zig-zag" x="0" y="0" width="2" height="1">
|
||||||
|
<path fill="#C2A8EB" d="M 0,0 L 1,1 L 2,0 L 0,0"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect fill="url(#zig-zag)" x="0" y="0" width="100%" height="1" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 344 B |
@ -0,0 +1,464 @@
|
|||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font: inherit;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
min-height: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-snap-type: y proximity;
|
||||||
|
scroll-padding-top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Typography
|
||||||
|
//
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
p + p {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Controls
|
||||||
|
//
|
||||||
|
|
||||||
|
button,
|
||||||
|
.button,
|
||||||
|
[role='button'] {
|
||||||
|
appearance: none;
|
||||||
|
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
border: 3px solid #222;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 4px 4px 0 0 #222;
|
||||||
|
|
||||||
|
transition: all 64ms linear;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translate(2px, 2px);
|
||||||
|
box-shadow: 2px 2px 0 0 #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
padding: 0.25rem 1.5rem;
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
color: #222;
|
||||||
|
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
background: #1e6733;
|
||||||
|
color: #f4fef7;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #2b8b47;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Pages
|
||||||
|
//
|
||||||
|
|
||||||
|
header {
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
height: 6rem;
|
||||||
|
border-bottom: 4px solid #222;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
min-height: 6rem;
|
||||||
|
border-top: 4px solid #222;
|
||||||
|
background: #444;
|
||||||
|
color: #fdfdfd;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-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-weight: 700;
|
||||||
|
font-size: 60px;
|
||||||
|
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
|
||||||
|
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 - 2rem);
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 6rem;
|
||||||
|
|
||||||
|
padding: 6rem 0;
|
||||||
|
|
||||||
|
background: #f0f0f0;
|
||||||
|
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.circuit-layer {
|
||||||
|
z-index: -1;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
max-width: 35rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
filter: drop-shadow(8px 8px 0 #222) drop-shadow(4px 0 0 #222) drop-shadow(0 4px 0 #222) drop-shadow(-4px 0 0 #222)
|
||||||
|
drop-shadow(0 -4px 0 #222);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.whats-phc {
|
||||||
|
background: #e0e0e0;
|
||||||
|
|
||||||
|
border: 4px solid #222;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 6px 6px 0 0 #222;
|
||||||
|
|
||||||
|
padding: 2rem;
|
||||||
|
|
||||||
|
max-width: 37rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
@extend .text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section.news {
|
||||||
|
background: #c2a8eb;
|
||||||
|
|
||||||
|
gap: 3rem;
|
||||||
|
|
||||||
|
padding-bottom: 6rem;
|
||||||
|
|
||||||
|
.news-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 3rem;
|
||||||
|
|
||||||
|
padding: 0 3rem;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.news {
|
||||||
|
background: #fffbeb;
|
||||||
|
|
||||||
|
border: 3px solid #222;
|
||||||
|
border-radius: 9px;
|
||||||
|
box-shadow: 9px 9px 0 0 #222;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
width: 22rem;
|
||||||
|
max-height: 27rem;
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #c67e14;
|
||||||
|
border: 2px solid #222;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #e69419;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #c67e14;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline solid 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .title {
|
||||||
|
// border-bottom: 2px solid #222;
|
||||||
|
|
||||||
|
border-top-left-radius: 9px;
|
||||||
|
border-top-right-radius: 9px;
|
||||||
|
|
||||||
|
padding: 1rem;
|
||||||
|
background: #f8e8b1;
|
||||||
|
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
& > .abstract {
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
@extend .text;
|
||||||
|
}
|
||||||
|
& > .continue {
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
align-items: end;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[role='button'] {
|
||||||
|
padding: 0.5rem 2rem;
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
// background: #824ed4;
|
||||||
|
// color: #f0e6ff;
|
||||||
|
background: #f8e8b1;
|
||||||
|
color: #000d;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
// background: #8e5ddd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section.projects {
|
||||||
|
background: #ccf5ce;
|
||||||
|
|
||||||
|
padding-bottom: 6rem;
|
||||||
|
|
||||||
|
.project-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
||||||
|
gap: 3rem;
|
||||||
|
|
||||||
|
padding: 0 6rem;
|
||||||
|
|
||||||
|
align-items: start;
|
||||||
|
|
||||||
|
.project {
|
||||||
|
// background: #fcddff;
|
||||||
|
background: #f5cecc;
|
||||||
|
color: #000e;
|
||||||
|
|
||||||
|
border: 3px solid #222;
|
||||||
|
border-radius: 9px;
|
||||||
|
box-shadow: 9px 9px 0 0 #222;
|
||||||
|
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
|
||||||
|
gap: 0.25rem 1rem;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
transition: all 128ms ease-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translate(0, -8px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section.wanna-be-macchinista {
|
||||||
|
background: #888;
|
||||||
|
color: #fdfdfd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Misc
|
||||||
|
//
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track:vertical {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
border-left: 2px solid #222;
|
||||||
|
border-top: 2px solid #222;
|
||||||
|
border-bottom: 2px solid #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track:horizontal {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
border-top: 2px solid #222;
|
||||||
|
border-left: 2px solid #222;
|
||||||
|
border-right: 2px solid #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #1e6733;
|
||||||
|
border: 2px solid #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background-color: #2b8b47;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
// border-left: 2px solid #222;
|
||||||
|
// border-top: 2px solid #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 15px;
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="astro/client" />
|
||||||
Loading…
Reference in New Issue