use a bundler

src/js/index.js

@@ -0,0 +1,2 @@
+import './lights'
+import './lazy'

src/js/lazy.js

@@ -0,0 +1,38 @@
+import jQuery from 'jquery'
+
+jQuery(($) => {
+    const bottomOffset = 300
+    const app = document.getElementById('app')
+    let loading = false
+
+    function load() {
+
+        const pixelToBottom = this.scrollHeight - (this.scrollTop + this.clientHeight)
+
+        if (!loading && pixelToBottom < bottomOffset) {
+            loading = true
+            $.ajax({
+                url: WPParams.lazy.ajaxurl,
+                data: {
+                    'action': 'lazy_load',
+                    'query': JSON.stringify(WPParams.lazy.posts),
+                    'page': WPParams.lazy.current_page
+                },
+                type: 'POST',
+                success: function (data) {
+                    if (data) {
+                        $('#list').find('hr:last-of-type').after(data) // where to insert posts
+                        WPParams.lazy.current_page++
+                        loading = false
+                    }
+                }
+            })
+        }
+    }
+
+    // Bind to the scroll event
+    $('#app').scroll(load)
+
+    // Check initial page if they need loading
+    load.bind(app)()
+})

src/js/lights.js

@@ -0,0 +1,30 @@
+;((window) => {
+    // Lights
+    const key = 'nicco.io:blog:lights'
+    const CSS = 'body, .wp-block-image img, .thumbnail img {filter: invert(1);} '
+    const style = window.document.createElement('style')
+    document.head.appendChild(style)
+
+    const on = () => {
+        style.sheet.deleteRule(parseInt(window.localStorage.getItem(key)))
+        window.localStorage.removeItem(key)
+    }
+
+    const off = () => {
+        const i = style.sheet.insertRule(CSS)
+        window.localStorage.setItem(key, i)
+    }
+
+    const isDark = () => window.localStorage.getItem(key) !== null
+
+    if (isDark()) off()
+
+    window.toggleLights = () => isDark() ? on() : off()
+
+    // Focus scrolling
+    document.addEventListener('DOMContentLoaded', ()=> {
+        const toFocus = document.querySelector('[data-focusme]')
+        toFocus.tabIndex = '1'
+        toFocus.focus({preventScroll: true})
+    })
+})(window)

src/styles/flex.css

@@ -0,0 +1,32 @@
+.flex.container {
+    display: flex;
+}
+
+.flex.container.horizontal {
+    flex-direction: row;
+}
+
+.flex.container.vertical {
+    flex-direction: column;
+}
+
+.flex.container.middle {
+    align-items: center;
+}
+
+.flex.container.center {
+    justify-content: center;
+}
+
+.flex.item {
+    overflow: hidden;
+    /*display: inline-block;*/
+}
+
+.flex.item.grow {
+    flex: 1 0;
+}
+
+.flex.item.shrink {
+    flex: 0 1 auto;
+}

src/styles/fonts.css

@@ -0,0 +1,39 @@
+@font-face {
+    font-family: 'Raleway';
+    font-style: normal;
+    font-weight: normal;
+    font-display: swap;
+    src: url('../../vendor/fonts/Raleway/Raleway-Regular.woff2') format('woff2')
+}
+
+@font-face {
+    font-family: 'Raleway';
+    font-style: italic;
+    font-weight: normal;
+    font-display: swap;
+    src: url('../../vendor/fonts/Raleway/Raleway-Italic.woff2') format('woff2')
+}
+
+@font-face {
+    font-family: 'Raleway';
+    font-style: normal;
+    font-weight: bold;
+    font-display: swap;
+    src: url('../../vendor/fonts/Raleway/Raleway-Bold.woff2') format('woff2')
+}
+
+@font-face {
+    font-family: 'Raleway';
+    font-style: italic;
+    font-weight: bold;
+    font-display: swap;
+    src: url('../../vendor/fonts/Raleway/Raleway-BoldItalic.woff2') format('woff2')
+}
+
+@font-face {
+    font-family: 'Abril Fatface';
+    font-style: normal;
+    font-weight: normal;
+    font-display: swap;
+    src: url('../../vendor/fonts/Abril/AbrilFatface-Regular.woff2') format('woff2')
+}

src/styles/global.css

