2023 Redesign v1

resources/css-2023/app.css

@@ -0,0 +1,6 @@
+@import "variables.css";
+@import "fonts.css";
+@import "layout.css";
+@import "colours.css";
+@import "code.css";
+@import "content.css";

resources/css-2023/code.css

@@ -0,0 +1,3 @@
+.hljs {
+    border-radius: .5rem;
+}

resources/css-2023/colours.css

@@ -0,0 +1,18 @@
+body {
+    background-color: var(--color-secondary);
+    color: var(--color-primary);
+}
+
+a {
+    color: var(--color-link);
+
+    &:visited {
+        color: var(--color-link-visited);
+    }
+}
+
+#site-header {
+    & a:visited {
+        color: var(--color-link);
+    }
+}

resources/css-2023/content.css

@@ -0,0 +1,36 @@
+@import "posse.css";
+@import "h-card.css";
+
+.h-entry {
+    border-inline-start: 1px solid var(--color-primary);
+    padding-inline-start: .5rem;
+
+    & .reply-to {
+        font-style: italic;
+    }
+
+    & .post-info {
+        & a {
+            text-decoration: none;
+        }
+    }
+
+    & .note-metadata {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+
+        & .syndication-links {
+            flex-flow: row wrap;
+
+            & a {
+                text-decoration: none;
+
+                & svg {
+                    width: 1rem;
+                    height: 1rem;
+                }
+            }
+        }
+    }
+}

resources/css-2023/fonts.css

@@ -0,0 +1,17 @@
+body {
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-md);
+}
+
+code {
+    font-family: var(--font-family-monospace);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--font-family-headings);
+}

resources/css-2023/h-card.css

@@ -0,0 +1,32 @@
+.h-card {
+    & .hovercard {
+        display: none;
+        position: absolute;
+        z-index: 100;
+        padding: 1rem;
+        border-radius: 1rem;
+        box-shadow: 0 .5rem .5rem .5rem var(--color-primary-shadow);
+        background-color: var(--color-secondary);
+        width: fit-content;
+        transition: opacity 0.5s ease-in-out;
+        opacity: 0;
+        flex-direction: column;
+        gap: .5rem;
+
+        & .u-photo {
+            max-width: 6rem;
+        }
+
+        & .social-icon {
+            width: 1rem;
+            height: 1rem;
+        }
+    }
+
+    &:hover {
+        & .hovercard {
+            display: flex;
+            opacity: 1;
+        }
+    }
+}

resources/css-2023/layout.css

@@ -0,0 +1,25 @@
+.grid {
+    display: grid;
+    grid-template-columns: 5vw 1fr 5vw;
+    grid-template-rows: min-content 1fr min-content;
+    row-gap: 1rem;
+}
+
+#site-header {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+}
+
+main {
+    grid-column: 2 / 3;
+    grid-row: 2 / 3;
+}
+
+footer {
+    grid-column: 2 / 3;
+    grid-row: 3 / 4;
+
+    & .iwc-logo {
+        max-width: 85vw;
+    }
+}

resources/css-2023/posse.css

@@ -0,0 +1,3 @@
+.p-bridgy-twitter-content {
+    display: none;
+}

resources/css-2023/variables.css

@@ -0,0 +1,22 @@
+:root {
+    /* Font Family */
+    --font-family-headings: "Archer SSm A", "Archer SSm B", serif;
+    --font-family-body: "Verlag A", "Verlag B", sans-serif;
+    --font-family-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace;
+
+    /* Font Size */
+    --font-size-sm: 0.75rem;   /* 12px */
+    --font-size-base: 1rem;    /* 16px, base */
+    --font-size-md: 1.25rem;   /* 20px */
+    --font-size-lg: 1.5rem;    /* 24px */
+    --font-size-xl: 1.75rem;   /* 28px */
+    --font-size-xxl: 2rem;     /* 32px */
+    --font-size-xxxl: 2.25rem; /* 36px */
+
+    /* Colours */
+    --color-primary: oklch(36.8% 0.1 125.505);
+    --color-secondary: oklch(96.3% 0.1 125.505);
+    --color-link: oklch(48.09% 0.146 241.41);
+    --color-link-visited: oklch(70.44% 0.21 304.41);
+    --color-primary-shadow: oklch(19.56% 0.054 125.505 / 40%);
+}

