Primo test stilistico vagamente serio

assets/style.css

@@ -1,485 +1,308 @@
-
+/* 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');
-@import url('https://fonts.googleapis.com/css2?family=Share:wght@700&family=Ubuntu+Mono&family=Ubuntu:wght@300;700&display=swap');
-
-/* @import url('https://fonts.googleapis.com/css2?family=Sen&family=Work+Sans:wght@700&display=swap'); */
 
 :root {
-    --font-title: 'Share', cursive;
+    --bg: #f0f0f0;
-    --font-text: 'Ubuntu', sans-serif;
+    --fg: #333;
-    --font-mono: 'Ubuntu Mono', monospace;
+
+    /* --bg-dark: #e0e0d6;
+    --bg-darker: #d6d6cc; */
+
+    --bg-dark: hsl(220, 5%, 93%);
+    --bg-darker: hsl(220, 5%, 90%);
+
+    --accent-1: #278542;
+    --accent-1-fg: #154d24;
+
+    --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,
+html, body {
-body {
-    position: relative;
- 
     margin: 0;
-    min-height: 100%;
+    width: 100%;
-
+    height: fit-content;
-    width: 100vw;
-    overflow-x: hidden;
-
-    font-family: var(--font-text);
-    font-weight: 300;
-    font-size: 17px;
-    line-height: 1.25;
-}
-
-html {
-    background: white;
-
-    height: 100%;
-    min-height: 100%;
 }
 
 body {
-    margin: 0 auto;
+    display: flex;
-    padding-bottom: 5rem;
+    flex-direction: column;
+    align-items: center;
 
-    max-width: 850px;
+    background: var(--bg);
-    text-align: justify;
+    color: var(--fg);
 
-    background: white;
+    font-family: var(--font-sf);
+    font-size: 17px;
+    font-weight: var(--font-weight-normal);
+
+    position: relative;
+}
+
+.main {
+    max-width: 70ch;
+    margin: 0 auto 8rem;
+
+    display: flex;
+    flex-direction: column;
+
+    gap: 3rem;
+}
+
+nav {
+    margin: 1rem 0;
+
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 1rem;
+
+    align-items: center;
+    font-weight: var(--font-weight-medium);
+
+    color: var(--accent-1-fg);
+
+    z-index: 0;
+}
+
+/* Tutti i link dentro la navbar sono speciali e non sembrano link */
+nav a {
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    align-items: center;
+    justify-content: center;
+
+    text-decoration: none;
+    color: inherit;
+}
+
+nav a:hover {
+    color: var(--accent-1-fg);
+    text-decoration: none;
+}
+
+nav .nav-logo {
+    /* height: 3.5rem; */
+    
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    
+    background: var(--bg-dark);
+    border-radius: 4px;
+    border: 1px solid #dadada;
+    box-shadow: var(--shadow-1);
+}
+
+nav .nav-main {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr) 2fr 1fr;
+
+    background: var(--bg-dark);
+    border-radius: 4px;
+    border: 1px solid #dadada;
+    box-shadow: var(--shadow-1);
+
+
+    z-index: -1;
+}
+
+nav .nav-main a {
+    padding: 0.75rem 1rem;
+}
+
+nav .nav-main .nav-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background: var(--bg-dark);
+
+    user-select: none;
+    cursor: pointer;
+
+    z-index: 2;
+}
+
+nav .nav-main .nav-item:hover {
+    background: var(--bg-darker);
+}
+
+nav .nav-main .nav-item:last-child {
+    grid-column: 7 / 8;
+}
+
+nav .nav-main .nav-item.dropdown {
+    position: relative;
+
+    z-index: 1;
+}
+
+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: 10;
+}
+
+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 #dadada;
+    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 #dadada;
+    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 #dadada;
+    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: #666;
+
+    margin-bottom: 0.75rem;
+}
+
+.card .description {
+    font-weight: var(--font-weight-light);
+    color: #222;
 }
 
 /* Typography */
 
 h1, h2, h3, h4 {
     margin: 0;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
 
-    font-family: var(--font-title);
+    font-weight: var(--font-weight-light);
-    font-weight: 700;
 }
 
 p {
-    margin: 0.75rem 0;
+    margin: 0.5rem 0;
 }
 
