mirror of
https://github.com/cupcakearmy/liquet.git
synced 2024-12-22 08:06:24 +00: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 () {
|
||||
// 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 );
|
||||
|
||||
|
||||
@ -8,4 +8,14 @@
|
||||
<?php wp_head(); ?>
|
||||
</head>
|
||||
<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">
|
||||
151
liquet/style.css
151
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;
|
||||
}
|
||||
}
|
||||
*/
|
||||
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(($) => {
|
||||
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
|
||||
}
|
||||
}
|
||||
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