@@ -0,0 +1,146 @@
+* {
+    box-sizing: border-box;
+    -webkit-overflow-scrolling: touch;
+    --clr-primary: hsl(194, 100%, 88%);
+    --clr-white: #ffffff;
+    --clr-black: #000000;
+    --clr-dark: #222222;
+    --clr-ligher: #eeeeee;
+    --text-width: 35rem;
+    --animation: all 100ms ease;
+    --small-shadow: 0 0.2em 0.5em -0.1em #00000014;
+    --icon-width: 1.5em;
+    scroll-behavior: smooth;
+}
+
+*[tabindex]:focus {
+    outline: none;
+}
+
+html, body {
+    padding: 0;
+    margin: 0;
+    font-family: Raleway, serif;
+    font-size: 1rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+hr {
+    border: 0;
+    border-top: 1px solid #f5f5f5;
+    margin: 1em 0;
+}
+
+.fill {
+    height: 100%;
+    width: 100%;
+}
+
+.fill-v {
+    height: 100%;
+}
+
+.fill-h {
+    width: 100%;
+}
+
+.alt-font {
+    font-family: "Abril Fatface", serif;
+}
+
+.text-align-right {
+    text-align: right;
+}
+
+.text-align-left {
+    text-align: left;
+}
+
+.text-align-center {
+    text-align: center;
+}
+
+#app {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    overflow-x: auto;
+    background-color: var(--clr-white);
+}
+
+.view {
+    max-width: var(--text-width);
+}
+
+.tags {
+    margin-top: -.25em;
+}
+
+.tags > a.tag {
+    padding: .25em;
+    background: #eee;
+    border-radius: .25em;
+    display: inline-block;
+    margin-top: .25em;
+}
+
+.gohome {
+    padding: .5em;
+    align-self: center;
+    transition: var(--animation);
+}
+
+.gohome:hover {
+    transform: scale(1.5);
+}
+
+img.icon {
+    height: 1em;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.auto-width {
+    max-width: var(--text-width);
+    width: 100%;
+}
+
+.spacer {
+    height: 8em;
+}
+
+@media only screen and (max-width: 40em) {
+    .tags::-webkit-scrollbar {
+        width: 2px;
+        background: transparent;
+        height: 2px;
+    }
+
+    .tags::-webkit-scrollbar-thumb {
+        background: var(--clr-dark);
+        border-radius: 2px;
+    }
+
+    .tags {
+        display: flex;
+        flex-direction: row;
+        overflow: auto;
+    }
+
+    .tags > a.tag {
+        margin: .25em;
+        flex: 1 0 auto;
+    }
+
+    .gohome {
+        padding: .25em;
+    }
+}

src/styles/home.css

@@ -0,0 +1,93 @@
+#home #header {
+    text-align: center;
+    margin-top: 8vmin;
+    margin-bottom: 16vmin;
+    padding: 0 2em;
+}
+
+#home #header h1 {
+    font-size: 12vw;
+    font-family: "Abril Fatface", serif;
+}
+
+#home #header h2 {
+    font-size: 5.5vw;
+}
+
+#home #list-container {
+}
+
+#home #list-header {
+}
+
+#home #list {
+    text-align: left;
+    width: 100%;
+    padding: 0 2em;
+}
+
+#home #list > .item {
+    padding: .25em 1em;
+    margin: 1.5em 0;
+    transition: all ease .1s;
+    border-radius: .5em;
+    display: block;
+}
+
+#home #list > .item .title {
+    margin-bottom: .25em;
+}
+
+#home #list > .item .thumbnail img {
+    width: 100%;
+    height: 12em;
+    object-fit: cover;
+    object-position: center;
+    border-radius: .5em;
+    transition: var(--animation);
+    transform: scale(1);
+}
+
+#home #list hr {
+    margin: 0 1.5em;
+}
+
+#home #lights img {
+    position: fixed;
+    top: .25em;
+    right: .25em;
+    transition: var(--animation);
+    height: var(--icon-width);
+}
+
+@media only screen and (min-width: 40em) {
+    #home #list {
+        width: var(--text-width);
+    }
+
+    #home #header h1 {
+        font-size: 5em;
+    }
+
+    #home #header h2 {
+        font-size: 2em;
+    }
+
+    #home #lights img{
+        top: .5em;
+        right: 1em;
+    }
+
+    #home #list > .item:hover {
+        box-shadow: var(--small-shadow);
+        transform: scale(1.05);
+        padding-bottom: 1em;
+    }
+
+    #home #list > .item:hover .thumbnail img {
+        transform: scale(1.2) translateY(-1em);
+        height: 16em;
+        margin: 1em 0;
+        box-shadow: var(--small-shadow);
+    }
+}

