Update README.md

.dockerignore

@@ -0,0 +1 @@
+*

.drone.yml

@@ -0,0 +1,35 @@
+kind: pipeline
+name: default
+
+steps:
+  - name: build
+    image: node:12
+    pull: always
+    commands:
+      - node -v
+      - yarn
+      - yarn run build
+
+
+  - name: deploy
+    image: cupcakearmy/drone-deploy
+    pull: always
+    environment:
+      PLUGIN_KEY:
+        from_secret: ssh_key
+    settings:
+      host: srv-0.nicco.io
+      user: root
+      port: 1312
+      target: /srv/web/blog
+      sources:
+        - ./liquet
+        - ./Dockerfile
+        - ./docker-compose.prod.yml
+        - ./uploads.ini
+      commands:
+        - docker-compose -f docker-compose.prod.yml down
+        - docker-compose -f docker-compose.prod.yml up -d
+    when:
+      event: tag
+      branch: master

.gitignore

@@ -1 +1,13 @@
-data/
+# Editor
+.idea
+
+# Docker
+data/
+
+# Node
+node_modules/
+
+# Generated
+.cache/
+liquet/dist/
+liquet.zip

Dockerfile

@@ -0,0 +1,3 @@
+FROM wordpress:5-apache
+
+RUN docker-php-ext-install pdo_mysql exif bcmath

README.md

@@ -2,11 +2,7 @@
 
 A minimalistic and clean wordpress theme. Guteberg support out of the box.
 
-###### Home
-![Home](https://github.com/CupCakeArmy/liquet/blob/master/docs/Home.png)
-
-###### Post
-![Post](https://github.com/CupCakeArmy/liquet/blob/master/docs/Post.png)
+> 🚨 Discontinued
 
 ## Required Plugins
 
@@ -16,6 +12,18 @@ A minimalistic and clean wordpress theme. Guteberg support out of the box.
 ## Quickstart 🚀
 
 1. Install required plugins (see above)
-2. Download the latest zip from [releases](https://github.com/CupCakeArmy/liquet/releases)
+2. Download the [latest zip from releases](https://github.com/CupCakeArmy/liquet/releases/latest)
 3. Go to: Appearance -> Themes -> Add new and upload the zip.
 4. Activate
+
+## Screens
+
+###### Home
+![Home](./docs/Home.png)
+
+###### Post
+![Post](./docs/Post.png)
+
+###### Support:
+
+[<img alt="Browserstack" src="http://www.browserstack.com/images/layout/browserstack-logo-600x315.png" width="200">](https://www.browserstack.com)

docker-compose.prod.yml

@@ -0,0 +1,35 @@
+version: '3.7'
+
+x-default: &default
+  restart: unless-stopped
+  env_file: .env
+
+networks:
+  traefik:
+    external: true
+
+services:
+  wp:
+    <<: *default
+    build: .
+    volumes:
+        - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini:ro
+        - ./data/wp:/var/www/html
+        - ./liquet:/var/www/html/wp-content/themes/liquet:ro
+    ports:
+        - 80
+    networks:
+        - default
+        - traefik
+    labels:
+        - traefik.enable=true
+        - traefik.port=80
+        - traefik.docker.network=traefik
+        - traefik.backend=blog
+        - traefik.frontend.rule=Host:blog.nicco.io
+
+  db:
+    <<: *default
+    image: mariadb:10.3
+    volumes:
+      - ./data/db:/var/lib/mysql

docker-compose.yml

@@ -1,25 +1,22 @@
-version: '3'
+version: '3.7'
+
+x-default: &default
+  restart: unless-stopped
+  env_file: .env
 
 services:
   wp:
-    image: wordpress:5-apache
+    <<: *default
+    build: .
     volumes:
+      - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini:ro
       - ./data/wp:/var/www/html
       - ./liquet:/var/www/html/wp-content/themes/liquet:ro
     ports:
       - 80:80
-    env_file: .env
 
   db:
+    <<: *default
     image: mariadb:10.3
-    restart: always
     volumes:
-      - ./data/db:/var/lib/mysql
-    env_file: .env
-      
-
-  # adminer:
-  #   image: adminer
-  #   restart: always
-  #   ports:
-  #     - 8080:8080
+      - ./data/db:/var/lib/mysql

liquet/archive.php

@@ -24,7 +24,7 @@ switch ($type) {
 ?>
     <div id="home">
         <div class="flex container vertical middle" id="list-header">
-            <a class="gohome" href="<?= get_bloginfo('wpurl'); ?>">
+            <a class="gohome" href="<?= site_url(); ?>">
                 <span class="alt-font"><?= get_bloginfo('name'); ?></span>
             </a>
             <div id="header">
@@ -42,5 +42,6 @@ switch ($type) {
                 ?>
             </div>
         </div>
+        <div class="spacer"></div>
     </div>
 <?php get_footer(); ?>

liquet/css/flex.css

@@ -1,32 +0,0 @@
-.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;
-}

liquet/css/home.css

@@ -1,70 +0,0 @@
-#home #header {
-    text-align: center;
-    margin-top: 8vw;
-    margin-bottom: 8vw;
-    padding: 0 2em;
-}
-
-#home #header h1 {
-    font-size: 12vw;
-    font-family: "Abril Fatface", serif;
-}
-
-#home #header h2 {
-    font-size: 5.5vw;
-}
-
-@media only screen and (min-width: 40em) {
-    #home #header h1 {
-        font-size: 5em;
-    }
-}
-
-@media only screen and (min-width: 40em) {
-    #home #header h2 {
-        font-size: 2em;
-    }
-}
-
-#home #list-container {
-    /*background: var(--clr-primary);*/
-}
-
-#home #list-header {
-    /*background: var(--clr-primary);*/
-    /*box-shadow: 0 0 1em -0.5em hsla(0, 0%, 0%, 0.1);*/
-}
-
-#home #list {
-    text-align: left;
-    width: 100%;
-    padding: 0 2em;
-    margin-bottom: 8vw;
-}
-
-@media only screen and (min-width: 40em) {
-    #home #list {
-        width: var(--text-width);
-    }
-}
-
-#home #list > .item {
-    padding: .25em 1em;
-    margin: 1.5em 0;
-    transition: all ease .1s;
-    border-radius: .5em;
-    display: block;
-}
-
-#home #list > .item:hover {
-    box-shadow: 0 0.2em 0.5em -0.1em #00000014;
-    transform: scale(1.05);
-}
-
-#home #list > .item .title {
-    margin-bottom: .25em;
-}
-
-#home #list hr {
-    margin: 0 1.5em;
-}

