Update header design

- Rewrite header as nested flex layout - Display tagline in header - Update HTML heading styles
fkleon · May 1, 2024 · a411a3d · a411a3d
1 parent e0863f0
commit a411a3d
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 43 deletions.
diff --git a/src/models/constants.ts b/src/models/constants.ts
@@ -1,5 +1,23 @@
 export const LOCAL_STORAGE_KEY = 'growth-data';
 
+export const TAGLINES = [
+  {
+    quote: 'Because paper charts are hard.',
+    author: 'Millenial',
+    source: 'Tales of the Digital Age',
+  },
+  {
+    quote: "Who's got the time and energy to find the damn paper?",
+    author: 'A new parent',
+    source: 'Children of Fury',
+  },
+  {
+    quote: 'My toddler destroyed the original!',
+    author: 'Anonymous parent',
+    source: 'Chronicles of the Twisted Paper',
+  },
+];
+
 // see chart.scss
 export const COLOURS = [
   '#0544d3',

diff --git a/src/models/state.ts b/src/models/state.ts
@@ -1,7 +1,7 @@
 import {LocalDate, Period} from '@js-joda/core';
 import charts, {ChartConfig} from '../data/who';
 import {SeriesObject} from 'chartist';
-import {COLOURS} from './constants';
+import {COLOURS, TAGLINES} from './constants';
 
 // State and actions definitions
 type MitosisAttr<S, A> = {
@@ -11,11 +11,17 @@ type MitosisAttr<S, A> = {
 
 // Root
 interface App {
+  tagline: {
+    quote: string;
+    author: string;
+    source: string;
+  };
   children: Child[];
   chart: Chart;
 }
 
 const AppState = (): App => ({
+  tagline: TAGLINES[Math.floor(Math.random() * TAGLINES.length)],
   children: [ChildState()],
   chart: ChartState(),
 });

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,42 +1,92 @@
 @import url('https://fonts.googleapis.com/css2?family=Jersey+15&display=swap');
 
 body {
-  min-width: 300px;
-  background-image: linear-gradient(
-    to bottom,
-    #fae0b4 200px,
-    white 250px,
-    white 100%
-  );
+  min-width: 350px;
+
+  background-image: linear-gradient(to bottom,
+      #fae0b4 200px,
+      white 275px,
+      white 100%);
+}
+
+h2 {
+  font-family: 'Jersey 15', sans-serif;
+  font-weight: 400;
+  font-size: 3em;
+  text-transform: uppercase;
+
+  &::before {
+    content: '> ';
+  }
+
+  &::after {
+    content: ' <';
+  }
+}
+
+header {
+  // flex row layout
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
 }
 
 .logo {
   background-clip: content-box;
-
-  background-color: #fcfcfc;
   background-image: url('../assets/logo.png');
   background-position: left;
   background-repeat: no-repeat;
   background-size: contain;
 
-  border-style: solid;
   border-radius: 40px;
+  border-width: 8px;
+  border-top-style: dashed;
+  border-top-width: 3px;
+  border-bottom-style: dashed;
+  border-bottom-width: 3px;
+  border-right-style: solid;
+  border-left-style: solid;
+
+  margin: 5px 5px;
+
+  width: 200px;
+  min-width: 200px;
+  height: 200px;
 
+  &:hover {
+    transform: scale(-1, 1);
+  }
+}
+
+.title-container {
+  // flex column layout
   display: flex;
-  justify-content: center;
-  align-items: center;
+  flex-direction: column;
+}
 
-  height: 200px;
+.title {
+  font-family: 'Jersey 15', sans-serif;
+  font-weight: 400;
+  font-style: bold;
+  font-size: calc(2em + 2 * (100vw - 120px) / 100);
 
-  .title {
-    margin-left: 200px;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.tagline {
+  text-align: center;
+}
 
-    font-family: 'Jersey 15', sans-serif;
-    font-weight: 400;
-    font-style: bold;
-    font-size: calc(2em + 2 * (100vw - 120px) / 100);
+blockquote {
+  p::before {
+    content: '\201C';
+  }
 
-    text-transform: uppercase;
+  p::after {
+    content: '\201D';
   }
 }
 
@@ -104,7 +154,7 @@ input:invalid {
   padding-left: 0.5em;
 }
 
-input:not(:placeholder-shown):invalid + .error {
+input:not(:placeholder-shown):invalid+.error {
   display: inline-block;
 }
 
@@ -141,6 +191,7 @@ caption {
 
 // Small screens
 @media only screen and (max-width: 820px) {
+
   // Force table to not display like tables anymore
   table,
   thead,
@@ -182,4 +233,4 @@ caption {
     font-weight: bold;
     content: attr(data-label);
   }
-}
+}
diff --git a/src/views/app.ts b/src/views/app.ts
@@ -125,33 +125,23 @@ const AppComponent: m.Component<MitosisAttr<App, IAppActions>> = {
       state.chart.data = childData;
     }
 
-    const stateUrl = exportState(state.children);
+    const {quote, author, source} = state.tagline;
 
     return [
       m(
         'header',
+        m('.logo', {
+          alt: 'Baby on weighing scales as pixel art',
+        }),
         m(
-          '.logo',
-          {
-            alt: 'Baby on weighing scales',
-          },
-          m('.title', 'Child Growth Charts')
-        )
-      ),
-      m('h2', 'Summary'),
-      m('p', 'Because paper charts are hard.'),
-      m(
-        'fieldset',
-        m('legend', 'Data management'),
-        m(
-          'ul',
+          '.title-container',
+          m('.title', 'Child Growth Charts'),
           m(
-            'li',
-            m('label', {for: 'export', class: 'main'}, 'Export data'),
+            '.tagline',
             m(
-              'a',
-              {id: 'export', href: stateUrl, download: 'growth-data.json'},
-              '💾 Download'
+              'blockquote',
+              m('p', quote),
+              m('footer', `—${author}, `, m('cite', source))
             )
           )
         )