fenton-jekyll-boilerplate 0.0.1

data/assets/css/main.css

@@ -0,0 +1,552 @@
+html {
+    box-sizing: border-box;
+}
+  
+*,
+*::before,
+*::after {
+    border: 0 none;
+    font-weight: inherit;
+    font-family: inherit;
+    font-style: inherit;
+    font-size: 100%;
+    margin: 0;
+    outline: 0;
+    padding: 0;
+    vertical-align: baseline;
+ }
+
+ html {
+    scroll-padding-top: 5em;
+ }
+
+body {
+    background-color: var(--aft);
+    color: var(--fore);
+    font-size: 16px;
+    line-height: 1.8em;
+    letter-spacing: 0.016em;
+    font-family: var(--content-font);
+}
+
+a, summary {
+    color: var(--fore-link);
+    text-decoration: underline;
+}
+
+a:hover,
+a:focus,
+summary:hover,
+summary:focus {
+    color: var(--fore-link-alt);
+    background-color: var(--aft-link-alt);
+}
+
+:focus {
+    outline: 2px dashed var(--fore-link-alt);
+    border-radius: 5px;
+}
+
+/* General */
+
+@media (prefers-reduced-motion: no-preference) {
+    body, html {
+        scroll-behavior: smooth;
+    }
+
+    .post-list .list-item, main img, main blockquote, main .note {
+        transition: all 0.2s ease-in;
+        scale: calc(0.75 + (var(--shown, 1) * 0.25));
+    }
+}
+
+blockquote {
+    color: var(--fore-block);
+    background-color: var(--aft-block);
+    font-size: 1.3rem;
+    font-style: italic;
+    padding: 0.1px 1.2em;
+    position: relative;
+    box-shadow: var(--box-shadow);
+
+}
+
+blockquote::after {
+    content: '“';
+    color: var(--icon-block);
+    font-size: 5em;
+    position: absolute;
+    font-family: var(--heading-font);
+    transform: translate(-50%, -50%);
+    top: 3.4rem;
+}
+
+blockquote > *:first-child {
+    text-indent: 2em;
+}
+
+blockquote cite {
+    font-style: initial;
+    font-weight: bold;
+    display: block;
+    margin-top: 1em;
+    text-align: right;
+}
+
+blockquote cite::before {
+    content: ' ―';
+    padding-right: 0.5em;
+}
+
+em {
+    font-style: italic;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--heading-font);
+    margin: 1.5em 0 0.6em 0;
+    color: var(--fore-headings);
+}
+
+h1 {
+    font-size: 3em;
+    font-size: clamp(2em, 4vw, 3em);
+}
+
+main h1 {
+    margin-top: 0.1em;
+}
+
+h2 {
+    font-size: 2.6em;
+    font-size: clamp(1.8em, 3.5vw, 2.6em);
+}
+
+h3 {
+    font-size: 2.3em;
+    font-size: clamp(1.6em, 3vw, 2.3em);
+}
+
+h4, h5, h6 {
+    font-size: 2em;
+    font-size: clamp(1.4em, 2.5vw, 2em);
+}
+
+hr {
+    border: 0.5px dotted var(--fore);
+    opacity: 0.5;
+    width: 80%;
+    margin: 0 auto;
+}
+
+img {
+    max-width: 100%;
+}
+
+p, main ul, main ol {
+    margin: 1.2em 0;
+}
+
+strong {
+    font-weight: bold;
+}
+
+table {
+    border-collapse: collapse;
+    border: 0.5px solid var(--fore);
+    width: 100%;
+}
+
+thead tr {
+    background-color: var(--aft-table-head);
+    color: var(--fore-table-head);
+}
+
+th, td {
+    border: 0.5px solid var(--fore);
+    padding: 0.2em 0.3em;
+}
+
+tbody tr {
+    background-color: var(--aft-table-row-even);
+    color: var(--fore-table-row-even);
+}
+
+tbody tr:nth-child(odd) {
+    background-color: var(--aft-table-row-odd);
+    color: var(--fore-table-row-odd);
+}
+
+/* Skip Links */
+.skip-links {
+    position: absolute;
+}
+
+.skip-links a {
+    clip: rect(0 0 0 0);
+    background-color: var(--aft);
+    min-width: 20vw;
+    overflow: hidden;
+    padding: 1rem;
+    position: absolute;
+    z-index: 15;
+    text-align: center;
+    display: inline-block;
+    height: 1px;
+    margin: -1px;
+    width: 1px;
+}
+
+.skip-links a:focus {
+    clip: auto;
+    height: auto;
+    margin: 0.2em;
+    overflow: visible;
+    width: auto;
+}
+
+
+/* Header */
+
+body > header {
+    color: var(--fore-head);
+    background-color: var(--aft-head);
+    text-align: center;
+    font-size: 2rem;
+    font-size: clamp(1.2em, 4vw, 2em);
+    padding: 1rem;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+body > header a {
+    color: var(--link-head);
+    text-decoration: none;
+}
+
+body > header a:hover,
+body > header a:focus {
+    color: var(--link-alt-head);
+    background-color: unset;
+}
+
+.site-title {
+    letter-spacing: -1px;
+    text-transform: uppercase;
+    margin: 0 30px;
+    display: block;
+}
+
+.navigation-icon {
+    display: none;
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    stroke: var(--link-head);
+}
+
+.search-icon {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    stroke: var(--link-head);
+}
+
+/* Footer */
+
+body > footer {
+    text-align: center;
+    padding: 0.5rem 0;
+    width: 100%;
+    color: var(--fore-head);
+    background-color: var(--aft-head);
+    margin: var(--block-gap) auto 0 auto;
+}
+
+/* Breadcrumbs */
+
+.site-breadcrumbs ol {
+    font-size: 0.8rem;
+    background-color: var(--aft-breadcrumb);
+    color: var(--fore-breadcrumb);
+    padding: 0 1em;
+}
+
+.site-breadcrumbs li {
+    display: inline-block;
+    padding: 0.2em;
+}
+
+.site-breadcrumbs li::before {
+    content: '>'
+}
+
+.site-breadcrumbs li:first-child::before {
+    content: ''
+}
+
+/* Content Group */
+
+.content-group {
+    display: grid;
+    grid-template-columns: var(--navigation-width) auto;
+    gap: var(--grid-gap);
+    max-width: var(--grid-max-width);
+    width: var(--grid-width);
+    margin: var(--block-gap) auto var(--block-gap) auto;
+    min-height: 75vh;
+}
+
+/* Navigation */
+
+nav.site-nav.sticky {
+    align-self: start;
+    position: sticky;
+}
+
+nav.site-nav h2 {
+    margin-top: 0.1em;
+    display: none;
+}
+
+nav.site-nav li {
+    list-style: none;
+}
+
+nav.site-nav a {
+    text-indent: var(--marker-size);
+    width: calc(100% - 2rem);
+    display: inline-block;
+    padding: 0.5rem 1rem;
+}
+
+nav.site-nav li.has-children summary span {
+    text-indent: 0;
+    width: calc(100% - 2rem - var(--marker-size));
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    text-decoration: underline;
+}
+
+nav.site-nav li.has-children ul a {
+    width: calc(100% - 2rem);
+    text-indent: calc(var(--marker-size) * 2);
+}
+
+nav.site-nav .current-item {
+    font-weight: bold;
+}
+
+details summary {
+    cursor: pointer;
+}
+
+details summary::-webkit-details-marker,
+details summary::marker {
+    font-size: var(--marker-size);
+    width: 1em;
+}
+
+/* Overlay (Mobile Navigation, Search) */
+
+.overlay {
+    position: fixed;
+    top: 0;
+    width: calc(100% - 2em);
+    height: calc(100% - 7rem);
+    max-height: 100vh;
+    background-color: var(--aft);
+    padding : 5rem 1em 2rem 1em;
+    overflow-y: auto;
+}
+
+.overlay a, .overlay summary {
+    border-bottom: 1px solid var(--fore-link);
+}
+
+/* Content */
+
+main {
+    max-width: calc(var(--grid-max-width) - var(--navigation-width) - var(--grid-gap));
+    width: calc(var(--grid-width) - var(--navigation-width) - var(--grid-gap));
+}
+
+main ul, main ol {
+    margin-left: 1.2em;
+}
+
+main ul li, main ol li {
+    line-height: 2em;
+}
+
+/* Jekyll Post List */
+
+.post-list {
+    margin: 0;
+}
+
+.post-list .list-item {
+    list-style: none;
+    color: var(--fore-block);
+    background-color: var(--aft-block);
+    position: relative;
+    box-shadow: var(--box-shadow);
+    margin-bottom: 1.5rem;
+}
+
+.post-list .list-item-content {
+    padding: 1rem;
+}
+
+.post-list .list-item-content h2 {
+    margin: 0.5rem 0;
+}
+
+.post-list .list-item img {
+    width: 100%;
+    aspect-ratio: 16/9;
+    object-fit: cover;
+}
+
+.post-paging {
+    margin-top: 2rem;
+    text-align: center;
+}
+
+/* Jekyll Post */
+.post-meta {
+    display: flex;
+    align-items: center;
+}
+
+.post-meta .author-image {
+    max-width: 50px;
+    margin-right: 1rem;
+}
+
+.post-meta > .author-info {
+    display: flex;
+    align-items: center;
+}
+
+.post-meta time {
+    display: block;
+}
+
+/* Authors */
+
+.author-image {
+    border-radius: 50%;
+    aspect-ratio: 1/1;
+    object-fit: cover;
+    max-width: 150px;
+    float: right
+}
+
+/* .author-profile {
+    display: flex;
+} */
+
+/* Code Block */
+
+code {
+    background-color: var(--aft-block);
+    font-family: var(--code-font);
+    font-weight: bold;
+}
+
+pre.highlight {
+    border-left: 5px solid var(--fore);
+    padding: 1rem;
+    font-family: var(--code-font);
+    overflow: auto;
+    margin: 1em 0;
+}
+
+pre.highlight code {
+    font-weight: unset;
+    background-color: unset;
+}
+
+/* Site Search */
+
+form.site-search {
+    padding: 1em;
+}
+
+form.site-search div {
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    gap: 1em;
+}
+
+form.site-search label > * {
+    padding: 0.2em;
+}
+
+form.site-search button {
+    display: none;
+}
+
+.site-search-results {
+    font-size: 1.3rem;
+}
+
+.site-search-results a {
+    display: block;
+    padding: 0.2em;
+}
+
+/* Custom Divisions */
+
+.note {
+    color: var(--fore-block);
+    background-color: var(--aft-block);
+    font-size: 1.3rem;
+    padding: 0.1px 1.2em;
+    position: relative;
+    box-shadow: var(--box-shadow);
+}
+
+/* Smaller Screens */
+
+@media (max-width: 860px) {
+
+    /* Show the Hamburger Icon */
+    .navigation-icon {
+        display: block;
+    }
+
+    .site-breadcrumbs ol {
+        text-align: center;
+    }
+
+    /* Content First on Small Screens */
+    .content-group {
+        grid-template-columns: auto;
+        grid-template-rows: 1fr auto;
+    }
+
+    nav.site-nav {
+        grid-row: 2;
+    }
+    
+    .content-group > main {
+        grid-row: 1;
+    }
+
+    main {
+        max-width: unset;
+        width: var(--grid-width);
+    }
+
+    nav.site-nav h2 {
+        display: block;
+    }
+
+    /*  */
+    form.site-search div {
+        grid-template-columns: repeat(1, auto);
+    }    
+}

data/assets/css/vars.css

@@ -0,0 +1,81 @@
+/* Recommended Tools
+    Check accessibility for colour combinations
+    https://toolness.github.io/accessible-color-matrix/
+*/
+
+:root {
+    --fore: #333;
+    --fore-headings: #225;
+    --aft: #FBFBFC;
+
+    --fore-link: #2d4295;
+    --fore-link-alt: #4D71FF;
+    --aft-link-alt: #F3F5FF;
+
+    --fore-head: #333;
+    --aft-head: #E6E8F1;
+
+    --fore-breadcrumb: #333;
+    --aft-breadcrumb: #F3F5FF;
+
+    --link-head: #2d4295;
+    --link-alt-head: #2a4dd8;
+
+    --fore-block: #333;
+    --aft-block: #F3F5FF;
+    --icon-block: #4D71FF;
+
+    --fore-table-head: #FDFDFE;
+    --aft-table-head: #2F3141;
+    --fore-table-row-odd: #333;
+    --aft-table-row-odd: #FDFDFE;
+    --fore-table-row-even: #333;
+    --aft-table-row-even: #F3F5FF;
+
+    --heading-font: Georgia, 'Times New Roman', Times, serif;
+    --content-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    --code-font: Consolas, 'Courier New', Courier, monospace;
+
+    --block-gap: 2rem;
+
+    --marker-size: 1.2em;
+
+    --box-shadow: 0 12px 24px -12px rgb(0 0 0 / 80%);
+
+    --navigation-width: 300px;
+    --grid-gap: 1rem;
+    --grid-max-width: 60rem;
+    --grid-width: 90vw;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --fore: #CCC;
+        --fore-headings: #CCE;
+        --aft: #333;
+    
+        --fore-link: #abb9ef;
+        --fore-link-alt: #abb9ef;
+        --aft-link-alt: #232323;
+        
+        --fore-head: #CCC;
+        --aft-head: #222;
+
+        --fore-breadcrumb: #CCC;
+        --aft-breadcrumb: #2C2C2C;
+
+        --link-head: #abb9ef;
+        --link-alt-head: #6580ed;
+
+        --fore-block: #CCC;
+        --aft-block: #111;
+        --icon-block: #abb9ef;
+
+        --fore-table-head: #CCC;
+        --aft-table-head: #222; 
+        --fore-table-row-odd: #CCC;
+        --aft-table-row-odd: #333;
+        --fore-table-row-even: #CCC;
+        --aft-table-row-even: #444;
+    }
+}