liquet/css/singular.css

@@ -1,64 +0,0 @@
-#singular #main {
-    padding: 8vw 0;
-    overflow: auto;
-}
-
-#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 {
-    width: 100%;
-    padding: 0 2em;
-}
-
-#singular #content > * {
-    max-width: var(--text-width);
-    width: 100%;
-}
-
-
-#singular #content .alignfull {
-    max-width: initial;
-    width: calc(100% + 4em);
-}
-
-#singular #content .alignwide {
-    max-width: 60em !important;
-    width: 100%;
-}
-
-#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;
-}
-
-@media only screen and (min-width: 40em) {
-    #singular .links > div {
-        padding: 1em;
-        width: 3em;
-    }
-}
-
-#singular .links > div:hover {
-    transform: rotate(180deg) scale(1.5);
-}

liquet/functions.php

@@ -1,15 +1,99 @@
 <?php
 
-@ini_set( 'upload_max_size' , '128M' );
-@ini_set( 'post_max_size', '128M');
-@ini_set( 'max_execution_time', '300' );
+include_once( 'logos.php' );
 
 add_theme_support( 'align-wide' );
+add_theme_support( 'title-tag' );
+add_theme_support( 'post-thumbnails' );
+
+
+add_filter( 'wp_headers', function ( $headers ) {
+	$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";
+	$headers['Referrer-Policy']           = "origin";
+
+	return $headers;
+} );
 
 add_action( 'wp_enqueue_scripts', function () {
-	wp_enqueue_style( 'flex', get_template_directory_uri() . '/css/flex.css' );
-	wp_enqueue_style( 'liquet', get_template_directory_uri() . '/style.css' );
-	wp_enqueue_style( 'liquet-home', get_template_directory_uri() . '/css/home.css' );
-	wp_enqueue_style( 'liquet-singular', get_template_directory_uri() . '/css/singular.css' );
-	wp_enqueue_style( 'fonts', get_template_directory_uri() . '/vendor/fonts/import.css' );
-} );
+	wp_enqueue_style( 'liquet', get_template_directory_uri() . '/dist/styles/index.css' );
+	wp_enqueue_script( 'liquet', get_template_directory_uri() . '/dist/js/index.js' );
+} );
+
+
+function lazy_load_ajax_handler() {
+	query_posts( [
+		'post_status' => 'publish',
+		'paged'       => $_POST['page'] + 1,
+		'name'        => $_POST['name'],
+	] );
+
+	while ( have_posts() ) {
+		the_post();
+		get_template_part( 'post-preview', get_post_format() );
+	}
+	wp_die();
+}
+
+add_action( 'wp_ajax_lazy_load', 'lazy_load_ajax_handler' );
+add_action( 'wp_ajax_nopriv_lazy_load', 'lazy_load_ajax_handler' );
+
+add_action( 'widgets_init', function () {
+
+	register_sidebar( array(
+		'name'          => 'Below posts',
+		'id'            => 'below_posts',
+		'before_widget' => '<div class="widget">',
+		'after_widget'  => '</div>',
+		'before_title'  => '<h3 class="alt-font">',
+		'after_title'   => '</h3>',
+	) );
+
+} );
+
+
+add_action( 'admin_init', function () {
+	add_settings_section( 'section-link', 'Links', null, 'theme-options' );
+
+	global $links;
+	foreach ( $links as $link ) {
+
+		$id = $link . '_url';
+		add_settings_field( $id, ucfirst( $link ) . ' Url', function () use ( $id ) { ?>
+            <input type="text" name="<?= $id ?>" id="<?= $id ?>" value="<?= get_option( $id ); ?>"/>
+		<?php }, 'theme-options', 'section-link' );
+
+		register_setting( 'section-link', $id );
+	}
+
+	add_settings_section( 'section-views', 'View counter', null, 'theme-options' );
+
+	add_settings_field( 'view_min', 'Show view counter if views are above:', function () { ?>
+        <input type="text" name="view_min" id="view_min" value="<?= (int) get_option( 'view_min' ) ?>"/>
+	<?php }, 'theme-options', 'section-views' );
+
+	register_setting( 'section-views', 'view_min' );
+
+} );
+
+function theme_settings_page() { ?>
+    <div class='wrap'>
+        <h1>Theme Panel</h1>
+        <form method="post" action="options.php">
+			<?php
+			settings_fields( 'section-link' );
+			settings_fields( 'section-views' );
+			do_settings_sections( 'theme-options' );
+			submit_button();
+			?>
+        </form>
+    </div>
+<?php }
+
+function add_theme_menu_item() {
+	add_menu_page( 'Theme Panel', 'Theme Panel', 'manage_options', 'theme-panel', 'theme_settings_page', null, 99 );
+}
+
+add_action( 'admin_menu', 'add_theme_menu_item' );

