cupcakearmy/liquet
1
0
Fork 0
mirror of https://github.com/cupcakearmy/liquet.git synced 2024-12-22 16:16:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

use a bundler

Browse Source
This commit is contained in:
cupcakearmy 2019-09-27 16:04:02 +02:00
parent 6cadafa7cd
commit 3a14bd776d
13 changed files with 214 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
liquet/functions.php
View File

@ -18,34 +18,14 @@ add_filter( 'wp_headers', function ( $headers ) {
} ); } );
add_action( 'wp_enqueue_scripts', function () { add_action( 'wp_enqueue_scripts', function () {
// JS wp_enqueue_style( 'liquet', get_template_directory_uri() . '/dist/styles/index.css' );
wp_enqueue_script( 'liquet-main', get_template_directory_uri() . '/js/main.js' ); wp_enqueue_script( 'liquet', get_template_directory_uri() . '/dist/js/index.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' );
} ); } );
function lazy_load_ajax_handler() { function lazy_load_ajax_handler() {
$args = json_decode( stripslashes( $_POST['query'] ), true ); $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'; $args['post_status'] = 'publish';
query_posts( $args ); query_posts( $args );

10
liquet/header.php
View File

@ -8,4 +8,14 @@
<?php wp_head(); ?> <?php wp_head(); ?>
</head> </head>
<body> <body>
<script>
const WPParams = {
lazy: JSON.parse(`<?= json_encode( array(
'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
'posts' => $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
) ) ?>`)
}
</script>
<div id="app"> <div id="app">

149
liquet/style.css
View File

@ -2,157 +2,10 @@
Theme Name: Liquet Theme Name: Liquet
Author: Niccolo Borgioli Author: Niccolo Borgioli
Description: Minimalistic clean theme Description: Minimalistic clean theme
Version: 0.10 Version: 0.11
License: MIT License: MIT
Tags: minimal, simple, typography, clean Tags: minimal, simple, typography, clean
Author URI: https://nicco.io Author URI: https://nicco.io
License URI: https://opensource.org/licenses/MIT License URI: https://opensource.org/licenses/MIT
Theme URI: https://github.com/cupcakearmy/liquet 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;
}
}

2
src/js/index.js Normal file
View File

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

11
liquet/js/lazy_load.js → src/js/lazy.js
View File

@ -1,3 +1,5 @@
import jQuery from 'jquery'
jQuery(($) => { jQuery(($) => {
const bottomOffset = 300 const bottomOffset = 300
const app = document.getElementById('app') const app = document.getElementById('app')
@ -8,20 +10,19 @@ jQuery(($) => {
const pixelToBottom = this.scrollHeight - (this.scrollTop + this.clientHeight) const pixelToBottom = this.scrollHeight - (this.scrollTop + this.clientHeight)
if (!loading && pixelToBottom < bottomOffset) { if (!loading && pixelToBottom < bottomOffset) {
console.log('Loading...')
loading = true loading = true
$.ajax({ $.ajax({
url: lazy_load_params.ajaxurl, url: WPParams.lazy.ajaxurl,
data: { data: {
'action': 'lazy_load', 'action': 'lazy_load',
'query': lazy_load_params.posts, 'query': JSON.stringify(WPParams.lazy.posts),
'page': lazy_load_params.current_page 'page': WPParams.lazy.current_page
}, },
type: 'POST', type: 'POST',
success: function (data) { success: function (data) {
if (data) { if (data) {
$('#list').find('hr:last-of-type').after(data) // where to insert posts $('#list').find('hr:last-of-type').after(data) // where to insert posts
lazy_load_params.current_page++ WPParams.lazy.current_page++
loading = false loading = false
} }
} }

0
liquet/js/main.js → src/js/lights.js
View File

0
liquet/css/flex.css → src/styles/flex.css
View File

39
src/styles/fonts.css Normal file
View File

@ -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')
}

146
src/styles/global.css Normal file
View File

@ -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;
}
}

0
liquet/css/home.css → src/styles/home.css
View File

6
src/styles/index.styl Normal file
View File

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

0
liquet/css/logos.css → src/styles/logos.css
View File

0
liquet/css/singular.css → src/styles/singular.css
View File