-p:last-child {
+/* Controls */
-    margin-bottom: 0;
-}
 
-/* Elements */
+a {
-
+    color: var(--accent-1-fg);
-nav {
-    margin-bottom: 1rem;
-
-    display: flex;
-    flex-wrap: wrap;
-    
-    border: 4px solid;
-    border-top: none;
-
-    gap: 2px;
-    /* border-bottom: 1rem solid black; */
-}
-
-.nav-item {
-    flex-grow: 1;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    height: 2.5rem;
-
-    padding: 0 0.75rem;
-    margin: -2px;
-
-    font-size: 130%;
-    font-weight: bold;
-
-    border: 2px solid black;
-}
-
-.nav-dropdown {
-    flex-grow: 1;
-    margin: -2px;
-
-    max-width: 100%;
-
-    display: flex;
-    flex-direction: column;
-    position: relative;
-
-    z-index: 1;
-}
-
-.nav-dropdown .label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: 100%;
-
-    height: 2.5rem;
-
-    padding: 0 0.75rem;
-
-    font-size: 130%;
-    font-weight: bold;
-
-    border: 2px solid black;
-}
-
-.nav-dropdown .label .icons8 {
-    width: 16px;
-    height: 16px;
-
-    margin-left: 0.5rem;
-    transform: translate(0, 0.1rem);
-}
-
-.nav-dropdown .dropdown {
-    position: absolute;
-
-    top: 100%;
-    width: 100%;
-    /* margin-bottom: 0.5rem; */
-
-    display: flex;
-    flex-direction: column;
-
-    gap: 2px;
-
-    border: 2px solid black;
-
-    background: white;
-}
-
-.nav-dropdown:not(:hover) .dropdown {
-    display: none;
-}
-
-nav a {
     text-decoration: none;
 }
 