liquet/header.php

@@ -1,12 +1,20 @@
-<?php $dir = get_bloginfo( 'template_directory' ) ?>
+<?php $dir = get_template_directory_uri() ?>
 
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-	<?php add_theme_support( 'title-tag' ); ?>
 	<?php wp_head(); ?>
 </head>
 <body>
+<script>
+    const WPParams = {
+        lazy: JSON.parse(`<?= json_encode( array(
+			'ajaxurl'      => site_url() . '/wp-admin/admin-ajax.php',
+			'current_page' => get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1,
+			'max_page'     => $wp_query->max_num_pages,
+		) ) ?>`)
+    }
+</script>
 <div id="app">

liquet/index.php

@@ -1,42 +1,36 @@
-<?php get_header();
+<?php
+include_once( 'logos.php' );
+include_once( 'tags.php' );
 
-$tags = get_tags(['orderby' => 'count', 'order' => 'desc']);
-//$tags = array_map(function ($tag) {
-//    return [
-//        'name' => $tag->name,
-//        'slug' => $tag->slug,
-//        'count' => $tag->count,
-//    ];
-//}, $tags)
+get_header();
+
+$tags = get_tags( [ 'orderby' => 'count', 'order' => 'desc' ] );
 ?>
-    <div id="home">
+    <div id="home" data-focusme>
+        <a id="lights" href="javascript:void(0);" onclick="window.toggleLights();">
+            <img src="<?= get_template_directory_uri() . '/vendor/icons/contrast.svg' ?>" alt="lights"/>
+        </a>
         <div class="flex container vertical middle" id="list-header">
             <div id="header">
-                <a href="<?= get_bloginfo('wpurl'); ?>">
-                    <h1><?= get_bloginfo('name'); ?></h1>
-                    <h3><?= get_bloginfo('description'); ?></h3>
+                <a href="<?= site_url(); ?>">
+                    <h1><?= get_bloginfo( 'name' ); ?></h1>
+                    <h3><?= get_bloginfo( 'description' ); ?></h3>
                 </a>
+				<?php render_links(); ?>
             </div>
         </div>
         <div class="flex container horizontal center" id="list-container">
             <div id="list">
-                <?php if ($tags) { ?>
-                    <!--            <div class="flex container horizontal center" id="list-container">-->
-                    <div class="tags">
-                        <?php foreach ($tags as $tag) { ?>
-                            <a class="tag" href="<?= get_tag_link($tag->term_id); ?>"><?= $tag->name; ?> <b><?= $tag->count ?></b></a>
-                        <?php } ?>
-                    </div>
-                    <!--            </div>-->
-                <?php } ?>
+				<?php render_all_tags(); ?>
                 <br/><br/><br/>
-                <?php
-                while (have_posts()) {
-                    the_post();
-                    get_template_part('post-preview', get_post_format());
-                }
-                ?>
+				<?php
+				while ( have_posts() ) {
+					the_post();
+					get_template_part( 'post-preview', get_post_format() );
+				}
+				?>
             </div>
         </div>
