From 3a14bd776d95f9d31e923b4b9562e6b896abe7cf Mon Sep 17 00:00:00 2001 From: cupcakearmy Date: Fri, 27 Sep 2019 16:04:02 +0200 Subject: [PATCH] use a bundler --- liquet/functions.php | 26 +--- liquet/header.php | 10 ++ liquet/style.css | 151 +---------------------- src/js/index.js | 2 + liquet/js/lazy_load.js => src/js/lazy.js | 11 +- liquet/js/main.js => src/js/lights.js | 0 {liquet/css => src/styles}/flex.css | 0 src/styles/fonts.css | 39 ++++++ src/styles/global.css | 146 ++++++++++++++++++++++ {liquet/css => src/styles}/home.css | 0 src/styles/index.styl | 6 + {liquet/css => src/styles}/logos.css | 0 {liquet/css => src/styles}/singular.css | 0 13 files changed, 214 insertions(+), 177 deletions(-) create mode 100644 src/js/index.js rename liquet/js/lazy_load.js => src/js/lazy.js (77%) rename liquet/js/main.js => src/js/lights.js (100%) rename {liquet/css => src/styles}/flex.css (100%) create mode 100644 src/styles/fonts.css create mode 100644 src/styles/global.css rename {liquet/css => src/styles}/home.css (100%) create mode 100644 src/styles/index.styl rename {liquet/css => src/styles}/logos.css (100%) rename {liquet/css => src/styles}/singular.css (100%) diff --git a/liquet/functions.php b/liquet/functions.php index a5414fd..a10c1d5 100644 --- a/liquet/functions.php +++ b/liquet/functions.php @@ -18,34 +18,14 @@ add_filter( 'wp_headers', function ( $headers ) { } ); add_action( 'wp_enqueue_scripts', function () { - // JS - wp_enqueue_script( 'liquet-main', get_template_directory_uri() . '/js/main.js' ); - - // CSS - 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( 'liquet-logos', get_template_directory_uri() . '/css/logos.css' ); - wp_enqueue_style( 'fonts', get_template_directory_uri() . '/vendor/fonts/import.css' ); - - // Lazy loading - global $wp_query; - wp_register_script( 'lazy_loading', get_template_directory_uri() . '/js/lazy_load.js', array( 'jquery' ) ); - wp_localize_script( 'lazy_loading', 'lazy_load_params', array( - 'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX - 'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here - 'current_page' => get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1, - 'max_page' => $wp_query->max_num_pages - ) ); - - wp_enqueue_script( 'lazy_loading' ); + 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() { $args = json_decode( stripslashes( $_POST['query'] ), true ); - $args['paged'] = $_POST['page'] + 1; // we need next page to be loaded + $args['paged'] = $_POST['page'] + 1; $args['post_status'] = 'publish'; query_posts( $args ); diff --git a/liquet/header.php b/liquet/header.php index 584ecc5..b874ef7 100644 --- a/liquet/header.php +++ b/liquet/header.php @@ -8,4 +8,14 @@ +
\ No newline at end of file diff --git a/liquet/style.css b/liquet/style.css index 7bafc4c..d411bbe 100644 --- a/liquet/style.css +++ b/liquet/style.css @@ -2,157 +2,10 @@ Theme Name: Liquet Author: Niccolo Borgioli Description: Minimalistic clean theme -Version: 0.10 +Version: 0.11 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; - -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; - } -} \ No newline at end of file +*/ \ No newline at end of file diff --git a/src/js/index.js b/src/js/index.js new file mode 100644 index 0000000..cd5d784 --- /dev/null +++ b/src/js/index.js @@ -0,0 +1,2 @@ +import './lights' +import './lazy' \ No newline at end of file diff --git a/liquet/js/lazy_load.js b/src/js/lazy.js similarity index 77% rename from liquet/js/lazy_load.js rename to src/js/lazy.js index d515e1e..76133c6 100644 --- a/liquet/js/lazy_load.js +++ b/src/js/lazy.js @@ -1,3 +1,5 @@ +import jQuery from 'jquery' + jQuery(($) => { const bottomOffset = 300 const app = document.getElementById('app') @@ -8,20 +10,19 @@ jQuery(($) => { const pixelToBottom = this.scrollHeight - (this.scrollTop + this.clientHeight) if (!loading && pixelToBottom < bottomOffset) { - console.log('Loading...') loading = true $.ajax({ - url: lazy_load_params.ajaxurl, + url: WPParams.lazy.ajaxurl, data: { 'action': 'lazy_load', - 'query': lazy_load_params.posts, - 'page': lazy_load_params.current_page + '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 - lazy_load_params.current_page++ + WPParams.lazy.current_page++ loading = false } } diff --git a/liquet/js/main.js b/src/js/lights.js similarity index 100% rename from liquet/js/main.js rename to src/js/lights.js diff --git a/liquet/css/flex.css b/src/styles/flex.css similarity index 100% rename from liquet/css/flex.css rename to src/styles/flex.css diff --git a/src/styles/fonts.css b/src/styles/fonts.css new file mode 100644 index 0000000..0eae64e --- /dev/null +++ b/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') +} \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css new file mode 100644 index 0000000..0e212ed --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/liquet/css/home.css b/src/styles/home.css similarity index 100% rename from liquet/css/home.css rename to src/styles/home.css diff --git a/src/styles/index.styl b/src/styles/index.styl new file mode 100644 index 0000000..dfd4fa6 --- /dev/null +++ b/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" \ No newline at end of file diff --git a/liquet/css/logos.css b/src/styles/logos.css similarity index 100% rename from liquet/css/logos.css rename to src/styles/logos.css diff --git a/liquet/css/singular.css b/src/styles/singular.css similarity index 100% rename from liquet/css/singular.css rename to src/styles/singular.css