├── .gitignore ├── LICENSE.md ├── README.md ├── _root ├── favicon.png ├── favicon.svg ├── htaccess ├── humans.txt └── robots.txt ├── acf-json └── README.MD ├── admin ├── css │ └── sort.css └── js │ └── sort.js ├── attrs-sprite.json ├── composer.json ├── composer.lock ├── false └── style.css.map ├── fonts ├── lato-regular.woff └── lato-regular.woff2 ├── functions.php ├── functions ├── acf-options.php ├── class-tgm-plugin-activation.php ├── plugin-timber.php ├── required-plugins.php ├── wm-autocomplete.php ├── wm-breadcrumbs.php ├── wm-contact.php ├── wm-minify.php ├── woo-support.php ├── woo.php ├── wp-clean.php ├── wp-custom-post-type-icons.php ├── wp-custom-post-type.php ├── wp-hide-admin-items.php ├── wp-image-quality.php ├── wp-image-sizes.php ├── wp-options.php ├── wp-widgets.php └── wp_admin-menu.php ├── images-src └── sprite │ └── general │ └── logo.svg ├── images ├── ajax-loader.gif └── sprite.svg ├── index.php ├── js-src ├── base │ ├── lab-loader.js │ └── template.init.js ├── modules │ ├── template.autocomplete.js │ ├── template.googlemaps.js │ ├── template.mq-cinema.js │ ├── template.mq-desk.js │ ├── template.mq-lap.js │ ├── template.mq-palm.js │ ├── template.mq-wall.js │ └── template.mq.js └── vendor │ └── LABjs │ ├── .github │ └── FUNDING.yml │ ├── BUILD.md │ ├── LAB-debug.min.js │ ├── LAB.js │ ├── LAB.min.js │ ├── LAB.src.js │ ├── README.md │ ├── fLAB.src.js │ └── tests │ ├── img1.jpg │ ├── img2.jpg │ ├── test-LABjs-preloading-1.html │ ├── test-LABjs-preloading-10.html │ ├── test-LABjs-preloading-11.html │ ├── test-LABjs-preloading-12a.html │ ├── test-LABjs-preloading-12b.html │ ├── test-LABjs-preloading-12c.html │ ├── test-LABjs-preloading-12d.html │ ├── test-LABjs-preloading-12e.html │ ├── test-LABjs-preloading-12f.html │ ├── test-LABjs-preloading-12g.html │ ├── test-LABjs-preloading-13a.html │ ├── test-LABjs-preloading-13b.html │ ├── test-LABjs-preloading-13c.html │ ├── test-LABjs-preloading-13d.html │ ├── test-LABjs-preloading-13e.html │ ├── test-LABjs-preloading-13f.html │ ├── test-LABjs-preloading-13g.html │ ├── test-LABjs-preloading-14a.html │ ├── test-LABjs-preloading-14b.html │ ├── test-LABjs-preloading-14c.html │ ├── test-LABjs-preloading-14d.html │ ├── test-LABjs-preloading-14e.html │ ├── test-LABjs-preloading-15.html │ ├── test-LABjs-preloading-16.html │ ├── test-LABjs-preloading-2.html │ ├── test-LABjs-preloading-3.html │ ├── test-LABjs-preloading-4.html │ ├── test-LABjs-preloading-5.html │ ├── test-LABjs-preloading-6.html │ ├── test-LABjs-preloading-7.html │ ├── test-LABjs-preloading-8.html │ ├── test-LABjs-preloading-9.html │ ├── testscript1.js │ ├── testscript2.js │ ├── testscript3.js │ ├── testscript3b.js │ ├── testscript4.js │ ├── testscript5.js │ └── testscript6.js ├── js ├── functions.min.js ├── lab.min.js ├── lab.min.js.LICENSE.txt └── spritemap.js ├── mix-manifest.json ├── package-lock.json ├── package.json ├── sass ├── base │ └── _base.scss ├── layout │ ├── _doormat.scss │ ├── _footer.scss │ ├── _header.scss │ └── _main.scss ├── modules │ ├── _aside.scss │ ├── _aside__section.scss │ ├── _breadcrumbs.scss │ ├── _buttons.scss │ ├── _comments.scss │ ├── _easy-autocomplete.scss │ ├── _forms.scss │ ├── _header-image.scss │ ├── _helpers.scss │ ├── _images.scss │ ├── _mainmenu.scss │ ├── _pagemenu.scss │ ├── _paging.scss │ ├── _post.scss │ ├── _print.scss │ ├── _search-form.scss │ ├── _search-results.scss │ ├── _symbols.scss │ ├── _tables.scss │ ├── _video-wrapper.scss │ ├── _woocommerce-cart.scss │ ├── _woocommerce-checkout.scss │ ├── _woocommerce-product-excerpt.scss │ ├── _woocommerce-product.scss │ └── _woocommerce-thankyou.scss ├── sass-extras │ ├── _extendables.scss │ ├── _functions.scss │ └── _mixins.scss ├── style.scss └── theme │ ├── _colors.scss │ ├── _grid.scss │ ├── _settings.scss │ └── _type.scss ├── screenshot.png ├── screenshot.sketch ├── style.css ├── template-my-custom-contact.php ├── template-woo-cart.php ├── template-woo-checkout.php ├── views ├── archive.twig ├── author.twig ├── base │ └── base.twig ├── blog.twig ├── category.twig ├── errors │ └── 404.twig ├── home.twig ├── layout │ ├── doormat.twig │ ├── footer.twig │ └── header.twig ├── modules │ ├── comment.twig │ ├── pagination.twig │ ├── post-excerpt.twig │ ├── product-excerpt.twig │ └── searchform.twig ├── page-cart.twig ├── page-checkout.twig ├── page-contact.twig ├── page.twig ├── search.twig ├── sidebar.twig ├── single.twig ├── tag.twig └── woo │ ├── archive.twig │ ├── cart.twig │ ├── checkout.twig │ ├── single-product.twig │ └── thankyou.twig ├── webpack.mix.js ├── woocommerce.php └── woocommerce ├── cart └── cart.php └── checkout ├── form-checkout.php └── thankyou.php /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /vendor 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eworm/template/ffebe967c8b5951342576723cff340e932378a23/LICENSE.md -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This project uses open-source software to work more efficient. You'll need to install some software to start working with this project. I won't go into all details about how to use this software. This readme should be efficient to get going. 2 | 3 | # Necessary global software 4 | 5 | **1:** Nodejs: 6 | 7 | **2:** NPM: 8 | 9 | **3:** SASS: 10 | 11 | # After installing the above software you need to install some dependencies. These files aren't in the repo to keep it clean. These dependencies are installed in the project directory 12 | 13 | **4:** Add dependencies: `npm install`. This command adds a node_modules directory which you _really_ should gitignore. 14 | 15 | **5:** Add these lines to your global gitignore: 16 | 17 | ``` 18 | node_modules 19 | ``` 20 | 21 | **All done!** 22 | 23 | # Editing javascript, stylesheet, and images 24 | 25 | The easiest way to start is to navigate to the project dir and run `npm run watch:all` in a terminal window. This executes the standard npm watch task. This task keeps an eye on the javascript and sass files and compiles svg sprite files. Please check the package.json file to see what other tasks there are. 26 | 27 | ## The directories 28 | 29 | **The _root dir** This is a placeholder dir for files you should put in the wordpress root. 30 | 31 | **Fonts** Use this dir for webfonts. 32 | 33 | **Images** The images-src dir is used for original files. `npm run build:sprite` generates an svg symbol sprite from svg's located in the sprite dir. 34 | 35 | **Javascript** The js-src dir is used for your own javascript files. `npm run build:js` combines & minifies these files (and optional npm files) and puts the resulting file in the js dir. 36 | 37 | **SASS** All sass files are located in the sass dir. Use `npm run build:css` to combine them. The structure of the subdirs is based on . 38 | 39 | ## Timber 40 | 41 | Timber () is an awesome way of making your html cleaner and easier to read. It uses the Twig template engine to write html seperate from the php files. Timber is included in the required plugins list, so you'll see a message asking you to install it. 42 | 43 | ## Final words 44 | 45 | - Classes and id's necessary for javascript should start with js-. Don't remove or edit them in this html. 46 | - Please use BEM for classnames: 47 | 48 | # The php side of things 49 | 50 | All php functions are split in seperate files (with handy filenames) and are included in /functions. 51 | -------------------------------------------------------------------------------- /_root/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eworm/template/ffebe967c8b5951342576723cff340e932378a23/_root/favicon.png -------------------------------------------------------------------------------- /_root/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /_root/humans.txt: -------------------------------------------------------------------------------- 1 | /* the humans responsible & colophon */ 2 | /* humanstxt.org */ 3 | 4 | /* TEAM */ 5 | Design & html: Wout Mager 6 | Site: www.woutmager.nl 7 | Twitter: @eworm_ 8 | Locatie: Groningen, the Netherlands 9 | -------------------------------------------------------------------------------- /_root/robots.txt: -------------------------------------------------------------------------------- 1 | # www.robotstxt.org/ 2 | # www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449 3 | 4 | User-agent: * 5 | 6 | -------------------------------------------------------------------------------- /acf-json/README.MD: -------------------------------------------------------------------------------- 1 | More info: https://www.advancedcustomfields.com/resources/local-json/ 2 | -------------------------------------------------------------------------------- /admin/css/sort.css: -------------------------------------------------------------------------------- 1 | #video-list { 2 | margin-top: 20px; 3 | } 4 | 5 | #video-list li { 6 | padding: 10px; 7 | width: 90%; 8 | font-weight: bold; 9 | background: #f0f0f0; 10 | /* for non-css3 browsers */ 11 | cursor: move; 12 | border: 1px solid #ddd; 13 | -webkit-border-radius: 10px; 14 | -moz-border-radius: 10px; 15 | -ms-border-radius: 10px; 16 | -o-border-radius: 10px; 17 | border-radius: 10px; 18 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f7f7f7), color-stop(100%, #e7e7e7)); 19 | background-image: -webkit-linear-gradient(#f7f7f7, #e7e7e7); 20 | background-image: -moz-linear-gradient(#f7f7f7, #e7e7e7); 21 | background-image: -o-linear-gradient(#f7f7f7, #e7e7e7); 22 | background-image: -ms-linear-gradient(#f7f7f7, #e7e7e7); 23 | background-image: linear-gradient(#f7f7f7, #e7e7e7); 24 | } 25 | 26 | #loading-animation { 27 | display: none; 28 | } 29 | -------------------------------------------------------------------------------- /admin/js/sort.js: -------------------------------------------------------------------------------- 1 | jQuery(document).ready(function($) { 2 | var videoList = $('#video-list'); 3 | 4 | videoList.sortable({ 5 | update: function(event, ui) { 6 | $('#loading-animation').show(); // Show the animate loading gif while waiting 7 | 8 | opts = { 9 | url: ajaxurl, // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php 10 | type: 'POST', 11 | async: true, 12 | cache: false, 13 | dataType: 'json', 14 | data: { 15 | action: 'video_sort', // Tell WordPress how to handle this ajax request 16 | order: videoList.sortable('toArray').toString() // Passes ID's of list items in 1,3,2 format 17 | }, 18 | success: function(response) { 19 | $('#loading-animation').hide(); // Hide the loading animation 20 | return; 21 | }, 22 | error: function(xhr, textStatus, e) { // This can be expanded to provide more information 23 | alert('There was an error saving the updates'); 24 | $('#loading-animation').hide(); // Hide the loading animation 25 | return; 26 | } 27 | }; 28 | $.ajax(opts); 29 | } 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /attrs-sprite.json: -------------------------------------------------------------------------------- 1 | { 2 | "svg": { 3 | "rootAttributes": { 4 | "class": "symbols" 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "require": { 3 | "timber/timber": "^2.0" 4 | }, 5 | "config": { 6 | "allow-plugins": { 7 | "composer/installers": true 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /fonts/lato-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eworm/template/ffebe967c8b5951342576723cff340e932378a23/fonts/lato-regular.woff -------------------------------------------------------------------------------- /fonts/lato-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eworm/template/ffebe967c8b5951342576723cff340e932378a23/fonts/lato-regular.woff2 -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | 'Hoofdmenu' 39 | ) 40 | ); 41 | } 42 | add_action('init', 'register_my_menus'); 43 | -------------------------------------------------------------------------------- /functions/acf-options.php: -------------------------------------------------------------------------------- 1 | 'Algemene opties')); 17 | } 18 | -------------------------------------------------------------------------------- /functions/wm-autocomplete.php: -------------------------------------------------------------------------------- 1 | array( 10 | "post" 11 | ), 12 | "s" => $phrase 13 | ); 14 | $query = get_posts( $args ); 15 | 16 | // Implement ajax function here 17 | header('Content-Type: application/json'); 18 | 19 | $results = array(); 20 | 21 | foreach($query as $post) : setup_postdata($post); 22 | $results[] = array( 23 | 'permalink' => get_the_permalink($post->ID), 24 | 'title' => get_the_title($post->ID) 25 | ); 26 | endforeach; 27 | 28 | echo json_encode($results); 29 | 30 | wp_die(); 31 | 32 | } 33 | add_action( 'wp_ajax_wm_autocomplete', 'wm_autocomplete' ); // If called from admin panel 34 | add_action( 'wp_ajax_nopriv_wm_autocomplete', 'wm_autocomplete' ); // If called from front end 35 | -------------------------------------------------------------------------------- /functions/wm-breadcrumbs.php: -------------------------------------------------------------------------------- 1 | '; 9 | 10 | if (!is_home()) { 11 | echo '
  • '; 14 | echo 'Home'; 15 | echo '
    • '; 16 | 17 | if (is_category() || is_single()) { 18 | echo '
  • '; 19 | the_category('
  • '); 20 | if (is_single()) { 21 | echo '
  • '; 22 | the_title(); 23 | echo '
    • '; 24 | } 25 | } elseif (is_page()) { 26 | if ($post->post_parent) { 27 | $anc = get_post_ancestors($post->ID); 28 | $title = get_the_title(); 29 | foreach ($anc as $ancestor) { 30 | $output = '
  • '.get_the_title($ancestor).'
    • '; 31 | } 32 | echo $output; 33 | // echo '
  • '; 34 | // echo $title; 35 | // echo '
    • '; 36 | } else { 37 | // echo '
  • ' . get_the_title() . '
    • '; 38 | } 39 | } 40 | } elseif (is_tag()) { 41 | single_tag_title(); 42 | } elseif (is_day()) { 43 | echo"
  • Archive for "; 44 | the_time('F jS, Y'); 45 | echo'
    • '; 46 | } elseif (is_month()) { 47 | echo"
  • Archive for "; 48 | the_time('F, Y'); 49 | echo'
    • '; 50 | } elseif (is_year()) { 51 | echo"
  • Archive for "; 52 | the_time('Y'); 53 | echo'
    • '; 54 | } elseif (is_author()) { 55 | echo"
  • Author Archive"; 56 | echo'
    • '; 57 | } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { 58 | echo "
  • Blog Archives"; 59 | echo'
    • '; 60 | } elseif (is_search()) { 61 | echo"
  • Search Results"; 62 | echo'
    • '; 63 | } 64 | 65 | echo ''; 66 | } 67 | -------------------------------------------------------------------------------- /functions/wm-contact.php: -------------------------------------------------------------------------------- 1 | ID); 10 | } 11 | } 12 | 13 | // Remove woocommerce images 14 | remove_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail'); 15 | 16 | // Remove woocommerce css 17 | add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ); 18 | 19 | // Remove EPO css 20 | // add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ); 21 | 22 | // Change the Number of WooCommerce Products Displayed Per Page 23 | // add_filter( 'loop_shop_per_page', 'lw_loop_shop_per_page', 30 ); 24 | // function lw_loop_shop_per_page( $products ) { 25 | // $products = -1; 26 | // return $products; 27 | // } 28 | -------------------------------------------------------------------------------- /functions/wp-clean.php: -------------------------------------------------------------------------------- 1 | widgets['WP_Widget_Recent_Comments'], 'recent_comments_style')); 53 | } 54 | add_action('widgets_init', 'remove_recent_comments_style'); 55 | 56 | 57 | /* Remove Gutenberg Block Library CSS from loading on the frontend 58 | ==================================================================================================================================*/ 59 | function smartwp_remove_wp_block_library_css() 60 | { 61 | wp_dequeue_style('wp-block-library'); 62 | wp_dequeue_style('wp-block-library-theme'); 63 | wp_dequeue_style('global-styles'); 64 | } 65 | add_action('wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css'); 66 | -------------------------------------------------------------------------------- /functions/wp-custom-post-type-icons.php: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | 18 | 24 | -------------------------------------------------------------------------------- /functions/wp-custom-post-type.php: -------------------------------------------------------------------------------- 1 | _x('CPT', 'post type general name'), 11 | 'singular_name' => _x('Onderdeel', 'post type singular name'), 12 | 'add_new' => _x('Nieuw onderdeel', 'bedrijf item'), 13 | 'add_new_item' => __('Nieuw onderdeel toevoegen'), 14 | 'edit_item' => __('Onderdeel aanpassen'), 15 | 'new_item' => __('Nieuw onderdeel'), 16 | 'view_item' => __('Onderdeel bekijken'), 17 | 'search_items' => __('onderdelen doorzoeken'), 18 | 'not_found' => __('Geen onderdeel gevonden'), 19 | 'not_found_in_trash' => __('Niets in prullebak gevonden'), 20 | 'parent_item_colon' => '' 21 | ); 22 | 23 | $args = array( 24 | 'labels' => $labels, 25 | 'public' => true, 26 | 'exclude_from_search' => false, 27 | 'show_in_admin_bar' => false, 28 | 'show_in_nav_menus' => false, 29 | 'publicly_queryable' => true, 30 | 'show_ui' => true, 31 | 'query_var' => true, 32 | 'menu_icon' => '', 33 | 'rewrite' => true, 34 | 'hierarchical' => false, 35 | 'menu_position' => null, 36 | 'supports' => array('title', 'editor', 'excerpt', 'comments'), 37 | 'map_meta_cap' => true, 38 | 'has_archive' => true, 39 | 'slug' => 'cpt', 40 | 'taxonomies' => array('category') 41 | ); 42 | 43 | register_post_type('cpt', $args); 44 | } 45 | -------------------------------------------------------------------------------- /functions/wp-hide-admin-items.php: -------------------------------------------------------------------------------- 1 | get_template_directory_uri() . '/img/header.jpg', 22 | 'random-default' => false, 23 | 'width' => 980, 24 | 'height' => 330, 25 | 'flex-height' => false, 26 | 'flex-width' => false, 27 | 'default-text-color' => '', 28 | 'header-text' => true, 29 | 'uploads' => true, 30 | 'wp-head-callback' => '', 31 | 'admin-head-callback' => '', 32 | 'admin-preview-callback' => '', 33 | ); 34 | add_theme_support('custom-header', $defaults); 35 | } 36 | -------------------------------------------------------------------------------- /functions/wp-widgets.php: -------------------------------------------------------------------------------- 1 | 'Widget', 7 | // 'before_widget' => '
    ', 8 | // 'after_widget' => '
    ', 9 | // 'before_title' => '

    ', 10 | // 'after_title' => '

    ', 11 | // )); 12 | // } 13 | -------------------------------------------------------------------------------- /images-src/sprite/general/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eworm/template/ffebe967c8b5951342576723cff340e932378a23/images/ajax-loader.gif -------------------------------------------------------------------------------- /images/sprite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 'post', 28 | 'orderby' => 'date', 29 | 'post_status' => 'publish', 30 | 'paged' => $paged 31 | ); 32 | 33 | $context['posts'] = Timber::get_posts($posts_query); 34 | // $context['dynamic_sidebar'] = Timber::get_widgets('1'); 35 | $template = ['blog.twig']; 36 | 37 | } 38 | 39 | else if (is_single()) 40 | { 41 | 42 | $context['post'] = Timber::get_post(); 43 | // $context['dynamic_sidebar'] = Timber::get_widgets('1'); 44 | $template = ['single.twig']; 45 | 46 | } 47 | 48 | else if (is_post_type_archive()) 49 | { 50 | 51 | $context['post'] = Timber::get_post(); 52 | $context['posts'] = Timber::get_posts(); 53 | $template = ['archive.twig']; 54 | 55 | } 56 | 57 | else if (is_category()) 58 | { 59 | 60 | $context['post'] = Timber::get_post(); 61 | $context['posts'] = Timber::get_posts(); 62 | $context['title'] = single_cat_title('', false); 63 | $template = ['category.twig']; 64 | 65 | } 66 | 67 | else if (is_tag()) 68 | { 69 | 70 | $context['post'] = Timber::get_post(); 71 | $context['posts'] = Timber::get_posts(); 72 | $context['title'] = single_cat_title('', false); 73 | $template = ['tag.twig']; 74 | 75 | } 76 | 77 | else if (is_search()) 78 | { 79 | 80 | $context['post'] = Timber::get_post(); 81 | $context['posts'] = Timber::get_posts(); 82 | $context['searchterm'] = get_search_query(); 83 | $template = ['search.twig']; 84 | 85 | } 86 | 87 | else if (is_author()) 88 | { 89 | 90 | $context['author'] = (get_query_var('author_name')) ? get_user_by('slug', get_query_var('author_name')) : get_userdata(get_query_var('author')); 91 | $template = ['author.twig']; 92 | 93 | } 94 | 95 | else if (is_404()) 96 | { 97 | 98 | $template = ['errors/404.twig']; 99 | 100 | } 101 | 102 | Timber::render($template, $context); 103 | 104 | ?> 105 | -------------------------------------------------------------------------------- /js-src/base/lab-loader.js: -------------------------------------------------------------------------------- 1 | let $L = $LAB 2 | .script('//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js').wait() 3 | // .script('//code.jquery.com/jquery-3.1.1.slim.min.js').wait() 4 | .script('/js/functions.min.js').wait(); 5 | -------------------------------------------------------------------------------- /js-src/base/template.init.js: -------------------------------------------------------------------------------- 1 | jQuery(function() 2 | { 3 | 4 | const template = window.template || {}; 5 | 6 | for (let i in template) 7 | { 8 | 9 | if ('init' in template[i]) { 10 | template[i].init(); 11 | } 12 | 13 | } 14 | 15 | }); 16 | -------------------------------------------------------------------------------- /js-src/modules/template.autocomplete.js: -------------------------------------------------------------------------------- 1 | // Autocomplete 2 | var template = window.template || {}; 3 | template.autocomplete = {}; 4 | 5 | (function(autocomplete) 6 | { 7 | 8 | autocomplete.init = function() 9 | { 10 | 11 | const options = { 12 | url: function(phrase) { 13 | return `${ajaxurl}?action=wm_autocomplete&phrase=${phrase}`; 14 | }, 15 | getValue: 'title', 16 | requestDelay: 500, 17 | template: { 18 | type: 'links', 19 | fields: { 20 | link: 'permalink' 21 | } 22 | }, 23 | list: { 24 | maxNumberOfElements: 10, 25 | match: { 26 | enabled: true 27 | }, 28 | sort: { 29 | enabled: true 30 | } 31 | } 32 | }; 33 | jQuery('#searchform__field').easyAutocomplete(options); 34 | 35 | }; 36 | 37 | })(template.autocomplete); 38 | -------------------------------------------------------------------------------- /js-src/modules/template.googlemaps.js: -------------------------------------------------------------------------------- 1 | // Add a google map 2 | var template = window.template || {}; 3 | template.googlemap = {}; 4 | 5 | (function(googlemap) 6 | { 7 | 8 | googlemap.init = function() 9 | { 10 | 11 | _setupGooglemap(); 12 | 13 | }; 14 | 15 | googlemap.initialize = function() 16 | { 17 | 18 | // Initialize a single marker 19 | var myOptions = { 20 | zoom: 10, 21 | center: new google.maps.LatLng(0, 0), 22 | mapTypeId: google.maps.MapTypeId.ROADMAP, 23 | }; 24 | var map = new google.maps.Map(document.getElementById('js-map_address'), myOptions); 25 | template.googlemap.geocode(company_address, map); 26 | 27 | }; 28 | 29 | googlemap.geocode = function(list, map) 30 | { 31 | 32 | // Geocode a location 33 | for (var i = 0; i < list.length; i++) { 34 | list = window[list] || list; 35 | 36 | var addressId = list[i].id; 37 | var geocoder = new google.maps.Geocoder(); 38 | var geoOptions = { 39 | address: list[i].location, 40 | region: 'NO' 41 | }; 42 | 43 | geocoder.geocode(geoOptions, template.googlemap.geocodeCallback(list[i], map, addressId)); 44 | } 45 | 46 | }; 47 | 48 | googlemap.geocodeCallback = function(item, map, addressId) 49 | { 50 | 51 | // Add a marker 52 | return function(results, status) { 53 | if (status == google.maps.GeocoderStatus.OK) { 54 | template.googlemap.addMarker(map, item, results[0].geometry.location, addressId); 55 | } 56 | } 57 | 58 | }; 59 | 60 | googlemap.addMarker = function(map, item, location, addressId) 61 | { 62 | 63 | // Add a single marker 64 | var marker = new google.maps.Marker({ 65 | map: map, 66 | position: location 67 | }) 68 | 69 | var bounds = new google.maps.LatLngBounds(); 70 | bounds.extend(location); 71 | map.fitBounds(bounds); 72 | 73 | zoomChangeBoundsListener = 74 | google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) { 75 | if (this.getZoom()) { 76 | this.setZoom(14); 77 | } 78 | }); 79 | 80 | }; 81 | 82 | function _setupGooglemap() 83 | { 84 | 85 | // Add the google maps api only when we want it to via labjs 86 | if (jQuery('#js-map_address').length > 0) { 87 | $L = $L 88 | .script('//maps.googleapis.com/maps/api/js?key=[ADD YOUR OWN API KEY]&callback=template.googlemap.initialize').wait(); 89 | } 90 | 91 | }; 92 | 93 | })(template.googlemap); 94 | -------------------------------------------------------------------------------- /js-src/modules/template.mq-cinema.js: -------------------------------------------------------------------------------- 1 | // Cinema media queries 2 | var template = window.template || {}; 3 | template.mqcinema = {}; 4 | 5 | (function(mqcinema) 6 | { 7 | 8 | mqcinema.init = function() 9 | { 10 | 11 | template.mq.observe('all and (max-width: 89.375em)', _handleMq); 12 | 13 | }; 14 | 15 | function _handleMq(mediaQuery) 16 | { 17 | 18 | if (mediaQuery.matches) { 19 | 20 | // Load mobile stuff 21 | console.log('Below 1430px'); 22 | 23 | } else { 24 | 25 | //load desktop stuff 26 | console.log('Above 1430px'); 27 | } 28 | 29 | } 30 | 31 | 32 | })(template.mqcinema); 33 | -------------------------------------------------------------------------------- /js-src/modules/template.mq-desk.js: -------------------------------------------------------------------------------- 1 | // Desk media queries 2 | var template = window.template || {}; 3 | template.mqdesk = {}; 4 | 5 | (function(mqdesk) 6 | { 7 | 8 | mqdesk.init = function() 9 | { 10 | 11 | template.mq.observe('all and (max-width: 60.625em)', _handleMq); 12 | 13 | }; 14 | 15 | function _handleMq(mediaQuery) 16 | { 17 | 18 | if (mediaQuery.matches) { 19 | 20 | // Load mobile stuff 21 | console.log('Below 970px'); 22 | 23 | } else { 24 | 25 | //load desktop stuff 26 | console.log('Above 970px'); 27 | } 28 | 29 | } 30 | 31 | })(template.mqdesk); 32 | -------------------------------------------------------------------------------- /js-src/modules/template.mq-lap.js: -------------------------------------------------------------------------------- 1 | // Lap media queries 2 | var template = window.template || {}; 3 | template.mqlap = {}; 4 | 5 | (function(mqlap) 6 | { 7 | 8 | mqlap.init = function() 9 | { 10 | 11 | template.mq.observe('all and (max-width: 46.875em)', _handleMq); 12 | 13 | }; 14 | 15 | function _handleMq(mediaQuery) 16 | { 17 | 18 | if (mediaQuery.matches) { 19 | 20 | // Load mobile stuff 21 | console.log('Below 750px'); 22 | 23 | } else { 24 | 25 | //load desktop stuff 26 | console.log('Above 750px'); 27 | 28 | } 29 | 30 | } 31 | 32 | })(template.mqlap); 33 | -------------------------------------------------------------------------------- /js-src/modules/template.mq-palm.js: -------------------------------------------------------------------------------- 1 | // Cinema media queries 2 | var template = window.template || {}; 3 | template.mqpalm = {}; 4 | 5 | (function(mqpalm) 6 | { 7 | 8 | mqpalm.init = function() 9 | { 10 | 11 | template.mq.observe('all and (max-width: 30em)', _handleMq); 12 | 13 | }; 14 | 15 | function _handleMq(mediaQuery) 16 | { 17 | 18 | if (mediaQuery.matches) { 19 | 20 | // Load mobile stuff 21 | console.log('Below 480px'); 22 | 23 | } else { 24 | 25 | //load desktop stuff 26 | console.log('Above 480px'); 27 | } 28 | 29 | } 30 | 31 | })(template.mqpalm); 32 | -------------------------------------------------------------------------------- /js-src/modules/template.mq-wall.js: -------------------------------------------------------------------------------- 1 | // Wall media queries 2 | var template = window.template || {}; 3 | template.mqwall = {}; 4 | 5 | (function(mqwall) 6 | { 7 | 8 | mqwall.init = function() 9 | { 10 | 11 | template.mq.observe('all and (max-width: 73.125em)', _handleMq); 12 | 13 | }; 14 | 15 | function _handleMq(mediaQuery) 16 | { 17 | 18 | if (mediaQuery.matches) { 19 | 20 | // Load mobile stuff 21 | console.log('Below 1170px'); 22 | 23 | } else { 24 | 25 | //load desktop stuff 26 | console.log('Above 1170px'); 27 | } 28 | 29 | } 30 | 31 | })(template.mqwall); 32 | -------------------------------------------------------------------------------- /js-src/modules/template.mq.js: -------------------------------------------------------------------------------- 1 | // Media queries 2 | var template = window.template || {}; 3 | template.mq = {}; 4 | 5 | (function(mq) 6 | { 7 | 8 | mq.observe = function(query, callback) 9 | { 10 | 11 | const mm = window.matchMedia(query); 12 | 13 | mm.addListener(callback); //Execute each time media query will be reached 14 | callback(mm); //Execute on load 15 | 16 | }; 17 | 18 | })(template.mq); 19 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [getify] 4 | patreon: getify 5 | custom: ['https://www.paypal.com/paypalme2/getify','https://www.blockchain.com/btc/payment_request?address=3GrZuzooWAAjufEydb7c8MrUYznCiHHT9U&message=getify+Support+Donation'] 6 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/BUILD.md: -------------------------------------------------------------------------------- 1 | Building Minified LABjs 2 | ======================= 3 | 4 | The LAB.src.js file is the source file for builds. If you minify this file using Packer (without base62), or YUIC, you'll get the equivalent of LAB-debug.min.js. 5 | 6 | To get LAB.min.js (with debug code removed), you need to first process the code in LAB.src.js. I do this manually with a simple regex-based find-n-replace, using this regular expression: 7 | 8 | /\/\*!START_DEBUG(?:.|[\n\r])*?END_DEBUG\*\// 9 | 10 | That will remove all the debug code snippets from the source code, then pass that code through Packer or YUIC, and you'll ge the equivalent of LAB.min.js. 11 | 12 | Final note: I manually preserve the copyright/license block comment and include it at the top of each of the two *.min.js files, since the compressors tend to remove it. 13 | 14 | /*! LAB.js (LABjs :: Loading And Blocking JavaScript) 15 | vX.Y.Z (c) Kyle Simpson 16 | MIT License 17 | */ -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eworm/template/ffebe967c8b5951342576723cff340e932378a23/js-src/vendor/LABjs/tests/img1.jpg -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eworm/template/ffebe967c8b5951342576723cff340e932378a23/js-src/vendor/LABjs/tests/img2.jpg -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #1) 6 | 7 | 43 | 44 | 45 | 46 | 47 |

    LABjs tests (LABjs with preloading #1)

    48 | 49 | image 1 50 | image 2 51 | 52 |
    53 |
    54 | 55 |
    56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #10) 6 | 7 | 44 | 45 | 46 | 47 | 48 |

    LABjs tests (LABjs with preloading #10)

    49 | 50 | image 1 51 | image 2 52 | 53 |
    54 |
    55 | 56 |
    57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #11) 6 | 7 | 44 | 45 | 46 | 47 | 48 |

    LABjs tests (LABjs with preloading #11)

    49 | 50 | image 1 51 | image 2 52 | 53 |
    54 |
    55 | 56 |
    57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-12a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #12a) 6 | 7 | 8 | 9 | 10 | 55 | 56 | 57 | 58 | 59 |

    LABjs tests (LABjs with preloading #12a)

    60 | 69 | 70 | image 1 71 | image 2 72 | 73 |
    74 |
    75 | 76 |
    77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-12b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #12b) 6 | 7 | 8 | 9 | 10 | 38 | 39 | 59 | 60 | 61 | 62 | 63 |

    LABjs tests (LABjs with preloading #12b)

    64 | 73 | 74 | image 1 75 | image 2 76 | 77 |
    78 |
    79 | 80 |
    81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-12c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #12c) 6 | 7 | 8 | 9 | 10 | 38 | 39 | 40 | 60 | 61 | 62 | 63 | 64 |

    LABjs tests (LABjs with preloading #12c)

    65 | 74 | 75 | image 1 76 | image 2 77 | 78 |
    79 |
    80 | 81 |
    82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-12d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #12d) 6 | 7 | 8 | 9 | 10 | 38 | 39 | 40 | 41 | 61 | 62 | 63 | 64 | 65 |

    LABjs tests (LABjs with preloading #12d)

    66 | 75 | 76 | image 1 77 | image 2 78 | 79 |
    80 |
    81 | 82 |
    83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-12e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #12e) 6 | 7 | 8 | 9 | 10 | 40 | 41 | 42 | 43 | 65 | 66 | 67 | 68 | 69 |

    LABjs tests (LABjs with preloading #12e)

    70 | 79 | 80 | image 1 81 | image 2 82 | 83 |
    84 |
    85 | 86 |
    87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-12f.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #12f) 6 | 7 | 8 | 9 | 10 | 40 | 41 | 42 | 65 | 66 | 67 | 68 | 69 |

    LABjs tests (LABjs with preloading #12f)

    70 | 79 | 80 | image 1 81 | image 2 82 | 83 |
    84 |
    85 | 86 |
    87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-12g.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #12g) 6 | 7 | 8 | 9 | 10 | 40 | 41 | 42 | 65 | 66 | 67 | 68 | 69 |

    LABjs tests (LABjs with preloading #12g)

    70 | 79 | 80 | image 1 81 | image 2 82 | 83 |
    84 |
    85 | 86 |
    87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-13a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #13a) 6 | 7 | 8 | 9 | 10 | 54 | 55 | 56 | 57 | 58 |

    LABjs tests (LABjs with preloading #13a)

    59 | 68 | 69 | image 1 70 | image 2 71 | 72 |
    73 |
    74 | 75 |
    76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-13b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #13b) 6 | 7 | 8 | 9 | 10 | 38 | 39 | 58 | 59 | 60 | 61 | 62 |

    LABjs tests (LABjs with preloading #13b)

    63 | 72 | 73 | image 1 74 | image 2 75 | 76 |
    77 |
    78 | 79 |
    80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-13c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #13c) 6 | 7 | 8 | 9 | 10 | 38 | 39 | 40 | 59 | 60 | 61 | 62 | 63 |

    LABjs tests (LABjs with preloading #13c)

    64 | 73 | 74 | image 1 75 | image 2 76 | 77 |
    78 |
    79 | 80 |
    81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-13d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #13d) 6 | 7 | 8 | 9 | 10 | 38 | 39 | 40 | 41 | 60 | 61 | 62 | 63 | 64 |

    LABjs tests (LABjs with preloading #13d)

    65 | 74 | 75 | image 1 76 | image 2 77 | 78 |
    79 |
    80 | 81 |
    82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-13e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #13e) 6 | 7 | 8 | 9 | 10 | 40 | 41 | 42 | 43 | 63 | 64 | 65 | 66 | 67 |

    LABjs tests (LABjs with preloading #13e)

    68 | 77 | 78 | image 1 79 | image 2 80 | 81 |
    82 |
    83 | 84 |
    85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-13f.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #13f) 6 | 7 | 8 | 9 | 10 | 40 | 41 | 42 | 65 | 66 | 67 | 68 | 69 |

    LABjs tests (LABjs with preloading #13f)

    70 | 79 | 80 | image 1 81 | image 2 82 | 83 |
    84 |
    85 | 86 |
    87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-13g.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #13g) 6 | 7 | 8 | 9 | 10 | 40 | 41 | 42 | 65 | 66 | 67 | 68 | 69 |

    LABjs tests (LABjs with preloading #13g)

    70 | 79 | 80 | image 1 81 | image 2 82 | 83 |
    84 |
    85 | 86 |
    87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-14a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #14a) 6 | 7 | 8 | 9 | 10 | 50 | 51 | 52 | 53 | 54 |

    LABjs tests (LABjs with preloading #14a)

    55 | 62 | 63 | image 1 64 | image 2 65 | 66 |
    67 |
    68 | 69 |
    70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-14b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #14b) 6 | 7 | 8 | 9 | 10 | 48 | 49 | 50 | 51 | 52 |

    LABjs tests (LABjs with preloading #14b)

    53 | 60 | 61 | image 1 62 | image 2 63 | 64 |
    65 |
    66 | 67 |
    68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-14c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #14c) 6 | 7 | 8 | 9 | 10 | 51 | 52 | 53 | 54 | 55 |

    LABjs tests (LABjs with preloading #14c)

    56 | 63 | 64 | image 1 65 | image 2 66 | 67 |
    68 |
    69 | 70 |
    71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-14d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #14d) 6 | 7 | 8 | 9 | 10 | 52 | 53 | 54 | 55 | 56 |

    LABjs tests (LABjs with preloading #14d)

    57 | 64 | 65 | image 1 66 | image 2 67 | 68 |
    69 |
    70 | 71 |
    72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-14e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #14e) 6 | 7 | 8 | 9 | 10 | 55 | 56 | 57 | 58 | 59 |

    LABjs tests (LABjs with preloading #14e)

    60 | 67 | 68 | image 1 69 | image 2 70 | 71 |
    72 |
    73 | 74 |
    75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-15.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #15) 6 | 7 | 43 | 44 | 45 | 46 | 47 |

    LABjs tests (LABjs with preloading #15)

    48 |

    NOTE: this test specifically exercises the `CacheBust` functionality, and thus force-disables caching

    49 | 50 | image 1 51 | image 2 52 | 53 |
    54 |
    55 | 56 |
    57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-16.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #16) 6 | 7 | 43 | 44 | 45 | 46 | 47 |

    LABjs tests (LABjs with preloading #16)

    48 |

    NOTE: this test is exercising the DEBUG console output

    49 | 50 | image 1 51 | image 2 52 | 53 |
    54 |
    55 | 56 |
    57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #2) 6 | 7 | 46 | 47 | 48 | 49 | 50 |

    LABjs tests (LABjs with preloading #2)

    51 | 52 | image 1 53 | image 2 54 | 55 |
    56 |
    57 | 58 |
    59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #3) 6 | 7 | 43 | 44 | 45 | 46 | 47 |

    LABjs tests (LABjs with preloading #3)

    48 | 49 | image 1 50 | image 2 51 | 52 |
    53 |
    54 | 55 |
    56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #4) 6 | 7 | 46 | 47 | 48 | 49 | 50 |

    LABjs tests (LABjs with preloading #4)

    51 | 52 | image 1 53 | image 2 54 | 55 |
    56 |
    57 | 58 |
    59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #5) 6 | 7 | 43 | 44 | 45 | 46 | 47 |

    LABjs tests (LABjs with preloading #5)

    48 | 49 | image 1 50 | image 2 51 | 52 |
    53 |
    54 | 55 |
    56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #6) 6 | 7 | 40 | 41 | 42 | 43 | 44 |

    LABjs tests (LABjs with preloading #6)

    45 | 46 | image 1 47 | image 2 48 | 49 |
    50 |
    51 | 52 |
    53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #7) 6 | 7 | 41 | 42 | 43 | 44 | 45 |

    LABjs tests (LABjs with preloading #7)

    46 | 47 | image 1 48 | image 2 49 | 50 |
    51 |
    52 | 53 |
    54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #8) 6 | 32 | 33 | 68 | 69 | 70 | 71 | 72 |

    LABjs tests (LABjs with preloading #8)

    73 | 74 | image 1 75 | image 2 76 | 77 |
    78 |
    79 | 80 |
    81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /js-src/vendor/LABjs/tests/test-LABjs-preloading-9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LABjs tests (LABjs with preloading #9) 6 | 7 | 44 | 45 | 46 | 47 | 48 |

    LABjs tests (LABjs with preloading #9)

    49 | 50 | image 1 51 | image 2 52 | 53 |
    54 |
    55 | 56 |
    57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /js/lab.min.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! LAB.js (LABjs :: Loading And Blocking JavaScript) 2 | v2.0.3 (c) Kyle Simpson 3 | MIT License 4 | */ 5 | -------------------------------------------------------------------------------- /js/spritemap.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eworm/template/ffebe967c8b5951342576723cff340e932378a23/js/spritemap.js -------------------------------------------------------------------------------- /mix-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "/js/spritemap.js": "/js/spritemap.js?id=d41d8cd98f00b204e9800998ecf8427e", 3 | "/images/sprite.svg": "/images/sprite.svg?id=b43146f7dfedde630c164ff8adf12b4d", 4 | "/style.css": "/style.css?id=b6f1d62fd2a4793f0bd2d5b471d49089", 5 | "/js/functions.min.js": "/js/functions.min.js?id=e36fb1459423ea6a5e3b6b1ee29196c5", 6 | "/js/lab.min.js": "/js/lab.min.js?id=0febdf95ab5cbbd9dd65ae4908a91b5f" 7 | } 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "HTML-template", 3 | "version": "1.0.0", 4 | "private": true, 5 | "description": "blabla", 6 | "homepage": "https://www.woutmager.nl", 7 | "scripts": { 8 | "dev": "npm run development", 9 | "development": "mix", 10 | "prod": "mix --production", 11 | "watch": "mix watch" 12 | }, 13 | "devDependencies": { 14 | "laravel-mix": "^6.0.48", 15 | "sass": "^1.49.9", 16 | "sass-loader": "^12.6.0", 17 | "svg-spritemap-webpack-plugin": "^4.4.0" 18 | }, 19 | "main": "index.js", 20 | "repository": "git@github.com:Eworm/template.git", 21 | "author": "Wout ", 22 | "license": "MIT", 23 | "dependencies": { 24 | "easy-autocomplete": "^1.3.5", 25 | "modern-normalize": "^2.0.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | // Some styles for better font rendering 2 | *, 3 | *:before, 4 | *:after { 5 | box-sizing: border-box; 6 | -moz-osx-font-smoothing: grayscale; 7 | -webkit-font-smoothing: antialiased; 8 | -webkit-tap-highlight-color: rgba(#000, 0); 9 | text-rendering: auto; 10 | } 11 | 12 | // Not setting the font-size defaults to 16px 13 | html { 14 | } 15 | 16 | body { 17 | // Always good to define a background color on the body 18 | background: $body-bg; 19 | font: #{$fs-def}/#{$lh} #{$ff--def}; 20 | color: $body; 21 | } 22 | 23 | 24 | // General links 25 | a { 26 | color: $link; 27 | text-decoration: underline; 28 | text-decoration-skip: auto; 29 | 30 | &:hover, 31 | &:focus { 32 | text-decoration: none; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /sass/layout/_doormat.scss: -------------------------------------------------------------------------------- 1 | // The site doormat 2 | .l-doormat { 3 | padding-top: pt(2); 4 | padding-bottom: pt(2); 5 | border-top: 1px solid $border; 6 | } 7 | -------------------------------------------------------------------------------- /sass/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | // The site footer 2 | .l-footer { 3 | padding-top: pt(2); 4 | padding-bottom: pt(2); 5 | border-top: 1px solid $border; 6 | } 7 | -------------------------------------------------------------------------------- /sass/layout/_header.scss: -------------------------------------------------------------------------------- 1 | // Site header 2 | .l-header { 3 | padding-top: pt(2); 4 | padding-bottom: pt(2); 5 | border-bottom: 1px solid $border; 6 | 7 | @media (min-width: $mq--lap) { 8 | background: $body-bg; 9 | } 10 | } 11 | 12 | 13 | // Site logo 14 | .logo { 15 | width: 40px; 16 | height: 40px; 17 | display: block; 18 | 19 | @media (min-width: $mq--palm) { 20 | } 21 | 22 | @media (min-width: $mq--lap) { 23 | } 24 | 25 | &__img { 26 | width: 100%; 27 | height: 100%; 28 | } 29 | } 30 | 31 | 32 | // Customer promise 33 | .cp { 34 | display: none; 35 | 36 | @media (min-width: $mq--lap) { 37 | margin: 0; 38 | display: block; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /sass/layout/_main.scss: -------------------------------------------------------------------------------- 1 | // Main content on a page 2 | .l-main { 3 | padding-top: pt(2); 4 | padding-bottom: pt(2); 5 | 6 | @media (min-width: $mq--lap) { 7 | padding-top: pt(4); 8 | padding-bottom: pt(4); 9 | } 10 | } 11 | 12 | .main { 13 | margin-bottom: pt(2); 14 | 15 | @media (min-width: $mq--lap) { 16 | } 17 | 18 | // Page title 19 | &__header { 20 | margin: 0 0 pt(2); 21 | font-weight: normal; 22 | font-size: $h1; 23 | 24 | @media (min-width: $mq--lap) { 25 | margin-bottom: pt(4); 26 | } 27 | } 28 | 29 | // The content 30 | &__content { 31 | 32 | > h2, 33 | > h3, 34 | > h4, 35 | > h5 { 36 | 37 | a { 38 | text-decoration: none; 39 | 40 | &:hover, 41 | &:focus { 42 | text-decoration: underline; 43 | } 44 | } 45 | } 46 | 47 | > h2 { 48 | margin: 0 0 pt(2); 49 | font-size: $h2; 50 | } 51 | 52 | > h3 { 53 | margin: 0 0 pt(1); 54 | font-size: $h3; 55 | } 56 | 57 | > h4 { 58 | margin: 0 0 pt(1); 59 | font-size: $h4; 60 | } 61 | 62 | > h5 { 63 | margin: 0 0 pt(1); 64 | font-size: $fs-def; 65 | } 66 | 67 | > p, 68 | > ol 69 | > table 70 | > ul { 71 | margin: 0 0 pt(2); 72 | 73 | @media (min-width: $mq--lap) { 74 | margin-bottom: pt(4); 75 | } 76 | 77 | &:last-child { 78 | margin-bottom: 0; 79 | } 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /sass/modules/_aside.scss: -------------------------------------------------------------------------------- 1 | .aside { 2 | 3 | @media (min-width: $mq--lap) { 4 | position: sticky; 5 | top: 0; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /sass/modules/_aside__section.scss: -------------------------------------------------------------------------------- 1 | // Section in a sidebar 2 | .aside__section { 3 | width: 100%; 4 | margin-bottom: pt(2); 5 | padding: pt(2); 6 | border: 1px solid $border; 7 | word-break: break-word; 8 | 9 | @media (min-width: $mq--lap) { 10 | margin-bottom: pt(4); 11 | padding: pt(2); 12 | } 13 | 14 | &:last-child { 15 | } 16 | 17 | img { 18 | margin-bottom: pt(2); 19 | border-radius: 0; 20 | } 21 | 22 | ul, ol { 23 | margin: 0; 24 | padding: 0; 25 | list-style-type: none; 26 | } 27 | 28 | a { 29 | text-decoration: none; 30 | 31 | &:hover, 32 | &:focus { 33 | text-decoration: underline; 34 | } 35 | } 36 | 37 | iframe { 38 | } 39 | 40 | 41 | // Sidebar section title 42 | &__header { 43 | margin: 0 0 pt(1); 44 | font-weight: bold; 45 | font-size: $fs-def; 46 | 47 | @media (min-width: $mq--lap) { 48 | } 49 | 50 | a { 51 | text-decoration: none; 52 | 53 | &:hover, 54 | &:focus { 55 | text-decoration: underline; 56 | } 57 | } 58 | } 59 | } 60 | 61 | 62 | // Nav feedback 63 | .current-cat { 64 | font-weight: bold; 65 | } 66 | -------------------------------------------------------------------------------- /sass/modules/_breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | // These styles are for custom breadcrumbs 2 | .breadcrumbs { 3 | width: 100%; 4 | margin: 0 0 pt(4); 5 | padding: 0; 6 | list-style-type: none; 7 | 8 | > li { 9 | } 10 | 11 | a { 12 | margin-right: pt(4); 13 | padding-right: pt(4); 14 | position: relative; 15 | display: block; 16 | text-decoration: none; 17 | transition: all .15s ease; 18 | 19 | @media (min-width: $mq--lap) { 20 | margin-right: pt(2); 21 | padding-right: pt(2); 22 | } 23 | 24 | &:hover, 25 | &:focus { 26 | color: $body; 27 | text-decoration: underline; 28 | } 29 | 30 | &:after { 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /sass/modules/_buttons.scss: -------------------------------------------------------------------------------- 1 | // A button 2 | .btn { 3 | width: 100%; 4 | display: inline-block; 5 | text-align: center; 6 | text-decoration: none; 7 | cursor: pointer; 8 | 9 | @media (min-width: $mq--lap) { 10 | width: auto; 11 | } 12 | 13 | &:hover, 14 | &:focus { 15 | } 16 | 17 | &--primary { 18 | @extend %btn-primary; 19 | } 20 | 21 | &--secondary { 22 | 23 | } 24 | 25 | &--block { 26 | width: 100%; 27 | padding-right: pt(1); 28 | padding-left: pt(1); 29 | display: block; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /sass/modules/_comments.scss: -------------------------------------------------------------------------------- 1 | // Container for comments 2 | .comments-area { 3 | margin-top: pt(4); 4 | 5 | ol { 6 | margin: 0; 7 | padding: 0; 8 | list-style-type: none; 9 | 10 | ol { 11 | margin-top: pt(2); 12 | } 13 | } 14 | } 15 | 16 | #reply-title { 17 | margin: 0 0 pt(4); 18 | } 19 | 20 | 21 | // A comment, trackback, pingback or response 22 | .comment, 23 | .trackback, 24 | .pingback, 25 | #respond { 26 | width: 100%; 27 | padding: pt(2) 0; 28 | position: relative; 29 | border-bottom: 2px solid $border; 30 | background: transparent; 31 | 32 | .children .comment.depth-2 { 33 | margin-bottom: pt(4); 34 | 35 | &:last-child { 36 | margin: 0; 37 | } 38 | } 39 | 40 | @media (min-width: $mq--lap) { 41 | margin: 0 0 pt(2); 42 | padding: pt(4); 43 | border: 1px solid $border; 44 | } 45 | } 46 | 47 | #respond { 48 | margin-bottom: 0; 49 | } 50 | 51 | .fn { 52 | font-style: normal; 53 | 54 | a { 55 | color: $mute--hover; 56 | text-decoration: none; 57 | 58 | &:hover, 59 | &:focus { 60 | text-decoration: underline; 61 | } 62 | } 63 | } 64 | 65 | 66 | // The comment body 67 | .comment__body { 68 | word-break: break-word; 69 | } 70 | 71 | 72 | // The author name 73 | .comment__author { 74 | width: 100%; 75 | font-weight: bold; 76 | line-height: 32px; 77 | 78 | @media (min-width: $mq--lap) { 79 | margin-bottom: pt(4); 80 | font-weight: normal; 81 | } 82 | } 83 | 84 | 85 | // The avatar 86 | .avatar { 87 | width: auto; 88 | height: auto; 89 | float: right; 90 | border-radius: 0; 91 | box-shadow: $shadow; 92 | 93 | @media (min-width: $mq--lap) { 94 | margin-right: pt(2); 95 | float: none; 96 | vertical-align: top; 97 | } 98 | } 99 | 100 | 101 | // Text 102 | .says { 103 | 104 | } 105 | 106 | 107 | // Comment meta info 108 | .comment__meta { 109 | font-size: $fs-meta; 110 | 111 | @media (min-width: $mq--lap) { 112 | padding-top: 20px; 113 | position: absolute; 114 | top: 0; 115 | right: pt(4); 116 | line-height: 32px; 117 | } 118 | 119 | a { 120 | color: $mute; 121 | text-decoration: none; 122 | 123 | &:hover, 124 | &:focus { 125 | color: $mute--hover; 126 | } 127 | } 128 | } 129 | 130 | .reply { 131 | 132 | } 133 | 134 | 135 | // The nr. of responses 136 | .comments-area__header { 137 | margin: 0 0 pt(4); 138 | } 139 | 140 | .comments-area__list { 141 | 142 | } 143 | 144 | .comment__author__admin, 145 | .bypostauthor { 146 | } 147 | 148 | 149 | // Replies 150 | .children { 151 | margin-bottom: 0; 152 | padding: 0; 153 | list-style-type: none; 154 | 155 | .comment { 156 | margin: 0; 157 | padding: pt(2) 0 0 pt(2); 158 | border-top: 1px solid $border; 159 | border-bottom: 0; 160 | 161 | @media (min-width: $mq--lap) { 162 | padding: pt(2); 163 | border-bottom: 1px solid $border; 164 | } 165 | } 166 | } 167 | 168 | 169 | // Link for replying 170 | .comment__reply__link { 171 | text-decoration: none; 172 | 173 | &:hover, 174 | &:focus { 175 | text-decoration: underline; 176 | } 177 | } 178 | 179 | 180 | // Text 181 | .logged-in-as { 182 | 183 | } 184 | 185 | .form__submit { 186 | @extend %formrow; 187 | margin: 0; 188 | } 189 | 190 | 191 | // 192 | .comment-form { 193 | 194 | p { 195 | margin-top: 0; 196 | margin-bottom: pt(2); 197 | } 198 | } 199 | -------------------------------------------------------------------------------- /sass/modules/_forms.scss: -------------------------------------------------------------------------------- 1 | // Input sizes 2 | input, 3 | textarea { 4 | width: 100%; 5 | padding: pt(1); 6 | font-size: $fs-def; 7 | font-family: $ff--def; 8 | } 9 | 10 | textarea { 11 | height: pt(12); 12 | } 13 | 14 | input[type="file"] { 15 | padding: 0; 16 | } 17 | 18 | input[type="checkbox"], 19 | input[type="radio"] { 20 | width: auto; 21 | } 22 | 23 | input[type="submit"] { 24 | 25 | @media (min-width: $mq--lap) { 26 | width: auto; 27 | } 28 | } 29 | 30 | input[type="search"] { 31 | box-sizing: border-box; 32 | } 33 | 34 | fieldset { 35 | margin: 0; 36 | padding: 0; 37 | border: 0; 38 | } 39 | 40 | 41 | // The form 42 | .main form { 43 | } 44 | 45 | .formcontainer { 46 | margin: 0; 47 | padding: 0; 48 | clear: both; 49 | border: 0; 50 | 51 | @media (min-width: $mq--lap) { 52 | width: 100%; 53 | } 54 | } 55 | 56 | 57 | // A single row 58 | .form-row { 59 | @extend %formrow; 60 | 61 | // Form field explanation. Using a small element is preferrable 62 | .input-exp { 63 | display: block; 64 | font-size: $fs-meta; 65 | } 66 | } 67 | 68 | 69 | // All labels or add a class to other elements 70 | label, 71 | .label { 72 | width: 100%; 73 | display: block; 74 | clear: both; 75 | cursor: pointer; 76 | 77 | small { 78 | font-size: 100%; 79 | } 80 | } 81 | 82 | 83 | // Label with a radio or checkbox 84 | // Parent should be a fieldset with a legend 85 | .choice { 86 | display: flex; 87 | align-items: baseline; 88 | justify-content: flex-start; 89 | position: relative; 90 | 91 | > input { 92 | margin-right: pt(1); 93 | flex-shrink: 0; 94 | } 95 | } 96 | 97 | 98 | // Other elements 99 | #screenreader, 100 | #loading { 101 | display: none; 102 | } 103 | 104 | 105 | // Required style 106 | .req { 107 | font-size: $fs-def; 108 | color: $mute; 109 | } 110 | 111 | 112 | // Error messages 113 | .parsley-error { 114 | 115 | &-list { 116 | display: none; 117 | } 118 | } 119 | 120 | .error, 121 | .filled { 122 | margin: 0; 123 | padding: 0; 124 | display: block; 125 | color: $error; 126 | 127 | > li { 128 | margin: 0; 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /sass/modules/_header-image.scss: -------------------------------------------------------------------------------- 1 | // Custom WP header image 2 | .header-image { 3 | margin-bottom: pt(4); 4 | border-radius: 0; 5 | 6 | @media (min-width: $mq--lap) { 7 | width: 100%; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /sass/modules/_helpers.scss: -------------------------------------------------------------------------------- 1 | // Text align helpers 2 | .text { 3 | 4 | &--center { 5 | text-align: center; 6 | } 7 | 8 | &--right { 9 | text-align: right; 10 | } 11 | } 12 | 13 | // Responsive images 14 | .img-responsive { 15 | height: auto; 16 | max-width: 100%; 17 | } 18 | 19 | 20 | // Display helpers 21 | .is { 22 | 23 | &--hidden { 24 | @include screenreader--hide(); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /sass/modules/_images.scss: -------------------------------------------------------------------------------- 1 | // WP image align classes 2 | .alignnone { 3 | @extend %postimage; 4 | 5 | @media (min-width: $mq--palm) { 6 | width: auto; 7 | max-width: 100%; 8 | margin: pt(4) pt(4) pt(4) 0; 9 | } 10 | } 11 | 12 | .aligncenter, 13 | div.aligncenter { 14 | @extend %postimage; 15 | 16 | @media (min-width: $mq--palm) { 17 | margin: pt(4) auto; 18 | display: block; 19 | } 20 | } 21 | 22 | .alignright { 23 | @extend %postimage; 24 | 25 | @media (min-width: $mq--palm) { 26 | width: auto; 27 | margin: 0 0 pt(4) pt(4); 28 | float: right; 29 | } 30 | } 31 | 32 | .alignleft { 33 | @extend %postimage; 34 | 35 | @media (min-width: $mq--palm) { 36 | width: auto; 37 | margin: 0 pt(4) pt(4) 0; 38 | float: left; 39 | } 40 | } 41 | 42 | a img { 43 | @extend %postimage; 44 | 45 | &.alignright { 46 | 47 | @media (min-width: $mq--palm) { 48 | width: auto; 49 | margin: pt(4) 0 pt(4) pt(4); 50 | float: right; 51 | } 52 | } 53 | 54 | &.alignnone { 55 | 56 | @media (min-width: $mq--palm) { 57 | width: auto; 58 | margin: pt(4) pt(4) pt(4) 0; 59 | } 60 | } 61 | 62 | &.alignleft { 63 | 64 | @media (min-width: $mq--palm) { 65 | width: auto; 66 | margin: pt(4) pt(4) pt(4) 0; 67 | float: left; 68 | } 69 | } 70 | 71 | &.aligncenter { 72 | 73 | @media (min-width: $mq--palm) { 74 | margin-right: auto; 75 | margin-left: auto; 76 | display: block; 77 | } 78 | } 79 | } 80 | 81 | 82 | // WP images with a caption 83 | .wp-caption { 84 | @extend %postimage; 85 | margin: pt(2) 0; 86 | padding: pt(2); 87 | border: 1px solid $border; 88 | border-radius: 0; 89 | background: $color--white; 90 | text-align: center; 91 | 92 | img { 93 | width: 100%; 94 | height: auto; 95 | max-width: 100%; 96 | margin: 0 0 pt(2); 97 | padding: 0; 98 | display: block; 99 | border: 0 none; 100 | 101 | @media (min-width: $mq--palm) { 102 | max-width: auto; 103 | } 104 | } 105 | 106 | @media (min-width: $mq--palm) { 107 | width: auto; 108 | max-width: none; 109 | } 110 | 111 | p.wp-caption-text { 112 | margin: pt(2) 0 0; 113 | display: block; 114 | font-size: $fs-meta; 115 | } 116 | 117 | 118 | &.alignnone { 119 | 120 | @media (min-width: $mq--palm) { 121 | width: auto !important; 122 | max-width: 100% !important; 123 | margin: pt(4) 0; 124 | } 125 | } 126 | 127 | &.alignleft { 128 | 129 | @media (min-width: $mq--palm) { 130 | margin: 0 pt(4) pt(4) 0; 131 | } 132 | } 133 | 134 | &.alignright { 135 | 136 | @media (min-width: $mq--palm) { 137 | margin: 0 0 pt(4) pt(4); 138 | } 139 | } 140 | } 141 | 142 | 143 | // A post thumbnail 144 | .post-thumbnail { 145 | @extend %postimage; 146 | 147 | @media (min-width: $mq--palm) { 148 | width: auto; 149 | margin: pt(4) 0; 150 | } 151 | 152 | @media (min-width: $mq--palm) { 153 | margin: 0 0 pt(4) pt(4); 154 | float: right; 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /sass/modules/_mainmenu.scss: -------------------------------------------------------------------------------- 1 | // The menu 2 | .mainmenu { 3 | 4 | @media (min-width: $mq--palm) { 5 | } 6 | 7 | @media (min-width: $mq--lap) { 8 | width: 100%; 9 | height: auto; 10 | } 11 | } 12 | 13 | 14 | // Unordered list 15 | .main-menu { 16 | width: 100%; 17 | margin: 0; 18 | padding: 0; 19 | display: block; 20 | overflow-x: auto; 21 | background: $nav-bg; 22 | list-style-type: none; 23 | white-space: nowrap; 24 | -webkit-overflow-scrolling: touch; 25 | 26 | @media (min-width: $mq--lap) { 27 | border-top: 0; 28 | } 29 | } 30 | 31 | 32 | // A single item 33 | .menu-item { 34 | position: relative; 35 | display: inline-block; 36 | 37 | .nav-drop { 38 | } 39 | 40 | @media (min-width: $mq--lap) { 41 | position: relative; 42 | } 43 | 44 | > a { 45 | padding: pt(2); 46 | display: inline-block; 47 | text-decoration: none; 48 | transition: all .15s ease-out; 49 | 50 | @media (min-width: $mq--palm) { 51 | } 52 | 53 | @media (min-width: $mq--lap) { 54 | padding: pt(2) pt(4); 55 | position: relative; 56 | } 57 | 58 | &:hover, 59 | &:focus { 60 | background: $border; 61 | 62 | @media (min-width: $mq--lap) { 63 | } 64 | 65 | + .nav-drop { 66 | opacity: 1; 67 | z-index: 300; 68 | pointer-events: all; 69 | top: 100%; 70 | } 71 | } 72 | } 73 | 74 | &:hover, 75 | &:focus, 76 | &:focus-within { 77 | 78 | .nav-drop { 79 | opacity: 1; 80 | z-index: 300; 81 | pointer-events: all; 82 | top: 100%; 83 | } 84 | } 85 | } 86 | 87 | 88 | // Nav feedback 89 | .current_page_item, 90 | .current-menu-item, 91 | .current-page-ancestor, 92 | .current_page_parent { 93 | 94 | a { 95 | background: $mute; 96 | } 97 | 98 | @media (min-width: $mq--lap) { 99 | } 100 | } 101 | 102 | 103 | // The current item 104 | .current_page_item { 105 | 106 | a { 107 | 108 | &:after { 109 | 110 | } 111 | } 112 | 113 | @media (min-width: $mq--lap) { 114 | 115 | &:after { 116 | } 117 | } 118 | } 119 | 120 | .current_page_ancestor { 121 | 122 | @media (min-width: $mq--lap) { 123 | 124 | a { 125 | } 126 | } 127 | } 128 | 129 | 130 | // The nav-drop 131 | .nav-drop { 132 | min-width: 200px; 133 | width: 100%; 134 | margin: 0; 135 | padding: 0; 136 | list-style: none; 137 | position: relative; 138 | transition: all .25s ease; 139 | 140 | @media (max-width: $mq--lap) { 141 | margin-bottom: pt(1); 142 | } 143 | 144 | @media (min-width: $mq--lap) { 145 | width: auto; 146 | padding-top: pt(.5); 147 | position: absolute; 148 | top: calc(100% + #{pt(1)}); 149 | left: pt(1); 150 | background: $color--white; 151 | opacity: 0; 152 | z-index: -1; 153 | pointer-events: none; 154 | box-shadow: rgba($color--black, .14) 0 0 4px; 155 | } 156 | 157 | .nav-drop-item { 158 | width: 100%; 159 | display: block; 160 | 161 | @media (max-width: $mq--lap) { 162 | padding-left: pt(2); 163 | } 164 | 165 | a { 166 | width: 100%; 167 | padding: pt(.5) pt(1); 168 | display: block; 169 | 170 | @media (min-width: $mq--lap) { 171 | padding: pt(.75) pt(1.75); 172 | color: $body; 173 | white-space: nowrap; 174 | background: $color--white; 175 | } 176 | 177 | &:hover, 178 | &:focus { 179 | color: $link 180 | } 181 | 182 | &:after { 183 | display: none; 184 | } 185 | } 186 | 187 | &:last-child { 188 | 189 | a { 190 | 191 | @media (min-width: $mq--lap) { 192 | border: 0; 193 | } 194 | } 195 | } 196 | } 197 | } 198 | -------------------------------------------------------------------------------- /sass/modules/_pagemenu.scss: -------------------------------------------------------------------------------- 1 | // The menu holding siblings on a page 2 | .pagemenu { 3 | 4 | @media (min-width: $mq--lap) { 5 | margin-bottom: pt(4); 6 | display: block; 7 | clear: none; 8 | border: 1px solid $border; 9 | } 10 | 11 | ul { 12 | width: 100%; 13 | margin: 0; 14 | padding: 0; 15 | display: inline-block; 16 | border: 1px solid $border; 17 | 18 | @media (min-width: $mq--lap) { 19 | border: 0; 20 | } 21 | } 22 | 23 | li { 24 | width: 100%; 25 | margin: 0; 26 | padding: 0; 27 | display: block; 28 | background: transparent; 29 | 30 | @media (min-width: $mq--lap) { 31 | margin-bottom: 0; 32 | } 33 | 34 | &:last-child { 35 | 36 | a { 37 | border: 0; 38 | } 39 | } 40 | } 41 | 42 | a { 43 | padding: pt(2); 44 | display: block; 45 | 46 | @media (min-width: $mq--lap) { 47 | border-bottom: 1px solid $border; 48 | background: transparent; 49 | } 50 | 51 | &:hover, 52 | &:focus { 53 | background: $border; 54 | } 55 | } 56 | 57 | .current_page_item { 58 | 59 | a { 60 | background: $border; 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /sass/modules/_paging.scss: -------------------------------------------------------------------------------- 1 | // Unordered list 2 | .paging { 3 | margin: 0; 4 | padding: 0; 5 | list-style-type: none; 6 | 7 | > li { 8 | 9 | > a { 10 | margin-right: pt(1); 11 | padding: pt(1) pt(2); 12 | display: block; 13 | border: 1px solid $border; 14 | color: $body; 15 | text-decoration: none; 16 | 17 | &:hover, 18 | &:focus { 19 | background: $border; 20 | } 21 | } 22 | 23 | > span { 24 | margin-right: pt(1); 25 | padding: pt(1) pt(2); 26 | display: block; 27 | border: 1px solid transparent; 28 | color: $body; 29 | text-decoration: none; 30 | } 31 | } 32 | 33 | 34 | // Next & prev 35 | &__navigation { 36 | 37 | &--prev { 38 | } 39 | 40 | &--next { 41 | } 42 | } 43 | 44 | 45 | // A list item 46 | &__number { 47 | display: none; 48 | 49 | @media (min-width: $mq--lap) { 50 | display: block; 51 | } 52 | 53 | &--active { 54 | 55 | > a { 56 | background: $border; 57 | } 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /sass/modules/_post.scss: -------------------------------------------------------------------------------- 1 | // Single post 2 | .post { 3 | @extend %post; 4 | 5 | 6 | // Post title 7 | &__header { 8 | margin: 0; 9 | word-break: break-word; 10 | 11 | a { 12 | text-decoration: none; 13 | 14 | &:hover, 15 | &:focus { 16 | text-decoration: underline; 17 | } 18 | } 19 | } 20 | 21 | .single-post__header { 22 | margin-bottom: pt(4); 23 | } 24 | 25 | 26 | // Post content 27 | &__entry { 28 | word-break: break-word; 29 | } 30 | 31 | 32 | // Blog nav 33 | &-nav { 34 | text-align: center; 35 | 36 | @media (min-width: $mq--lap) { 37 | text-align: left; 38 | } 39 | } 40 | 41 | 42 | // Post meta 43 | &__meta { 44 | color: $mute; 45 | 46 | .single-post & { 47 | margin-top: pt(1) 48 | } 49 | 50 | a { 51 | color: $mute; 52 | text-decoration: none; 53 | 54 | &:hover, 55 | &:focus { 56 | color: $mute--hover; 57 | text-decoration: underline; 58 | } 59 | } 60 | } 61 | 62 | 63 | // Continue reading & nr. of comments 64 | &__options { 65 | 66 | a { 67 | text-decoration: none; 68 | 69 | &:hover, 70 | &:focus { 71 | text-decoration: underline; 72 | } 73 | } 74 | } 75 | } 76 | 77 | .type-attachment { 78 | @extend %post; 79 | } 80 | 81 | // Sticky post 82 | .sticky { 83 | } 84 | -------------------------------------------------------------------------------- /sass/modules/_print.scss: -------------------------------------------------------------------------------- 1 | // Simple print stylesheet 2 | 3 | @media print { 4 | 5 | * { 6 | background: transparent !important; 7 | // Black prints faster: h5bp.com/s 8 | color: $color--black !important; 9 | text-shadow: none !important; 10 | filter: none !important; 11 | } 12 | 13 | a, 14 | a:visited { 15 | text-decoration: underline; 16 | } 17 | 18 | a[href]:after { 19 | content: ' (' attr(href) ')'; 20 | } 21 | 22 | abbr[title]:after { 23 | content: ' (' attr(title) ')'; 24 | } 25 | 26 | // Don't show links for images, or javascript/internal links 27 | .ir a:after, 28 | a[href^='javascript:']:after, 29 | a[href^='#']:after { 30 | content: ''; 31 | } 32 | 33 | pre, 34 | blockquote { 35 | page-break-inside: avoid; 36 | } 37 | 38 | // h5bp.com/t 39 | thead { 40 | display: table-header-group; 41 | } 42 | 43 | tr, 44 | img { 45 | page-break-inside: avoid; 46 | } 47 | 48 | img { 49 | max-width: 100% !important; 50 | }; 51 | 52 | @page { 53 | margin: 2cm; 54 | } 55 | 56 | p, 57 | h2, 58 | h3 { 59 | orphans: 3; 60 | widows: 3; 61 | } 62 | 63 | h2, 64 | h3 { 65 | page-break-after: avoid; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /sass/modules/_search-form.scss: -------------------------------------------------------------------------------- 1 | // The form 2 | .searchform { 3 | width: 100%; 4 | padding: pt(2); 5 | position: relative; 6 | display: none; 7 | clear: both; 8 | 9 | 10 | // Search form fieldset 11 | &__container { 12 | margin: 0; 13 | padding: 0; 14 | line-height: 40px; 15 | } 16 | 17 | 18 | // Hiding the label, but not for screenreaders 19 | &__container__label { 20 | @include screenreader--hide; 21 | } 22 | 23 | 24 | // When in header 25 | .l-header & { 26 | 27 | @media (min-width: $mq--lap) { 28 | width: 30%; 29 | padding: 0; 30 | display: block; 31 | clear: none; 32 | background: transparent; 33 | text-align: left; 34 | } 35 | 36 | 37 | // The search input 38 | .searchform__container__field { 39 | width: 100%; 40 | clear: both; 41 | 42 | @media (min-width: $mq--lap) { 43 | width: 70%; 44 | } 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /sass/modules/_search-results.scss: -------------------------------------------------------------------------------- 1 | // Single search result 2 | .search-result { 3 | @extend %post; 4 | 5 | 6 | // Result title 7 | &__header { 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /sass/modules/_symbols.scss: -------------------------------------------------------------------------------- 1 | // Inline symbol sprite 2 | .symbols { 3 | width: 1px; 4 | height: 1px; 5 | position: absolute; 6 | z-index: -1; 7 | visibility: hidden; 8 | overflow: hidden; 9 | } 10 | -------------------------------------------------------------------------------- /sass/modules/_tables.scss: -------------------------------------------------------------------------------- 1 | // Regular table 2 | .table { 3 | width: 100%; 4 | margin: pt(4) 0; 5 | border: 1px solid $border; 6 | border-spacing: 0; 7 | 8 | tr { 9 | 10 | &:last-child { 11 | 12 | th, 13 | td { 14 | border-bottom: 0; 15 | } 16 | } 17 | } 18 | 19 | th, 20 | td { 21 | padding: pt(1); 22 | border-bottom: 1px solid $border; 23 | text-align: left; 24 | vertical-align: top; 25 | } 26 | 27 | th { 28 | background-color: $border; 29 | } 30 | 31 | 32 | 33 | // Responsive table 34 | &--responsive { 35 | position: relative; 36 | display: block; 37 | clear: both; 38 | border: 0; 39 | border-spacing: 0; 40 | border-collapse: collapse; 41 | 42 | @media (min-width: $mq--lap) { 43 | display: table; 44 | } 45 | 46 | thead { 47 | display: block; 48 | border: 1px solid $border; 49 | vertical-align: middle; 50 | 51 | @media (min-width: $mq--lap) { 52 | display: table-header-group; 53 | float: none; 54 | } 55 | 56 | tr { 57 | display: block; 58 | 59 | @media (min-width: $mq--lap) { 60 | display: table-row; 61 | border-right: 0; 62 | } 63 | } 64 | 65 | th { 66 | display: block; 67 | border-bottom: 1px solid $border; 68 | 69 | @media (min-width: $mq--lap) { 70 | display: table-cell; 71 | } 72 | 73 | &:last-child { 74 | border-bottom: 0; 75 | 76 | @media (min-width: $mq--lap) { 77 | border-bottom: 1px solid $border; 78 | } 79 | } 80 | } 81 | } 82 | 83 | tbody { 84 | width: auto; 85 | position: relative; 86 | display: block; 87 | overflow-x: auto; 88 | font-size: 0; 89 | white-space: nowrap; 90 | word-wrap: normal; 91 | 92 | @media (min-width: $mq--lap) { 93 | display: table-row-group; 94 | overflow: visible; 95 | border: 1px solid $border; 96 | font-size: $fs-def; 97 | white-space: normal; 98 | word-wrap: break-word; 99 | } 100 | } 101 | 102 | tr { 103 | display: inline-block; 104 | border: 1px solid $border; 105 | border-left: 0; 106 | font-size: $fs-def; 107 | vertical-align: top; 108 | 109 | @media (min-width: $mq--lap) { 110 | margin: 0; 111 | display: table-row; 112 | border-right: 0; 113 | } 114 | 115 | th, 116 | td { 117 | display: block; 118 | border-bottom: 1px solid $border; 119 | 120 | @media (min-width: $mq--lap) { 121 | display: table-cell; 122 | } 123 | 124 | &:last-child { 125 | border-bottom: 0; 126 | 127 | @media (min-width: $mq--lap) { 128 | border-bottom: 1px solid $border; 129 | } 130 | } 131 | } 132 | } 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /sass/modules/_video-wrapper.scss: -------------------------------------------------------------------------------- 1 | // Wrap a youtube iframe in a div with this class for a responsive iframe 2 | .video-wrapper { 3 | height: 0; 4 | padding-bottom: 56.25%; 5 | position: relative; 6 | 7 | iframe { 8 | width: 100%; 9 | height: 100%; 10 | max-height: 100vh; 11 | position: absolute; 12 | top: 0; 13 | left: 0; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sass/modules/_woocommerce-cart.scss: -------------------------------------------------------------------------------- 1 | // The cart table 2 | .cart { 3 | width: 100%; 4 | 5 | tr { 6 | 7 | th, 8 | td { 9 | padding: pt(1) pt(2); 10 | 11 | &:first-child { 12 | padding-left: 0; 13 | } 14 | 15 | &:last-child { 16 | padding-right: 0; 17 | } 18 | } 19 | } 20 | 21 | tbody { 22 | 23 | tr { 24 | 25 | &:first-child { 26 | 27 | td { 28 | padding-top: pt(3) 29 | } 30 | } 31 | } 32 | } 33 | 34 | th { 35 | text-align: left; 36 | font-weight: normal; 37 | font-size: pt(3); 38 | 39 | &.text--right { 40 | text-align: right; 41 | } 42 | } 43 | 44 | td { 45 | vertical-align: top; 46 | text-align: left; 47 | 48 | &.text--right { 49 | text-align: right; 50 | } 51 | } 52 | 53 | img { 54 | max-width: pt(16); 55 | height: pt(16); 56 | margin: 0; 57 | object-fit: cover; 58 | } 59 | 60 | .quantity { 61 | 62 | .screen-reader-text { 63 | @include screenreader--hide() 64 | } 65 | } 66 | 67 | .qty { 68 | width: pt(10); 69 | margin-bottom: pt(1); 70 | } 71 | 72 | .cart-action { 73 | margin: 0; 74 | padding: 0; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /sass/modules/_woocommerce-checkout.scss: -------------------------------------------------------------------------------- 1 | // Checkout page 2 | .woocommerce-checkout { 3 | 4 | .col-1, 5 | .col-2 { 6 | } 7 | 8 | h3 { 9 | 10 | } 11 | 12 | label { 13 | } 14 | 15 | .required { 16 | } 17 | } 18 | 19 | // Products table 20 | .shop_table { 21 | 22 | thead { 23 | } 24 | } 25 | 26 | .place-order { 27 | margin-bottom: 0; 28 | } 29 | 30 | .woocommerce-terms-and-conditions-wrapper { 31 | margin-bottom: pt(2); 32 | } 33 | 34 | .woocommerce-checkout-review-order-table { 35 | 36 | tbody, 37 | tfoot { 38 | 39 | tr { 40 | 41 | td { 42 | 43 | &:nth-child(2) { 44 | text-align: right; 45 | } 46 | } 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /sass/modules/_woocommerce-product-excerpt.scss: -------------------------------------------------------------------------------- 1 | // Container holding all product excerpts 2 | .products-container { 3 | } 4 | 5 | // A single product excerpt 6 | .product-excerpt { 7 | 8 | .price { 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /sass/modules/_woocommerce-product.scss: -------------------------------------------------------------------------------- 1 | .single-product-details { 2 | 3 | 4 | &__images { 5 | 6 | img { 7 | width: 100%; 8 | height: auto; 9 | } 10 | } 11 | 12 | &__summary { 13 | 14 | .product_title { 15 | } 16 | 17 | .price { 18 | } 19 | 20 | .stock { 21 | margin: 0; 22 | padding: pt(.25) pt(1); 23 | display: inline-block; 24 | 25 | &.out-of-stock { 26 | color: $alert; 27 | text-transform: uppercase; 28 | font-size: pt(3); 29 | vertical-align: sub; 30 | } 31 | } 32 | 33 | // Cart form 34 | .cart { 35 | margin-top: pt(4); 36 | display: flex; 37 | 38 | .quantity { 39 | } 40 | 41 | .qty { 42 | height: 100%; 43 | text-align: center; 44 | } 45 | 46 | input { 47 | 48 | } 49 | 50 | button { 51 | @extend %btn-primary; 52 | } 53 | } 54 | 55 | .product_meta { 56 | display: none; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /sass/modules/_woocommerce-thankyou.scss: -------------------------------------------------------------------------------- 1 | // Thank you - order details 2 | .woocommerce-order-details { 3 | 4 | &__title { 5 | margin: 0 0 pt(2); 6 | padding-bottom: pt(1); 7 | font-size: pt(3); 8 | border-bottom: 1px solid; 9 | } 10 | 11 | .shop_table { 12 | 13 | th { 14 | text-align: left; 15 | } 16 | 17 | tfoot { 18 | 19 | } 20 | } 21 | } 22 | 23 | // Thank you - order overview 24 | .woocommerce-order-overview { 25 | 26 | &__title { 27 | margin: 0 0 pt(2); 28 | padding-bottom: pt(1); 29 | font-size: pt(3); 30 | border-bottom: 1px solid; 31 | } 32 | } 33 | 34 | // Thank you - customer details 35 | .woocommerce-customer-details { 36 | 37 | .woocommerce-column__title { 38 | margin: 0 0 pt(2); 39 | padding-bottom: pt(1); 40 | font-size: pt(3); 41 | border-bottom: 1px solid; 42 | } 43 | 44 | address { 45 | font-style: normal; 46 | 47 | p { 48 | margin: 0; 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /sass/sass-extras/_extendables.scss: -------------------------------------------------------------------------------- 1 | // Images used in posts 2 | %postimage { 3 | width: 100%; 4 | height: auto; 5 | margin: pt(2) 0; 6 | display: block; 7 | border-radius: 0; 8 | box-shadow: $shadow; 9 | } 10 | 11 | // Row in a form 12 | %formrow { 13 | width: 100%; 14 | margin-bottom: pt(2); 15 | clear: both; 16 | 17 | @media (min-width: $mq--lap) { 18 | margin-bottom: pt(4); 19 | } 20 | 21 | &:last-child { 22 | } 23 | 24 | &.error { 25 | margin-bottom: 0; 26 | padding: pt(2); 27 | border-radius: $radius; 28 | border-top-right-radius: 0; 29 | border-top-left-radius: 0; 30 | box-shadow: $shadow; 31 | background: $alert; 32 | color: $color--white; 33 | 34 | @media (min-width: $mq--lap) { 35 | width: 50%; 36 | } 37 | } 38 | 39 | .textarea + .error { 40 | width: 100%; 41 | } 42 | } 43 | 44 | // Post summary 45 | %post { 46 | width: 100%; 47 | margin-bottom: pt(4); 48 | opacity: 1; 49 | transition: opacity .2s ease; 50 | 51 | &:last-child { 52 | margin-bottom: 0; 53 | } 54 | 55 | p { 56 | margin: 0; 57 | } 58 | 59 | ul { 60 | padding-left: 40px; 61 | } 62 | 63 | .post-thumb { 64 | display: none; 65 | 66 | @media (min-width: $mq--lap) { 67 | width: 87px; 68 | height: 68px; 69 | margin-right: pt(2); 70 | position: relative; 71 | display: block; 72 | overflow: hidden; 73 | 74 | img { 75 | position: absolute; 76 | top: 0; 77 | left: 0; 78 | border-radius: 0; 79 | } 80 | } 81 | } 82 | } 83 | 84 | // Extendable for a primary button 85 | // Handy if buttons with other html want to use the same styling 86 | %btn-primary { 87 | background: grey; 88 | } 89 | 90 | // 91 | %column { 92 | 93 | @media (max-width: $mq--lap) { 94 | margin-bottom: pt(4); 95 | } 96 | 97 | @media (min-width: $mq--lap) { 98 | display: grid; 99 | grid-gap: pt(3); 100 | grid-auto-flow: dense; 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /sass/sass-extras/_functions.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | // Convert px to em 4 | // Only use this for media queries 5 | @function em($pixels, $context: 16px) { 6 | @if (unitless($pixels)) { 7 | $pixels: $pixels * 1px; 8 | } 9 | 10 | @if (unitless($context)) { 11 | $context: $context * 1px; 12 | } 13 | 14 | @return math.div($pixels, $context) * 1em; 15 | } 16 | 17 | 18 | // Multiplier function for the point grid 19 | // I'm using px instead of rem 20 | // Here's why: 21 | // https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/ 22 | @function pt($multiplier) { 23 | @return $pt--base * $multiplier; 24 | } 25 | 26 | 27 | // Fluid typography 28 | // https://css-tricks.com/snippets/css/fluid-typography/ 29 | @function strip-unit($value) { 30 | @return $value / ($value * 0 + 1); 31 | } 32 | 33 | @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) { 34 | $u1: unit($min-vw); 35 | $u2: unit($max-vw); 36 | $u3: unit($min-font-size); 37 | $u4: unit($max-font-size); 38 | 39 | @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 { 40 | & { 41 | font-size: $min-font-size; 42 | @media screen and (min-width: $min-vw) { 43 | font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); 44 | } 45 | @media screen and (min-width: $max-vw) { 46 | font-size: $max-font-size; 47 | } 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /sass/sass-extras/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Zeldman text replace 2 | // http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ 3 | @mixin text--hide() { 4 | text-indent: 100%; 5 | white-space: nowrap; 6 | overflow: hidden; 7 | word-wrap: normal; 8 | } 9 | 10 | 11 | // Unreplace Zeldman 12 | @mixin text--show() { 13 | text-indent: 0; 14 | white-space: normal; 15 | overflow: visible; 16 | word-wrap: break-word; 17 | } 18 | 19 | 20 | // Hide elements visually, but not for screenreaders 21 | @mixin screenreader--hide() { 22 | height: 1px; 23 | width: 1px; 24 | position: absolute !important; 25 | overflow: hidden; 26 | clip: rect(1px, 1px, 1px, 1px); 27 | } 28 | -------------------------------------------------------------------------------- /sass/style.scss: -------------------------------------------------------------------------------- 1 | // This is the container for all seperate scss files 2 | // No styles should be included here, only imports of other (smaller) parts 3 | 4 | /*! 5 | Theme Name: Timber template 6 | Theme URI: http://www.clienturl.nl 7 | Author: Wout Mager 8 | Author URI: http://www.woutmager.nl 9 | Version: 1.0 10 | */ 11 | 12 | 13 | // Theme variables 14 | @import 'sass-extras/functions'; // Useful functions 15 | @import 'node_modules/modern-normalize/modern-normalize'; 16 | @import 'theme/colors'; // Colors 17 | @import 'theme/settings'; // Global settings 18 | @import 'sass-extras/extendables'; // Useful extensions 19 | @import 'theme/grid'; // CSS grid 20 | 21 | 22 | // Sass functions, extendables & mixins. 23 | @import 'theme/type'; // Font variables 24 | @import 'sass-extras/mixins'; // Useful mixins 25 | 26 | 27 | // Base styles 28 | @import 'base/base'; // Base styles 29 | 30 | 31 | // Styling of page sections that contain modules 32 | @import 'layout/header'; // Site header 33 | @import 'layout/main'; // Main content of the site 34 | @import 'layout/doormat'; // Site doormat 35 | @import 'layout/footer'; // Site footer 36 | 37 | 38 | // Styling of reusable, modular parts of the design 39 | @import 'modules/symbols'; // Hiding the svg symbol sprite 40 | @import 'modules/mainmenu'; // The main menu, probably the only nav 41 | @import 'modules/search-form'; // A search form 42 | @import 'modules/aside'; // Aside 43 | @import 'modules/aside__section'; // A section item in an aside 44 | @import 'modules/pagemenu'; // Page submenu 45 | @import 'modules/tables'; // Normal and responsive table styles 46 | @import 'modules/forms'; // Input and button styles 47 | @import 'modules/breadcrumbs'; // Breadcrumbs styling 48 | @import 'modules/post'; // A single blogpost or searchresult 49 | @import 'modules/comments'; // Comment styles 50 | @import 'modules/header-image'; // A custom wordpress header 51 | @import 'modules/images'; // Aligned images and captions 52 | @import 'modules/paging'; // Previous, next and numbers 53 | @import 'modules/search-results'; // For custom search results 54 | @import 'modules/helpers'; // Helper classes 55 | @import 'modules/buttons'; // Several buttons 56 | @import 'modules/video-wrapper'; // Making embedded iframes responsive 57 | @import 'modules/easy-autocomplete'; // Default autocomplete styles 58 | @import 'modules/print'; // Simple print stylesheet 59 | 60 | // Optional Woocommerce modules 61 | @import 'modules/woocommerce-cart'; // Woo cart 62 | @import 'modules/woocommerce-checkout'; // Woo checkout page 63 | @import 'modules/woocommerce-product-excerpt'; // Woo single product excerpt 64 | @import 'modules/woocommerce-product'; // Woo product detail 65 | @import 'modules/woocommerce-thankyou'; // Woo thanks page 66 | -------------------------------------------------------------------------------- /sass/theme/_colors.scss: -------------------------------------------------------------------------------- 1 | // Brand colors are defined here, these should not be used directly but should be defined as layout colors. 2 | // All variable names are generated using this tool: http://chir.ag/projects/name-that-color/ 3 | // I made a simpler version: https://woutmager.nl/fiftyshades/ 4 | $color--science-blue: #0067c5; 5 | $color--red: #f00; 6 | 7 | 8 | // Neutral colors. $color-gray-13 Means '13% gray'. 9 | // No medium grays please, they're bad for readibility. 10 | // Read more about color in design systems here: https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3#.w5cudfcy9 11 | // Found this gem for colorname: http://chir.ag/projects/name-that-color/#6195ED 12 | // Built my own variable generator for greys & colors: https://woutmager.nl/fiftyshades/ 13 | $color--white: #fff; 14 | $color--gray-02: #f7f9f9; 15 | $color--gray-13: #ddd; 16 | $color--gray-15: #d9d9d9; 17 | $color--gray-35: #a5a5a5; 18 | $color--gray-47: #888; 19 | $color--gray-87: #222; 20 | $color--black: #000; 21 | 22 | 23 | // Layout colorset 24 | // This is the main set. Add more sets to group colors if appropriate. 25 | // This keeps the colors readable for other people. 26 | $body-bg: $color--white; 27 | $body: $color--gray-87; // Should not be #000 for people with dyslexia: http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/ 28 | $link: $color--science-blue; // Depending on the audience a blue, or another color 29 | $nav-bg: $color--white; 30 | $border: $color--gray-35; 31 | $mute: $color--gray-35; 32 | $mute--hover: $color--gray-47; 33 | 34 | 35 | // Feedback colorset 36 | $alert: $color--red; 37 | $error: $color--red; 38 | -------------------------------------------------------------------------------- /sass/theme/_grid.scss: -------------------------------------------------------------------------------- 1 | // Grid variables 2 | $site--max-width: 1400px; // The max-size of the site. 3 | 4 | // 5 | .container { 6 | width: 100%; 7 | max-width: $site--max-width; 8 | padding-right: pt(2); 9 | padding-left: pt(2); 10 | margin: 0 auto; 11 | clear: both; 12 | 13 | @media (max-width: $mq--lap) { 14 | } 15 | } 16 | 17 | // Content 18 | .l-c { 19 | @extend %column; 20 | grid: auto-flow / 70%; 21 | } 22 | 23 | // Content + sidebar 24 | .l-cs { 25 | @extend %column; 26 | grid: auto-flow / auto minmax(#{pt(30)}, 30%); 27 | } 28 | -------------------------------------------------------------------------------- /sass/theme/_settings.scss: -------------------------------------------------------------------------------- 1 | // Responsive breakpoints. Always use em's! 2 | // $mq--wrist is the variable name from 0 to palm 3 | $mq--wrist: 0; 4 | $mq--palm: em(480); 5 | $mq--lap: em(750); 6 | $mq--desk: em(970); 7 | $mq--wall: em(1170); 8 | $mq--cinema: em(1430); 9 | 10 | 11 | // Layout variable 12 | // I'm using increments of 8 for a cleaner layout 13 | // https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632 14 | $pt--base: 8px; 15 | 16 | 17 | // Default values for other stuff 18 | $radius: 3px; 19 | $shadow: (rgba(0, 0, 0, .25) 0 1px 1px); 20 | -------------------------------------------------------------------------------- /sass/theme/_type.scss: -------------------------------------------------------------------------------- 1 | // Define font families here. 2 | // For practical browser support use woff2 & woff. See https://css-tricks.com/snippets/css/using-font-face/ 3 | // This is a good font-face generator: https://www.fontsquirrel.com/tools/webfont-generator 4 | // Font-files should be placed in the fonts directory 5 | // Use google fonts locally for a better pagespeed score. 6 | @font-face { 7 | font-family: 'Lato'; 8 | src: url('/fonts/lato-regular.woff2') format('woff2'), 9 | url('/fonts/lato-regular.woff') format('woff'); 10 | font-weight: 300; 11 | font-display: swap; 12 | font-style: normal; 13 | } 14 | 15 | 16 | // Font sizes & related stuff 17 | $lh: 1.8; // Default line height. Use unitless line-heights! https://css-tricks.com/almanac/properties/l/line-height/ 18 | $fs-def: pt(2); // Font size - default 19 | $fs-meta: pt(1.5); // Font size - meta 20 | 21 | 22 | // Define font families here 23 | $ff--def: 'Lato', Arial, Verdana, sans-serif; // Default font family 24 | 25 | 26 | // Header sizes 27 | $h1: 3 * $fs-def; 28 | $h2: 2 * $fs-def; 29 | $h3: 1.5 * $fs-def; 30 | $h4: 1 * $fs-def; 31 | $h5: 1 * $fs-def; 32 | 33 | h1, 34 | h2, 35 | h3, 36 | h4, 37 | h5 { 38 | line-height: 1.1; 39 | text-rendering: optimizeLegibility; 40 | word-break: break-word; 41 | 42 | a { 43 | text-decoration: none; 44 | 45 | &:hover, 46 | &:focus { 47 | text-decoration: underline; 48 | } 49 | } 50 | } 51 | 52 | 53 | // Code snippet 54 | code { 55 | padding-right: pt(1); 56 | padding-left: pt(1); 57 | display: inline-block; 58 | background: rgba($mute, .25); 59 | border-radius: $radius; 60 | } 61 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eworm/template/ffebe967c8b5951342576723cff340e932378a23/screenshot.png -------------------------------------------------------------------------------- /screenshot.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eworm/template/ffebe967c8b5951342576723cff340e932378a23/screenshot.sketch -------------------------------------------------------------------------------- /template-my-custom-contact.php: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 | 9 |

    10 | 11 | {{ post.title }} 12 | 13 |

    14 | 15 |
    16 | 17 | {% for item in posts %} 18 | {% include 'modules/post-excerpt.twig' %} 19 | {% endfor %} 20 | 21 | {% include 'modules/pagination.twig' %} 22 | 23 |
    24 | 25 |
    26 | 27 | 32 | 33 | 34 | 35 | {% endblock %} 36 | -------------------------------------------------------------------------------- /views/author.twig: -------------------------------------------------------------------------------- 1 | {% extends "base/base.twig" %} 2 | 3 | {% block content %} 4 | 5 |
    6 | 7 |
    8 | 9 |

    10 | 11 | {{ author.display_name }} 12 | 13 |

    14 | 15 |
    16 | 17 |
    18 | 19 | 24 | 25 |
    26 | 27 | {% endblock %} 28 | -------------------------------------------------------------------------------- /views/base/base.twig: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {% block head %} 6 | 7 | 8 | 9 | {{ wp_title | default('Template') }} 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | {{ function('wp_head') }} 40 | 41 | 42 | 43 | 46 | 47 | 48 | 57 | 58 | {% endblock head %} 59 | 60 | 61 | 62 | 63 | 64 |
    65 | {{ include_svg('images/sprite.svg') }} 66 |
    67 | 68 | {% include 'layout/header.twig' %} 69 | 70 |
    71 | 72 |
    73 | 74 | {% block content %}{% endblock %} 75 | 76 |
    77 | 78 |
    79 | 80 | {% include 'layout/doormat.twig' %} 81 | 82 | {% include 'layout/footer.twig' %} 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /views/blog.twig: -------------------------------------------------------------------------------- 1 | {% extends "base/base.twig" %} 2 | 3 | {% block content %} 4 | 5 |
    6 | 7 |
    8 | 9 |

    10 | 11 | {{ post.title }} 12 | 13 |

    14 | 15 |
    16 | 17 | {% for item in posts %} 18 | {% include 'modules/post-excerpt.twig' %} 19 | {% endfor %} 20 | 21 | {% include 'modules/pagination.twig' %} 22 | 23 |
    24 | 25 |
    26 | 27 | 36 | 37 |
    38 | 39 | {% endblock %} 40 | -------------------------------------------------------------------------------- /views/category.twig: -------------------------------------------------------------------------------- 1 | {% extends "base/base.twig" %} 2 | 3 | {% block content %} 4 | 5 |
    6 | 7 |
    8 | 9 |

    10 | 11 | Categorie: 12 | {{ title }} 13 | 14 |

    15 | 16 |
    17 | 18 | {% for item in posts %} 19 | {% include 'modules/post-excerpt.twig' %} 20 | {% endfor %} 21 | 22 | {% include 'modules/pagination.twig' %} 23 | 24 |
    25 | 26 |
    27 | 28 | 33 | 34 |
    35 | 36 | {% endblock %} 37 | -------------------------------------------------------------------------------- /views/errors/404.twig: -------------------------------------------------------------------------------- 1 | {% extends "base/base.twig" %} 2 | 3 | {% block content %} 4 | 5 |
    6 | 7 |
    8 | 9 |

    10 | 11 | Pagina niet gevonden 12 | 13 |

    14 | 15 |
    16 | 17 |
    18 | 19 | {% endblock %} 20 | -------------------------------------------------------------------------------- /views/home.twig: -------------------------------------------------------------------------------- 1 | {% extends "base/base.twig" %} 2 | 3 | {% block content %} 4 | 5 |
    6 | 7 |
    8 | 9 |

    10 | 11 | {{ post.title }} 12 | 13 |

    14 | 15 |
    16 | 17 | {{ post.content }} 18 | 19 |
    20 | 21 |
    22 | 23 |
    24 | 25 | {% endblock %} 26 | -------------------------------------------------------------------------------- /views/layout/doormat.twig: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 | 5 |
    6 | 7 |
    8 | 9 |
      10 | 11 |
    • 12 | 13 | Wout Mager 14 | 15 |
      • 16 | 17 |
    • 18 | Folkingestraat 37B 19 |
      • 20 | 21 |
    • 22 | 23 | 9711 JT 24 | , 25 | 26 | Groningen 27 | 28 |
      • 29 | 30 |
    • 31 | Nederland 32 |
      • 33 | 34 |
    35 | 36 | 55 | 56 |
    57 | 58 |
    59 | 60 |
    61 | 62 |
    63 | -------------------------------------------------------------------------------- /views/layout/footer.twig: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 | 5 |
    6 | 7 | © 8 | {{ now | date('Y') }} 9 | 10 |
    11 | 12 |
    13 | 14 |
    15 | 16 | {{ function('wp_footer') }} 17 | -------------------------------------------------------------------------------- /views/layout/header.twig: -------------------------------------------------------------------------------- 1 | 63 | -------------------------------------------------------------------------------- /views/modules/comment.twig: -------------------------------------------------------------------------------- 1 |
  • 2 | 3 |
    4 | 5 |
    6 | 7 | 8 | 9 |
    10 | 11 |
    12 | 13 |
    14 | 15 | 16 | 17 | {% if (comment.comment_author_url) %} 18 | 19 | 20 | {{ comment.author.name }} 21 | 22 | 23 | {% else %} 24 | 25 | {{ comment.author.name }} 26 | 27 | {% endif %} 28 | 29 | 30 | 31 | op 32 | 33 | 34 | {{ comment.date }} om {{ comment.time }} 35 | 36 | 37 | zegt 38 | 39 |
    40 | 41 | {% if comment.approved %} 42 | 43 | {{ comment.content | replace({'': '
    ', '': '
    ', ' 48 | Deze reactie wacht op goedkeuring 49 |

    50 | 51 | {% endif %} 52 | 53 | 54 | 55 | 56 | 57 | {% if comment.children %} 58 | 59 |
      60 | 61 | {% for child in comment.children %} 62 | 63 |
    1. 64 | 65 |
      66 | 67 |
      68 | 69 | 70 | 71 |
      72 | 73 |
      74 | 75 |
      76 | 77 | 78 | 79 | {% if (child.comment_author_url) %} 80 | 81 | 82 | {{ child.author.name }} 83 | 84 | 85 | {% else %} 86 | 87 | {{ child.author.name }} 88 | 89 | {% endif %} 90 | 91 | 92 | 93 | op 94 | 95 | 96 | {{ child.date }} om {{ child.time }} 97 | 98 | 99 | zegt 100 | 101 |
      102 | 103 | {% if child.approved %} 104 | 105 | {{ child.content | replace({'': '
      ', '
    ': '
    ', ' 110 | Deze reactie wacht op goedkeuring 111 |

    112 | 113 | {% endif %} 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | {% endfor %} 122 | 123 | 124 | 125 | {% endif %} 126 | 127 | 128 | -------------------------------------------------------------------------------- /views/modules/pagination.twig: -------------------------------------------------------------------------------- 1 |
      2 | 3 | {% if pagination.prev %} 4 | 5 |
    • 6 | 7 | Vorige 8 | 9 |
      • 10 | 11 | {% endif %} 12 | 13 | {% if pagination.next %} 14 | 15 |
    • 16 | 17 | Volgende 18 | 19 |
      • 20 | 21 | {% endif %} 22 | 23 | {% for page in pagination.pages %} 24 | 25 | {% if page.link %} 26 | 27 |
    • 28 | 29 | {{ page.title }} 30 | 31 |
      • 32 | 33 | {% else %} 34 | 35 |
    • 36 | 37 | {{ page.title }} 38 | 39 |
      • 40 | 41 | {% endif %} 42 | 43 | {% endfor %} 44 | 45 |
    46 | -------------------------------------------------------------------------------- /views/modules/post-excerpt.twig: -------------------------------------------------------------------------------- 1 |
    2 | 3 |

    4 | 5 | 6 | 7 | {{ item.title }} 8 | 9 | 10 | 11 |

    12 | 13 |
    14 | 15 | {% if item.thumbnail %} 16 | 17 | 18 | 19 | {{ item.thumbnail.alt }} 20 | 21 | 22 | 23 | {% endif %} 24 | 25 | {{ item.excerpt.length(50).read_more('') }} 26 | 27 |
    28 | 29 |
    30 | 31 | 40 | 41 |
    42 | 43 | {% if item.edit_link %} 44 | 45 | 46 | Aanpassen 47 | 48 | 49 |
    50 | 51 | {% endif %} 52 | 53 | {% for category in item.categories %} 54 | 55 | {{ category }} 56 | 57 | {% if (loop.last == false) %} 58 | , 59 | {% endif %} 60 | 61 | {% endfor %} 62 | 63 |
    64 | 65 | {% for tag in item.tags %} 66 | 67 | {{ tag }} 68 | 69 | {% if (loop.last == false) %} 70 | , 71 | {% endif %} 72 | 73 | {% endfor %} 74 | 75 |
    76 | 77 |
    78 | -------------------------------------------------------------------------------- /views/modules/product-excerpt.twig: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ fn('timber_set_product', post) }} 6 | 7 |
    8 | 9 | {% do action('woocommerce_before_shop_loop_item_title') %} 10 | 11 |

    12 | 13 | {% if post.title %} 14 | 15 | {{ post.title }} 16 | 17 | {% else %} 18 | 19 | {{ fn('the_title') }} 20 | 21 | {% endif %} 22 | 23 |

    24 | 25 | {% do action( 'woocommerce_after_shop_loop_item_title' ) %} 26 | 27 |
    28 | 29 |     30 | -------------------------------------------------------------------------------- /views/modules/searchform.twig: -------------------------------------------------------------------------------- 1 | 2 | 3 |
    4 | 5 | 8 | 9 | 10 | 13 | 14 |
    15 | 16 | 17 | -------------------------------------------------------------------------------- /views/page-cart.twig: -------------------------------------------------------------------------------- 1 | {% extends "base/base.twig" %} 2 | 3 | {% block content %} 4 | 5 | {% filter shortcodes %} 6 | [woocommerce_cart] 7 | {% endfilter %} 8 | 9 | {% endblock %} 10 | -------------------------------------------------------------------------------- /views/page-checkout.twig: -------------------------------------------------------------------------------- 1 | {% extends "base/base.twig" %} 2 | 3 | {% block content %} 4 | 5 | {% filter shortcodes %} 6 | [woocommerce_checkout] 7 | {% endfilter %} 8 | 9 | {% endblock %} 10 | -------------------------------------------------------------------------------- /views/page-contact.twig: -------------------------------------------------------------------------------- 1 | {% extends "base/base.twig" %} 2 | 3 | {% block content %} 4 | 5 |
    6 | 7 |
    8 | 9 |

    10 | 11 | {{ post.title }} 12 | 13 |

    14 | 15 |
    16 | 17 | {{ post.content }} 18 | 19 |
    20 | 21 | {{ nonce }} 22 | 23 | 24 | 25 | {% if email_sent %} 26 | 27 |
    28 | Je bericht is verzonden! 29 |
    30 | 31 | {% endif %} 32 | 33 |
    34 | 35 |
    36 | 37 | 40 | 41 | 42 | {% if contact_name_error %} 43 | Dit veld is verplicht 44 | {% endif %} 45 | 46 |
    47 | 48 |
    49 | 50 | 53 | 54 | 55 | {% if contact_contact_error %} 56 | Dit veld is verplicht 57 | {% endif %} 58 | 59 |
    60 | 61 |
    62 | 63 | 66 | 70 | 71 | {% if contact_info_error %} 72 | Dit veld is verplicht 73 | {% endif %} 74 | 75 |
    76 | 77 |
    78 | 79 | 82 | 83 |
    84 | 85 |
    86 | 87 | 88 | 89 |
    90 | 91 |
    92 | 93 | 110 | 111 |
    112 | 113 | {% endblock %} 114 | -------------------------------------------------------------------------------- /views/page.twig: -------------------------------------------------------------------------------- 1 | {% extends "base/base.twig" %} 2 | 3 | {% block content %} 4 | 5 |
    6 | 7 |
    8 | 9 |

    10 | 11 | {{ post.title }} 12 | 13 |

    14 | 15 |
    16 | 17 | {{ post.content }} 18 | 19 |
    20 | 21 |
    22 | 23 |
    24 | 25 | {% endblock %} 26 | -------------------------------------------------------------------------------- /views/search.twig: -------------------------------------------------------------------------------- 1 | {% extends "base/base.twig" %} 2 | 3 | {% block content %} 4 | 5 |
    6 | 7 |
    8 | 9 |

    10 | 11 | Zoekresultaten voor '{{ searchterm }}' 12 | 13 |

    14 | 15 |
    16 | 17 | {% for item in posts %} 18 | {% include 'modules/post-excerpt.twig' %} 19 | {% endfor %} 20 | 21 | {% include 'modules/pagination.twig' %} 22 | 23 |
    24 | 25 |
    26 | 27 |
    28 | 29 | {% endblock %} 30 | -------------------------------------------------------------------------------- /views/sidebar.twig: -------------------------------------------------------------------------------- 1 | {{ dynamic_sidebar }} 2 | -------------------------------------------------------------------------------- /views/tag.twig: -------------------------------------------------------------------------------- 1 | {% extends "base/base.twig" %} 2 | 3 | {% block content %} 4 | 5 |
    6 | 7 |
    8 | 9 |

    10 | 11 | Tag: 12 | {{ title }} 13 | 14 |

    15 | 16 |
    17 | 18 | {% for item in posts %} 19 | {% include 'modules/post-excerpt.twig' %} 20 | {% endfor %} 21 | 22 | {% include 'modules/pagination.twig' %} 23 | 24 |
    25 | 26 |
    27 | 28 | 33 | 34 |
    35 | 36 | {% endblock %} 37 | -------------------------------------------------------------------------------- /views/woo/archive.twig: -------------------------------------------------------------------------------- 1 | {% extends "base/base.twig" %} 2 | 3 | {% block content %} 4 | 5 |
    6 | 7 |
    8 | 9 |

    10 | 11 | {{ title }} 12 | 13 |

    14 | 15 |
    16 | 17 |
    18 | 19 | {% for post in products %} 20 | 21 | {% if post.post_status != 'private'%} 22 | 23 | {% include ["modules/product-excerpt.twig"] %} 24 | 25 | {% endif %} 26 | 27 | {% endfor %} 28 | 29 |
    30 | 31 |
    32 | 33 |
    34 | 35 |
    36 | 37 | {% endblock %} 38 | -------------------------------------------------------------------------------- /views/woo/cart.twig: -------------------------------------------------------------------------------- 1 | {% block content %} 2 | 3 |
    4 | 5 |
    6 | 7 |

    8 | 9 | {{ post.title }} 10 | 11 |

    12 | 13 |
    14 | 15 | {% do action('woocommerce_before_cart') %} 16 | 17 |
    18 | 19 | {% do action('woocommerce_before_cart_table') %} 20 | 21 |
    22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | {% do action('woocommerce_before_cart_contents') %} 37 | 38 | {% for product in products %} 39 | 40 | 41 | 42 | 47 | 48 | 53 | 54 | 57 | 58 | 66 | 67 | 70 | 71 | 72 | 73 | {% endfor %} 74 | 75 | {% do action('woocommerce_cart_contents') %} 76 | 77 | 78 | 79 | 86 | 87 | 88 | 89 | {% do action('woocommerce_after_cart_contents') %} 90 | 91 | 92 | 93 |
    ProductPrijsAantalTotaal
    43 | 44 | 45 | 46 | 49 | 50 | {{ product.title }} 51 | 52 | 55 | {{ product.price }} 56 | 59 | {{ product.quantity }} 60 | 61 | 62 | 63 | 64 | 65 | 68 | {{ product.total }} 69 |
    80 | 81 | {% do action('woocommerce_cart_actions') %} 82 | 83 | {{ nonce }} 84 | 85 |
    94 | 95 | {% do action('woocommerce_after_cart_table') %} 96 | 97 | 98 | 99 |
    100 | 101 | 102 | 103 | 108 | 109 | {% do action('woocommerce_after_cart') %} 110 | 111 | 112 | 113 | {% endblock %} 114 | -------------------------------------------------------------------------------- /views/woo/checkout.twig: -------------------------------------------------------------------------------- 1 | {% block content %} 2 | 3 |
    4 | 5 |
    6 | 7 |
    8 | 9 |

    10 | 11 | {{ post.title }} 12 | 13 |

    14 | 15 |
    16 | 17 | {% if show_fields == true %} 18 | 19 | {% do action('woocommerce_checkout_before_customer_details') %} 20 | 21 |
    22 | 23 |
    24 | 25 | {% do action('woocommerce_checkout_billing') %} 26 | 27 |
    28 | 29 |
    30 | 31 | {% do action('woocommerce_checkout_shipping') %} 32 | 33 |
    34 | 35 |
    36 | 37 | {% do action('woocommerce_checkout_after_customer_details') %} 38 | 39 | {% endif %} 40 | 41 |
    42 | 43 |
    44 | 45 | 60 | 61 | {% do action('woocommerce_after_checkout_form', checkout) %} 62 | 63 |
    64 | 65 |
    66 | 67 | {% endblock %} 68 | -------------------------------------------------------------------------------- /views/woo/single-product.twig: -------------------------------------------------------------------------------- 1 | {% extends "base/base.twig" %} 2 | 3 | {% block content %} 4 | 5 |
    6 | 7 |
    8 | 9 |
    10 | 11 | {% do action('woocommerce_before_single_product') %} 12 | 13 |
    14 | 15 |
    16 | 17 | {{ post.title }} 18 | 19 |
    20 | 21 |
    22 | 23 | {% do action('woocommerce_single_product_summary') %} 24 | 25 |
    26 | 27 | 28 | 29 |
    30 | 31 | {% do action('woocommerce_after_single_product') %} 32 | 33 |
    34 | 35 |
    36 | 37 |
    38 | 39 | {% endblock %} 40 | -------------------------------------------------------------------------------- /webpack.mix.js: -------------------------------------------------------------------------------- 1 | const mix = require('laravel-mix'); 2 | const path = require('path'); 3 | const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin'); 4 | 5 | mix.options({ 6 | terser: { 7 | extractComments: true 8 | }, 9 | processCssUrls: false 10 | }) 11 | .setPublicPath('/') 12 | .setResourceRoot('/') 13 | .sass('sass/style.scss', path.resolve('/')) 14 | .combine([ 15 | 'node_modules/easy-autocomplete/dist/jquery.easy-autocomplete.js', 16 | 'js-src/modules/template.autocomplete.js', 17 | 'js-src/modules/template.googlemaps.js', 18 | 'js-src/modules/template.mq.js', 19 | 'js-src/modules/template.mq-palm.js', 20 | 'js-src/modules/template.mq-lap.js', 21 | 'js-src/modules/template.mq-desk.js', 22 | 'js-src/modules/template.mq-wall.js', 23 | 'js-src/modules/template.mq-cinema.js', 24 | 'js-src/base/template.init.js' 25 | ], path.resolve('js/functions.min.js')) 26 | .combine([ 27 | 'js-src/vendor/LABjs/LAB.js', 28 | 'js-src/base/lab-loader.js' 29 | ], path.resolve('js/lab.min.js')) 30 | .webpackConfig({ 31 | plugins: [ 32 | new SVGSpritemapPlugin( 33 | 'images-src/sprite/**/*.svg', 34 | { 35 | output: { 36 | filename: 37 | 'images/sprite.svg', 38 | chunk: { 39 | name: 40 | 'js/spritemap', 41 | } 42 | } 43 | } 44 | ) 45 | ] 46 | }) 47 | .version() 48 | -------------------------------------------------------------------------------- /woocommerce.php: -------------------------------------------------------------------------------- 1 | /wp-admin/plugins.php'; 5 | 6 | return; 7 | } 8 | 9 | $context = Timber::context(); 10 | $context['cart'] = WC()->cart->get_cart_contents_count(); 11 | 12 | 13 | // Single product 14 | if (is_singular('product')) { 15 | $context['post'] = Timber::get_post(); 16 | $product = wc_get_product($context['post']->ID); 17 | $context['product'] = $product; 18 | Timber::render('woo/single-product.twig', $context); 19 | 20 | // Restore the context and loop back to the main query loop. 21 | wp_reset_postdata(); 22 | } 23 | 24 | 25 | // Category or shop 26 | else { 27 | $args = array( 28 | 'post_type' => 'product', 29 | 'posts_per_page' => 50, 30 | ); 31 | $posts = Timber::get_posts($args); 32 | $context['products'] = $posts; 33 | 34 | if (is_product_category()) { 35 | $queried_object = get_queried_object(); 36 | $term_id = $queried_object->term_id; 37 | $context['category'] = get_term($term_id, 'product_cat'); 38 | $context['title'] = single_term_title('', false); 39 | } else { 40 | $post = Timber::get_post(get_option('woocommerce_shop_page_id')); 41 | $context['title'] = $post->title; 42 | $context['content'] = $post->content; 43 | } 44 | 45 | Timber::render('woo/archive.twig', $context); 46 | } 47 | -------------------------------------------------------------------------------- /woocommerce/checkout/form-checkout.php: -------------------------------------------------------------------------------- 1 | get_checkout_fields()) : 24 | $context['show_fields'] = true; 25 | endif; 26 | 27 | $template = ['woo/checkout.twig']; 28 | Timber::render($template, $context); 29 | -------------------------------------------------------------------------------- /woocommerce/checkout/thankyou.php: -------------------------------------------------------------------------------- 1 | has_status('failed')) : 26 | 27 | $context['status'] = 'failed'; 28 | $context['payment_url'] = esc_url($order->get_checkout_payment_url()); 29 | 30 | if (is_user_logged_in()) : 31 | $context['account_url'] = esc_url(wc_get_page_permalink('myaccount')); 32 | endif; 33 | 34 | else : 35 | 36 | $context['ordernumber'] = $order->get_order_number(); 37 | $context['date'] = wc_format_datetime($order->get_date_created()); 38 | 39 | if (is_user_logged_in() && $order->get_user_id() === get_current_user_id() && $order->get_billing_email()) : 40 | $context['email'] = $order->get_billing_email(); 41 | endif; 42 | 43 | $context['total'] = $order->get_formatted_order_total(); 44 | 45 | if ($order->get_payment_method_title()) : 46 | $context['payment_method_title'] = wp_kses_post($order->get_payment_method_title()); 47 | endif; 48 | 49 | endif; 50 | 51 | $context['payment_method'] = $order->get_payment_method(); 52 | $context['order_id'] = $order->get_id(); 53 | 54 | endif; 55 | 56 | $template = ['woo/thankyou.twig']; 57 | Timber::render($template, $context); 58 | --------------------------------------------------------------------------------