From ae61bf58b9abea6da3971a704d302d4269101063 Mon Sep 17 00:00:00 2001
From: Antonio De Lucreziis <antonio.delucreziis@gmail.com>
Date: Wed, 2 Oct 2024 01:09:11 +0200
Subject: [PATCH] new: added footer with phc logo

---
 public/logo-phc.svg    | 87 ++++++++++++++++++++++++++++++++++++++++++
 src/layouts/Base.astro |  8 ++++
 src/style.css          | 64 ++++++++++++++++++++++++++-----
 3 files changed, 149 insertions(+), 10 deletions(-)
 create mode 100644 public/logo-phc.svg

diff --git a/public/logo-phc.svg b/public/logo-phc.svg
new file mode 100644
index 0000000..1e65c1c
--- /dev/null
+++ b/public/logo-phc.svg
@@ -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>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 72c9fdf..78f13e8 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -51,5 +51,13 @@ const { title, courses, selectedCourseLabel } = Astro.props
         <main>
             <slot />
         </main>
+        <footer>
+            <p>
+                Creata con <code>&lt;3</code> dal
+                <a class="logo" href="https://poisson.phc.dm.unipi.it/">
+                    <img src="/logo-phc.svg" alt="PHC" srcset="" />
+                </a>
+            </p>
+        </footer>
     </body>
 </html>
diff --git a/src/style.css b/src/style.css
index a0f1194..28f7103 100644
--- a/src/style.css
+++ b/src/style.css
@@ -44,6 +44,10 @@ a,
         background-color: #a00;
         color: #fff;
     }
+
+    @media screen and (max-width: 50rem) {
+        padding: 0.125rem 1px;
+    }
 }
 
 h1,
@@ -76,6 +80,9 @@ table {
         width: 100%;
         max-width: auto;
 
+        font-size: 15px;
+        line-height: 1.25;
+
         th,
         td {
             min-width: auto;
@@ -83,6 +90,12 @@ table {
     }
 }
 
+code {
+    font-family: monospace;
+    font-size: 0.9em;
+    border-radius: 4px;
+}
+
 /* Components */
 
 /* Layout */
@@ -98,10 +111,10 @@ body {
 
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto 1fr auto;
 
-    gap: 8rem;
-    padding-bottom: 8rem;
+    gap: 6rem;
+    padding-bottom: 6rem;
 
     header {
         user-select: none;
@@ -242,23 +255,54 @@ body {
             }
         }
     }
+
+    footer {
+        place-self: center;
+
+        a:has(img),
+        .link:has(img) {
+            display: inline-block;
+            background: none;
+
+            padding: 0;
+
+            border: 2px solid transparent;
+
+            &:hover {
+                background: none;
+                border: 2px solid #a00;
+            }
+        }
+
+        img {
+            display: inline-block;
+            max-height: 3rem;
+            vertical-align: middle;
+        }
+
+        .logo {
+            transform: translate(0, -0.25rem);
+        }
+    }
 }
 
 /* Mobile */
 
 @media screen and (max-width: 50rem) {
-    table {
-        font-size: 15px;
-        line-height: 1.25;
-    }
-
     body {
-        gap: 3rem;
+        gap: 0;
         padding-bottom: 3rem;
 
         > main {
-            width: calc(100vw - 2rem);
+            width: 100%;
             padding: 1rem;
+
+            border: none;
+            border-bottom: 4px solid #a00;
+        }
+
+        > footer {
+            margin-top: 3rem;
         }
     }
 }