Merge pull request #173 from jonnybarnes/some-theming

Some theming

app/Http/Middleware/CSPHeader.php

@@ -32,9 +32,7 @@ blob:; \
 style-src 'self' 'unsafe-inline' \
 https://api.mapbox.com \
 https://api.tiles.mapbox.com \
-https://fonts.googleapis.com \
+cloud.typography.com; \
-use.typekit.net \
-p.typekit.net; \
 img-src 'self' data: blob: \
 https://pbs.twimg.com \
 https://api.mapbox.com \

public/assets/app.css

@@ -1,10 +1,28 @@
 :root {
-  --font-stack-body: montserrat, sans-serif;
+  /* fonts */
-  --font-stack-headings: bebas-neue, sans-serif; }
+  --font-stack-body: "Whitney SSm A", "Whitney SSm B", sans-serif;
+  --font-stack-headings: "Quarto A", "Quarto B", serif;
+  --font-stack-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace;
+  /* colours */
+  --color-background: #004643;
+  --color-headline: #fffffe;
+  --color-paragraph: #abd1c6;
+  --color-button: #f9bc60;
+  --color-button-text: #001e1d;
+  /* colours - illustrations */
+  --color-stroke: #001e1d;
+  --color-main: #e8e4e6;
+  --color-highlight: #f9bc60;
+  --color-secondary: #abd1c6;
+  --color-tertiary: #e16162; }
 
 body {
   font-family: var(--font-stack-body);
-  font-size: 2rem; }
+  font-style: normal;
+  font-weight: 400;
+  font-size: 2rem;
+  background-color: var(--color-background);
+  color: var(--color-paragraph); }
 
 h1,
 h2,
@@ -12,44 +30,45 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-stack-headings); }
+  font-family: var(--font-stack-headings);
+  font-style: normal;
+  font-weight: 800; }
+
+pre,
+code {
+  font-family: var(--font-stack-monospace);
+  font-style: normal;
+  font-weight: 400; }
+
+a {
+  color: var(--color-highlight);
+  text-decoration: none; }
+
+.h-feed > .note,
+.h-feed > .h-entry {
+  margin-top: 4rem; }
 
 body {
   display: flex;
   flex-direction: column; }
 
-#top-header {
+main {
-  display: flex;
-  flex-direction: column;
-  justify-content: center; }
-  #top-header h1 {
-    width: 100%;
-    text-align: center; }
-  #top-header nav {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap; }
-    #top-header nav a {
-      margin: 0 0.5rem; }
-
-@media screen and (max-width: 699px) {
-  main {
-    margin-left: 5px;
-    margin-right: 5px; } }
-
-main .h-feed {
   display: flex;
   flex-direction: column;
   margin: auto; }
