Add oi-like styling

open-innovations · Jun 20, 2024 · 2523575 · 2523575
1 parent 46587ac
commit 2523575
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 8 deletions.
diff --git a/src/_components/page/Header.vto b/src/_components/page/Header.vto
@@ -2,9 +2,15 @@
 css: |
   header.page {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+  header.page img {
+    width: 80px;
+    height: 80px;
   }
 ---
 <header class="page">
-  <h1><a href="/">{{ metas.site }}</a></h1>
+  <a href="/"><img src="{{ header.logo }}"/></a>
+  <a class="title" href="/">{{ metas.site }}</a>
 </header>
diff --git a/src/_data.yml b/src/_data.yml
@@ -9,6 +9,9 @@ metas:
   title: "=title"
   description: "=description"
 
+header:
+  logo: https://open-innovations.org/resources/images/logos/oi-square-13.svg
+
 techniques:
   - Core
   - Data
diff --git a/src/_includes/css/base.css b/src/_includes/css/base.css
@@ -0,0 +1,48 @@
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+  min-height: 100%;
+  position: relative;
+  & > * {
+    padding-inline: 1em;
+  }
+}
+
+body > header {
+  color: var(--header-color, white);
+  background: var(--header-background, black);
+  padding-block: 16px;
+  font-size: 2rem;
+  font-weight: bold;
+  & a {
+    color: inherit;
+    text-decoration: none;
+    &.title:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+main {
+  /* Allows for footer */
+  padding-block-end: 100px;
+  max-width: 1080px;
+  margin-inline: auto;
+}
+
+body > footer {
+  color: white;
+  background-color: black;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  & a {
+    color: yellow;
+  }
+}
diff --git a/src/_includes/layout/page.vto b/src/_includes/layout/page.vto
@@ -4,11 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ title }} &mdash; OI Lume Expo</title>
-  {{#
-    TODO replace with proper OI styling, perhaps componentised???
-    Temporarily using water to get up and running
-  #}}
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
   <link rel="stylesheet" href="/css/site.css">
 </head>
 <body>

diff --git a/src/css/site.css b/src/css/site.css
@@ -1,5 +1,15 @@
-@import 'css/dessicate.css';
 @import 'css/code_theme.css';
 
 @import 'css/components.css';
+@import 'css/base.css';
 @import 'css/transitions.css';
+
+:root {
+  --header-color: white;
+  --header-background: #2254F4;
+
+  --nav-page-color: white;
+  --nav-page-background: black;
+  --nav-page-color-hover: black;
+  --nav-page-background-hover: white;
+}