+        <div class="spacer"></div>
     </div>
 <?php get_footer(); ?>

liquet/logos.php

@@ -0,0 +1,31 @@
+<?php
+
+$links = [ 'medium', 'github', 'twitter', 'website' ];
+
+function render_links( $expanded = false ) {
+	global $links;
+	?>
+    <div id="logos">
+		<?php if ( $expanded ) { ?>
+            <div class="title alt-font">
+                <a class="made-by-link" target="_blank" href="https://github.com/cupcakearmy/liquet">made with ❤️ by @cupcakearmy</a>
+                discuss & share
+                <br/>
+                <img src="<?= get_template_directory_uri() . '/vendor/icons/down.svg' ?>" alt="arrow down"/>
+            </div>
+		<?php } ?>
+        <div class="list flex container horizontal middle center">
+			<?php
+			foreach ( $links as $link ) {
+				$saved = get_option( $link . '_url' );
+				if ( $saved ) { ?>
+                    <a href="<?= $saved ?>" target="_blank" rel="noopener">
+                        <img src="<?= get_template_directory_uri() . '/vendor/logos/' . $link . '.png' ?>"
+                             alt="<?= $link; ?>" rel="noopener"/>
+                    </a>
+				<?php }
+			}
+			?></div>
+    </div>
+	<?php
+}

liquet/loop-utils.php

@@ -6,7 +6,7 @@ function getNextURL( $next ) {
 		$post = get_adjacent_post( false, '', ! $next, 'post_tag' );
 	}
 
