fixed image height & js formatting

.drone.yml

@@ -31,5 +31,5 @@ steps:
         - docker-compose -f docker-compose.prod.yml down
         - docker-compose -f docker-compose.prod.yml up -d
     when:
-      event: push
+      event: tag
       branch: master

.gitignore

@@ -6,9 +6,8 @@ data/
 
 # Node
 node_modules/
-pnpm-lock.yaml
-yarn.lock
 
 # Generated
 .cache/
-liquet/dist/
+liquet/dist/
+liquet.zip

liquet/functions.php

@@ -8,7 +8,7 @@ add_theme_support( 'post-thumbnails' );
 
 
 add_filter( 'wp_headers', function ( $headers ) {
-	$headers['Content-Security-Policy']   = "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://s.w.org; report-uri csp@nicco.io";
+	$headers['Content-Security-Policy']   = "default-src 'self' wp.com; script-src 'self' 'unsafe-inline' wp.com; style-src 'self' 'unsafe-inline' wp.com; img-src 'self' wp.com data: https://s.w.org;";
 	$headers['X-Content-Type-Options']    = 'nosniff';
 	$headers['X-Frame-Options']           = "deny";
 	$headers['Strict-Transport-Security'] = "max-age=31536000";

liquet/style.css

@@ -2,10 +2,10 @@
 Theme Name: Liquet
 Author: Niccolo Borgioli
 Description: Minimalistic clean theme
-Version: 0.14
+Version: 0.17
 License: MIT
 Tags: minimal, simple, typography, clean
 Author URI: https://nicco.io
 License URI: https://opensource.org/licenses/MIT
 Theme URI: https://github.com/cupcakearmy/liquet
-*/
+*/

package.json

@@ -4,6 +4,11 @@
     "dev": "parcel watch --no-hmr --no-source-maps -d liquet/dist ./src/js/index.js ./src/styles/index.styl",
     "build": "rm -rf ./liquet/dist && parcel build --no-source-maps -d liquet/dist ./src/js/index.js ./src/styles/index.styl"
   },
+  "browserslist": [
+    "last 2 chrome versions",
+    "last 2 safari versions",
+    "last 2 firefox versions"
+  ],
   "dependencies": {
     "@swup/preload-plugin": "1.0.x",
     "jquery": "^3.4.1",

src/js/index.js

@@ -3,9 +3,9 @@ import lazy from './lazy'
 import swup from './swup'
 
 document.addEventListener('DOMContentLoaded', () => {
-    lights()
+  lights()
+  lazy()
+  swup(() => {
     lazy()
-    swup(() => {
+  })
-        lazy()
+})
-    })
-})

src/js/lazy.js

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

src/js/lights.js

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

src/js/swup.js

@@ -2,11 +2,11 @@ import Swup from 'swup'
 import SwupPreloadPlugin from '@swup/preload-plugin'
 
 export default (fn) => {
-    const swup = new Swup({
+  const swup = new Swup({
-        linkSelector: `a[href^="${window.location.origin}"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup])`,
+    linkSelector: `a[href^="${window.location.origin}"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup])`,
-        plugins: [new SwupPreloadPlugin()],
+    plugins: [new SwupPreloadPlugin()],
-        containers: ['#app']
+    containers: ['#app'],
-    })
+  })
 
-    swup.on('contentReplaced', fn)
+  swup.on('contentReplaced', fn)
 }

src/styles/singular.styl

@@ -86,6 +86,10 @@
         display: inline-block
         font-size: 105%
 
+    figure
+      img
+        height: 100%
+
   .links
     & > div
       transform rotate(180deg) scale(1)