resources/js/app.js

@@ -1 +1 @@
-import '../css/app.css';
+import '../css-2023/app.css';

resources/views/master.blade.php

@@ -4,8 +4,9 @@
         <meta charset="UTF-8">
         <title>@yield('title'){{ config('app.display_name') }}</title>
         <meta name="viewport" content="width=device-width">
-        <link rel="stylesheet" href="/assets/frontend/normalize.css">
-        @if (!empty(config('app.font_link')))<link rel="stylesheet" href="{{ config('app.font_link') }}">@endif
+        @if (!empty(config('app.font_link')))
+            <link rel="stylesheet" href="{{ config('app.font_link') }}">
+        @endif
         <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">
@@ -22,11 +23,11 @@
         <link rel="token_endpoint" href="{{ config('app.url') }}/api/token">
         <link rel="micropub" href="{{ config('app.url') }}/api/post">
         <link rel="webmention" href="{{ config('app.url') }}/webmention">
-        <link rel="shortcut icon" href="/assets/img/jmb-bw.png">
+        <link rel="shortcut icon" href="{{ config('app.url') }}/assets/img/memoji-orange-bg-small-fs8.png">
         <link rel="pgpkey" href="/assets/jonnybarnes-public-key-ecc.asc">
     </head>
-    <body>
-        <header id="top-header">
+    <body class="grid">
+        <header id="site-header">
             <h1>
                 <a rel="author" href="/">{{ config('app.display_name') }}</a>
             </h1>
@@ -58,22 +59,5 @@
         <!--scripts go here when needed-->
         @section('scripts')
         @show
-        @if(config('fathom.id'))
-        <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
-        <script>
-            (function(f, a, t, h, o, m){
-                a[h]=a[h]||function(){
-                    (a[h].q=a[h].q||[]).push(arguments)
-                };
-                o=f.createElement('script'),
-                    m=f.getElementsByTagName('script')[0];
-                o.async=1; o.src=t; o.id='fathom-script';
-                m.parentNode.insertBefore(o,m)
-            })(document, window, '//fathom.jonnybarnes.uk/tracker.js', 'fathom');
-            fathom('set', 'siteId', '{{ config('fathom.id') }}');
-            fathom('trackPageview');
-        </script>
-        <!-- / Fathom -->
-        @endif
     </body>
 </html>

resources/views/templates/mini-hcard.blade.php

@@ -1 +1,16 @@
-<span class="u-category h-card mini-h-card"><a class="u-url p-name" href="{{ $contact->homepage }}">{!! $contact->name !!}</a><span class="hovercard">@if ($contact->facebook)<a class="u-url" href="https://www.facebook.com/{{ $contact->facebook }}"><img class="social-icon" src="/assets/img/social-icons/facebook.svg"> Facebook</a>@endif @if ($contact->twitter)<a class="u-url" href="https://twitter.com/{{ $contact->twitter }}"><img class="social-icon" src="/assets/img/social-icons/twitter.svg"> {{ $contact->twitter }}</a>@endif<img class="u-photo" alt="" src="{{ $contact->photo }}"></span></span>
+<span class="u-category h-card mini-h-card">
+    <a class="u-url p-name" href="{{ $contact->homepage }}">{!! $contact->name !!}</a>
+    <span class="hovercard">
+        <img class="u-photo" alt="" src="{{ $contact->photo }}">
+        @if ($contact->facebook)
+            <a class="u-url" href="https://www.facebook.com/{{ $contact->facebook }}">
+                <img class="social-icon" src="/assets/img/social-icons/facebook.svg"> Facebook
+            </a>
+        @endif
+        @if ($contact->twitter)
+            <a class="u-url" href="https://twitter.com/{{ $contact->twitter }}">
+                <img class="social-icon" src="/assets/img/social-icons/twitter.svg"> {{ $contact->twitter }}
+            </a>
+        @endif
+    </span>
+</span>