-	return ( $post ? get_permalink( $post->ID ) : get_bloginfo( 'wpurl' ) );
+	return ( $post ? get_permalink( $post->ID ) : site_url() );
 }
 
 function getDates() {
@@ -16,8 +16,28 @@ function getDates() {
 	$modified      = get_the_modified_date( ( $modified_year == $created_year ? 'F j' : null ) );
 
 	return [
-		'created'  => $created,
-		'modified' => $modified,
-		'different'     => $created != $modified,
+		'created'   => $created,
+		'modified'  => $modified,
+		'different' => $created != $modified,
 	];
+}
+
+function getCurrentPageViews() {
+	if ( ! is_single() ) {
+		return null;
+	}
+
+	$total = (int) do_shortcode( '[wpstatistics stat=pagevisits time=total]' );
+	$min   = (int) get_option( 'view_min' );
+
+	if ( $total < $min ) {
+		return null;
+	}
+
+	$approximated = round( $total / 1000, 1 );
+	?>
+    <div id="views">
+        <b>~<?= $approximated ?>k readers</b>
+    </div>
+	<?php
 }

liquet/post-preview.php

@@ -1,26 +1,30 @@
 <?php
 
-include_once('loop-utils.php');
+include_once( 'loop-utils.php' );
 
 $dates = getDates();
 ?>
 
 <a href="<?= get_permalink() ?>" class="item">
     <div class="flex container vertical">
-
+		<?php if ( has_post_thumbnail() ) : ?>
+            <div class="thumbnail">
+				<?= get_the_post_thumbnail(); ?>
+            </div>
+		<?php endif; ?>
         <h2 class="alt-font title"><?php the_title(); ?></h2>
         <div class="flex container horizontal">
             <div>
-                <?= $dates['created'] ?>
+				<?= $dates['created'] ?>
             </div>
             <div class="flex item grow"></div>
             <div>
-                ~<?= do_shortcode('[rt_reading_time]'); ?> min
+                ~<?= do_shortcode( '[rt_reading_time]' ); ?> min
             </div>
         </div>
-        <?php if(has_excerpt()){
-            the_excerpt();
-        } ?>
+		<?php if ( has_excerpt() ) {
+			the_excerpt();
+		} ?>
     </div>
 </a>
 <hr/>

liquet/singular.php

@@ -1,18 +1,42 @@
 <?php
 
+include_once( 'loop-utils.php' );
+include_once( 'logos.php' );
+include_once( 'tags.php' );
+
 get_header();
 the_post();
 
-include_once( 'loop-utils.php' );
-
 $dates = getDates();
 
 ?>
     <div class="flex container vertical fill" id="singular">
-        <div class="flex item shrink gohome">
-            <a href="<?= get_bloginfo( 'wpurl' ); ?>">
-                <span class="alt-font"><?= get_bloginfo( 'name' ); ?></span>
-            </a>
+        <div class="flex item shrink" id="top">
+            <div class="flex container horizontal middle">
+                <div class="flex item grow text-align-left" id="left">
+                    <a href="<?= site_url(); ?>">
+                        <img src="<?= get_template_directory_uri() . '/vendor/icons/left.svg' ?>" alt="arrow back"/>
+                    </a>
+                </div>
+                <div class="flex item shrink gohome" id="center">
+                    <a href="<?= site_url(); ?>">
+                        <span class="alt-font"><?= get_bloginfo( 'name' ); ?></span>
+                    </a>
+                </div>
+                <div class="flex item grow text-align-right" id="right">
+					<?php
+					$saved = get_option( 'website_url' );
+					if ( $saved ) : ?>
+                        <a href="<?= $saved; ?>" target="_blank">
+                            <img class="reduce" src="<?= get_template_directory_uri() . '/vendor/logos/website.png' ?>"
+                                 alt="website"/>
+                        </a>
+					<?php endif; ?>
+                    <a href="javascript:void(0);" onclick="window.toggleLights();">
+                        <img src="<?= get_template_directory_uri() . '/vendor/icons/contrast.svg' ?>" alt="lights"/>
+                    </a>
+                </div>
+            </div>
         </div>
         <div class="flex item grow">
             <div class="flex container horizontal fill">
@@ -20,30 +44,67 @@ $dates = getDates();
                     <div class="alt-font">previous</div>
                 </a>
 
-                <div class="flex item grow" id="main">
+                <div class="flex item grow" id="main" data-focusme>
                     <div class="flex container vertical middle">
-                        <div class="box" id="header">
-                            <h1 class="alt-font"><?= the_title() ?></h1>
-                        </div>
-                    </div>
-                    <div class="flex container vertical middle" id="content">
-                        <div class="flex container horizontal">
-                            <div>
-                                <b><?= $dates['created'] ?></b>
-								<?php if ( $dates['different'] ) { ?>
-                                    <br/>
-                                    <small>updated on <?= $dates['modified'] ?></small>
-								<?php } ?>
-                            </div>
-                            <div class="flex item grow"></div>
-                            <div>
-                                <b>~<?= do_shortcode( '[rt_reading_time]' ); ?> min</b>
+
+                        <!-- Title -->
+                        <div class="flex container vertical middle">
+                            <div class="box" id="header">
+                                <h1 class="alt-font"><?= the_title() ?></h1>
                             </div>
                         </div>
-                        <br><br>
-						<?php the_content(); ?>
-                        <br>
-						<?php get_template_part( 'tags-list', get_post_format() ); ?>
+
+                        <!-- Content Body -->
+                        <div class="flex container vertical middle" id="content">
+
+                            <!-- Reading time and date -->
+							<?php if ( is_singular( 'post' ) ) : ?>
+                                <div class="flex container horizontal">
+                                    <div>
+                                        <b><?= $dates['created'] ?></b>
+										<?php if ( $dates['different'] ) { ?>
+                                            <br/>
+                                            <small>updated on <?= $dates['modified'] ?></small>
+										<?php } ?>
+                                    </div>
+                                    <div class="flex item grow"></div>
+                                    <div class="text-align-right">
+                                        <b>~<?= do_shortcode( '[rt_reading_time]' ); ?> min</b>
+										<?= getCurrentPageViews() ?>
+                                    </div>
+                                </div>
+                                <br><br>
+							<?php endif; ?>
+
+                            <!-- Content -->
+							<?php the_content(); ?>
+                        </div>
+
+                        <!-- Tags -->
+						<?php if ( is_singular( 'post' ) ) : ?>
+                            <div class="auto-width text-align-center">
+                                <br>
+								<?php render_current_tags(); ?>
+                                <br>
+                                <br>
+                                <br>
+                            </div>
+						<?php endif; ?>
+
+                        <!-- Links -->
+                        <div class="flex container vertical middle auto-width">
+							<?php render_links( true ); ?>
+                        </div>
+
+                        <!-- Bottom Widgets -->
+						<?php if ( is_singular( 'post' ) ) : ?>
+							<?php if ( is_active_sidebar( 'below_posts' ) ) : ?>
+                                <br><br><br><br><br><br>
+                                <div class="auto-width widget-area text-align-center">
+									<?php dynamic_sidebar( 'below_posts' ); ?>
+                                </div>
+							<?php endif; ?>
+						<?php endif; ?>
                     </div>
                 </div>
 

liquet/style.css

@@ -2,99 +2,10 @@
 Theme Name: Liquet
 Author: Niccolo Borgioli
 Description: Minimalistic clean theme
-Version: 0.1
+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
 */
-
-* {
-    box-sizing: border-box;
-    --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;
-}
-
-html, body {
-    padding: 0;
-    margin: 0;
-    font-family: Raleway, serif;
-    font-size: 1rem;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin: 0;
-}
-
-pre {
-    overflow: auto;
-    background-color: var(--clr-ligher);
-    padding: 1em;
-}
-
-a {
-    text-decoration: none;
-    color: inherit;
-}
-
-hr {
-    border: 0;
-    border-top: 1px solid #f5f5f5;
-}
-
-.fill {
-    height: 100%;
-    width: 100%;
-}
-
-.fill-v {
-    height: 100%;
-}
-
-.fill-h {
-    width: 100%;
-}
-
-.alt-font {
-    font-family: "Abril Fatface", serif;
-}
-
-#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);
-}