-section {
-    border: 4px solid;
-
-    padding: 1rem;
-    margin-bottom: 1rem;
-}
-
-header {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-
-    margin: 2.5rem 0;
-}
-
-header .logo {
-    flex-grow: 1;
-    
-    margin-right: 1rem;
-    object-fit: contain;
-    object-position: right;
-}
-
-header .title {
-    flex-grow: 1;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-}
-
-header .title h1 {
-    font-size: 56px;
-    display: inline-block;
-    transform: translate(-0.125rem);
-}
-
-.service-list {
-    display: flex;
-    flex-wrap: wrap;
-
-    gap: 0.5rem;
-}
-
-.service {
-    flex: 1 1 calc(50% - 1rem);
-    min-width: 300px;
-
-    padding: 1rem 0.75rem;
-
-    /* Brutal */
-    border: 2px solid black;
-}
-
-.user-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    justify-content: center;
-    
-    gap: 0.25rem;
-}
-
-.user {
-    display: flex;
-    flex-grow: 1;
-
-    width: calc(50% - 0.25rem / 2);
-    min-width: 250px;
-
-    align-items: center;
-    justify-content: space-between;
-
-    padding: 0.125rem 0.25rem;
-
-    border: 2px solid black;
-}
-
-.user h4 {
-    font-size: 90%;
-    line-height: 1;
-    font-family: var(--font-mono);
-}
-
-.user a {
-    text-decoration: none;
-}
-
-.user a:hover img {
-    opacity: 0.6;
-}
-
-.user img {
-    margin: 0.5rem;
-}
-
-footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    display: flex;
-    flex-wrap: wrap;
-
-    align-items: center;
-    justify-content: center;
-
-    background: black;
-    color: white;
-
-    border-bottom: none;
-}
-
-footer a, footer a:visited {
-    color: white;
-}
-
-.footer-item {
-    padding: 0.5rem;
-    font-size: 90%;
-}
-
-.search {
-    display: flex;
-    align-items: center;
-
-    max-width: 27rem;
-    margin: 1.5rem auto;
-    
-    border: 2px solid black;
-}
-
-#search-field {
-    width: 100%;
-    flex-grow: 1;
-
-    height: 1.75rem;
-    padding: 0 0.5rem;
-
-    border: none;
-    border-right: 2px solid black;
-}
-
-.search img {
-    display: block;
-    transform: scale(0.8);
-
-    width: 1.75rem;
-    height: 1.75rem;
-
-    cursor: pointer;
-}
-
-/* Common */
-
-img {
-    display: block;
-}
-
-a, a:visited {
-    color: black;
-}
-
 a:hover {
-    color: gray;
+    color: var(--accent-1);
-}
+    text-decoration: underline;
-
-hr {
-    width: 100%;
-    height: 1rem;
-    
-    margin: 1rem 0;
-    padding: 0;
-    
-    background: black;
-    border: none;
-}
-
-ul {
-    list-style: square;
-}
-
-li {
-    margin: 0.25rem 0;
-}
-
-form {
-    margin: 3rem auto;
-    padding: 0.75rem;
-
-    max-width: 30rem;
-    border: 4px solid black;
-}
-
-form .row {
-    display: flex;
-    width: 100%;
-}
-
-form .row:not(:last-child) {
-    margin-bottom: 0.5rem;
-}
-
-form label {
-    width: 30%;
-}
-
-form input[type=text], form input[type=password] {
-    flex-grow: 1;
-}
-
-form button, form input[type=submit] {
-    margin-top: 0.5rem;
-}
-
-input[type=text], input[type=password] {
-    font-size: 15px;
-
-    padding: 0 0.2rem;
-    height: 1.5rem;
- 
-    appearance: none;
-    outline: none;
-
-    border: 2px solid black;
-}
-
-input[type=text]:focus, input[type=password]:focus {
-    background: #e0e0e0;
-}
-
-button, input[type=submit] {
-    outline: none;
-    
-    font-size: 17px;
-    font-family: var(--font-title);
-
-    padding: 0 4rem;
-    height: 1.6rem;
-
-    background: black;
-    color: white;
-
-    border: none;
-    /* border: 2px solid black; */
-
-    cursor: pointer;
-}
-
-button:hover, input[type=submit]:hover {
-    background: #444;
-}
-
-/* Utils */
-
-.icons8 {
-    width: 25px;
-    height: 25px;
-
-    display: inline-block;
-    vertical-align: middle;
-}
-
-h2 .icons8 {
-    transform: translateY(-0.125rem);
-}
-
-.hfill {
-    /* min-height: 0.5rem; */
-    flex-grow: 1000;
-}
-
-@media screen and (max-width: 850px) {
-    section, nav {
-        border-left: none;
-        border-right: none;
-    }
-}
-
-@media screen and (max-width: 30rem) {
-    form {
-        border-left: none;
-        border-right: none;
-    }
-}
-
-/* Large screen */
-@media screen and (min-width: 421px) {
-    .nav-dropdown .dropdown {
-        margin-top: -2px;
-    }
-}
-
-/* Mobile screen */
-@media screen and (max-width: 420px) and (orientation: portrait) {
-    nav {
-        flex-direction: column;
-    }
-
-    .nav-dropdown:hover {
-        padding: 0 0.25rem 0.25rem;
-    }
-
-    .nav-dropdown, .nav-dropdown .nav-item {
-        margin: -2px 0;
-    }
-
-    .nav-item, .nav-dropdown .label {
-        max-width: 100%;
- 
-        border-left: none;
-        border-right: none;
-    }
-
-    .nav-dropdown .dropdown {
-        position: relative;
-        
-        border: 4px solid black;
-        border-top-width: 2px;
-    }
 }

config/config.go

