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