liquet/tags-list.php

@@ -1,9 +0,0 @@
-<?php
-$tags = get_the_tags();
-if ($tags) { ?>
-    <div class="tags">
-        <?php foreach ($tags as $tag) { ?>
-            <a class="tag" href="<?= get_tag_link($tag->term_id); ?>"><?= $tag->name; ?></a>
-        <?php } ?>
-    </div>
-<?php }

liquet/tags.php

@@ -0,0 +1,25 @@
+<?php
+
+function render_all_tags() {
+	$tags = get_tags( [ 'orderby' => 'count', 'order' => 'desc' ] );
+
+	if ( $tags ) { ?>
+        <div class="tags">
+			<?php foreach ( $tags as $tag ) { ?>
+                <a class="tag" href="<?= get_tag_link( $tag->term_id ); ?>"><?= $tag->name; ?>
+                    <b><?= $tag->count ?></b></a>
+			<?php } ?>
+        </div>
+	<?php }
+}
+
+function render_current_tags() {
+	$tags = get_the_tags();
+	if ( $tags ) { ?>
+        <div class="tags">
+			<?php foreach ( $tags as $tag ) { ?>
+                <a class="tag" href="<?= get_tag_link( $tag->term_id ); ?>"><?= $tag->name; ?></a>
+			<?php } ?>
+        </div>
+	<?php }
+}

liquet/vendor/fonts/import.css

@@ -2,6 +2,7 @@
     font-family: 'Raleway';
     font-style: normal;
     font-weight: normal;
+    font-display: swap;
     src: url('./Raleway/Raleway-Regular.woff2') format('woff2')
 }
 
@@ -9,6 +10,7 @@
     font-family: 'Raleway';
     font-style: italic;
     font-weight: normal;
+    font-display: swap;
     src: url('./Raleway/Raleway-Italic.woff2') format('woff2')
 }
 
@@ -16,6 +18,7 @@
     font-family: 'Raleway';
     font-style: normal;
     font-weight: bold;
+    font-display: swap;
     src: url('./Raleway/Raleway-Bold.woff2') format('woff2')
 }
 
@@ -23,6 +26,7 @@
     font-family: 'Raleway';
     font-style: italic;
     font-weight: bold;
+    font-display: swap;
     src: url('./Raleway/Raleway-BoldItalic.woff2') format('woff2')
 }
 
@@ -30,5 +34,6 @@
     font-family: 'Abril Fatface';
     font-style: normal;
     font-weight: normal;
+    font-display: swap;
     src: url('./Abril/AbrilFatface-Regular.woff2') format('woff2')
 }

liquet/vendor/icons/calendar.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M424 96h-40v24c0 4.4-3.6 8-8 8h-16c-4.4 0-8-3.6-8-8V96H160v24c0 4.4-3.6 8-8 8h-16c-4.4 0-8-3.6-8-8V96H88c-22 0-40 18-40 40v272c0 22 18 40 40 40h336c22 0 40-18 40-40V136c0-22-18-40-40-40zm8 300c0 11-9 20-20 20H100c-11 0-20-9-20-20V216c0-4.4 3.6-8 8-8h336c4.4 0 8 3.6 8 8v180zM160 72c0-4.4-3.6-8-8-8h-16c-4.4 0-8 3.6-8 8v24h32V72zM384 72c0-4.4-3.6-8-8-8h-16c-4.4 0-8 3.6-8 8v24h32V72z"/></svg>

liquet/vendor/icons/down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M348.3 295.6c-5-5.1-13.3-5.1-18.4-.1L269 356.2V124.9c0-7.1-5.8-12.9-13-12.9s-13 5.8-13 12.9v231.3l-60.9-60.8c-5.1-5-13.3-4.9-18.4.1-5 5.1-5 13.2.1 18.3l83 82.4c1.2 1.1 2.5 2 4.1 2.7 1.6.7 3.3 1 5 1 3.4 0 6.6-1.3 9.1-3.7l83-82.4c5.2-4.9 5.3-13.1.3-18.2z"/></svg>

liquet/vendor/icons/github.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/></svg>