data/assets/js/main.js

@@ -0,0 +1,18 @@
+// @ts-check
+
+import { setNavigationTree, setNavigationItem } from './modules/nav-expand.js';
+import { setClickableBlocks } from './modules/click-blocks.js';
+import { addResizedEvent } from './modules/resizing.js';
+import { addStickyNavigation } from './modules/nav-sticky.js';
+import { addMobileNavigation } from './modules/nav-mobile.js';
+import { addIntersectionObserver } from './modules/animation.js';
+
+setNavigationTree('details.sub-nav');
+setNavigationItem('.site-nav a', 'current-item')
+setClickableBlocks('data-destination');
+
+var resizedEventName = addResizedEvent();
+
+addStickyNavigation('.site-header', '.site-nav', '.site-nav > ul', resizedEventName);
+addMobileNavigation('.navigation-icon', '.site-nav', resizedEventName);
+addIntersectionObserver('.post-list .list-item, main img, main .note, main blockquote');

data/assets/js/modules/animation.js

@@ -0,0 +1,41 @@
+// @ts-check
+
+import { qsa } from './query.js';
+
+/**
+ * Assists animation by setting "--shown" CSS property
+ * 
+ * When an item is visible in the viewport, it will have --shown: 1
+ * Otherwise it will be --shown: 0
+ * This allows CSS transitions and calculated properties to animate elements
+ * 
+ * Example
+ *     transition: all 0.2s ease-in;
+ *     scale: calc(0.75 + (var(--shown, 1) * 0.25));
+ * 
+ * @param {string} listItemQuery 
+ */
+function addIntersectionObserver(listItemQuery) {
+    function handleIntersection(entries, observer) {
+        for (var entry of entries) {
+            var value = entry.isIntersecting ? 1 : 0;
+            entry.target.style.setProperty('--shown', value);
+        }
+    }
+
+    var options = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0
+    };
+
+    var observer = new IntersectionObserver(handleIntersection, options)
+
+    var items = qsa(listItemQuery);
+
+    for (var i = 0; i < items.length; i++) {
+        observer.observe(items[i]);
+    }
+}
+
+export { addIntersectionObserver };