src/styles/index.styl

@@ -0,0 +1,6 @@
+@require "./global.css"
+@require "./fonts.css"
+@require "./flex.css"
+@require "./home.css"
+@require "./logos.css"
+@require "./singular.css"

src/styles/logos.css

@@ -0,0 +1,23 @@
+#logos {
+    margin-top: 1.5em;
+}
+
+#logos > .title {
+    margin: 2em;
+    text-align: center;
+}
+
+#logos > .title img {
+    height: 1.5em;
+}
+
+#logos > .list img {
+    height: 2em;
+    width: 2em;
+    margin: 0 .5em;
+    transition: var(--animation);
+}
+
+#logos > .list img:hover {
+    transform: scale(1.15);
+}

src/styles/singular.css

@@ -0,0 +1,139 @@
+#singular #top img {
+    margin: .25em .25em;
+    vertical-align: middle;
+    transition: var(--animation);
+    height: var(--icon-width);
+}
+
+#singular #top img:hover {
+    transform: scale(1.5);
+}
+
+#singular #top img.reduce {
+    height: calc(var(--icon-width) * .8);
+}
+
+#singular #main {
+    padding-top: 8vw;
+    overflow-y: auto;
+    overflow-wrap: break-word;
+}
+
+#singular #main:after {
+    content: '';
+    height: 16vh;
+    display: block;
+}
+
+#singular #header {
+    text-align: center;
+    padding: 0 2em;
+    margin-bottom: 5vmin;
+}
+
+#singular #header {
+    max-width: 60em;
+    width: calc(100% - 2em);
+}
+
+#singular #header h1 {
+    font-size: 4vmax;
+}
+
+#singular #content h2 {
+    margin-top: 3em;
+}
+
+#singular #content h3 {
+    margin-top: 2em;
+}
+
+#singular #content h4, h5, h6 {
+    margin-top: 1em;
+}
+
+#singular #content {
+    width: 100%;
+    padding: 0 1em;
+}
+
+#singular #content > * {
+    max-width: var(--text-width);
+    width: 100%;
+    line-height: 1.5;
+}
+
+
+#singular #content .alignfull {
+    max-width: initial;
+    width: calc(100% + 4em);
+}
+
+#singular #content .alignwide {
+    max-width: 60em !important;
+    width: 100%;
+}
+
+#singular #main #content > * a {
+    border-bottom: 2px solid var(--clr-black);
+}
+
+#singular #content blockquote {
+    border-left: 2px solid var(--clr-black);
+    padding-left: .5em;
+}
+
+#singular #content blockquote > p {
+    margin: 0;
+}
+
+#singular #content blockquote > cite {
+    font-size: .75em;
+}
+
+#singular #content pre {
+    overflow: auto;
+    background-color: var(--clr-ligher);
+    padding: 1em;
+    border-radius: .25em;
+    overflow-wrap: initial;
+    tab-size: 4;
+}
+
+#singular #content p code {
+    background: var(--clr-ligher);
+    padding: 0.3em .5em;
+    border-radius: .25em;
+}
+
+#singular .links > div {
+    transform: rotate(180deg) scale(1);
+    writing-mode: vertical-rl;
+    padding: .25em;
+    height: 100%;
+    text-align: center;
+    cursor: pointer;
+    background: var(--clr-white);
+    transition: var(--animation);
+    width: 2em;
+    line-height: 1em;
+}
+
+#singular .links > div:hover {
+    transform: rotate(180deg) scale(1.5);
+}
+
+@media only screen and (min-width: 40em) {
+    #singular .links > div {
+        padding: 1em;
+        width: 3em;
+    }
+
+    #singular #top img {
+        margin: .25em .5em;
+    }
+
+    #singular #top {
+        padding: 0 .5em;
+    }
+}