-  main .h-feed img {
+  @media screen and (max-width: 699px) {
+    main {
+      margin-left: 5px;
+      margin-right: 5px; } }
+  main img {
     max-width: 100%; }
   @media screen and (min-width: 700px) {
-    main .h-feed {
+    main {
       max-width: 700px; }
-      main .h-feed > .note,
+      main > .note,
-      main .h-feed > .h-entry {
+      main > .h-entry {
         padding: 0 1rem; } }
-  main .h-feed .h-entry:first-child > .bookmark-link {
+  main .h-entry:first-child > .bookmark-link {
     padding-top: 2rem; }
 
 .note {
@@ -67,6 +86,12 @@ main .h-feed {
   .note > .e-content > .naked-link .u-photo {
     margin: 2rem 0; }
 
+article header > h1 {
+  margin-bottom: 0; }
+
+article header .post-info {
+  font-size: 1.4rem; }
+
 .pagination {
   display: flex;
   flex-direction: row;
@@ -92,6 +117,20 @@ footer {
       margin-left: 5px;
       margin-right: 5px; } }
 
+#top-header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center; }
+  #top-header h1 {
+    width: 100%;
+    text-align: center; }
+  #top-header nav {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap; }
+    #top-header nav a {
+      margin: 0 0.5rem; }
+
 .post-info a {
   text-decoration: none; }
 

resources/sass/_base.scss

@@ -1,6 +1,10 @@
 body {
     font-family: var(--font-stack-body);
+    font-style: normal;
+    font-weight: 400;
     font-size: 2rem;
+    background-color: var(--color-background);
+    color: var(--color-paragraph);
 }
 
 h1,
@@ -10,4 +14,23 @@ h4,
 h5,
 h6 {
     font-family: var(--font-stack-headings);
+    font-style: normal;
+    font-weight: 800;
+}
+
+pre,
+code {
+    font-family: var(--font-stack-monospace);
+    font-style: normal;
+    font-weight: 400;
+}
+
+a {
+    color: var(--color-highlight);
+    text-decoration: none;
+}
+
+.h-feed > .note,
+.h-feed > .h-entry {
+    margin-top: 4rem;
 }

resources/sass/_layout-main.scss

@@ -3,55 +3,32 @@ body {
     flex-direction: column;
 }
 
-#top-header {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    h1 {
-        width: 100%;
-        text-align: center;
-    }
-
-    nav {
-        display: flex;
-        justify-content: center;
-        flex-wrap: wrap;
-
-        a {
-            margin: 0 0.5rem;
-        }
-    }
-}
-
 main {
     @media screen and (max-width: 699px) {
         margin-left: 5px;
         margin-right: 5px;
     }
 
-    .h-feed {
+    display: flex;
-        display: flex;
+    flex-direction: column;
-        flex-direction: column;
+    margin: auto;
-        margin: auto;
 
-        img {
+    img {
-            max-width: 100%;
+        max-width: 100%;
+    }
+
+    @media screen and (min-width: 700px) {
+        max-width: 700px;
+
+        > .note,
+        > .h-entry {
+            padding: 0 1rem;
         }
+    }
 
-        @media screen and (min-width: 700px) {
+    .h-entry:first-child {
-            max-width: 700px;
+        > .bookmark-link {
-
+            padding-top: 2rem;
-            > .note,
-            > .h-entry {
-                padding: 0 1rem;
-            }
-        }
-
-        .h-entry:first-child {
-            > .bookmark-link {
-                padding-top: 2rem;
-            }
         }
     }
 }
@@ -86,6 +63,18 @@ main {
     }
 }
 
+article {
+    header {
+        > h1 {
+            margin-bottom: 0;
+        }
+
+        .post-info {
+            font-size: 1.4rem;
+        }
+    }
+}
+
 .pagination {
     display: flex;
     flex-direction: row;
@@ -119,3 +108,24 @@ footer {
         margin-right: 5px;
     }
 }
+
+#top-header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    h1 {
+        width: 100%;
+        text-align: center;
+    }
+
+    nav {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+
+        a {
+            margin: 0 0.5rem;
+        }
+    }
+}

resources/sass/_variables.scss

@@ -1,4 +1,20 @@
 :root {
-    --font-stack-body: montserrat, sans-serif;
+    /* fonts */
-    --font-stack-headings: bebas-neue, sans-serif;
+    --font-stack-body: "Whitney SSm A", "Whitney SSm B", sans-serif;
+    --font-stack-headings: "Quarto A", "Quarto B", serif;
+    --font-stack-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace;
+
+    /* colours */
+    --color-background: #004643;
+    --color-headline: #fffffe;
+    --color-paragraph: #abd1c6;
+    --color-button: #f9bc60;
+    --color-button-text: #001e1d;
+
+    /* colours - illustrations */
+    --color-stroke: #001e1d;
+    --color-main: #e8e4e6;
+    --color-highlight: #f9bc60;
+    --color-secondary: #abd1c6;
+    --color-tertiary: #e16162;
 }

resources/views/master.blade.php

@@ -5,6 +5,7 @@
         <title>@if (App::environment() == 'local'){!! "[testing] -"!!}@endif @yield('title'){{ config('app.display_name') }}</title>
         <meta name="viewport" content="width=device-width">
         <link rel="stylesheet" href="/assets/frontend/normalize.css">
+        <link rel="stylesheet" href="https://cloud.typography.com/6554898/6676412/css/fonts.css">
         <link rel="stylesheet" href="/assets/app.css">
         <link rel="stylesheet" href="/assets/highlight/zenburn.css">
         <link rel="alternate" type="application/rss+xml" title="Blog RSS Feed" href="/blog/feed.rss">

resources/views/notes/show.blade.php

@@ -46,6 +46,5 @@
 
 @section('scripts')
             <link rel="stylesheet" href="/assets/highlight/zenburn.css">
-            <script defer src="/assets/js/links.js"></script>
             @include('templates.mapbox-links')
 @stop