liquet/vendor/icons/hom.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M258.5 104.1c-1.5-1.2-3.5-1.2-5 0l-156 124.8c-.9.8-1.5 1.9-1.5 3.1v230c0 1.1.9 2 2 2h108c1.1 0 2-.9 2-2V322c0-1.1.9-2 2-2h92c1.1 0 2 .9 2 2v140c0 1.1.9 2 2 2h108c1.1 0 2-.9 2-2V232c0-1.2-.6-2.4-1.5-3.1l-156-124.8z"/><path d="M458.7 204.2l-189-151.4C265.9 49.7 261 48 256 48s-9.9 1.7-13.7 4.8L160 119.7V77.5c0-1.1-.9-2-2-2H98c-1.1 0-2 .9-2 2v92.2l-42.7 35.1c-3.1 2.5-5.1 6.2-5.3 10.2-.2 4 1.3 7.9 4.1 10.7 2.6 2.6 6.1 4.1 9.9 4.1 3.2 0 6.3-1.1 8.8-3.1l183.9-148c.5-.4.9-.4 1.3-.4s.8.1 1.3.4l183.9 147.4c2.5 2 5.6 3.1 8.8 3.1 3.7 0 7.2-1.4 9.9-4.1 2.9-2.8 4.4-6.7 4.2-10.7-.3-4-2.2-7.7-5.4-10.2z"/></svg>

liquet/vendor/icons/left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M216.4 163.7c5.1 5 5.1 13.3.1 18.4L155.8 243h231.3c7.1 0 12.9 5.8 12.9 13s-5.8 13-12.9 13H155.8l60.8 60.9c5 5.1 4.9 13.3-.1 18.4-5.1 5-13.2 5-18.3-.1l-82.4-83c-1.1-1.2-2-2.5-2.7-4.1-.7-1.6-1-3.3-1-5 0-3.4 1.3-6.6 3.7-9.1l82.4-83c4.9-5.2 13.1-5.3 18.2-.3z"/></svg>

liquet/vendor/icons/sun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 387c-8.5 0-15.4 6.9-15.4 15.4v46.2c0 8.5 6.9 15.4 15.4 15.4s15.4-6.9 15.4-15.4v-46.2c0-8.5-6.9-15.4-15.4-15.4zM256 48c-8.5 0-15.4 6.9-15.4 15.4v46.2c0 8.5 6.9 15.4 15.4 15.4s15.4-6.9 15.4-15.4V63.4c0-8.5-6.9-15.4-15.4-15.4zM125 256c0-8.5-6.9-15.4-15.4-15.4H63.4c-8.5 0-15.4 6.9-15.4 15.4s6.9 15.4 15.4 15.4h46.2c8.5 0 15.4-6.9 15.4-15.4zM448.6 240.6h-46.2c-8.5 0-15.4 6.9-15.4 15.4s6.9 15.4 15.4 15.4h46.2c8.5 0 15.4-6.9 15.4-15.4s-6.9-15.4-15.4-15.4zM152.5 344.1c-4.1 0-8 1.6-10.9 4.5l-32.7 32.7c-2.9 2.9-4.5 6.8-4.5 10.9s1.6 8 4.5 10.9c2.9 2.9 6.8 4.5 10.9 4.5 4.1 0 8-1.6 10.9-4.5l32.7-32.7c6-6 6-15.8 0-21.8-2.9-2.9-6.8-4.5-10.9-4.5zM359.5 167.9c4.1 0 8-1.6 10.9-4.5l32.7-32.7c2.9-2.9 4.5-6.8 4.5-10.9s-1.6-8-4.5-10.9c-2.9-2.9-6.8-4.5-10.9-4.5-4.1 0-8 1.6-10.9 4.5l-32.7 32.7c-2.9 2.9-4.5 6.8-4.5 10.9s1.6 8 4.5 10.9c2.9 2.9 6.8 4.5 10.9 4.5zM130.7 108.9c-2.9-2.9-6.8-4.5-10.9-4.5-4.1 0-8 1.6-10.9 4.5-2.9 2.9-4.5 6.8-4.5 10.9 0 4.1 1.6 8 4.5 10.9l32.7 32.7c2.9 2.9 6.8 4.5 10.9 4.5 4.1 0 8-1.6 10.9-4.5 2.9-2.9 4.5-6.8 4.5-10.9s-1.6-8-4.5-10.9l-32.7-32.7zM370.4 348.6c-2.9-2.9-6.8-4.5-10.9-4.5-4.1 0-8 1.6-10.9 4.5-6 6-6 15.8 0 21.8l32.7 32.7c2.9 2.9 6.8 4.5 10.9 4.5 4.1 0 8-1.6 10.9-4.5 2.9-2.9 4.5-6.8 4.5-10.9s-1.6-8-4.5-10.9l-32.7-32.7zM256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96z"/></svg>

liquet/vendor/icons/timer.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 456c-110.3 0-200-89.7-200-200 0-54.8 21.7-105.9 61.2-144 6.4-6.2 16.6-6 22.7.4 6.2 6.4 6 16.6-.4 22.7-33.1 32-51.3 74.9-51.3 120.9 0 92.5 75.3 167.8 167.8 167.8S423.8 348.5 423.8 256c0-87.1-66.7-159-151.8-167.1v62.6c0 8.9-7.2 16.1-16.1 16.1s-16.1-7.2-16.1-16.1V72.1c0-8.9 7.2-16.1 16.1-16.1 110.3 0 200 89.7 200 200S366.3 456 256 456z"/><path d="M175.9 161.9l99.5 71.5c13.5 9.7 16.7 28.5 7 42s-28.5 16.7-42 7c-2.8-2-5.2-4.4-7-7l-71.5-99.5c-3.2-4.5-2.2-10.8 2.3-14 3.6-2.6 8.3-2.4 11.7 0z"/></svg>

