add footer

pandu-supriyono · May 22, 2024 · 5e96c93 · 5e96c93
1 parent 03d913d
commit 5e96c93
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/src/index.njk b/src/index.njk
@@ -34,9 +34,17 @@
     </div>
   </div>
 
-  <div class="container">
-    <div id="results"></div>
-  </div>
+  <main>
+    <div class="container">
+      <div id="results"></div>
+    </div>
+  </main>
+
+  <footer>
+    <div class="container">
+      Door <a href="https://supriyono.nl">Pandu Supriyono</a>. Geïnspireerd door <a href="https://design.education.gov.uk/tools/how-many-users">het werk van het Britse ministerie van Onderwijs</a>. Zie <a href="https://github.com/pandu-supriyono/hoeveel-mensen">de Broncode van deze website</a>
+    </div>
+  </footer>
 
   <script>
     const statsJSONString = '{{ stats | stringifyJSON | safe }}'

diff --git a/src/style.css b/src/style.css
@@ -151,6 +151,9 @@ html {
 }
 
 body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
   line-height: 1.5;
   background-color: var(--color-background);
   color: var(--color-foreground);
@@ -229,6 +232,16 @@ button:focus:not(:hover) {
   outline: 2px solid transparent;
 }
 
+a:focus {
+  background-color: var(--color-focus);
+  box-shadow:
+    0 -2px #fd0,
+    0 4px var(--color-foreground);
+  color: var(--color-foreground);
+  outline: 2px solid transparent;
+  text-decoration: none;
+}
+
 table {
   width: 100%;
 }
@@ -281,3 +294,10 @@ th {
   padding-block: 5px;
   border-bottom: 1px solid var(--color-foreground);
 }
+
+footer {
+  margin-top: auto;
+  font-size: var(--font-size--1);
+  padding-bottom: 15px;
+  padding-top: 40px;
+}