@@ -34,10 +34,10 @@ func Load() {
 	Host = stringOrDefault(os.Getenv("HOST"), "localhost:8080")
 	log.Printf("HOST = %v", Host)
 
-	GitUrl = stringOrDefault(os.Getenv("GIT_URL"), "git.phc.dm.unipi.it")
+	GitUrl = stringOrDefault(os.Getenv("GIT_URL"), "https://git.phc.dm.unipi.it")
 	log.Printf("GIT_URL = %v", GitUrl)
 
-	ForumUrl = stringOrDefault(os.Getenv("FORUM_URL"), "forum.phc.dm.unipi.it")
+	ForumUrl = stringOrDefault(os.Getenv("FORUM_URL"), "https://forum.phc.dm.unipi.it")
 	log.Printf("FORUM_URL = %v", ForumUrl)
 }
 

views/base.html

@@ -7,15 +7,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ template "title" . }}</title>
 
-    <link rel="icon" href="/assets/icons/icons8-electronics-100.png">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+        integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
+
+
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
-          integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
+        integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"
-            integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
+        integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
-            crossorigin="anonymous"></script>
+        crossorigin="anonymous"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js"
-            integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
+        integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
-            crossorigin="anonymous"></script>
+        crossorigin="anonymous"></script>
     <script>
         document.addEventListener("DOMContentLoaded", function () {
             renderMathInElement(document.body, {
@@ -36,71 +39,66 @@
 <body>
     <nav>
         <!-- Site -->
-        <div class="nav-item">
+        <div class="nav-logo">
-            <a href="/">PHC</a>
+            <a href="/">
+                <img src="assets/images/logo-circuit-board@100w.png" alt="phc-logo">
+            </a>
         </div>
-
+        <div class="nav-main">
-        <div class="nav-dropdown">
+            <div class="nav-item">
-            <div class="label">
+                <a href="/utenti">Utenti</a>
-                Risorse
-                <img class="icons8" src="https://img.icons8.com/ios-filled/100/000000/expand-arrow.png"/>
             </div>
-            <div class="dropdown">
+            <div class="nav-item">
-                <div class="nav-item">
+                <a href="/news">News</a>
-                    <a href="/blog/">Notizie</a>
-                </div>
-                <div class="nav-item">
-                    <a href="/blog/categories/guide/">Guide</a>
-                </div>    
             </div>
-        </div>
+            <div class="nav-item dropdown">
-        
+                <div class="name">
-        <div class="nav-dropdown">
+                    <a href="/progetti">
-            <div class="label">
+                        Progetti
-                Servizi
+                    </a>
-                <img class="icons8" src="https://img.icons8.com/ios-filled/100/000000/expand-arrow.png"/>
-            </div>
-            <div class="dropdown">
-                <div class="nav-item">
-                    <a href="/utenti">Utenti</a>
                 </div>
-                <div class="nav-item">
+                <div class="nav-items">
-                    <a href="https://{{ .Config.GitUrl }}">Git</a>
+                    <div class="nav-item">
-                </div>
+                        <a href="{{ .Config.GitUrl }}">Gitea</a>
-                <div class="nav-item">
+                    </div>
-                    <a href="https://{{ .Config.MatrixUrl }}">Matrix</a>
+                    <div class="nav-item">
-                </div>
+                        <a href="{{ .Config.ForumUrl }}">Zulip</a>
-                <div class="nav-item">
+                    </div>
-                    <a href="https://{{ .Config.ForumUrl }}">Forum</a>
+                    <div class="nav-item">
+                        <a href="/guide">Guide</a>
+                    </div>
+                    <div class="nav-item">
+                        <a href="/seminari">Seminari</a>
+                    </div>
                 </div>
             </div>
+            <div class="nav-item">
+                <a href="/storia">Storia</a>
+            </div>
+            <div class="nav-item">
+                <a href="/about">About</a>
+            </div>
+            <!-- User -->
+            {{if .User}}
+            <div class="nav-item">
+                <a href="/profile">@{{ .User }}</a>
+            </div>
+            {{else}}
+            <div class="nav-item">
+                <a href="/login">Accedi</a>
+            </div>
+            {{end}}
         </div>
-
-        <!-- Spacing -->
-        <div class="hfill"></div>
-
-        <!-- User -->
-        {{if .User}}
-        <div class="nav-item">
-            <a href="/settings">@{{ .User }}</a>
-        </div>
-        {{else}}
-        <div class="nav-item">
-            <a href="/login">Accedi</a>
-        </div>
-        {{end}}
     </nav>
 
-    {{ template "body" . }}
+    <div class="main">
+        {{ template "body" . }}
+    </div>
 
     <footer>
         <div class="footer-item">
             macchinisti@poisson.phc.dm.xxxxx.xx
         </div>
-        &centerdot;
-        <div class="footer-item">
-            Icone da <a target="_blank" href="https://icons8.it">Icons8</a>
-        </div>
     </footer>
 </body>
 

views/home.html

@@ -3,120 +3,82 @@
 {{define "title"}}PHC • phc.dm.xxxxx.xx{{end}}
 
 {{define "body"}}
-
 <section>
-    <header>
+    <h2>Notizie Importanti</h2>
-        <img class="logo" src="https://img.icons8.com/ios-filled/100/000000/electronics.png" />
+    <div class="card-list">
-        <div class="title">
+        <div class="card">
-            <h1 class="huge">
+            <div class="title">
-                PHC
+                <a href="/news/notizia-super-wow-1">News 1</a>
-            </h1>
+            </div>
-            <h2>Poisson</h2>
+            <div class="date">yyyy-mm-dd</div>
+            <div class="description">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis nemo aperiam, voluptas quam alias esse sed natus tempore suscipit fugiat sit delectus exercitationem numquam ipsum assumenda recusandae consequatur...
+                
+            </div>
         </div>
-    </header>
+        <div class="card">
-
+            <div class="title">
-    <p>
+                <a href="/news/notizia-super-wow-2">News 2</a>
-        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores quas nostrum suscipit nulla. Reiciendis
+            </div>
-        quos et
+            <div class="date">yyyy-mm-dd</div>
-        vel animi amet facere dignissimos, nemo, repudiandae suscipit esse quod obcaecati iure soluta cumque?
+            <div class="description">
-    </p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis nemo aperiam, voluptas quam alias esse sed natus tempore suscipit fugiat sit delectus exercitationem numquam ipsum assumenda recusandae consequatur...
-</section>
+                
-
+            </div>
-<section>
-    <h2>
-        <img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/service.png" />
-        Servizi
-    </h2>
-
-    <p>
-        Questi sono tutte le risorse e i servizi offerti dal PHC.
-    </p>
-
-    <div class="service-list">
-        <div class="service">
-            <h3>
-                <img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/news.png" />
-                <a href="/blog">Blog & Notizie</a>
-            </h3>
-            <p>
-                Blog del PHC, qui sono racconte le ultime notizie sui nostri progetti recenti, informazioni su eventuali
-                guasti e giorni di manuntenzione.
-            </p>
         </div>
-        <div class="service">
+        <div class="card">
-            <h3>
+            <div class="title">
-                <img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/user-manual.png" />
+                <a href="/news/notizia-super-wow-3">News 3</a>
-                <a href="/guides">Guide</a>
+            </div>
-            </h3>
+            <div class="date">yyyy-mm-dd</div>
-            <p>
+            <div class="description">
-                Nel corso del tempo abbiamo scritto alcune guide utili per utilizzare Poisson o Linux in generale.
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis nemo aperiam, voluptas quam alias esse sed natus tempore suscipit fugiat sit delectus exercitationem numquam ipsum assumenda recusandae consequatur...
-            </p>
+                
-        </div>
+            </div>
-        <div class="service">
-            <h3>
-                <img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/find-user-male.png" />
-                <a href="/utenti">Utenti</a>
-            </h3>
-            <p>
-                Lista degli utenti di Poisson e link a relativi siti.
-            </p>
-        </div>
-        <div class="service">
-            <h3>
-                <img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
-                <a href="https://git.phc.dm.xxxxx.xx">Git</a>
-            </h3>
-            <p>
-                Server Git per gli utenti di Poisson, i progetti del PHC ad un certo punto verranno tenuti qui.
-            </p>
-        </div>
-        <div class="service">
-            <h3>
-                <img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/matrix-logo.png" />
-                <a href="https://element.phc.dm.xxxxx.xx">Matrix server</a>
-            </h3>
-            <p>
-                Server locale per chattare e fare videoconferenze con altre persone del dipartimento.
-            </p>
-        </div>
-        <div class="service">
-            <h3>
-                <img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/road-worker.png" />
-                <a href="https://forum.phc.dm.xxxxx.xx">Forum</a>
-            </h3>
-            <p>
-                Forum per parlare di Matematica in \(\LaTeX\), Informatica e argomenti accademici in generale.
-            </p>
         </div>
     </div>
 </section>
 
 <section>
-    <h2>
+    <!-- TODO: Progetti/Servizi/Cose fornite -->
-        <img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/work.png" />
+    <h2>Progetti</h2>
-        Macchinisti
+    <div class="card-list">
-    </h2>
+        <div class="card">
-
+            <div class="title">Project title</div>
-    <p>
+            <div class="description">
-        Al momento i macchinisti sono:
+                <p>
-    </p>
+                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem assumenda voluptatum harum quo nisi alias ab cupiditate corrupti est, illum culpa, excepturi, fugiat dolore doloribus minima placeat facilis enim quaerat!
-
+                </p>
-    <ul>
+            </div>
-        <li><a href="https://poisson.phc.dm.unipi.it/~persona">Persona 1</a> dal 2018</li>
+        </div>
-        <li><a href="https://poisson.phc.dm.unipi.it/~persona">Persona 5</a> dal 2017</li>
+        <div class="card">
-        <li><a href="https://poisson.phc.dm.unipi.it/~persona">Persona 3</a> dal 2016</li>
+            <div class="title">Project title</div>
-        <li><a href="https://poisson.phc.dm.unipi.it/~persona">Persona 4</a> dal 2015</li>
+            <div class="description">
-        <li><a href="https://poisson.phc.dm.unipi.it/~persona">Persona 6</a> dal 2014</li>
+                <p>
-        <li><a href="https://poisson.phc.dm.unipi.it/~persona">Persona 2</a> dal 2013</li>
+                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem assumenda voluptatum harum quo nisi alias ab cupiditate corrupti est, illum culpa, excepturi, fugiat dolore doloribus minima placeat facilis enim quaerat!
-        <li><a href="https://poisson.phc.dm.unipi.it/~persona">Persona 7</a> dal 2012</li>
+                </p>
-    </ul>
+            </div>
-
+        </div>
-    <h3>Vuoi diventare un macchinista?</h3>
+        <div class="card">
-
+            <div class="title">Project title</div>
-    <p>
+            <div class="description">
-        Ti interessa (o interesserebbe) smanettare al PC, montare e smontare i cose? Stai spesso in dipartimento? Allora
+                <p>
-        puoi venire a parlare con noi per diventare un apprendista macchinista per poi entrare nel PHC.
+                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem assumenda voluptatum harum quo nisi alias ab cupiditate corrupti est, illum culpa, excepturi, fugiat dolore doloribus minima placeat facilis enim quaerat!
-    </p>
+                </p>
+            </div>
+        </div>
+    </div>
 </section>
 
+<section>
+    <div class="card">
+        <div class="title">Vuoi diventare un macchinista?</div>
+        <div class="description">
+            <p>
+                Ti interessa (o interesserebbe) smanettare al PC, montare e smontare i cose? Stai spesso in dipartimento? Allora
+                puoi venire a parlare con noi per diventare un apprendista macchinista per poi entrare nel PHC.
+            </p>
+        </div>
+    </div>
+</section>
 {{end}}