liquet/vendor/icons/twitter.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/></svg>

liquet/vendor/icons/youtube.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.6 148.8c0-45-33.1-81.2-74-81.2C379.2 65 322.7 64 265 64h-18c-57.6 0-114.2 1-169.6 3.6C36.6 67.6 3.5 104 3.5 149 1 184.6-.1 220.2 0 255.8c-.1 35.6 1 71.2 3.4 106.9 0 45 33.1 81.5 73.9 81.5 58.2 2.7 117.9 3.9 178.6 3.8 60.8.2 120.3-1 178.6-3.8 40.9 0 74-36.5 74-81.5 2.4-35.7 3.5-71.3 3.4-107 .2-35.6-.9-71.2-3.3-106.9zM207 353.9V157.4l145 98.2-145 98.3z"/></svg>

package.json

@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "scripts": {
+    "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",
+    "swup": "2.0.x"
+  },
+  "devDependencies": {
+    "parcel-bundler": "1.12.x",
+    "stylus": "0.54.x"
+  }
+}

src/js/index.js

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

src/js/lazy.js

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

src/js/swup.js

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

src/styles/flex.styl

@@ -0,0 +1,24 @@
+.flex
+  &.container
+    display flex
+
+    &.horizontal
+      flex-direction row
+
+    &.vertical
+      flex-direction column
+
+    &.middle
+      align-items center
+
+    &.center
+      justify-content center
+
+  &.item
+    overflow hidden
+
+    &.grow
+      flex 1 0
+
+    &.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.styl

@@ -0,0 +1,121 @@
+*
+  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
+
+  & > a
+    &.tag
+      padding .25em
+      background #eee
+      border-radius .25em
+      display inline-block
+      margin-top .25em
+
+.gohome
+  padding .5em
+  align-self center
+  transition var(--animation)
+
+  &: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
+    display flex
+    flex-direction row
+    overflow auto
+
+    &::-webkit-scrollbar
+      width 2px
+      background transparent
+      height 2px
+
+    &::-webkit-scrollbar-thumb
+      background var(--clr-dark)
+      border-radius 2px
+
+    & > a
+      &.tag
+        margin .25em
+        flex 1 0 auto
+
+  .gohome
+    padding .25em

src/styles/home.styl

@@ -0,0 +1,81 @@
+#home
+  #header
+    text-align center
+    margin-top 8vmin
+    margin-bottom 16vmin
+    padding 0 2em
+
+    h1
+      font-size 12vw
+      font-family "Abril Fatface", serif
+
+    h2
+      font-size 5.5vw
+
+  #list-container
+  #list-header
+  #list
+    text-align left
+    width 100%
+    padding 0 2em
+
+    & > .item
+      padding .25em 1em
+      margin 1.5em 0
+      transition all ease .1s
+      border-radius .5em
+      display block
+
+      .title
+        margin-bottom .25em
+
+      .thumbnail
+        img
+          width 100%
+          height 12em
+          object-fit cover
+          object-position center
+          border-radius .5em
+          transition var(--animation)
+          transform scale(1)
+
+    hr
+      margin 0 1.5em
+
+  #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)
+
+      & > .item
+        &:hover
+          box-shadow var(--small-shadow)
+          transform scale(1.05)
+          padding-bottom 1em
+
+          .thumbnail
+            img
+              transform scale(1.2) translateY(-1em)
+              height 16em
+              margin 1em 0
+              box-shadow var(--small-shadow)
+
+    #header
+      h1
+        font-size 5em
+
+      h2
+        font-size 2em
+
+    #lights
+      img
+        top .5em
+        right 1em

src/styles/index.styl

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

src/styles/logos.styl

@@ -0,0 +1,24 @@
+#logos
+  margin-top: 1.5em
+
+  & > .title
+    margin: 2em
+    text-align: center
+
+    .made-by-link
+      text-decoration: underline
+      display: block
+      padding-bottom: 1em
+
+    img
+      height: 1.5em
+
+  & > .list
+    img
+      height: 2em
+      width: 2em
+      margin: 0 .5em
+      transition: var(--animation)
+
+      &:hover
+        transform: scale(1.15)

src/styles/singular.styl

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

uploads.ini

@@ -0,0 +1,5 @@
+file_uploads = On
+memory_limit = 512M
+upload_max_filesize = 512M
+post_max_size = 512M
+max_execution_time = 300