mirror of
https://github.com/cupcakearmy/liquet.git
synced 2024-10-31 23:54:12 +01:00
use a bundler
This commit is contained in:
cupcakearmy
parent
6cadafa7cd
commit
3a14bd776d
@ -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 );
|
||||||
|
|
||||||
|
|||||||
@ -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">
|
||||||
151
liquet/style.css
151
liquet/style.css
@ -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
2
src/js/index.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
import './lights'
|
||||||
|
import './lazy'
|
||||||
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
39
src/styles/fonts.css
Normal file
39
src/styles/fonts.css
Normal 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
146
src/styles/global.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
6
src/styles/index.styl
Normal file
6
src/styles/index.styl
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
@require "./global.css"
|
||||||
|
@require "./fonts.css"
|
||||||
|
@require "./flex.css"
|
||||||
|
@require "./home.css"
|
||||||
|
@require "./logos.css"
|
||||||
|
@require "./singular.css"
|
||||||
Loading…
Reference in New Issue
Block a user