updated theme `Twenty Nineteen` version 1.6
This commit is contained in:
Gitium
parent
12dae937d6
commit
835c22fdf0
|
|
@ -25,9 +25,9 @@ class TwentyNineteen_SVG_Icons {
|
||||||
* Gets the SVG code for a given icon.
|
* Gets the SVG code for a given icon.
|
||||||
*/
|
*/
|
||||||
public static function get_svg( $group, $icon, $size ) {
|
public static function get_svg( $group, $icon, $size ) {
|
||||||
if ( 'ui' == $group ) {
|
if ( 'ui' === $group ) {
|
||||||
$arr = self::$ui_icons;
|
$arr = self::$ui_icons;
|
||||||
} elseif ( 'social' == $group ) {
|
} elseif ( 'social' === $group ) {
|
||||||
$arr = self::$social_icons;
|
$arr = self::$social_icons;
|
||||||
} else {
|
} else {
|
||||||
$arr = array();
|
$arr = array();
|
||||||
|
|
|
||||||
|
|
@ -165,7 +165,7 @@ add_filter( 'wp_nav_menu', 'twentynineteen_add_ellipses_to_nav', 10, 2 );
|
||||||
function twentynineteen_nav_menu_link_attributes( $atts, $item, $args, $depth ) {
|
function twentynineteen_nav_menu_link_attributes( $atts, $item, $args, $depth ) {
|
||||||
|
|
||||||
// Add [aria-haspopup] and [aria-expanded] to menu items that have children.
|
// Add [aria-haspopup] and [aria-expanded] to menu items that have children.
|
||||||
$item_has_children = in_array( 'menu-item-has-children', $item->classes );
|
$item_has_children = in_array( 'menu-item-has-children', $item->classes, true );
|
||||||
if ( $item_has_children ) {
|
if ( $item_has_children ) {
|
||||||
$atts['aria-haspopup'] = 'true';
|
$atts['aria-haspopup'] = 'true';
|
||||||
$atts['aria-expanded'] = 'false';
|
$atts['aria-expanded'] = 'false';
|
||||||
|
|
|
||||||
|
|
@ -96,7 +96,7 @@ if ( ! function_exists( 'twentynineteen_entry_footer' ) ) :
|
||||||
|
|
||||||
/* translators: Used between list items, there is a space after the comma. */
|
/* translators: Used between list items, there is a space after the comma. */
|
||||||
$tags_list = get_the_tag_list( '', __( ', ', 'twentynineteen' ) );
|
$tags_list = get_the_tag_list( '', __( ', ', 'twentynineteen' ) );
|
||||||
if ( $tags_list ) {
|
if ( $tags_list && ! is_wp_error( $tags_list ) ) {
|
||||||
printf(
|
printf(
|
||||||
/* translators: 1: SVG icon. 2: Posted in label, only visible to screen readers. 3: List of tags. */
|
/* translators: 1: SVG icon. 2: Posted in label, only visible to screen readers. 3: List of tags. */
|
||||||
'<span class="tags-links">%1$s<span class="screen-reader-text">%2$s </span>%3$s</span>',
|
'<span class="tags-links">%1$s<span class="screen-reader-text">%2$s </span>%3$s</span>',
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,30 @@
|
||||||
/**
|
/**
|
||||||
* File customize-controls.js.
|
* File customize-controls.js.
|
||||||
*
|
*
|
||||||
* Theme Customizer enhancements for a better user experience.
|
* Theme Customizer enhancements for a better user experience.
|
||||||
*
|
*
|
||||||
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
|
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
wp.customize.bind( 'ready', function() {
|
wp.customize.bind( 'ready', function() {
|
||||||
|
|
||||||
// Only show the color hue control when there's a custom primary color.
|
// Only show the color hue control when there's a custom primary color.
|
||||||
wp.customize( 'primary_color', function( setting ) {
|
wp.customize( 'primary_color', function( setting ) {
|
||||||
wp.customize.control( 'primary_color_hue', function( control ) {
|
wp.customize.control( 'primary_color_hue', function( control ) {
|
||||||
var visibility = function() {
|
var visibility = function() {
|
||||||
if ( 'custom' === setting.get() ) {
|
if ( 'custom' === setting.get() ) {
|
||||||
control.container.slideDown( 180 );
|
control.container.slideDown( 180 );
|
||||||
} else {
|
} else {
|
||||||
control.container.slideUp( 180 );
|
control.container.slideUp( 180 );
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
visibility();
|
visibility();
|
||||||
setting.bind( visibility );
|
setting.bind( visibility );
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
|
||||||
|
|
@ -1,60 +1,60 @@
|
||||||
/**
|
/**
|
||||||
* File customize-preview.js.
|
* File customize-preview.js.
|
||||||
*
|
*
|
||||||
* Theme Customizer enhancements for a better user experience.
|
* Theme Customizer enhancements for a better user experience.
|
||||||
*
|
*
|
||||||
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
|
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
(function( $ ) {
|
(function( $ ) {
|
||||||
|
|
||||||
// Primary color.
|
// Primary color.
|
||||||
wp.customize( 'primary_color', function( value ) {
|
wp.customize( 'primary_color', function( value ) {
|
||||||
value.bind( function( to ) {
|
value.bind( function( to ) {
|
||||||
// Update custom color CSS.
|
// Update custom color CSS.
|
||||||
var style = $( '#custom-theme-colors' ),
|
var style = $( '#custom-theme-colors' ),
|
||||||
hue = style.data( 'hue' ),
|
hue = style.data( 'hue' ),
|
||||||
css = style.html(),
|
css = style.html(),
|
||||||
color;
|
color;
|
||||||
|
|
||||||
if( 'custom' === to ){
|
if( 'custom' === to ){
|
||||||
// If a custom primary color is selected, use the currently set primary_color_hue.
|
// If a custom primary color is selected, use the currently set primary_color_hue.
|
||||||
color = wp.customize.get().primary_color_hue;
|
color = wp.customize.get().primary_color_hue;
|
||||||
} else {
|
} else {
|
||||||
// If the "default" option is selected, get the default primary_color_hue.
|
// If the "default" option is selected, get the default primary_color_hue.
|
||||||
color = 199;
|
color = 199;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
|
// Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
|
||||||
css = css.split( hue + ',' ).join( color + ',' );
|
css = css.split( hue + ',' ).join( color + ',' );
|
||||||
style.html( css ).data( 'hue', color );
|
style.html( css ).data( 'hue', color );
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Primary color hue.
|
// Primary color hue.
|
||||||
wp.customize( 'primary_color_hue', function( value ) {
|
wp.customize( 'primary_color_hue', function( value ) {
|
||||||
value.bind( function( to ) {
|
value.bind( function( to ) {
|
||||||
|
|
||||||
// Update custom color CSS.
|
// Update custom color CSS.
|
||||||
var style = $( '#custom-theme-colors' ),
|
var style = $( '#custom-theme-colors' ),
|
||||||
hue = style.data( 'hue' ),
|
hue = style.data( 'hue' ),
|
||||||
css = style.html();
|
css = style.html();
|
||||||
|
|
||||||
// Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
|
// Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
|
||||||
css = css.split( hue + ',' ).join( to + ',' );
|
css = css.split( hue + ',' ).join( to + ',' );
|
||||||
style.html( css ).data( 'hue', to );
|
style.html( css ).data( 'hue', to );
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Image filter.
|
// Image filter.
|
||||||
wp.customize( 'image_filter', function( value ) {
|
wp.customize( 'image_filter', function( value ) {
|
||||||
value.bind( function( to ) {
|
value.bind( function( to ) {
|
||||||
if ( to ) {
|
if ( to ) {
|
||||||
$( 'body' ).addClass( 'image-filters-enabled' );
|
$( 'body' ).addClass( 'image-filters-enabled' );
|
||||||
} else {
|
} else {
|
||||||
$( 'body' ).removeClass( 'image-filters-enabled' );
|
$( 'body' ).removeClass( 'image-filters-enabled' );
|
||||||
}
|
}
|
||||||
} );
|
} );
|
||||||
} );
|
} );
|
||||||
|
|
||||||
})( jQuery );
|
})( jQuery );
|
||||||
|
|
|
||||||
|
|
@ -1,216 +1,216 @@
|
||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Debounce.
|
* Debounce.
|
||||||
*
|
*
|
||||||
* @param {Function} func
|
* @param {Function} func
|
||||||
* @param {number} wait
|
* @param {number} wait
|
||||||
* @param {boolean} immediate
|
* @param {boolean} immediate
|
||||||
*/
|
*/
|
||||||
function debounce(func, wait, immediate) {
|
function debounce(func, wait, immediate) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var timeout;
|
var timeout;
|
||||||
wait = (typeof wait !== 'undefined') ? wait : 20;
|
wait = (typeof wait !== 'undefined') ? wait : 20;
|
||||||
immediate = (typeof immediate !== 'undefined') ? immediate : true;
|
immediate = (typeof immediate !== 'undefined') ? immediate : true;
|
||||||
|
|
||||||
return function() {
|
return function() {
|
||||||
|
|
||||||
var context = this, args = arguments;
|
var context = this, args = arguments;
|
||||||
var later = function() {
|
var later = function() {
|
||||||
timeout = null;
|
timeout = null;
|
||||||
|
|
||||||
if (!immediate) {
|
if (!immediate) {
|
||||||
func.apply(context, args);
|
func.apply(context, args);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var callNow = immediate && !timeout;
|
var callNow = immediate && !timeout;
|
||||||
|
|
||||||
clearTimeout(timeout);
|
clearTimeout(timeout);
|
||||||
timeout = setTimeout(later, wait);
|
timeout = setTimeout(later, wait);
|
||||||
|
|
||||||
if (callNow) {
|
if (callNow) {
|
||||||
func.apply(context, args);
|
func.apply(context, args);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Prepends an element to a container.
|
* Prepends an element to a container.
|
||||||
*
|
*
|
||||||
* @param {Element} container
|
* @param {Element} container
|
||||||
* @param {Element} element
|
* @param {Element} element
|
||||||
*/
|
*/
|
||||||
function prependElement(container, element) {
|
function prependElement(container, element) {
|
||||||
if (container.firstChild.nextSibling) {
|
if (container.firstChild.nextSibling) {
|
||||||
return container.insertBefore(element, container.firstChild.nextSibling);
|
return container.insertBefore(element, container.firstChild.nextSibling);
|
||||||
} else {
|
} else {
|
||||||
return container.appendChild(element);
|
return container.appendChild(element);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Shows an element by adding a hidden className.
|
* Shows an element by adding a hidden className.
|
||||||
*
|
*
|
||||||
* @param {Element} element
|
* @param {Element} element
|
||||||
*/
|
*/
|
||||||
function showButton(element) {
|
function showButton(element) {
|
||||||
// classList.remove is not supported in IE11.
|
// classList.remove is not supported in IE11.
|
||||||
element.className = element.className.replace('is-empty', '');
|
element.className = element.className.replace('is-empty', '');
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Hides an element by removing the hidden className.
|
* Hides an element by removing the hidden className.
|
||||||
*
|
*
|
||||||
* @param {Element} element
|
* @param {Element} element
|
||||||
*/
|
*/
|
||||||
function hideButton(element) {
|
function hideButton(element) {
|
||||||
// classList.add is not supported in IE11.
|
// classList.add is not supported in IE11.
|
||||||
if (!element.classList.contains('is-empty')) {
|
if (!element.classList.contains('is-empty')) {
|
||||||
element.className += ' is-empty';
|
element.className += ' is-empty';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns the currently available space in the menu container.
|
* Returns the currently available space in the menu container.
|
||||||
*
|
*
|
||||||
* @returns {number} Available space
|
* @returns {number} Available space
|
||||||
*/
|
*/
|
||||||
function getAvailableSpace( button, container ) {
|
function getAvailableSpace( button, container ) {
|
||||||
return container.offsetWidth - button.offsetWidth - 22;
|
return container.offsetWidth - button.offsetWidth - 22;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns whether the current menu is overflowing or not.
|
* Returns whether the current menu is overflowing or not.
|
||||||
*
|
*
|
||||||
* @returns {boolean} Is overflowing
|
* @returns {boolean} Is overflowing
|
||||||
*/
|
*/
|
||||||
function isOverflowingNavivation( list, button, container ) {
|
function isOverflowingNavivation( list, button, container ) {
|
||||||
return list.offsetWidth > getAvailableSpace( button, container );
|
return list.offsetWidth > getAvailableSpace( button, container );
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set menu container variable.
|
* Set menu container variable.
|
||||||
*/
|
*/
|
||||||
var navContainer = document.querySelector('.main-navigation');
|
var navContainer = document.querySelector('.main-navigation');
|
||||||
var breaks = [];
|
var breaks = [];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Let’s bail if we our menu doesn't exist.
|
* Let’s bail if we our menu doesn't exist.
|
||||||
*/
|
*/
|
||||||
if ( ! navContainer ) {
|
if ( ! navContainer ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Refreshes the list item from the menu depending on the menu size.
|
* Refreshes the list item from the menu depending on the menu size.
|
||||||
*/
|
*/
|
||||||
function updateNavigationMenu( container ) {
|
function updateNavigationMenu( container ) {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Let’s bail if our menu is empty.
|
* Let’s bail if our menu is empty.
|
||||||
*/
|
*/
|
||||||
if ( ! container.parentNode.querySelector('.main-menu[id]') ) {
|
if ( ! container.parentNode.querySelector('.main-menu[id]') ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Adds the necessary UI to operate the menu.
|
// Adds the necessary UI to operate the menu.
|
||||||
var visibleList = container.parentNode.querySelector('.main-menu[id]');
|
var visibleList = container.parentNode.querySelector('.main-menu[id]');
|
||||||
var hiddenList = visibleList.parentNode.nextElementSibling.querySelector('.hidden-links');
|
var hiddenList = visibleList.parentNode.nextElementSibling.querySelector('.hidden-links');
|
||||||
var toggleButton = visibleList.parentNode.nextElementSibling.querySelector('.main-menu-more-toggle');
|
var toggleButton = visibleList.parentNode.nextElementSibling.querySelector('.main-menu-more-toggle');
|
||||||
|
|
||||||
if ( isOverflowingNavivation( visibleList, toggleButton, container ) ) {
|
if ( isOverflowingNavivation( visibleList, toggleButton, container ) ) {
|
||||||
|
|
||||||
// Record the width of the list.
|
// Record the width of the list.
|
||||||
breaks.push( visibleList.offsetWidth );
|
breaks.push( visibleList.offsetWidth );
|
||||||
// Move last item to the hidden list.
|
// Move last item to the hidden list.
|
||||||
prependElement( hiddenList, ! visibleList.lastChild || null === visibleList.lastChild ? visibleList.previousElementSibling : visibleList.lastChild );
|
prependElement( hiddenList, ! visibleList.lastChild || null === visibleList.lastChild ? visibleList.previousElementSibling : visibleList.lastChild );
|
||||||
// Show the toggle button.
|
// Show the toggle button.
|
||||||
showButton( toggleButton );
|
showButton( toggleButton );
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
// There is space for another item in the nav.
|
// There is space for another item in the nav.
|
||||||
if ( getAvailableSpace( toggleButton, container ) > breaks[breaks.length - 1] ) {
|
if ( getAvailableSpace( toggleButton, container ) > breaks[breaks.length - 1] ) {
|
||||||
// Move the item to the visible list.
|
// Move the item to the visible list.
|
||||||
visibleList.appendChild( hiddenList.firstChild.nextSibling );
|
visibleList.appendChild( hiddenList.firstChild.nextSibling );
|
||||||
breaks.pop();
|
breaks.pop();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide the dropdown btn if hidden list is empty.
|
// Hide the dropdown btn if hidden list is empty.
|
||||||
if (breaks.length < 2) {
|
if (breaks.length < 2) {
|
||||||
hideButton( toggleButton );
|
hideButton( toggleButton );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Recur if the visible list is still overflowing the nav.
|
// Recur if the visible list is still overflowing the nav.
|
||||||
if ( isOverflowingNavivation( visibleList, toggleButton, container ) ) {
|
if ( isOverflowingNavivation( visibleList, toggleButton, container ) ) {
|
||||||
updateNavigationMenu( container );
|
updateNavigationMenu( container );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Run our priority+ function as soon as the document is `ready`.
|
* Run our priority+ function as soon as the document is `ready`.
|
||||||
*/
|
*/
|
||||||
document.addEventListener( 'DOMContentLoaded', function() {
|
document.addEventListener( 'DOMContentLoaded', function() {
|
||||||
|
|
||||||
updateNavigationMenu( navContainer );
|
updateNavigationMenu( navContainer );
|
||||||
|
|
||||||
// Also, run our priority+ function on selective refresh in the customizer.
|
// Also, run our priority+ function on selective refresh in the customizer.
|
||||||
var hasSelectiveRefresh = (
|
var hasSelectiveRefresh = (
|
||||||
'undefined' !== typeof wp &&
|
'undefined' !== typeof wp &&
|
||||||
wp.customize &&
|
wp.customize &&
|
||||||
wp.customize.selectiveRefresh &&
|
wp.customize.selectiveRefresh &&
|
||||||
wp.customize.navMenusPreview.NavMenuInstancePartial
|
wp.customize.navMenusPreview.NavMenuInstancePartial
|
||||||
);
|
);
|
||||||
|
|
||||||
if ( hasSelectiveRefresh ) {
|
if ( hasSelectiveRefresh ) {
|
||||||
// Re-run our priority+ function on Nav Menu partial refreshes.
|
// Re-run our priority+ function on Nav Menu partial refreshes.
|
||||||
wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function ( placement ) {
|
wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function ( placement ) {
|
||||||
|
|
||||||
var isNewNavMenu = (
|
var isNewNavMenu = (
|
||||||
placement &&
|
placement &&
|
||||||
placement.partial.id.includes( 'nav_menu_instance' ) &&
|
placement.partial.id.includes( 'nav_menu_instance' ) &&
|
||||||
'null' !== placement.container[0].parentNode &&
|
'null' !== placement.container[0].parentNode &&
|
||||||
placement.container[0].parentNode.classList.contains( 'main-navigation' )
|
placement.container[0].parentNode.classList.contains( 'main-navigation' )
|
||||||
);
|
);
|
||||||
|
|
||||||
if ( isNewNavMenu ) {
|
if ( isNewNavMenu ) {
|
||||||
updateNavigationMenu( placement.container[0].parentNode );
|
updateNavigationMenu( placement.container[0].parentNode );
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Run our priority+ function on load.
|
* Run our priority+ function on load.
|
||||||
*/
|
*/
|
||||||
window.addEventListener( 'load', function() {
|
window.addEventListener( 'load', function() {
|
||||||
updateNavigationMenu( navContainer );
|
updateNavigationMenu( navContainer );
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Run our priority+ function every time the window resizes.
|
* Run our priority+ function every time the window resizes.
|
||||||
*/
|
*/
|
||||||
var isResizing = false;
|
var isResizing = false;
|
||||||
window.addEventListener( 'resize',
|
window.addEventListener( 'resize',
|
||||||
debounce( function() {
|
debounce( function() {
|
||||||
if ( isResizing ) {
|
if ( isResizing ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
isResizing = true;
|
isResizing = true;
|
||||||
setTimeout( function() {
|
setTimeout( function() {
|
||||||
updateNavigationMenu( navContainer );
|
updateNavigationMenu( navContainer );
|
||||||
isResizing = false;
|
isResizing = false;
|
||||||
}, 150 );
|
}, 150 );
|
||||||
} )
|
} )
|
||||||
);
|
);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Run our priority+ function.
|
* Run our priority+ function.
|
||||||
*/
|
*/
|
||||||
updateNavigationMenu( navContainer );
|
updateNavigationMenu( navContainer );
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,33 @@
|
||||||
/**
|
/**
|
||||||
* File skip-link-focus-fix.js.
|
* File skip-link-focus-fix.js.
|
||||||
*
|
*
|
||||||
* Helps with accessibility for keyboard only users.
|
* Helps with accessibility for keyboard only users.
|
||||||
*
|
*
|
||||||
* This is the source file for what is minified in the twentynineteen_skip_link_focus_fix() PHP function.
|
* This is the source file for what is minified in the twentynineteen_skip_link_focus_fix() PHP function.
|
||||||
*
|
*
|
||||||
* Learn more: https://git.io/vWdr2
|
* Learn more: https://git.io/vWdr2
|
||||||
*/
|
*/
|
||||||
( function() {
|
( function() {
|
||||||
var isIe = /(trident|msie)/i.test( navigator.userAgent );
|
var isIe = /(trident|msie)/i.test( navigator.userAgent );
|
||||||
|
|
||||||
if ( isIe && document.getElementById && window.addEventListener ) {
|
if ( isIe && document.getElementById && window.addEventListener ) {
|
||||||
window.addEventListener( 'hashchange', function() {
|
window.addEventListener( 'hashchange', function() {
|
||||||
var id = location.hash.substring( 1 ),
|
var id = location.hash.substring( 1 ),
|
||||||
element;
|
element;
|
||||||
|
|
||||||
if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
|
if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
element = document.getElementById( id );
|
element = document.getElementById( id );
|
||||||
|
|
||||||
if ( element ) {
|
if ( element ) {
|
||||||
if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
|
if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
|
||||||
element.tabIndex = -1;
|
element.tabIndex = -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
element.focus();
|
element.focus();
|
||||||
}
|
}
|
||||||
}, false );
|
}, false );
|
||||||
}
|
}
|
||||||
} )();
|
} )();
|
||||||
|
|
|
||||||
|
|
@ -1,354 +1,354 @@
|
||||||
/**
|
/**
|
||||||
* Touch & Keyboard navigation.
|
* Touch & Keyboard navigation.
|
||||||
*
|
*
|
||||||
* Contains handlers for touch devices and keyboard navigation.
|
* Contains handlers for touch devices and keyboard navigation.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Debounce.
|
* Debounce.
|
||||||
*
|
*
|
||||||
* @param {Function} func
|
* @param {Function} func
|
||||||
* @param {number} wait
|
* @param {number} wait
|
||||||
* @param {boolean} immediate
|
* @param {boolean} immediate
|
||||||
*/
|
*/
|
||||||
function debounce(func, wait, immediate) {
|
function debounce(func, wait, immediate) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var timeout;
|
var timeout;
|
||||||
wait = (typeof wait !== 'undefined') ? wait : 20;
|
wait = (typeof wait !== 'undefined') ? wait : 20;
|
||||||
immediate = (typeof immediate !== 'undefined') ? immediate : true;
|
immediate = (typeof immediate !== 'undefined') ? immediate : true;
|
||||||
|
|
||||||
return function() {
|
return function() {
|
||||||
|
|
||||||
var context = this, args = arguments;
|
var context = this, args = arguments;
|
||||||
var later = function() {
|
var later = function() {
|
||||||
timeout = null;
|
timeout = null;
|
||||||
|
|
||||||
if (!immediate) {
|
if (!immediate) {
|
||||||
func.apply(context, args);
|
func.apply(context, args);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var callNow = immediate && !timeout;
|
var callNow = immediate && !timeout;
|
||||||
|
|
||||||
clearTimeout(timeout);
|
clearTimeout(timeout);
|
||||||
timeout = setTimeout(later, wait);
|
timeout = setTimeout(later, wait);
|
||||||
|
|
||||||
if (callNow) {
|
if (callNow) {
|
||||||
func.apply(context, args);
|
func.apply(context, args);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add class.
|
* Add class.
|
||||||
*
|
*
|
||||||
* @param {Object} el
|
* @param {Object} el
|
||||||
* @param {string} cls
|
* @param {string} cls
|
||||||
*/
|
*/
|
||||||
function addClass(el, cls) {
|
function addClass(el, cls) {
|
||||||
if ( ! el.className.match( '(?:^|\\s)' + cls + '(?!\\S)') ) {
|
if ( ! el.className.match( '(?:^|\\s)' + cls + '(?!\\S)') ) {
|
||||||
el.className += ' ' + cls;
|
el.className += ' ' + cls;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Delete class.
|
* Delete class.
|
||||||
*
|
*
|
||||||
* @param {Object} el
|
* @param {Object} el
|
||||||
* @param {string} cls
|
* @param {string} cls
|
||||||
*/
|
*/
|
||||||
function deleteClass(el, cls) {
|
function deleteClass(el, cls) {
|
||||||
el.className = el.className.replace( new RegExp( '(?:^|\\s)' + cls + '(?!\\S)' ),'' );
|
el.className = el.className.replace( new RegExp( '(?:^|\\s)' + cls + '(?!\\S)' ),'' );
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Has class?
|
* Has class?
|
||||||
*
|
*
|
||||||
* @param {Object} el
|
* @param {Object} el
|
||||||
* @param {string} cls
|
* @param {string} cls
|
||||||
*
|
*
|
||||||
* @returns {boolean} Has class
|
* @returns {boolean} Has class
|
||||||
*/
|
*/
|
||||||
function hasClass(el, cls) {
|
function hasClass(el, cls) {
|
||||||
|
|
||||||
if ( el.className.match( '(?:^|\\s)' + cls + '(?!\\S)' ) ) {
|
if ( el.className.match( '(?:^|\\s)' + cls + '(?!\\S)' ) ) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Toggle Aria Expanded state for screenreaders.
|
* Toggle Aria Expanded state for screenreaders.
|
||||||
*
|
*
|
||||||
* @param {Object} ariaItem
|
* @param {Object} ariaItem
|
||||||
*/
|
*/
|
||||||
function toggleAriaExpandedState( ariaItem ) {
|
function toggleAriaExpandedState( ariaItem ) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var ariaState = ariaItem.getAttribute('aria-expanded');
|
var ariaState = ariaItem.getAttribute('aria-expanded');
|
||||||
|
|
||||||
if ( ariaState === 'true' ) {
|
if ( ariaState === 'true' ) {
|
||||||
ariaState = 'false';
|
ariaState = 'false';
|
||||||
} else {
|
} else {
|
||||||
ariaState = 'true';
|
ariaState = 'true';
|
||||||
}
|
}
|
||||||
|
|
||||||
ariaItem.setAttribute('aria-expanded', ariaState);
|
ariaItem.setAttribute('aria-expanded', ariaState);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Open sub-menu.
|
* Open sub-menu.
|
||||||
*
|
*
|
||||||
* @param {Object} currentSubMenu
|
* @param {Object} currentSubMenu
|
||||||
*/
|
*/
|
||||||
function openSubMenu( currentSubMenu ) {
|
function openSubMenu( currentSubMenu ) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
// Update classes.
|
// Update classes.
|
||||||
// classList.add is not supported in IE11.
|
// classList.add is not supported in IE11.
|
||||||
currentSubMenu.parentElement.className += ' off-canvas';
|
currentSubMenu.parentElement.className += ' off-canvas';
|
||||||
currentSubMenu.parentElement.lastElementChild.className += ' expanded-true';
|
currentSubMenu.parentElement.lastElementChild.className += ' expanded-true';
|
||||||
|
|
||||||
// Update aria-expanded state.
|
// Update aria-expanded state.
|
||||||
toggleAriaExpandedState( currentSubMenu );
|
toggleAriaExpandedState( currentSubMenu );
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Close sub-menu.
|
* Close sub-menu.
|
||||||
*
|
*
|
||||||
* @param {Object} currentSubMenu
|
* @param {Object} currentSubMenu
|
||||||
*/
|
*/
|
||||||
function closeSubMenu( currentSubMenu ) {
|
function closeSubMenu( currentSubMenu ) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var menuItem = getCurrentParent( currentSubMenu, '.menu-item' ); // this.parentNode
|
var menuItem = getCurrentParent( currentSubMenu, '.menu-item' ); // this.parentNode
|
||||||
var menuItemAria = menuItem.querySelector('a[aria-expanded]');
|
var menuItemAria = menuItem.querySelector('a[aria-expanded]');
|
||||||
var subMenu = currentSubMenu.closest('.sub-menu');
|
var subMenu = currentSubMenu.closest('.sub-menu');
|
||||||
|
|
||||||
// If this is in a sub-sub-menu, go back to parent sub-menu.
|
// If this is in a sub-sub-menu, go back to parent sub-menu.
|
||||||
if ( getCurrentParent( currentSubMenu, 'ul' ).classList.contains( 'sub-menu' ) ) {
|
if ( getCurrentParent( currentSubMenu, 'ul' ).classList.contains( 'sub-menu' ) ) {
|
||||||
|
|
||||||
// Update classes.
|
// Update classes.
|
||||||
// classList.remove is not supported in IE11.
|
// classList.remove is not supported in IE11.
|
||||||
menuItem.className = menuItem.className.replace( 'off-canvas', '' );
|
menuItem.className = menuItem.className.replace( 'off-canvas', '' );
|
||||||
subMenu.className = subMenu.className.replace( 'expanded-true', '' );
|
subMenu.className = subMenu.className.replace( 'expanded-true', '' );
|
||||||
|
|
||||||
// Update aria-expanded and :focus states.
|
// Update aria-expanded and :focus states.
|
||||||
toggleAriaExpandedState( menuItemAria );
|
toggleAriaExpandedState( menuItemAria );
|
||||||
|
|
||||||
// Or else close all sub-menus.
|
// Or else close all sub-menus.
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
// Update classes.
|
// Update classes.
|
||||||
// classList.remove is not supported in IE11.
|
// classList.remove is not supported in IE11.
|
||||||
menuItem.className = menuItem.className.replace( 'off-canvas', '' );
|
menuItem.className = menuItem.className.replace( 'off-canvas', '' );
|
||||||
menuItem.lastElementChild.className = menuItem.lastElementChild.className.replace( 'expanded-true', '' );
|
menuItem.lastElementChild.className = menuItem.lastElementChild.className.replace( 'expanded-true', '' );
|
||||||
|
|
||||||
// Update aria-expanded and :focus states.
|
// Update aria-expanded and :focus states.
|
||||||
toggleAriaExpandedState( menuItemAria );
|
toggleAriaExpandedState( menuItemAria );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Find first ancestor of an element by selector.
|
* Find first ancestor of an element by selector.
|
||||||
*
|
*
|
||||||
* @param {Object} child
|
* @param {Object} child
|
||||||
* @param {String} selector
|
* @param {String} selector
|
||||||
* @param {String} stopSelector
|
* @param {String} stopSelector
|
||||||
*/
|
*/
|
||||||
function getCurrentParent( child, selector, stopSelector ) {
|
function getCurrentParent( child, selector, stopSelector ) {
|
||||||
|
|
||||||
var currentParent = null;
|
var currentParent = null;
|
||||||
|
|
||||||
while ( child ) {
|
while ( child ) {
|
||||||
|
|
||||||
if ( child.matches(selector) ) {
|
if ( child.matches(selector) ) {
|
||||||
|
|
||||||
currentParent = child;
|
currentParent = child;
|
||||||
break;
|
break;
|
||||||
|
|
||||||
} else if ( stopSelector && child.matches(stopSelector) ) {
|
} else if ( stopSelector && child.matches(stopSelector) ) {
|
||||||
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
child = child.parentElement;
|
child = child.parentElement;
|
||||||
}
|
}
|
||||||
|
|
||||||
return currentParent;
|
return currentParent;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove all off-canvas states.
|
* Remove all off-canvas states.
|
||||||
*/
|
*/
|
||||||
function removeAllFocusStates() {
|
function removeAllFocusStates() {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var siteBranding = document.getElementsByClassName( 'site-branding' )[0];
|
var siteBranding = document.getElementsByClassName( 'site-branding' )[0];
|
||||||
var getFocusedElements = siteBranding.querySelectorAll(':hover, :focus, :focus-within');
|
var getFocusedElements = siteBranding.querySelectorAll(':hover, :focus, :focus-within');
|
||||||
var getFocusedClassElements = siteBranding.querySelectorAll('.is-focused');
|
var getFocusedClassElements = siteBranding.querySelectorAll('.is-focused');
|
||||||
var i;
|
var i;
|
||||||
var o;
|
var o;
|
||||||
|
|
||||||
for ( i = 0; i < getFocusedElements.length; i++) {
|
for ( i = 0; i < getFocusedElements.length; i++) {
|
||||||
getFocusedElements[i].blur();
|
getFocusedElements[i].blur();
|
||||||
}
|
}
|
||||||
|
|
||||||
for ( o = 0; o < getFocusedClassElements.length; o++) {
|
for ( o = 0; o < getFocusedClassElements.length; o++) {
|
||||||
deleteClass( getFocusedClassElements[o], 'is-focused' );
|
deleteClass( getFocusedClassElements[o], 'is-focused' );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Matches polyfill for IE11.
|
* Matches polyfill for IE11.
|
||||||
*/
|
*/
|
||||||
if (!Element.prototype.matches) {
|
if (!Element.prototype.matches) {
|
||||||
Element.prototype.matches = Element.prototype.msMatchesSelector;
|
Element.prototype.matches = Element.prototype.msMatchesSelector;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Toggle `focus` class to allow sub-menu access on touch screens.
|
* Toggle `focus` class to allow sub-menu access on touch screens.
|
||||||
*/
|
*/
|
||||||
function toggleSubmenuDisplay() {
|
function toggleSubmenuDisplay() {
|
||||||
|
|
||||||
document.addEventListener('touchstart', function(event) {
|
document.addEventListener('touchstart', function(event) {
|
||||||
|
|
||||||
if ( event.target.matches('a') ) {
|
if ( event.target.matches('a') ) {
|
||||||
|
|
||||||
var url = event.target.getAttribute( 'href' ) ? event.target.getAttribute( 'href' ) : '';
|
var url = event.target.getAttribute( 'href' ) ? event.target.getAttribute( 'href' ) : '';
|
||||||
|
|
||||||
// Open submenu if URL is #.
|
// Open submenu if URL is #.
|
||||||
if ( '#' === url && event.target.nextSibling.matches('.submenu-expand') ) {
|
if ( '#' === url && event.target.nextSibling.matches('.submenu-expand') ) {
|
||||||
openSubMenu( event.target );
|
openSubMenu( event.target );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check if .submenu-expand is touched.
|
// Check if .submenu-expand is touched.
|
||||||
if ( event.target.matches('.submenu-expand') ) {
|
if ( event.target.matches('.submenu-expand') ) {
|
||||||
openSubMenu(event.target);
|
openSubMenu(event.target);
|
||||||
|
|
||||||
// Check if child of .submenu-expand is touched.
|
// Check if child of .submenu-expand is touched.
|
||||||
} else if ( null != getCurrentParent( event.target, '.submenu-expand' ) &&
|
} else if ( null != getCurrentParent( event.target, '.submenu-expand' ) &&
|
||||||
getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ) {
|
getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ) {
|
||||||
openSubMenu( getCurrentParent( event.target, '.submenu-expand' ) );
|
openSubMenu( getCurrentParent( event.target, '.submenu-expand' ) );
|
||||||
|
|
||||||
// Check if .menu-item-link-return is touched.
|
// Check if .menu-item-link-return is touched.
|
||||||
} else if ( event.target.matches('.menu-item-link-return') ) {
|
} else if ( event.target.matches('.menu-item-link-return') ) {
|
||||||
closeSubMenu( event.target );
|
closeSubMenu( event.target );
|
||||||
|
|
||||||
// Check if child of .menu-item-link-return is touched.
|
// Check if child of .menu-item-link-return is touched.
|
||||||
} else if ( null != getCurrentParent( event.target, '.menu-item-link-return' ) && getCurrentParent( event.target, '.menu-item-link-return' ).matches( '.menu-item-link-return' ) ) {
|
} else if ( null != getCurrentParent( event.target, '.menu-item-link-return' ) && getCurrentParent( event.target, '.menu-item-link-return' ).matches( '.menu-item-link-return' ) ) {
|
||||||
closeSubMenu( event.target );
|
closeSubMenu( event.target );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prevent default mouse/focus events.
|
// Prevent default mouse/focus events.
|
||||||
removeAllFocusStates();
|
removeAllFocusStates();
|
||||||
|
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
document.addEventListener('touchend', function(event) {
|
document.addEventListener('touchend', function(event) {
|
||||||
|
|
||||||
var mainNav = getCurrentParent( event.target, '.main-navigation' );
|
var mainNav = getCurrentParent( event.target, '.main-navigation' );
|
||||||
|
|
||||||
if ( null != mainNav && hasClass( mainNav, '.main-navigation' ) ) {
|
if ( null != mainNav && hasClass( mainNav, '.main-navigation' ) ) {
|
||||||
// Prevent default mouse events.
|
// Prevent default mouse events.
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
} else if (
|
} else if (
|
||||||
event.target.matches('.submenu-expand') ||
|
event.target.matches('.submenu-expand') ||
|
||||||
null != getCurrentParent( event.target, '.submenu-expand' ) &&
|
null != getCurrentParent( event.target, '.submenu-expand' ) &&
|
||||||
getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ||
|
getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ||
|
||||||
event.target.matches('.menu-item-link-return') ||
|
event.target.matches('.menu-item-link-return') ||
|
||||||
null != getCurrentParent( event.target, '.menu-item-link-return' ) &&
|
null != getCurrentParent( event.target, '.menu-item-link-return' ) &&
|
||||||
getCurrentParent( event.target, '.menu-item-link-return' ).matches( '.menu-item-link-return' ) ) {
|
getCurrentParent( event.target, '.menu-item-link-return' ).matches( '.menu-item-link-return' ) ) {
|
||||||
// Prevent default mouse events.
|
// Prevent default mouse events.
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prevent default mouse/focus events.
|
// Prevent default mouse/focus events.
|
||||||
removeAllFocusStates();
|
removeAllFocusStates();
|
||||||
|
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
document.addEventListener('focus', function(event) {
|
document.addEventListener('focus', function(event) {
|
||||||
|
|
||||||
if ( event.target.matches('.main-navigation > div > ul > li a') ) {
|
if ( event.target.matches('.main-navigation > div > ul > li a') ) {
|
||||||
|
|
||||||
// Remove Focused elements in sibling div.
|
// Remove Focused elements in sibling div.
|
||||||
var currentDiv = getCurrentParent( event.target, 'div', '.main-navigation' );
|
var currentDiv = getCurrentParent( event.target, 'div', '.main-navigation' );
|
||||||
var currentDivSibling = currentDiv.previousElementSibling === null ? currentDiv.nextElementSibling : currentDiv.previousElementSibling;
|
var currentDivSibling = currentDiv.previousElementSibling === null ? currentDiv.nextElementSibling : currentDiv.previousElementSibling;
|
||||||
var focusedElement = currentDivSibling.querySelector( '.is-focused' );
|
var focusedElement = currentDivSibling.querySelector( '.is-focused' );
|
||||||
var focusedClass = 'is-focused';
|
var focusedClass = 'is-focused';
|
||||||
var prevLi = getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ).previousElementSibling;
|
var prevLi = getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ).previousElementSibling;
|
||||||
var nextLi = getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ).nextElementSibling;
|
var nextLi = getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ).nextElementSibling;
|
||||||
|
|
||||||
if ( null !== focusedElement && null !== hasClass( focusedElement, focusedClass ) ) {
|
if ( null !== focusedElement && null !== hasClass( focusedElement, focusedClass ) ) {
|
||||||
deleteClass( focusedElement, focusedClass );
|
deleteClass( focusedElement, focusedClass );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add .is-focused class to top-level li.
|
// Add .is-focused class to top-level li.
|
||||||
if ( getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ) ) {
|
if ( getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ) ) {
|
||||||
addClass( getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ), focusedClass );
|
addClass( getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ), focusedClass );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check for previous li.
|
// Check for previous li.
|
||||||
if ( prevLi && hasClass( prevLi, focusedClass ) ) {
|
if ( prevLi && hasClass( prevLi, focusedClass ) ) {
|
||||||
deleteClass( prevLi, focusedClass );
|
deleteClass( prevLi, focusedClass );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check for next li.
|
// Check for next li.
|
||||||
if ( nextLi && hasClass( nextLi, focusedClass ) ) {
|
if ( nextLi && hasClass( nextLi, focusedClass ) ) {
|
||||||
deleteClass( nextLi, focusedClass );
|
deleteClass( nextLi, focusedClass );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
document.addEventListener('click', function(event) {
|
document.addEventListener('click', function(event) {
|
||||||
|
|
||||||
// Remove all focused menu states when clicking outside site branding.
|
// Remove all focused menu states when clicking outside site branding.
|
||||||
if ( event.target !== document.getElementsByClassName( 'site-branding' )[0] ) {
|
if ( event.target !== document.getElementsByClassName( 'site-branding' )[0] ) {
|
||||||
removeAllFocusStates();
|
removeAllFocusStates();
|
||||||
} else {
|
} else {
|
||||||
// Nothing.
|
// Nothing.
|
||||||
}
|
}
|
||||||
|
|
||||||
}, false);
|
}, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Run our sub-menu function as soon as the document is `ready`.
|
* Run our sub-menu function as soon as the document is `ready`.
|
||||||
*/
|
*/
|
||||||
document.addEventListener( 'DOMContentLoaded', function() {
|
document.addEventListener( 'DOMContentLoaded', function() {
|
||||||
toggleSubmenuDisplay();
|
toggleSubmenuDisplay();
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Run our sub-menu function on selective refresh in the customizer.
|
* Run our sub-menu function on selective refresh in the customizer.
|
||||||
*/
|
*/
|
||||||
document.addEventListener( 'customize-preview-menu-refreshed', function( e, params ) {
|
document.addEventListener( 'customize-preview-menu-refreshed', function( e, params ) {
|
||||||
if ( 'menu-1' === params.wpNavMenuArgs.theme_location ) {
|
if ( 'menu-1' === params.wpNavMenuArgs.theme_location ) {
|
||||||
toggleSubmenuDisplay();
|
toggleSubmenuDisplay();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Run our sub-menu function every time the window resizes.
|
* Run our sub-menu function every time the window resizes.
|
||||||
*/
|
*/
|
||||||
var isResizing = false;
|
var isResizing = false;
|
||||||
window.addEventListener( 'resize', function() {
|
window.addEventListener( 'resize', function() {
|
||||||
isResizing = true;
|
isResizing = true;
|
||||||
debounce( function() {
|
debounce( function() {
|
||||||
if ( isResizing ) {
|
if ( isResizing ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleSubmenuDisplay();
|
toggleSubmenuDisplay();
|
||||||
isResizing = false;
|
isResizing = false;
|
||||||
|
|
||||||
}, 150 );
|
}, 150 );
|
||||||
} );
|
} );
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,44 +1,44 @@
|
||||||
{
|
{
|
||||||
"name": "twentynineteen",
|
"name": "twentynineteen",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "Default WP Theme",
|
"description": "Default WP Theme",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/WordPress/twentynineteen/issues"
|
"url": "https://github.com/WordPress/twentynineteen/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/WordPress/twentynineteen#readme",
|
"homepage": "https://github.com/WordPress/twentynineteen#readme",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@wordpress/browserslist-config": "^2.5.0",
|
"@wordpress/browserslist-config": "^2.5.0",
|
||||||
"autoprefixer": "^9.6.0",
|
"autoprefixer": "^9.6.0",
|
||||||
"chokidar-cli": "^2.0.0",
|
"chokidar-cli": "^2.0.0",
|
||||||
"node-sass": "^4.12.0",
|
"node-sass": "^4.14.1",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"postcss-cli": "^6.1.2",
|
"postcss-cli": "^7.0.0",
|
||||||
"postcss-focus-within": "^3.0.0",
|
"postcss-focus-within": "^3.0.0",
|
||||||
"rtlcss": "^2.4.0"
|
"rtlcss": "^2.5.0"
|
||||||
},
|
},
|
||||||
"rtlcssConfig": {
|
"rtlcssConfig": {
|
||||||
"options": {
|
"options": {
|
||||||
"autoRename": false,
|
"autoRename": false,
|
||||||
"autoRenameStrict": false,
|
"autoRenameStrict": false,
|
||||||
"blacklist": {},
|
"blacklist": {},
|
||||||
"clean": true,
|
"clean": true,
|
||||||
"greedy": false,
|
"greedy": false,
|
||||||
"processUrls": false,
|
"processUrls": false,
|
||||||
"stringMap": []
|
"stringMap": []
|
||||||
},
|
},
|
||||||
"plugins": [],
|
"plugins": [],
|
||||||
"map": false
|
"map": false
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"extends @wordpress/browserslist-config"
|
"extends @wordpress/browserslist-config"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build:style": "node-sass style.scss style.css --output-style expanded && postcss -r style.css",
|
"build:style": "node-sass style.scss style.css --output-style expanded && postcss -r style.css",
|
||||||
"build:style-editor": "node-sass style-editor.scss style-editor.css --output-style expanded && postcss -r style-editor.css",
|
"build:style-editor": "node-sass style-editor.scss style-editor.css --output-style expanded && postcss -r style-editor.css",
|
||||||
"build:style-editor-customizer": "node-sass style-editor-customizer.scss style-editor-customizer.css --output-style expanded && postcss -r style-editor-customizer.css",
|
"build:style-editor-customizer": "node-sass style-editor-customizer.scss style-editor-customizer.css --output-style expanded && postcss -r style-editor-customizer.css",
|
||||||
"build:rtl": "rtlcss style.css style-rtl.css",
|
"build:rtl": "rtlcss style.css style-rtl.css",
|
||||||
"build:print": "node-sass print.scss print.css --output-style expanded && postcss -r print.css",
|
"build:print": "node-sass print.scss print.css --output-style expanded && postcss -r print.css",
|
||||||
"build": "run-p \"build:*\"",
|
"build": "run-p \"build:*\"",
|
||||||
"watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial"
|
"watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
var postcssFocusWithin = require('postcss-focus-within');
|
var postcssFocusWithin = require('postcss-focus-within');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
plugins: {
|
plugins: {
|
||||||
autoprefixer: {}
|
autoprefixer: {}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
plugins: [
|
plugins: [
|
||||||
postcssFocusWithin(/* pluginOptions */)
|
postcssFocusWithin(/* pluginOptions */)
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ Theme Name: Twenty Nineteen
|
||||||
|
|
||||||
Adding print support. The print styles are based on the the great work of
|
Adding print support. The print styles are based on the the great work of
|
||||||
Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/.
|
Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/.
|
||||||
*/
|
*/
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
>>> TABLE OF CONTENTS:
|
>>> TABLE OF CONTENTS:
|
||||||
----------------------------------------------------------------
|
----------------------------------------------------------------
|
||||||
|
|
@ -12,151 +12,151 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
|
||||||
# Page breaks
|
# Page breaks
|
||||||
# Links
|
# Links
|
||||||
# Visibility
|
# Visibility
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
@media print {
|
@media print {
|
||||||
/* Margins */
|
/* Margins */
|
||||||
@page {
|
@page {
|
||||||
margin: 2cm;
|
margin: 2cm;
|
||||||
}
|
}
|
||||||
.entry {
|
.entry {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
.entry .entry-header, .site-footer .site-info {
|
.entry .entry-header, .site-footer .site-info {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
/* Fonts */
|
/* Fonts */
|
||||||
body {
|
body {
|
||||||
font: 13pt Georgia, "Times New Roman", Times, serif;
|
font: 13pt Georgia, "Times New Roman", Times, serif;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
background: #fff !important;
|
background: #fff !important;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 24pt;
|
font-size: 24pt;
|
||||||
}
|
}
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
.has-regular-font-size,
|
.has-regular-font-size,
|
||||||
.has-large-font-size,
|
.has-large-font-size,
|
||||||
h2.author-title,
|
h2.author-title,
|
||||||
p.author-bio,
|
p.author-bio,
|
||||||
.comments-title, h3 {
|
.comments-title, h3 {
|
||||||
font-size: 14pt;
|
font-size: 14pt;
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
}
|
}
|
||||||
/* Page breaks */
|
/* Page breaks */
|
||||||
a {
|
a {
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
}
|
}
|
||||||
blockquote {
|
blockquote {
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
}
|
}
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
page-break-after: avoid;
|
page-break-after: avoid;
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
page-break-after: avoid;
|
page-break-after: avoid;
|
||||||
}
|
}
|
||||||
table, pre {
|
table, pre {
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
}
|
}
|
||||||
ul, ol, dl {
|
ul, ol, dl {
|
||||||
page-break-before: avoid;
|
page-break-before: avoid;
|
||||||
}
|
}
|
||||||
/* Links */
|
/* Links */
|
||||||
a:link, a:visited, a {
|
a:link, a:visited, a {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
}
|
}
|
||||||
a[href^=http]:after {
|
a[href^=http]:after {
|
||||||
content: " < " attr(href) "> ";
|
content: " < " attr(href) "> ";
|
||||||
}
|
}
|
||||||
a:after > img {
|
a:after > img {
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
article a[href^="#"]:after {
|
article a[href^="#"]:after {
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
a:not(:local-link):after {
|
a:not(:local-link):after {
|
||||||
content: " < " attr(href) "> ";
|
content: " < " attr(href) "> ";
|
||||||
}
|
}
|
||||||
/* Visibility */
|
/* Visibility */
|
||||||
.main-navigation,
|
.main-navigation,
|
||||||
.site-title + .main-navigation,
|
.site-title + .main-navigation,
|
||||||
.social-navigation,
|
.social-navigation,
|
||||||
.site-branding-container:before,
|
.site-branding-container:before,
|
||||||
.entry .entry-title:before,
|
.entry .entry-title:before,
|
||||||
.entry-footer,
|
.entry-footer,
|
||||||
.author-description:before,
|
.author-description:before,
|
||||||
.post-navigation,
|
.post-navigation,
|
||||||
.widget-area,
|
.widget-area,
|
||||||
.comment-form-flex,
|
.comment-form-flex,
|
||||||
.comment-reply,
|
.comment-reply,
|
||||||
.comment .comment-metadata .edit-link {
|
.comment .comment-metadata .edit-link {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.entry .entry-content .wp-block-button .wp-block-button__link,
|
.entry .entry-content .wp-block-button .wp-block-button__link,
|
||||||
.entry .entry-content .button {
|
.entry .entry-content .button {
|
||||||
color: #000;
|
color: #000;
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
/* Site Header (With Featured Image) */
|
/* Site Header (With Featured Image) */
|
||||||
.site-header.featured-image {
|
.site-header.featured-image {
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
.site-header.featured-image .main-navigation a,
|
.site-header.featured-image .main-navigation a,
|
||||||
.site-header.featured-image .main-navigation a + svg,
|
.site-header.featured-image .main-navigation a + svg,
|
||||||
.site-header.featured-image .social-navigation a,
|
.site-header.featured-image .social-navigation a,
|
||||||
.site-header.featured-image .site-title a,
|
.site-header.featured-image .site-title a,
|
||||||
.site-header.featured-image .site-featured-image a,
|
.site-header.featured-image .site-featured-image a,
|
||||||
.site-header.featured-image .site-branding .site-title,
|
.site-header.featured-image .site-branding .site-title,
|
||||||
.site-header.featured-image .site-branding .site-description,
|
.site-header.featured-image .site-branding .site-description,
|
||||||
.site-header.featured-image .main-navigation a:after,
|
.site-header.featured-image .main-navigation a:after,
|
||||||
.site-header.featured-image .main-navigation .main-menu > li.menu-item-has-children:after,
|
.site-header.featured-image .main-navigation .main-menu > li.menu-item-has-children:after,
|
||||||
.site-header.featured-image .main-navigation li,
|
.site-header.featured-image .main-navigation li,
|
||||||
.site-header.featured-image .social-navigation li,
|
.site-header.featured-image .social-navigation li,
|
||||||
.site-header.featured-image .entry-meta,
|
.site-header.featured-image .entry-meta,
|
||||||
.site-header.featured-image .entry-title,
|
.site-header.featured-image .entry-title,
|
||||||
.site-header.featured-image#masthead .site-title a {
|
.site-header.featured-image#masthead .site-title a {
|
||||||
color: #000;
|
color: #000;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
.site-header.featured-image .site-featured-image .entry-header,
|
.site-header.featured-image .site-featured-image .entry-header,
|
||||||
.site-header.featured-image .site-branding-container {
|
.site-header.featured-image .site-branding-container {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.site-header.featured-image .site-featured-image .post-thumbnail img {
|
.site-header.featured-image .site-featured-image .post-thumbnail img {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: initial;
|
height: initial;
|
||||||
width: initial;
|
width: initial;
|
||||||
object-fit: none;
|
object-fit: none;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
/* Remove image filters from featured image */
|
/* Remove image filters from featured image */
|
||||||
.image-filters-enabled *:after {
|
.image-filters-enabled *:after {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
.image-filters-enabled .site-header.featured-image .site-featured-image:before {
|
.image-filters-enabled .site-header.featured-image .site-featured-image:before {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.image-filters-enabled .site-header.featured-image .site-featured-image .post-thumbnail img {
|
.image-filters-enabled .site-header.featured-image .site-featured-image .post-thumbnail img {
|
||||||
filter: none;
|
filter: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,198 +1,198 @@
|
||||||
/*
|
/*
|
||||||
Theme Name: Twenty Nineteen
|
Theme Name: Twenty Nineteen
|
||||||
|
|
||||||
Adding print support. The print styles are based on the the great work of
|
Adding print support. The print styles are based on the the great work of
|
||||||
Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/.
|
Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
>>> TABLE OF CONTENTS:
|
>>> TABLE OF CONTENTS:
|
||||||
----------------------------------------------------------------
|
----------------------------------------------------------------
|
||||||
# Margins
|
# Margins
|
||||||
# Typography
|
# Typography
|
||||||
# Page breaks
|
# Page breaks
|
||||||
# Links
|
# Links
|
||||||
# Visibility
|
# Visibility
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
|
|
||||||
/* Margins */
|
/* Margins */
|
||||||
|
|
||||||
@page {
|
@page {
|
||||||
margin: 2cm;
|
margin: 2cm;
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry {
|
.entry {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry .entry-header, .site-footer .site-info {
|
.entry .entry-header, .site-footer .site-info {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fonts */
|
/* Fonts */
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font: 13pt Georgia, "Times New Roman", Times, serif;
|
font: 13pt Georgia, "Times New Roman", Times, serif;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
background: #fff !important;
|
background: #fff !important;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 24pt;
|
font-size: 24pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
.has-regular-font-size,
|
.has-regular-font-size,
|
||||||
.has-large-font-size,
|
.has-large-font-size,
|
||||||
h2.author-title,
|
h2.author-title,
|
||||||
p.author-bio,
|
p.author-bio,
|
||||||
.comments-title, h3 {
|
.comments-title, h3 {
|
||||||
font-size: 14pt;
|
font-size: 14pt;
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Page breaks */
|
/* Page breaks */
|
||||||
|
|
||||||
a {
|
a {
|
||||||
page-break-inside: avoid
|
page-break-inside: avoid
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
page-break-after: avoid;
|
page-break-after: avoid;
|
||||||
page-break-inside: avoid
|
page-break-inside: avoid
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
page-break-after: avoid;
|
page-break-after: avoid;
|
||||||
}
|
}
|
||||||
|
|
||||||
table, pre {
|
table, pre {
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul, ol, dl {
|
ul, ol, dl {
|
||||||
page-break-before: avoid;
|
page-break-before: avoid;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Links */
|
/* Links */
|
||||||
|
|
||||||
a:link, a:visited, a {
|
a:link, a:visited, a {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
}
|
}
|
||||||
|
|
||||||
a[href^=http]:after {
|
a[href^=http]:after {
|
||||||
content: " < " attr(href) "> ";
|
content: " < " attr(href) "> ";
|
||||||
}
|
}
|
||||||
|
|
||||||
a:after > img {
|
a:after > img {
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
article a[href^="#"]:after {
|
article a[href^="#"]:after {
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
a:not(:local-link):after {
|
a:not(:local-link):after {
|
||||||
content: " < " attr(href) "> ";
|
content: " < " attr(href) "> ";
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Visibility */
|
/* Visibility */
|
||||||
.main-navigation,
|
.main-navigation,
|
||||||
.site-title + .main-navigation,
|
.site-title + .main-navigation,
|
||||||
.social-navigation,
|
.social-navigation,
|
||||||
.site-branding-container:before,
|
.site-branding-container:before,
|
||||||
.entry .entry-title:before,
|
.entry .entry-title:before,
|
||||||
.entry-footer,
|
.entry-footer,
|
||||||
.author-description:before,
|
.author-description:before,
|
||||||
.post-navigation,
|
.post-navigation,
|
||||||
.widget-area,
|
.widget-area,
|
||||||
.comment-form-flex,
|
.comment-form-flex,
|
||||||
.comment-reply,
|
.comment-reply,
|
||||||
.comment .comment-metadata .edit-link {
|
.comment .comment-metadata .edit-link {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry .entry-content .wp-block-button .wp-block-button__link,
|
.entry .entry-content .wp-block-button .wp-block-button__link,
|
||||||
.entry .entry-content .button {
|
.entry .entry-content .button {
|
||||||
color: #000;
|
color: #000;
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Site Header (With Featured Image) */
|
/* Site Header (With Featured Image) */
|
||||||
.site-header.featured-image {
|
.site-header.featured-image {
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
|
||||||
.main-navigation a,
|
.main-navigation a,
|
||||||
.main-navigation a + svg,
|
.main-navigation a + svg,
|
||||||
.social-navigation a,
|
.social-navigation a,
|
||||||
.site-title a,
|
.site-title a,
|
||||||
.site-featured-image a,
|
.site-featured-image a,
|
||||||
.site-branding .site-title,
|
.site-branding .site-title,
|
||||||
.site-branding .site-description,
|
.site-branding .site-description,
|
||||||
.main-navigation a:after,
|
.main-navigation a:after,
|
||||||
.main-navigation .main-menu > li.menu-item-has-children:after,
|
.main-navigation .main-menu > li.menu-item-has-children:after,
|
||||||
.main-navigation li,
|
.main-navigation li,
|
||||||
.social-navigation li,
|
.social-navigation li,
|
||||||
.entry-meta,
|
.entry-meta,
|
||||||
.entry-title,
|
.entry-title,
|
||||||
&#masthead .site-title a {
|
&#masthead .site-title a {
|
||||||
color: #000;
|
color: #000;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-featured-image .entry-header,
|
.site-featured-image .entry-header,
|
||||||
.site-branding-container {
|
.site-branding-container {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-featured-image .post-thumbnail img {
|
.site-featured-image .post-thumbnail img {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: initial;
|
height: initial;
|
||||||
width: initial;
|
width: initial;
|
||||||
object-fit: none;
|
object-fit: none;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remove image filters from featured image */
|
/* Remove image filters from featured image */
|
||||||
.image-filters-enabled {
|
.image-filters-enabled {
|
||||||
|
|
||||||
*:after {
|
*:after {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-header.featured-image .site-featured-image:before {
|
.site-header.featured-image .site-featured-image:before {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-header.featured-image .site-featured-image .post-thumbnail img {
|
.site-header.featured-image .site-featured-image .post-thumbnail img {
|
||||||
filter: none;
|
filter: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,74 +1,79 @@
|
||||||
=== Twenty Nineteen ===
|
=== Twenty Nineteen ===
|
||||||
Contributors: wordpressdotorg
|
Contributors: wordpressdotorg
|
||||||
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready
|
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready
|
||||||
Requires at least: 4.9.6
|
Requires at least: 4.9.6
|
||||||
Tested up to: 5.0
|
Tested up to: 5.0
|
||||||
Stable tag: 1.5
|
Stable tag: 1.5
|
||||||
License: GPLv2 or later
|
License: GPLv2 or later
|
||||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||||
|
|
||||||
Our 2019 default theme is designed to show off the power of the block editor.
|
Our 2019 default theme is designed to show off the power of the block editor.
|
||||||
|
|
||||||
== Description ==
|
== Description ==
|
||||||
Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
|
Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
|
||||||
|
|
||||||
For more information about Twenty Nineteen please go to https://wordpress.org/support/article/twenty-nineteen/.
|
For more information about Twenty Nineteen please go to https://wordpress.org/support/article/twenty-nineteen/.
|
||||||
|
|
||||||
== Installation ==
|
== Installation ==
|
||||||
|
|
||||||
1. In your admin panel, go to Appearance -> Themes and click the 'Add New' button.
|
1. In your admin panel, go to Appearance -> Themes and click the 'Add New' button.
|
||||||
2. Type in Twenty Nineteen in the search form and press the 'Enter' key on your keyboard.
|
2. Type in Twenty Nineteen in the search form and press the 'Enter' key on your keyboard.
|
||||||
3. Click on the 'Activate' button to use your new theme right away.
|
3. Click on the 'Activate' button to use your new theme right away.
|
||||||
4. Go to https://wordpress.org/support/article/twenty-nineteen/ for a guide on how to customize this theme.
|
4. Go to https://wordpress.org/support/article/twenty-nineteen/ for a guide on how to customize this theme.
|
||||||
5. Navigate to Appearance > Customize in your admin panel and customize to taste.
|
5. Navigate to Appearance > Customize in your admin panel and customize to taste.
|
||||||
|
|
||||||
== Copyright ==
|
== Copyright ==
|
||||||
|
|
||||||
Twenty Nineteen WordPress Theme, Copyright 2018-2020 WordPress.org
|
Twenty Nineteen WordPress Theme, Copyright 2018-2020 WordPress.org
|
||||||
Twenty Nineteen is distributed under the terms of the GNU GPL
|
Twenty Nineteen is distributed under the terms of the GNU GPL
|
||||||
|
|
||||||
This program is free software: you can redistribute it and/or modify
|
This program is free software: you can redistribute it and/or modify
|
||||||
it under the terms of the GNU General Public License as published by
|
it under the terms of the GNU General Public License as published by
|
||||||
the Free Software Foundation, either version 2 of the License, or
|
the Free Software Foundation, either version 2 of the License, or
|
||||||
(at your option) any later version.
|
(at your option) any later version.
|
||||||
|
|
||||||
This program is distributed in the hope that it will be useful,
|
This program is distributed in the hope that it will be useful,
|
||||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
GNU General Public License for more details.
|
GNU General Public License for more details.
|
||||||
|
|
||||||
== Changelog ==
|
== Changelog ==
|
||||||
|
|
||||||
= 1.5 =
|
= 1.6 =
|
||||||
* Released: March 31, 2020
|
* Released: June 10, 2020
|
||||||
|
|
||||||
https://codex.wordpress.org/Twenty_Nineteen_Theme_Changelog#Version_1.5
|
https://codex.wordpress.org/Twenty_Nineteen_Theme_Changelog#Version_1.6
|
||||||
|
|
||||||
= 1.4 =
|
= 1.5 =
|
||||||
* Released: May 7, 2019
|
* Released: March 31, 2020
|
||||||
|
|
||||||
https://codex.wordpress.org/Twenty_Nineteen_Theme_Changelog#Version_1.4
|
https://codex.wordpress.org/Twenty_Nineteen_Theme_Changelog#Version_1.5
|
||||||
|
|
||||||
= 1.3 =
|
= 1.4 =
|
||||||
* Released: February 21, 2019
|
* Released: May 7, 2019
|
||||||
|
|
||||||
https://codex.wordpress.org/Twenty_Nineteen_Theme_Changelog#Version_1.3
|
https://codex.wordpress.org/Twenty_Nineteen_Theme_Changelog#Version_1.4
|
||||||
|
|
||||||
= 1.2 =
|
= 1.3 =
|
||||||
* Released: January 9, 2019
|
* Released: February 21, 2019
|
||||||
|
|
||||||
https://codex.wordpress.org/Twenty_Nineteen_Theme_Changelog#Version_1.2
|
https://codex.wordpress.org/Twenty_Nineteen_Theme_Changelog#Version_1.3
|
||||||
|
|
||||||
= 1.1 =
|
= 1.2 =
|
||||||
* Released: December 19, 2018
|
* Released: January 9, 2019
|
||||||
|
|
||||||
https://codex.wordpress.org/Twenty_Nineteen_Theme_Changelog#Version_1.1
|
https://codex.wordpress.org/Twenty_Nineteen_Theme_Changelog#Version_1.2
|
||||||
|
|
||||||
= 1.0 =
|
= 1.1 =
|
||||||
* Released: December 6, 2018
|
* Released: December 19, 2018
|
||||||
|
|
||||||
Initial release
|
https://codex.wordpress.org/Twenty_Nineteen_Theme_Changelog#Version_1.1
|
||||||
|
|
||||||
== Resources ==
|
= 1.0 =
|
||||||
* normalize.css, © 2012-2018 Nicolas Gallagher and Jonathan Neal, MIT
|
* Released: December 6, 2018
|
||||||
* Underscores, © 2012-2019 Automattic, Inc., GNU GPL v2 or later
|
|
||||||
|
Initial release
|
||||||
|
|
||||||
|
== Resources ==
|
||||||
|
* normalize.css, © 2012-2018 Nicolas Gallagher and Jonathan Neal, MIT
|
||||||
|
* Underscores, © 2012-2019 Automattic, Inc., GNU GPL v2 or later
|
||||||
|
|
|
||||||
|
|
@ -1,341 +1,341 @@
|
||||||
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
|
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
|
||||||
/* Document
|
/* Document
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 1. Correct the line height in all browsers.
|
* 1. Correct the line height in all browsers.
|
||||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
html {
|
html {
|
||||||
line-height: 1.15; /* 1 */
|
line-height: 1.15; /* 1 */
|
||||||
-webkit-text-size-adjust: 100%; /* 2 */
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sections
|
/* Sections
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove the margin in all browsers.
|
* Remove the margin in all browsers.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Correct the font size and margin on `h1` elements within `section` and
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
* `article` contexts in Chrome, Firefox, and Safari.
|
* `article` contexts in Chrome, Firefox, and Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
margin: 0.67em 0;
|
margin: 0.67em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Grouping content
|
/* Grouping content
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 1. Add the correct box sizing in Firefox.
|
* 1. Add the correct box sizing in Firefox.
|
||||||
* 2. Show the overflow in Edge and IE.
|
* 2. Show the overflow in Edge and IE.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
box-sizing: content-box; /* 1 */
|
box-sizing: content-box; /* 1 */
|
||||||
height: 0; /* 1 */
|
height: 0; /* 1 */
|
||||||
overflow: visible; /* 2 */
|
overflow: visible; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
* 2. Correct the odd `em` font sizing in all browsers.
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
font-family: monospace, monospace; /* 1 */
|
font-family: monospace, monospace; /* 1 */
|
||||||
font-size: 1em; /* 2 */
|
font-size: 1em; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Text-level semantics
|
/* Text-level semantics
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove the gray background on active links in IE 10.
|
* Remove the gray background on active links in IE 10.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
a {
|
a {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 1. Remove the bottom border in Chrome 57-
|
* 1. Remove the bottom border in Chrome 57-
|
||||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
abbr[title] {
|
abbr[title] {
|
||||||
border-bottom: none; /* 1 */
|
border-bottom: none; /* 1 */
|
||||||
text-decoration: underline; /* 2 */
|
text-decoration: underline; /* 2 */
|
||||||
text-decoration: underline dotted; /* 2 */
|
text-decoration: underline dotted; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
b,
|
b,
|
||||||
strong {
|
strong {
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
* 2. Correct the odd `em` font sizing in all browsers.
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-family: monospace, monospace; /* 1 */
|
font-family: monospace, monospace; /* 1 */
|
||||||
font-size: 1em; /* 2 */
|
font-size: 1em; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add the correct font size in all browsers.
|
* Add the correct font size in all browsers.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
* all browsers.
|
* all browsers.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
sub,
|
sub,
|
||||||
sup {
|
sup {
|
||||||
font-size: 75%;
|
font-size: 75%;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
sub {
|
sub {
|
||||||
bottom: -0.25em;
|
bottom: -0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
sup {
|
sup {
|
||||||
top: -0.5em;
|
top: -0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Embedded content
|
/* Embedded content
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove the border on images inside links in IE 10.
|
* Remove the border on images inside links in IE 10.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Forms
|
/* Forms
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 1. Change the font styles in all browsers.
|
* 1. Change the font styles in all browsers.
|
||||||
* 2. Remove the margin in Firefox and Safari.
|
* 2. Remove the margin in Firefox and Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button,
|
button,
|
||||||
input,
|
input,
|
||||||
optgroup,
|
optgroup,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
font-family: inherit; /* 1 */
|
font-family: inherit; /* 1 */
|
||||||
font-size: 100%; /* 1 */
|
font-size: 100%; /* 1 */
|
||||||
line-height: 1.15; /* 1 */
|
line-height: 1.15; /* 1 */
|
||||||
margin: 0; /* 2 */
|
margin: 0; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Show the overflow in IE.
|
* Show the overflow in IE.
|
||||||
* 1. Show the overflow in Edge.
|
* 1. Show the overflow in Edge.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button,
|
button,
|
||||||
input { /* 1 */
|
input { /* 1 */
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||||
* 1. Remove the inheritance of text transform in Firefox.
|
* 1. Remove the inheritance of text transform in Firefox.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button,
|
button,
|
||||||
select { /* 1 */
|
select { /* 1 */
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Correct the inability to style clickable types in iOS and Safari.
|
* Correct the inability to style clickable types in iOS and Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button,
|
button,
|
||||||
[type="button"],
|
[type="button"],
|
||||||
[type="reset"],
|
[type="reset"],
|
||||||
[type="submit"] {
|
[type="submit"] {
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove the inner border and padding in Firefox.
|
* Remove the inner border and padding in Firefox.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button::-moz-focus-inner,
|
button::-moz-focus-inner,
|
||||||
[type="button"]::-moz-focus-inner,
|
[type="button"]::-moz-focus-inner,
|
||||||
[type="reset"]::-moz-focus-inner,
|
[type="reset"]::-moz-focus-inner,
|
||||||
[type="submit"]::-moz-focus-inner {
|
[type="submit"]::-moz-focus-inner {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Restore the focus styles unset by the previous rule.
|
* Restore the focus styles unset by the previous rule.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button:-moz-focusring,
|
button:-moz-focusring,
|
||||||
[type="button"]:-moz-focusring,
|
[type="button"]:-moz-focusring,
|
||||||
[type="reset"]:-moz-focusring,
|
[type="reset"]:-moz-focusring,
|
||||||
[type="submit"]:-moz-focusring {
|
[type="submit"]:-moz-focusring {
|
||||||
outline: 1px dotted ButtonText;
|
outline: 1px dotted ButtonText;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Correct the padding in Firefox.
|
* Correct the padding in Firefox.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
padding: 0.35em 0.75em 0.625em;
|
padding: 0.35em 0.75em 0.625em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 1. Correct the text wrapping in Edge and IE.
|
* 1. Correct the text wrapping in Edge and IE.
|
||||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
* 3. Remove the padding so developers are not caught out when they zero out
|
* 3. Remove the padding so developers are not caught out when they zero out
|
||||||
* `fieldset` elements in all browsers.
|
* `fieldset` elements in all browsers.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
legend {
|
legend {
|
||||||
box-sizing: border-box; /* 1 */
|
box-sizing: border-box; /* 1 */
|
||||||
color: inherit; /* 2 */
|
color: inherit; /* 2 */
|
||||||
display: table; /* 1 */
|
display: table; /* 1 */
|
||||||
max-width: 100%; /* 1 */
|
max-width: 100%; /* 1 */
|
||||||
padding: 0; /* 3 */
|
padding: 0; /* 3 */
|
||||||
white-space: normal; /* 1 */
|
white-space: normal; /* 1 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove the default vertical scrollbar in IE 10+.
|
* Remove the default vertical scrollbar in IE 10+.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 1. Add the correct box sizing in IE 10.
|
* 1. Add the correct box sizing in IE 10.
|
||||||
* 2. Remove the padding in IE 10.
|
* 2. Remove the padding in IE 10.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[type="checkbox"],
|
[type="checkbox"],
|
||||||
[type="radio"] {
|
[type="radio"] {
|
||||||
box-sizing: border-box; /* 1 */
|
box-sizing: border-box; /* 1 */
|
||||||
padding: 0; /* 2 */
|
padding: 0; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
[type="number"]::-webkit-outer-spin-button {
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 1. Correct the odd appearance in Chrome and Safari.
|
* 1. Correct the odd appearance in Chrome and Safari.
|
||||||
* 2. Correct the outline style in Safari.
|
* 2. Correct the outline style in Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[type="search"] {
|
[type="search"] {
|
||||||
-webkit-appearance: textfield; /* 1 */
|
-webkit-appearance: textfield; /* 1 */
|
||||||
outline-offset: -2px; /* 2 */
|
outline-offset: -2px; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove the inner padding in Chrome and Safari on macOS.
|
* Remove the inner padding in Chrome and Safari on macOS.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[type="search"]::-webkit-search-decoration {
|
[type="search"]::-webkit-search-decoration {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
* 2. Change font properties to `inherit` in Safari.
|
* 2. Change font properties to `inherit` in Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
::-webkit-file-upload-button {
|
||||||
-webkit-appearance: button; /* 1 */
|
-webkit-appearance: button; /* 1 */
|
||||||
font: inherit; /* 2 */
|
font: inherit; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Interactive
|
/* Interactive
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
details {
|
details {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Add the correct display in all browsers.
|
* Add the correct display in all browsers.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
display: list-item;
|
display: list-item;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Misc
|
/* Misc
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add the correct display in IE 10+.
|
* Add the correct display in IE 10+.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
template {
|
template {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add the correct display in IE 10.
|
* Add the correct display in IE 10.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[hidden] {
|
[hidden] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,92 +1,92 @@
|
||||||
html {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
background-color: $color__background_selection;
|
background-color: $color__background_selection;
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background-color: $color__background_selection;
|
background-color: $color__background_selection;
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
*:before,
|
*:before,
|
||||||
*:after {
|
*:after {
|
||||||
box-sizing: inherit;
|
box-sizing: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: $color__background-body;
|
background-color: $color__background-body;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@include link-transition;
|
@include link-transition;
|
||||||
color: $color__link;
|
color: $color__link;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover,
|
a:hover,
|
||||||
a:active {
|
a:active {
|
||||||
color: $color__link-hover;
|
color: $color__link-hover;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:focus {
|
a:focus {
|
||||||
outline: thin;
|
outline: thin;
|
||||||
outline-style: dotted;
|
outline-style: dotted;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
clear: both;
|
clear: both;
|
||||||
margin: $size__spacing-unit 0;
|
margin: $size__spacing-unit 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1:not(.site-title),
|
h1:not(.site-title),
|
||||||
h2 {
|
h2 {
|
||||||
@include post-section-dash;
|
@include post-section-dash;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
background-color: $color__text-light;
|
background-color: $color__text-light;
|
||||||
border: 0;
|
border: 0;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "lists";
|
@import "lists";
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: auto;
|
height: auto;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
figure {
|
figure {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
border-left: 2px solid $color__link;
|
border-left: 2px solid $color__link;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
padding: 0 0 0 $size__spacing-unit;
|
padding: 0 0 0 $size__spacing-unit;
|
||||||
|
|
||||||
> p {
|
> p {
|
||||||
margin: 0 0 $size__spacing-unit;
|
margin: 0 0 $size__spacing-unit;
|
||||||
}
|
}
|
||||||
|
|
||||||
cite {
|
cite {
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "tables";
|
@import "tables";
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,33 @@
|
||||||
ul,
|
ul,
|
||||||
ol {
|
ol {
|
||||||
padding-left: ( 1 * $size__spacing-unit );
|
padding-left: ( 1 * $size__spacing-unit );
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style: disc;
|
list-style: disc;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style-type: circle;
|
list-style-type: circle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ol {
|
ol {
|
||||||
list-style: decimal;
|
list-style: decimal;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
line-height: $font__line-height-body;
|
line-height: $font__line-height-body;
|
||||||
}
|
}
|
||||||
|
|
||||||
li > ul,
|
li > ul,
|
||||||
li > ol {
|
li > ol {
|
||||||
padding-left: ( 2 * $size__spacing-unit );
|
padding-left: ( 2 * $size__spacing-unit );
|
||||||
}
|
}
|
||||||
|
|
||||||
dt {
|
dt {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
dd {
|
dd {
|
||||||
margin: 0 $size__spacing-unit $size__spacing-unit;
|
margin: 0 $size__spacing-unit $size__spacing-unit;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
table {
|
table {
|
||||||
margin: 0 0 $size__spacing-unit;
|
margin: 0 0 $size__spacing-unit;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@include font-family( $font__heading );
|
@include font-family( $font__heading );
|
||||||
|
|
||||||
td,
|
td,
|
||||||
th {
|
th {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
border: 1px solid $color__text-light;
|
border: 1px solid $color__text-light;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,37 @@
|
||||||
.button,
|
.button,
|
||||||
button,
|
button,
|
||||||
input[type="button"],
|
input[type="button"],
|
||||||
input[type="reset"],
|
input[type="reset"],
|
||||||
input[type="submit"] {
|
input[type="submit"] {
|
||||||
|
|
||||||
@include button-transition;
|
@include button-transition;
|
||||||
background: $color__background-button;
|
background: $color__background-button;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: $color__background-body;
|
color: $color__background-body;
|
||||||
@include font-family( $font__heading );
|
@include font-family( $font__heading );
|
||||||
font-size: $font__size-sm;
|
font-size: $font__size-sm;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: $font__line-height-heading;
|
line-height: $font__line-height-heading;
|
||||||
outline: none;
|
outline: none;
|
||||||
padding: ( $size__spacing-unit * .76 ) $size__spacing-unit;
|
padding: ( $size__spacing-unit * .76 ) $size__spacing-unit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $color__background-button-hover;
|
background: $color__background-button-hover;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:visited {
|
&:visited {
|
||||||
color: $color__background-body;
|
color: $color__background-body;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
background: $color__background-button-hover;
|
background: $color__background-button-hover;
|
||||||
outline: thin dotted;
|
outline: thin dotted;
|
||||||
outline-offset: -4px;
|
outline-offset: -4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,58 +1,58 @@
|
||||||
input[type="text"],
|
input[type="text"],
|
||||||
input[type="email"],
|
input[type="email"],
|
||||||
input[type="url"],
|
input[type="url"],
|
||||||
input[type="password"],
|
input[type="password"],
|
||||||
input[type="search"],
|
input[type="search"],
|
||||||
input[type="number"],
|
input[type="number"],
|
||||||
input[type="tel"],
|
input[type="tel"],
|
||||||
input[type="range"],
|
input[type="range"],
|
||||||
input[type="date"],
|
input[type="date"],
|
||||||
input[type="month"],
|
input[type="month"],
|
||||||
input[type="week"],
|
input[type="week"],
|
||||||
input[type="time"],
|
input[type="time"],
|
||||||
input[type="datetime"],
|
input[type="datetime"],
|
||||||
input[type="datetime-local"],
|
input[type="datetime-local"],
|
||||||
input[type="color"],
|
input[type="color"],
|
||||||
textarea {
|
textarea {
|
||||||
-webkit-backface-visibility: hidden;
|
-webkit-backface-visibility: hidden;
|
||||||
background: $color__background-input;
|
background: $color__background-input;
|
||||||
border: solid 1px $color__border;
|
border: solid 1px $color__border;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
outline: none;
|
outline: none;
|
||||||
padding: #{.36 * $size__spacing-unit} #{.66 * $size__spacing-unit};
|
padding: #{.36 * $size__spacing-unit} #{.66 * $size__spacing-unit};
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
outline-offset: 0;
|
outline-offset: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: $color__link;
|
border-color: $color__link;
|
||||||
outline: thin solid rgba( $color__link, 0.15 );
|
outline: thin solid rgba( $color__link, 0.15 );
|
||||||
outline-offset: -4px;
|
outline-offset: -4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="search"] {
|
input[type="search"] {
|
||||||
&::-webkit-search-decoration {
|
&::-webkit-search-decoration {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: $size__spacing-unit 0;
|
margin: $size__spacing-unit 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
@import "buttons";
|
@import "buttons";
|
||||||
|
|
||||||
@import "fields";
|
@import "fields";
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
|
|
||||||
/** === Layout === */
|
/** === Layout === */
|
||||||
|
|
||||||
#page {
|
#page {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-content {
|
.site-content {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,32 @@
|
||||||
.wp-caption {
|
.wp-caption {
|
||||||
margin-bottom: calc(1.5 * #{$size__spacing-unit});
|
margin-bottom: calc(1.5 * #{$size__spacing-unit});
|
||||||
|
|
||||||
&.aligncenter {
|
&.aligncenter {
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: calc( #{$size__site-tablet-content} / 2 );
|
left: calc( #{$size__site-tablet-content} / 2 );
|
||||||
transform: translateX( -50% );
|
transform: translateX( -50% );
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media(desktop) {
|
@include media(desktop) {
|
||||||
left: calc( #{$size__site-desktop-content} / 2 );
|
left: calc( #{$size__site-desktop-content} / 2 );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-caption img[class*="wp-image-"] {
|
.wp-caption img[class*="wp-image-"] {
|
||||||
display: block;
|
display: block;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-caption-text {
|
.wp-caption-text {
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
font-size: $font__size-xs;
|
font-size: $font__size-xs;
|
||||||
@include font-family( $font__heading );
|
@include font-family( $font__heading );
|
||||||
line-height: $font__line-height-pre;
|
line-height: $font__line-height-pre;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: ( $size__spacing-unit * .5 );
|
padding: ( $size__spacing-unit * .5 );
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,52 +1,52 @@
|
||||||
.gallery {
|
.gallery {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: calc(1.5 * #{$size__spacing-unit});
|
margin-bottom: calc(1.5 * #{$size__spacing-unit});
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-item {
|
.gallery-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
// Loops to enumerate the classes for gallery columns.
|
// Loops to enumerate the classes for gallery columns.
|
||||||
@for $i from 2 through 9 {
|
@for $i from 2 through 9 {
|
||||||
.gallery-columns-#{$i} & {
|
.gallery-columns-#{$i} & {
|
||||||
max-width: calc((100% - 16px * #{ $i - 1 }) / #{ $i });
|
max-width: calc((100% - 16px * #{ $i - 1 }) / #{ $i });
|
||||||
|
|
||||||
&:nth-of-type(#{$i}n+#{$i}) {
|
&:nth-of-type(#{$i}n+#{$i}) {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-of-type {
|
&:last-of-type {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-caption {
|
.gallery-caption {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: $font__size-xs;
|
font-size: $font__size-xs;
|
||||||
@include font-family( $font__heading );
|
@include font-family( $font__heading );
|
||||||
line-height: $font__line-height-pre;
|
line-height: $font__line-height-pre;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: ( $size__spacing-unit * .5 );
|
padding: ( $size__spacing-unit * .5 );
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-item > div > a {
|
.gallery-item > div > a {
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
|
|
||||||
// Accessibility
|
// Accessibility
|
||||||
box-shadow: 0 0 0 0 transparent;
|
box-shadow: 0 0 0 0 transparent;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: 0 0 0 2px rgba( $color__link, 1 );
|
box-shadow: 0 0 0 2px rgba( $color__link, 1 );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,41 @@
|
||||||
.page-content .wp-smiley,
|
.page-content .wp-smiley,
|
||||||
.entry-content .wp-smiley,
|
.entry-content .wp-smiley,
|
||||||
.comment-content .wp-smiley {
|
.comment-content .wp-smiley {
|
||||||
border: none;
|
border: none;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
embed,
|
embed,
|
||||||
iframe,
|
iframe,
|
||||||
object {
|
object {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-logo-link {
|
.custom-logo-link {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
height: calc(2.25 * #{$size__spacing-unit});
|
height: calc(2.25 * #{$size__spacing-unit});
|
||||||
min-height: inherit;
|
min-height: inherit;
|
||||||
width: calc(2.25 * #{$size__spacing-unit});
|
width: calc(2.25 * #{$size__spacing-unit});
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
transition: fill $icon_transition ease-in-out;
|
transition: fill $icon_transition ease-in-out;
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
## Captions
|
## Captions
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
@import "captions";
|
@import "captions";
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
## Galleries
|
## Galleries
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
@import "galleries";
|
@import "galleries";
|
||||||
|
|
|
||||||
|
|
@ -1,132 +1,141 @@
|
||||||
// Rem output with px fallback
|
// Rem output with px fallback
|
||||||
@mixin font-size($sizeValue: 1) {
|
@mixin font-size($sizeValue: 1) {
|
||||||
font-size: ($sizeValue * 16) * 1px;
|
font-size: ($sizeValue * 16) * 1px;
|
||||||
font-size: $sizeValue * 1rem;
|
font-size: $sizeValue * 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Center block
|
// Center block
|
||||||
@mixin center-block {
|
@mixin center-block {
|
||||||
display: block;
|
display: block;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clearfix
|
// Clearfix
|
||||||
@mixin clearfix() {
|
@mixin clearfix() {
|
||||||
content: "";
|
content: "";
|
||||||
display: table;
|
display: table;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clear after (not all clearfix need this also)
|
// Clear after (not all clearfix need this also)
|
||||||
@mixin clearfix-after() {
|
@mixin clearfix-after() {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Column width with margin
|
// Column width with margin
|
||||||
@mixin column-width($numberColumns: 3) {
|
@mixin column-width($numberColumns: 3) {
|
||||||
width: map-get($columns, $numberColumns) - (($columns__margin * ($numberColumns - 1)) / $numberColumns);
|
width: map-get($columns, $numberColumns) - (($columns__margin * ($numberColumns - 1)) / $numberColumns);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin filter-duotone {
|
@mixin filter-duotone {
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
background: $color__link;
|
background: $color__link;
|
||||||
mix-blend-mode: screen;
|
mix-blend-mode: screen;
|
||||||
opacity: 0.1;
|
opacity: 0.1;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
background: $color__link;
|
background: $color__link;
|
||||||
mix-blend-mode: multiply;
|
mix-blend-mode: multiply;
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
|
||||||
/* Browsers supporting mix-blend-mode don't need opacity < 1 */
|
/* Browsers supporting mix-blend-mode don't need opacity < 1 */
|
||||||
@supports (mix-blend-mode: multiply) {
|
@supports (mix-blend-mode: multiply) {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin filter-grayscale {
|
@mixin filter-grayscale {
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
filter: grayscale(100%);
|
filter: grayscale(100%);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin post-section-dash {
|
@mixin post-section-dash {
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
background: $color__text-light;
|
background: $color__text-light;
|
||||||
content: "\020";
|
content: "\020";
|
||||||
display: block;
|
display: block;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
margin: $size__spacing-unit 0;
|
margin: $size__spacing-unit 0;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
&.has-text-align-center:before {
|
||||||
/* If we add the border using a regular CSS border, it won't look good on non-retina devices,
|
margin-left: auto;
|
||||||
* since its edges can look jagged due to lack of antialiasing. In this case, we are several
|
margin-right: auto;
|
||||||
* layers of box-shadow to add the border visually, which will render the border smoother. */
|
}
|
||||||
|
|
||||||
@mixin box-shadow( $size ) {
|
&.has-text-align-right:before {
|
||||||
box-shadow:
|
margin-left: auto;
|
||||||
0 0 0 $size $color__text-light inset, // Original border.
|
}
|
||||||
0 0 0 ($size + 1px) $color__text-light inset, // Antialiasing, inner edge.
|
}
|
||||||
0 0 1px 0 rgba( $color__text-light, 0.7 ); // Antialiasing, outer edge.
|
|
||||||
}
|
/* If we add the border using a regular CSS border, it won't look good on non-retina devices,
|
||||||
|
* since its edges can look jagged due to lack of antialiasing. In this case, we are several
|
||||||
/* Calculates maximum width for post content */
|
* layers of box-shadow to add the border visually, which will render the border smoother. */
|
||||||
@mixin postContentMaxWidth() {
|
|
||||||
|
@mixin box-shadow( $size ) {
|
||||||
@include media(tablet) {
|
box-shadow:
|
||||||
max-width: $size__site-tablet-content;
|
0 0 0 $size $color__text-light inset, // Original border.
|
||||||
}
|
0 0 0 ($size + 1px) $color__text-light inset, // Antialiasing, inner edge.
|
||||||
|
0 0 1px 0 rgba( $color__text-light, 0.7 ); // Antialiasing, outer edge.
|
||||||
@include media(desktop) {
|
}
|
||||||
max-width: $size__site-desktop-content;
|
|
||||||
}
|
/* Calculates maximum width for post content */
|
||||||
}
|
@mixin postContentMaxWidth() {
|
||||||
|
|
||||||
/* Nested sub-menu padding: 10 levels deep */
|
@include media(tablet) {
|
||||||
@mixin nestedSubMenuPadding() {
|
max-width: $size__site-tablet-content;
|
||||||
|
}
|
||||||
ul {
|
|
||||||
counter-reset: submenu;
|
@include media(desktop) {
|
||||||
}
|
max-width: $size__site-desktop-content;
|
||||||
|
}
|
||||||
ul > li > a::before {
|
}
|
||||||
font-family: $font__body;
|
|
||||||
font-weight: normal;
|
/* Nested sub-menu padding: 10 levels deep */
|
||||||
content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
|
@mixin nestedSubMenuPadding() {
|
||||||
counter-increment: submenu
|
|
||||||
}
|
ul {
|
||||||
}
|
counter-reset: submenu;
|
||||||
|
}
|
||||||
/* Ensure all font family declarations come with non-latin fallbacks */
|
|
||||||
@mixin font-family( $font_family: $font__body ) {
|
ul > li > a::before {
|
||||||
font-family: $font_family;
|
font-family: $font__body;
|
||||||
@extend %non-latin-fonts;
|
font-weight: normal;
|
||||||
}
|
content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
|
||||||
|
counter-increment: submenu
|
||||||
/* Build our non-latin font styles */
|
}
|
||||||
%non-latin-fonts {
|
}
|
||||||
@each $lang, $font__fallback in $font__fallbacks {
|
|
||||||
&:lang(#{$lang}) {
|
/* Ensure all font family declarations come with non-latin fallbacks */
|
||||||
font-family: unquote( $font__fallback );
|
@mixin font-family( $font_family: $font__body ) {
|
||||||
}
|
font-family: $font_family;
|
||||||
}
|
@extend %non-latin-fonts;
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "utilities";
|
/* Build our non-latin font styles */
|
||||||
|
%non-latin-fonts {
|
||||||
|
@each $lang, $font__fallback in $font__fallbacks {
|
||||||
|
&:lang(#{$lang}) {
|
||||||
|
font-family: unquote( $font__fallback );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@import "utilities";
|
||||||
|
|
|
||||||
|
|
@ -1,51 +1,51 @@
|
||||||
|
|
||||||
@mixin media( $res ) {
|
@mixin media( $res ) {
|
||||||
@if mobile == $res {
|
@if mobile == $res {
|
||||||
@media only screen and (min-width: $mobile_width) {
|
@media only screen and (min-width: $mobile_width) {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if tablet == $res {
|
@if tablet == $res {
|
||||||
@media only screen and (min-width: $tablet_width) {
|
@media only screen and (min-width: $tablet_width) {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if desktop == $res {
|
@if desktop == $res {
|
||||||
@media only screen and (min-width: $desktop_width) {
|
@media only screen and (min-width: $desktop_width) {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if wide == $res {
|
@if wide == $res {
|
||||||
@media only screen and (min-width: $wide_width) {
|
@media only screen and (min-width: $wide_width) {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin link-transition( $attr: color ) {
|
@mixin link-transition( $attr: color ) {
|
||||||
transition: $attr $link_transition ease-in-out;
|
transition: $attr $link_transition ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin button-transition() {
|
@mixin button-transition() {
|
||||||
transition: background $button_transition ease-in-out;
|
transition: background $button_transition ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin button-all-transition() {
|
@mixin button-all-transition() {
|
||||||
transition: all $button_transition ease-in-out;
|
transition: all $button_transition ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin background-transition() {
|
@mixin background-transition() {
|
||||||
transition: background $background_transition ease-in-out;
|
transition: background $background_transition ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin selection {
|
@mixin selection {
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
::selection {
|
::selection {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,38 @@
|
||||||
/* Text meant only for screen readers. */
|
/* Text meant only for screen readers. */
|
||||||
.screen-reader-text {
|
.screen-reader-text {
|
||||||
border: 0;
|
border: 0;
|
||||||
clip: rect(1px, 1px, 1px, 1px);
|
clip: rect(1px, 1px, 1px, 1px);
|
||||||
clip-path: inset(50%);
|
clip-path: inset(50%);
|
||||||
height: 1px;
|
height: 1px;
|
||||||
margin: -1px;
|
margin: -1px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
|
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: $color__background-screen;
|
background-color: $color__background-screen;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||||
clip: auto !important;
|
clip: auto !important;
|
||||||
clip-path: none;
|
clip-path: none;
|
||||||
color: $color__text-screen;
|
color: $color__text-screen;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
height: auto;
|
height: auto;
|
||||||
left: 5px;
|
left: 5px;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
padding: 15px 23px 14px;
|
padding: 15px 23px 14px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
width: auto;
|
width: auto;
|
||||||
z-index: 100000; /* Above WP toolbar. */
|
z-index: 100000; /* Above WP toolbar. */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Do not show the outline on the skip link target. */
|
/* Do not show the outline on the skip link target. */
|
||||||
#content[tabindex="-1"]:focus {
|
#content[tabindex="-1"]:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,28 @@
|
||||||
.alignleft {
|
.alignleft {
|
||||||
/*rtl:ignore*/
|
/*rtl:ignore*/
|
||||||
float: left;
|
float: left;
|
||||||
/*rtl:ignore*/
|
/*rtl:ignore*/
|
||||||
margin-right: $size__spacing-unit;
|
margin-right: $size__spacing-unit;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
/*rtl:ignore*/
|
/*rtl:ignore*/
|
||||||
margin-right: calc(2 * #{$size__spacing-unit});
|
margin-right: calc(2 * #{$size__spacing-unit});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.alignright {
|
.alignright {
|
||||||
/*rtl:ignore*/
|
/*rtl:ignore*/
|
||||||
float: right;
|
float: right;
|
||||||
/*rtl:ignore*/
|
/*rtl:ignore*/
|
||||||
margin-left: $size__spacing-unit;
|
margin-left: $size__spacing-unit;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
/*rtl:ignore*/
|
/*rtl:ignore*/
|
||||||
margin-left: calc(2 * #{$size__spacing-unit});
|
margin-left: calc(2 * #{$size__spacing-unit});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.aligncenter {
|
.aligncenter {
|
||||||
clear: both;
|
clear: both;
|
||||||
@include center-block;
|
@include center-block;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,23 @@
|
||||||
.clear:before,
|
.clear:before,
|
||||||
.clear:after,
|
.clear:after,
|
||||||
.entry-content:before,
|
.entry-content:before,
|
||||||
.entry-content:after,
|
.entry-content:after,
|
||||||
.comment-content:before,
|
.comment-content:before,
|
||||||
.comment-content:after,
|
.comment-content:after,
|
||||||
.site-header:before,
|
.site-header:before,
|
||||||
.site-header:after,
|
.site-header:after,
|
||||||
.site-content:before,
|
.site-content:before,
|
||||||
.site-content:after,
|
.site-content:after,
|
||||||
.site-footer:before,
|
.site-footer:before,
|
||||||
.site-footer:after {
|
.site-footer:after {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clear:after,
|
.clear:after,
|
||||||
.entry-content:after,
|
.entry-content:after,
|
||||||
.comment-content:after,
|
.comment-content:after,
|
||||||
.site-header:after,
|
.site-header:after,
|
||||||
.site-content:after,
|
.site-content:after,
|
||||||
.site-footer:after {
|
.site-footer:after {
|
||||||
@include clearfix-after;
|
@include clearfix-after;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
a {
|
a {
|
||||||
|
|
||||||
@include link-transition;
|
@include link-transition;
|
||||||
color: $color__link;
|
color: $color__link;
|
||||||
|
|
||||||
&:visited {
|
&:visited {
|
||||||
color: $color__link-visited;
|
color: $color__link-visited;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active {
|
&:active {
|
||||||
color: $color__link-hover;
|
color: $color__link-hover;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: thin dotted;
|
outline: thin dotted;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,22 @@
|
||||||
/** === Footer menu === */
|
/** === Footer menu === */
|
||||||
|
|
||||||
.footer-navigation {
|
.footer-navigation {
|
||||||
|
|
||||||
display: inline;
|
display: inline;
|
||||||
|
|
||||||
& > div {
|
& > div {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-menu {
|
.footer-menu {
|
||||||
|
|
||||||
display: inline;
|
display: inline;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,66 +1,66 @@
|
||||||
/* Social menu */
|
/* Social menu */
|
||||||
|
|
||||||
.social-navigation {
|
.social-navigation {
|
||||||
margin-top: calc(#{$size__spacing-unit} / 2 );
|
margin-top: calc(#{$size__spacing-unit} / 2 );
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
ul.social-links-menu {
|
ul.social-links-menu {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
vertical-align: -webkit-baseline-middle;
|
vertical-align: -webkit-baseline-middle;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
&:nth-child(n+2) {
|
&:nth-child(n+2) {
|
||||||
margin-left: 0.1em;
|
margin-left: 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
border-bottom: 1px solid transparent;
|
border-bottom: 1px solid transparent;
|
||||||
display: block;
|
display: block;
|
||||||
color: $color__text-main;
|
color: $color__text-main;
|
||||||
margin-bottom: -1px;
|
margin-bottom: -1px;
|
||||||
transition: opacity $link_transition ease-in-out;
|
transition: opacity $link_transition ease-in-out;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active {
|
&:active {
|
||||||
color: $color__text-main;
|
color: $color__text-main;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
color: $color__text-main;
|
color: $color__text-main;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
border-bottom: 1px solid $color__text-main;
|
border-bottom: 1px solid $color__text-main;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
display: block;
|
display: block;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
|
||||||
// Prevent icons from jumping in Safari using hardware acceleration.
|
// Prevent icons from jumping in Safari using hardware acceleration.
|
||||||
transform: translateZ(0);
|
transform: translateZ(0);
|
||||||
|
|
||||||
&#ui-icon-link {
|
&#ui-icon-link {
|
||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-title + .social-navigation,
|
.site-title + .social-navigation,
|
||||||
.site-description + .social-navigation {
|
.site-description + .social-navigation {
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin-top: calc(#{$size__spacing-unit} / 5 );
|
margin-top: calc(#{$size__spacing-unit} / 5 );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
## Links
|
## Links
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
@import "links";
|
@import "links";
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
## Menus
|
## Menus
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
@import "menu-main-navigation";
|
@import "menu-main-navigation";
|
||||||
@import "menu-social-navigation";
|
@import "menu-social-navigation";
|
||||||
@import "menu-footer-navigation";
|
@import "menu-footer-navigation";
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
## Next / Previous
|
## Next / Previous
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
@import "next-previous";
|
@import "next-previous";
|
||||||
|
|
|
||||||
|
|
@ -1,201 +1,201 @@
|
||||||
/* Next/Previous navigation */
|
/* Next/Previous navigation */
|
||||||
|
|
||||||
// Singular navigation
|
// Singular navigation
|
||||||
.post-navigation {
|
.post-navigation {
|
||||||
|
|
||||||
margin: calc(3 * 1rem) 0;
|
margin: calc(3 * 1rem) 0;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin: calc(3 * 1rem) $size__site-margins;
|
margin: calc(3 * 1rem) $size__site-margins;
|
||||||
max-width: calc(6 * (100vw / 12));
|
max-width: calc(6 * (100vw / 12));
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media(desktop) {
|
@include media(desktop) {
|
||||||
margin: calc(3 * 1rem) 0;
|
margin: calc(3 * 1rem) 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links {
|
.nav-links {
|
||||||
|
|
||||||
margin: 0 $size__spacing-unit;
|
margin: 0 $size__spacing-unit;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media(desktop) {
|
@include media(desktop) {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin: 0 $size__site-margins;
|
margin: 0 $size__site-margins;
|
||||||
max-width: $size__site-desktop-content;
|
max-width: $size__site-desktop-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
.meta-nav {
|
.meta-nav {
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
&:before,
|
&:before,
|
||||||
&:after {
|
&:after {
|
||||||
display: none;
|
display: none;
|
||||||
content: "—";
|
content: "—";
|
||||||
width: 2em;
|
width: 2em;
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-title {
|
.post-title {
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color__link-hover;
|
color: $color__link-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-previous,
|
.nav-previous,
|
||||||
.nav-next {
|
.nav-next {
|
||||||
|
|
||||||
@include media(desktop) {
|
@include media(desktop) {
|
||||||
min-width: calc(50% - 2 * #{$size__spacing-unit});
|
min-width: calc(50% - 2 * #{$size__spacing-unit});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-previous {
|
.nav-previous {
|
||||||
order: 2;
|
order: 2;
|
||||||
|
|
||||||
@include media(desktop) {
|
@include media(desktop) {
|
||||||
order: 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ .nav-next {
|
+ .nav-next {
|
||||||
margin-bottom: $size__spacing-unit;
|
margin-bottom: $size__spacing-unit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta-nav {
|
.meta-nav {
|
||||||
&:before {
|
&:before {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-next {
|
.nav-next {
|
||||||
order: 1;
|
order: 1;
|
||||||
|
|
||||||
@include media(desktop) {
|
@include media(desktop) {
|
||||||
order: 2;
|
order: 2;
|
||||||
padding-left: $size__spacing-unit;
|
padding-left: $size__spacing-unit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta-nav {
|
.meta-nav {
|
||||||
&:after {
|
&:after {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Index/archive navigation
|
// Index/archive navigation
|
||||||
.pagination {
|
.pagination {
|
||||||
|
|
||||||
.nav-links {
|
.nav-links {
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: 0 calc(.5 * #{$size__spacing-unit});
|
padding: 0 calc(.5 * #{$size__spacing-unit});
|
||||||
|
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
padding: calc(.5 * #{$size__spacing-unit});
|
padding: calc(.5 * #{$size__spacing-unit});
|
||||||
|
|
||||||
&.dots,
|
&.dots,
|
||||||
&.prev {
|
&.prev {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.dots,
|
&.dots,
|
||||||
&.next {
|
&.next {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a:focus {
|
a:focus {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
outline-offset: -1px;
|
outline-offset: -1px;
|
||||||
|
|
||||||
&.prev,
|
&.prev,
|
||||||
&.next {
|
&.next {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
.nav-prev-text,
|
.nav-prev-text,
|
||||||
.nav-next-text {
|
.nav-next-text {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-next-text,
|
.nav-next-text,
|
||||||
.nav-prev-text {
|
.nav-prev-text {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
|
|
||||||
margin-left: $size__site-margins;
|
margin-left: $size__site-margins;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
.prev,
|
.prev,
|
||||||
.next {
|
.next {
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
padding: $size__spacing-unit;
|
padding: $size__spacing-unit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Comments navigation
|
// Comments navigation
|
||||||
.comment-navigation {
|
.comment-navigation {
|
||||||
|
|
||||||
.nav-links {
|
.nav-links {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-previous,
|
.nav-previous,
|
||||||
.nav-next {
|
.nav-next {
|
||||||
min-width: 50%;
|
min-width: 50%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@include font-family( $font__heading );
|
@include font-family( $font__heading );
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
.secondary-text {
|
.secondary-text {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 -0.35em;
|
margin: 0 -0.35em;
|
||||||
top: -1px;
|
top: -1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-next {
|
.nav-next {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,27 @@
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
## Header
|
## Header
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
@import "header/site-header";
|
@import "header/site-header";
|
||||||
@import "header/site-featured-image";
|
@import "header/site-featured-image";
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
## Posts and pages
|
## Posts and pages
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
@import "primary/posts-and-pages";
|
@import "primary/posts-and-pages";
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
## Comments
|
## Comments
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
@import "primary/comments";
|
@import "primary/comments";
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
## Archives
|
## Archives
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
@import "primary/archives";
|
@import "primary/archives";
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
## Footer
|
## Footer
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
@import "footer/site-footer";
|
@import "footer/site-footer";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,53 +1,53 @@
|
||||||
/* Site footer */
|
/* Site footer */
|
||||||
|
|
||||||
#colophon {
|
#colophon {
|
||||||
|
|
||||||
.widget-area,
|
.widget-area,
|
||||||
.site-info {
|
.site-info {
|
||||||
margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
|
margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
|
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.widget-column {
|
.widget-column {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
.widget {
|
.widget {
|
||||||
-webkit-hyphens: auto;
|
-webkit-hyphens: auto;
|
||||||
-moz-hyphens: auto;
|
-moz-hyphens: auto;
|
||||||
-ms-hyphens: auto;
|
-ms-hyphens: auto;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
@include media(desktop) {
|
@include media(desktop) {
|
||||||
margin-right: calc(3 * #{$size__spacing-unit});
|
margin-right: calc(3 * #{$size__spacing-unit});
|
||||||
width: calc(50% - (3 * #{$size__spacing-unit}));
|
width: calc(50% - (3 * #{$size__spacing-unit}));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-info {
|
.site-info {
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
-webkit-hyphens: auto;
|
-webkit-hyphens: auto;
|
||||||
-moz-hyphens: auto;
|
-moz-hyphens: auto;
|
||||||
-ms-hyphens: auto;
|
-ms-hyphens: auto;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $color__link;
|
color: $color__link;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.imprint,
|
.imprint,
|
||||||
.privacy-policy-link {
|
.privacy-policy-link {
|
||||||
margin-right: $size__spacing-unit;
|
margin-right: $size__spacing-unit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,301 +1,301 @@
|
||||||
// Featured image styles
|
// Featured image styles
|
||||||
|
|
||||||
.site-header.featured-image {
|
.site-header.featured-image {
|
||||||
|
|
||||||
/* Hide overflow for overflowing featured image */
|
/* Hide overflow for overflowing featured image */
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
/* Need relative positioning to properly align layers. */
|
/* Need relative positioning to properly align layers. */
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
/* Add text shadow to text, to increase readability. */
|
/* Add text shadow to text, to increase readability. */
|
||||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
||||||
|
|
||||||
/* Set white text color when featured image is set. */
|
/* Set white text color when featured image is set. */
|
||||||
.site-branding .site-title,
|
.site-branding .site-title,
|
||||||
.site-branding .site-description,
|
.site-branding .site-description,
|
||||||
.main-navigation a:after,
|
.main-navigation a:after,
|
||||||
.main-navigation .main-menu > li.menu-item-has-children:after,
|
.main-navigation .main-menu > li.menu-item-has-children:after,
|
||||||
.main-navigation li,
|
.main-navigation li,
|
||||||
.social-navigation li,
|
.social-navigation li,
|
||||||
.entry-meta,
|
.entry-meta,
|
||||||
.entry-title {
|
.entry-title {
|
||||||
color: $color__background-body;
|
color: $color__background-body;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-navigation a,
|
.main-navigation a,
|
||||||
.main-navigation a + svg,
|
.main-navigation a + svg,
|
||||||
.social-navigation a,
|
.social-navigation a,
|
||||||
.site-title a,
|
.site-title a,
|
||||||
.site-featured-image a {
|
.site-featured-image a {
|
||||||
color: $color__background-body;
|
color: $color__background-body;
|
||||||
transition: opacity $link_transition ease-in-out;
|
transition: opacity $link_transition ease-in-out;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:hover + svg,
|
&:hover + svg,
|
||||||
&:active + svg {
|
&:active + svg {
|
||||||
color: $color__background-body;
|
color: $color__background-body;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&:focus + svg {
|
&:focus + svg {
|
||||||
color: $color__background-body;
|
color: $color__background-body;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-navigation .sub-menu a {
|
.main-navigation .sub-menu a {
|
||||||
opacity: inherit;
|
opacity: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* add focus state to social media icons */
|
/* add focus state to social media icons */
|
||||||
.social-navigation a {
|
.social-navigation a {
|
||||||
&:focus {
|
&:focus {
|
||||||
color: $color__background-body;
|
color: $color__background-body;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
border-bottom: 1px solid $color__background-body;
|
border-bottom: 1px solid $color__background-body;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-navigation svg,
|
.social-navigation svg,
|
||||||
.site-featured-image svg {
|
.site-featured-image svg {
|
||||||
/* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
|
/* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
|
||||||
-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) );
|
-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) );
|
||||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) );
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) );
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Entry header */
|
/* Entry header */
|
||||||
.site-featured-image {
|
.site-featured-image {
|
||||||
|
|
||||||
/* First layer: grayscale. */
|
/* First layer: grayscale. */
|
||||||
.post-thumbnail img {
|
.post-thumbnail img {
|
||||||
height: auto;
|
height: auto;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
max-width: 1000%;
|
max-width: 1000%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
min-width: 100vw;
|
min-width: 100vw;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateX(-50%) translateY(-50%);
|
transform: translateX(-50%) translateY(-50%);
|
||||||
width: auto;
|
width: auto;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
@supports ( object-fit: cover ) {
|
@supports ( object-fit: cover ) {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
top: 0;
|
top: 0;
|
||||||
transform: none;
|
transform: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* When image filters are active, make it grayscale to colorize it blue. */
|
/* When image filters are active, make it grayscale to colorize it blue. */
|
||||||
.image-filters-enabled & {
|
.image-filters-enabled & {
|
||||||
filter: grayscale(100%);
|
filter: grayscale(100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-header {
|
.entry-header {
|
||||||
|
|
||||||
margin-top: calc( 4 * #{$size__spacing-unit});
|
margin-top: calc( 4 * #{$size__spacing-unit});
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
|
||||||
@include media (tablet) {
|
@include media (tablet) {
|
||||||
|
|
||||||
margin-left: $size__site-margins;
|
margin-left: $size__site-margins;
|
||||||
margin-right: $size__site-margins;
|
margin-right: $size__site-margins;
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-title {
|
.entry-title {
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
background: $color__background-body;
|
background: $color__background-body;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Entry meta */
|
/* Entry meta */
|
||||||
|
|
||||||
.entry-meta {
|
.entry-meta {
|
||||||
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
> span {
|
> span {
|
||||||
|
|
||||||
margin-right: $size__spacing-unit;
|
margin-right: $size__spacing-unit;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
||||||
@include link-transition;
|
@include link-transition;
|
||||||
color: currentColor;
|
color: currentColor;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.svg-icon {
|
.svg-icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-avatar-list {
|
.discussion-avatar-list {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.has-discussion {
|
&.has-discussion {
|
||||||
|
|
||||||
@include media (tablet) {
|
@include media (tablet) {
|
||||||
|
|
||||||
.entry-meta {
|
.entry-meta {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-title {
|
.entry-title {
|
||||||
padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit});
|
padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit});
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-meta .comment-count {
|
.entry-meta .comment-count {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-meta .discussion-avatar-list {
|
.entry-meta .discussion-avatar-list {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom Logo Link */
|
/* Custom Logo Link */
|
||||||
|
|
||||||
.custom-logo-link {
|
.custom-logo-link {
|
||||||
|
|
||||||
background: $color__background-body;
|
background: $color__background-body;
|
||||||
box-shadow: 0 0 0 0 rgba($color__background-body, 0);
|
box-shadow: 0 0 0 0 rgba($color__background-body, 0);
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: 0 0 0 2px rgba($color__background-body, 1);
|
box-shadow: 0 0 0 2px rgba($color__background-body, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Make sure important elements are above pseudo elements used for effects. */
|
/* Make sure important elements are above pseudo elements used for effects. */
|
||||||
.site-branding {
|
.site-branding {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-featured-image .entry-header {
|
.site-featured-image .entry-header {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Set up image filter layer positioning */
|
/* Set up image filter layer positioning */
|
||||||
.site-branding-container:after,
|
.site-branding-container:after,
|
||||||
.site-featured-image:before,
|
.site-featured-image:before,
|
||||||
.site-featured-image:after,
|
.site-featured-image:after,
|
||||||
&:after {
|
&:after {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0; left: 0;
|
top: 0; left: 0;
|
||||||
content: "\020";
|
content: "\020";
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Background & Effects */
|
/* Background & Effects */
|
||||||
/* Shared background settings between pseudo elements. */
|
/* Shared background settings between pseudo elements. */
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
/* The intensity of each blend mode is controlled via layer opacity. */
|
/* The intensity of each blend mode is controlled via layer opacity. */
|
||||||
|
|
||||||
/* Second layer: screen. */
|
/* Second layer: screen. */
|
||||||
.image-filters-enabled & .site-featured-image:before {
|
.image-filters-enabled & .site-featured-image:before {
|
||||||
background: $color__link;
|
background: $color__link;
|
||||||
mix-blend-mode: screen;
|
mix-blend-mode: screen;
|
||||||
opacity: 0.1;
|
opacity: 0.1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Third layer: multiply. */
|
/* Third layer: multiply. */
|
||||||
/* When image filters are inactive, a black overlay is added. */
|
/* When image filters are inactive, a black overlay is added. */
|
||||||
.site-featured-image:after {
|
.site-featured-image:after {
|
||||||
background: #000;
|
background: #000;
|
||||||
mix-blend-mode: multiply;
|
mix-blend-mode: multiply;
|
||||||
opacity: .7;
|
opacity: .7;
|
||||||
|
|
||||||
/* When image filters are active, a blue overlay is added. */
|
/* When image filters are active, a blue overlay is added. */
|
||||||
.image-filters-enabled & {
|
.image-filters-enabled & {
|
||||||
background: $color__link;
|
background: $color__link;
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
|
||||||
/* Browsers supporting mix-blend-mode don't need opacity < 1 */
|
/* Browsers supporting mix-blend-mode don't need opacity < 1 */
|
||||||
@supports (mix-blend-mode: multiply) {
|
@supports (mix-blend-mode: multiply) {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fourth layer: overlay. */
|
/* Fourth layer: overlay. */
|
||||||
.image-filters-enabled & .site-branding-container:after {
|
.image-filters-enabled & .site-branding-container:after {
|
||||||
background: rgba(0, 0, 0, 0.35);
|
background: rgba(0, 0, 0, 0.35);
|
||||||
mix-blend-mode: overlay;
|
mix-blend-mode: overlay;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
|
|
||||||
/* Browsers supporting mix-blend-mode can have a light overlay */
|
/* Browsers supporting mix-blend-mode can have a light overlay */
|
||||||
@supports (mix-blend-mode: overlay) {
|
@supports (mix-blend-mode: overlay) {
|
||||||
background: rgba($color__background-body, 0.35);
|
background: rgba($color__background-body, 0.35);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fifth layer: readability overlay */
|
/* Fifth layer: readability overlay */
|
||||||
&:after {
|
&:after {
|
||||||
background: #000;
|
background: #000;
|
||||||
/**
|
/**
|
||||||
* Add a transition to the readability overlay, to add a subtle
|
* Add a transition to the readability overlay, to add a subtle
|
||||||
* but smooth effect when resizing the screen.
|
* but smooth effect when resizing the screen.
|
||||||
*/
|
*/
|
||||||
transition: opacity 1200ms ease-in-out;
|
transition: opacity 1200ms ease-in-out;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
|
|
||||||
/* When image filters are active, a blue overlay is added. */
|
/* When image filters are active, a blue overlay is added. */
|
||||||
.image-filters-enabled & {
|
.image-filters-enabled & {
|
||||||
background: mix($color__link, black, 12%);
|
background: mix($color__link, black, 12%);
|
||||||
opacity: 0.38;
|
opacity: 0.38;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
opacity: 0.18;
|
opacity: 0.18;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
background: rgba($color__background-body, 0.17);
|
background: rgba($color__background-body, 0.17);
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background: rgba($color__background-body, 0.17);
|
background: rgba($color__background-body, 0.17);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,139 +1,139 @@
|
||||||
// Site header
|
// Site header
|
||||||
|
|
||||||
.site-header {
|
.site-header {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
|
||||||
&.featured-image {
|
&.featured-image {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
min-height: 90vh;
|
min-height: 90vh;
|
||||||
|
|
||||||
.site-branding-container {
|
.site-branding-container {
|
||||||
margin-bottom: auto;
|
margin-bottom: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 3rem 0;
|
padding: 3rem 0;
|
||||||
|
|
||||||
&.featured-image {
|
&.featured-image {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Site branding
|
// Site branding
|
||||||
|
|
||||||
.site-branding {
|
.site-branding {
|
||||||
|
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
-webkit-hyphens: auto;
|
-webkit-hyphens: auto;
|
||||||
-moz-hyphens: auto;
|
-moz-hyphens: auto;
|
||||||
-ms-hyphens: auto;
|
-ms-hyphens: auto;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin: 0 $size__site-margins;
|
margin: 0 $size__site-margins;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Site logo
|
// Site logo
|
||||||
|
|
||||||
.site-logo {
|
.site-logo {
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
margin-bottom: calc(.66 * #{$size__spacing-unit});
|
margin-bottom: calc(.66 * #{$size__spacing-unit});
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: calc(100% + (1.25 * #{$size__spacing-unit}));
|
right: calc(100% + (1.25 * #{$size__spacing-unit}));
|
||||||
top: 4px; // Accounts for box-shadow widths
|
top: 4px; // Accounts for box-shadow widths
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-logo-link {
|
.custom-logo-link {
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
display: block;
|
display: block;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: box-shadow $background_transition ease-in-out;
|
transition: box-shadow $background_transition ease-in-out;
|
||||||
|
|
||||||
.custom-logo {
|
.custom-logo {
|
||||||
min-height: inherit;
|
min-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: 0 0 0 2px rgba(0, 0, 0, 1);
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
width: 64px;
|
width: 64px;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Site title
|
// Site title
|
||||||
|
|
||||||
.site-title {
|
.site-title {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
display: inline;
|
display: inline;
|
||||||
color: $color__text-main;
|
color: $color__text-main;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $color__text-main;
|
color: $color__text-main;
|
||||||
|
|
||||||
&:link,
|
&:link,
|
||||||
&:visited {
|
&:visited {
|
||||||
color: $color__text-main;
|
color: $color__text-main;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color__text-hover;
|
color: $color__text-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.featured-image & {
|
.featured-image & {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* When there is no description set, make sure navigation appears below title. */
|
/* When there is no description set, make sure navigation appears below title. */
|
||||||
+ .main-navigation {
|
+ .main-navigation {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:empty) + .site-description:not(:empty):before {
|
&:not(:empty) + .site-description:not(:empty):before {
|
||||||
content: "\2014";
|
content: "\2014";
|
||||||
margin: 0 .2em;
|
margin: 0 .2em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Site description
|
// Site description
|
||||||
|
|
||||||
.site-description {
|
.site-description {
|
||||||
|
|
||||||
display: inline;
|
display: inline;
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,65 +1,65 @@
|
||||||
.archive .page-header,
|
.archive .page-header,
|
||||||
.search .page-header,
|
.search .page-header,
|
||||||
.error404 .page-header {
|
.error404 .page-header {
|
||||||
|
|
||||||
margin: $size__spacing-unit $size__spacing-unit calc(3 * #{$size__spacing-unit});
|
margin: $size__spacing-unit $size__spacing-unit calc(3 * #{$size__spacing-unit});
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin: 0 $size__site-margins calc(3 * #{$size__spacing-unit});
|
margin: 0 $size__site-margins calc(3 * #{$size__spacing-unit});
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.page-title {
|
||||||
|
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
display: inline;
|
display: inline;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-term,
|
.search-term,
|
||||||
.page-description {
|
.page-description {
|
||||||
display: inherit;
|
display: inherit;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.archive .page-header .page-description,
|
.archive .page-header .page-description,
|
||||||
.search .page-header .page-description {
|
.search .page-header .page-description {
|
||||||
display: block;
|
display: block;
|
||||||
color: $color__text-main;
|
color: $color__text-main;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hfeed .entry .entry-header {
|
.hfeed .entry .entry-header {
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2);
|
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 404 & Not found */
|
/* 404 & Not found */
|
||||||
|
|
||||||
.error-404.not-found,
|
.error-404.not-found,
|
||||||
.no-results.not-found {
|
.no-results.not-found {
|
||||||
|
|
||||||
.page-content {
|
.page-content {
|
||||||
|
|
||||||
margin: calc(3 * #{$size__spacing-unit}) #{$size__spacing-unit};
|
margin: calc(3 * #{$size__spacing-unit}) #{$size__spacing-unit};
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2);
|
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-submit {
|
.search-submit {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin: $size__spacing-unit 0;
|
margin: $size__spacing-unit 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-field {
|
.search-field {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,405 +1,405 @@
|
||||||
.comment-content a {
|
.comment-content a {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bypostauthor {
|
.bypostauthor {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments-area {
|
.comments-area {
|
||||||
-webkit-hyphens: auto;
|
-webkit-hyphens: auto;
|
||||||
-moz-hyphens: auto;
|
-moz-hyphens: auto;
|
||||||
-ms-hyphens: auto;
|
-ms-hyphens: auto;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
|
margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
@include postContentMaxWidth();
|
@include postContentMaxWidth();
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
|
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
margin-top: calc(2 * #{$size__spacing-unit});
|
margin-top: calc(2 * #{$size__spacing-unit});
|
||||||
margin-bottom: calc(2 * #{$size__spacing-unit});
|
margin-bottom: calc(2 * #{$size__spacing-unit});
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin-top: calc(3 * #{$size__spacing-unit});
|
margin-top: calc(3 * #{$size__spacing-unit});
|
||||||
margin-bottom: calc(3 * #{$size__spacing-unit});
|
margin-bottom: calc(3 * #{$size__spacing-unit});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Add extra margin when the comments section is located immediately after the
|
/* Add extra margin when the comments section is located immediately after the
|
||||||
* post itself (this happens on pages).
|
* post itself (this happens on pages).
|
||||||
*/
|
*/
|
||||||
.entry + & {
|
.entry + & {
|
||||||
margin-top: calc(3 * #{$size__spacing-unit});
|
margin-top: calc(3 * #{$size__spacing-unit});
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments-title-wrap {
|
.comments-title-wrap {
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments-title {
|
.comments-title {
|
||||||
@include post-section-dash;
|
@include post-section-dash;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
flex: 1 0 calc(3 * (100vw / 12));
|
flex: 1 0 calc(3 * (100vw / 12));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-meta {
|
.discussion-meta {
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
flex: 0 0 calc(2 * (100vw / 12));
|
flex: 0 0 calc(2 * (100vw / 12));
|
||||||
margin-left: #{$size__spacing-unit};
|
margin-left: #{$size__spacing-unit};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#comment {
|
#comment {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
#respond {
|
#respond {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.comment-user-avatar {
|
.comment-user-avatar {
|
||||||
margin: $size__spacing-unit 0 -#{$size__spacing-unit};
|
margin: $size__spacing-unit 0 -#{$size__spacing-unit};
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment .comment-form {
|
.comment .comment-form {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
> small {
|
> small {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: $font__size_base;
|
font-size: $font__size_base;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: calc(#{$size__spacing-unit} + 100%);
|
left: calc(#{$size__spacing-unit} + 100%);
|
||||||
top: calc(-3.5 * #{$size__spacing-unit});
|
top: calc(-3.5 * #{$size__spacing-unit});
|
||||||
width: calc(100vw / 12 );
|
width: calc(100vw / 12 );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#comments {
|
#comments {
|
||||||
|
|
||||||
> .comments-title:last-child {
|
> .comments-title:last-child {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-form-flex {
|
.comment-form-flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.comments-title {
|
.comments-title {
|
||||||
display: none;
|
display: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
order: 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#respond {
|
#respond {
|
||||||
order: 2;
|
order: 2;
|
||||||
|
|
||||||
+ .comments-title {
|
+ .comments-title {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-list {
|
.comment-list {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
.children {
|
.children {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 0 0 $size__spacing-unit;
|
padding: 0 0 0 $size__spacing-unit;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .comment:first-child {
|
> .comment:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pingback,
|
.pingback,
|
||||||
.trackback {
|
.trackback {
|
||||||
|
|
||||||
.comment-body {
|
.comment-body {
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
@include font-family( $font__heading );
|
@include font-family( $font__heading );
|
||||||
font-size: $font__size-xs;
|
font-size: $font__size-xs;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-top: $size__spacing-unit;
|
margin-top: $size__spacing-unit;
|
||||||
margin-bottom: $size__spacing-unit;
|
margin-bottom: $size__spacing-unit;
|
||||||
|
|
||||||
a:not(.comment-edit-link) {
|
a:not(.comment-edit-link) {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: $font__size-base / (1 * $font__size-ratio);
|
font-size: $font__size-base / (1 * $font__size-ratio);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
padding-right: #{0.5 * $size__spacing-unit};
|
padding-right: #{0.5 * $size__spacing-unit};
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-edit-link {
|
.comment-edit-link {
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
@include font-family( $font__heading );
|
@include font-family( $font__heading );
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-reply {
|
.comment-reply {
|
||||||
|
|
||||||
#respond + & {
|
#respond + & {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-reply-link {
|
.comment-reply-link {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment {
|
.comment {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 )));
|
padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 )));
|
||||||
|
|
||||||
&.depth-1,
|
&.depth-1,
|
||||||
.children {
|
.children {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.depth-1 {
|
&.depth-1 {
|
||||||
margin-left: calc(3.25 * #{$size__spacing-unit});
|
margin-left: calc(3.25 * #{$size__spacing-unit});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-body {
|
.comment-body {
|
||||||
margin: calc(2 * #{$size__spacing-unit}) 0 0;
|
margin: calc(2 * #{$size__spacing-unit}) 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.comment-meta {
|
.comment-meta {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-author {
|
.comment-author {
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: $size__spacing-unit;
|
margin-right: $size__spacing-unit;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
float: inherit;
|
float: inherit;
|
||||||
margin-right: inherit;
|
margin-right: inherit;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: calc(100% + #{$size__spacing-unit});
|
right: calc(100% + #{$size__spacing-unit});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fn {
|
.fn {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color__link-hover;
|
color: $color__link-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-author-badge {
|
.post-author-badge {
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: lighten( $color__link, 8% );
|
background: lighten( $color__link, 8% );
|
||||||
right: calc(100% - #{$size__spacing-unit * 2.5});
|
right: calc(100% - #{$size__spacing-unit * 2.5});
|
||||||
top: -3px;
|
top: -3px;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
right: calc(100% + #{$size__spacing-unit * .75});
|
right: calc(100% + #{$size__spacing-unit * .75});
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
width: inherit;
|
width: inherit;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
display: block;
|
display: block;
|
||||||
fill: white;
|
fill: white;
|
||||||
transform: scale(0.875);
|
transform: scale(0.875);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-metadata {
|
.comment-metadata {
|
||||||
|
|
||||||
> a,
|
> a,
|
||||||
.comment-edit-link {
|
.comment-edit-link {
|
||||||
display: inline;
|
display: inline;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
|
|
||||||
time {
|
time {
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color__link-hover;
|
color: $color__link-hover;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-link-sep {
|
.edit-link-sep {
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
margin: 0 0.2em;
|
margin: 0 0.2em;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-link {
|
.edit-link {
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
margin-right: 0.1em;
|
margin-right: 0.1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-edit-link {
|
.comment-edit-link {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: $size__spacing-unit;
|
padding-left: $size__spacing-unit;
|
||||||
margin-left: -#{$size__spacing-unit};
|
margin-left: -#{$size__spacing-unit};
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color__link;
|
color: $color__link;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-content {
|
.comment-content {
|
||||||
|
|
||||||
margin: $size__spacing-unit 0;
|
margin: $size__spacing-unit 0;
|
||||||
|
|
||||||
@include media(desktop) {
|
@include media(desktop) {
|
||||||
padding-right: $size__spacing-unit;
|
padding-right: $size__spacing-unit;
|
||||||
}
|
}
|
||||||
|
|
||||||
> *:first-child {
|
> *:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
> *:last-child {
|
> *:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-reply-link,
|
.comment-reply-link,
|
||||||
#cancel-comment-reply-link {
|
#cancel-comment-reply-link {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color__link-hover;
|
color: $color__link-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-avatar-list {
|
.discussion-avatar-list {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0 -8px 0 0;
|
margin: 0 -8px 0 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-user-avatar {
|
.comment-user-avatar {
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: calc(1.5 * #{$size__spacing-unit});
|
height: calc(1.5 * #{$size__spacing-unit});
|
||||||
width: calc(1.5 * #{$size__spacing-unit});
|
width: calc(1.5 * #{$size__spacing-unit});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-meta {
|
.discussion-meta {
|
||||||
|
|
||||||
.discussion-meta-info {
|
.discussion-meta-info {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
.svg-icon {
|
.svg-icon {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
transform: scale( 0.6 ) scaleX(-1) translateY(-0.1em);
|
transform: scale( 0.6 ) scaleX(-1) translateY(-0.1em);
|
||||||
margin-left: -#{.25 * $size__spacing-unit}; // Align icon with avatars above.
|
margin-left: -#{.25 * $size__spacing-unit}; // Align icon with avatars above.
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-form {
|
.comment-form {
|
||||||
|
|
||||||
.comment-notes,
|
.comment-notes,
|
||||||
label {
|
label {
|
||||||
@include font-family( $font__heading );
|
@include font-family( $font__heading );
|
||||||
font-size: $font__size-xs;
|
font-size: $font__size-xs;
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-form-author,
|
.comment-form-author,
|
||||||
.comment-form-email {
|
.comment-form-email {
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
width: calc(50% - #{$size__spacing-unit / 2});
|
width: calc(50% - #{$size__spacing-unit / 2});
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-form-email {
|
.comment-form-email {
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin-left: $size__spacing-unit;
|
margin-left: $size__spacing-unit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input[name="author"],
|
input[name="author"],
|
||||||
input[name="email"],
|
input[name="email"],
|
||||||
input[name="url"] {
|
input[name="url"] {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,304 +1,304 @@
|
||||||
.sticky {
|
.sticky {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sticky-post {
|
.sticky-post {
|
||||||
background: $color__background-button;
|
background: $color__background-button;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
padding: .25rem;
|
padding: .25rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
top: -$size__spacing-unit;
|
top: -$size__spacing-unit;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.updated:not(.published) {
|
.updated:not(.published) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-links {
|
.page-links {
|
||||||
clear: both;
|
clear: both;
|
||||||
margin: 0 0 calc(1.5 * #{$size__spacing-unit});
|
margin: 0 0 calc(1.5 * #{$size__spacing-unit});
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry {
|
.entry {
|
||||||
|
|
||||||
margin-top: calc(6 * #{$size__spacing-unit});
|
margin-top: calc(6 * #{$size__spacing-unit});
|
||||||
|
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-header {
|
.entry-header {
|
||||||
|
|
||||||
margin: calc(3 * #{ $size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
|
margin: calc(3 * #{ $size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin: calc(3 * #{ $size__spacing-unit}) $size__site-margins $size__spacing-unit;
|
margin: calc(3 * #{ $size__spacing-unit}) $size__site-margins $size__spacing-unit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-title {
|
.entry-title {
|
||||||
|
|
||||||
@include post-section-dash;
|
@include post-section-dash;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color__text-hover;
|
color: $color__text-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-meta,
|
.entry-meta,
|
||||||
.entry-footer {
|
.entry-footer {
|
||||||
|
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
> span {
|
> span {
|
||||||
|
|
||||||
margin-right: $size__spacing-unit;
|
margin-right: $size__spacing-unit;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
||||||
@include link-transition;
|
@include link-transition;
|
||||||
color: currentColor;
|
color: currentColor;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $color__link;
|
color: $color__link;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.svg-icon {
|
.svg-icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-meta {
|
.entry-meta {
|
||||||
margin: $size__spacing-unit 0;
|
margin: $size__spacing-unit 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-footer {
|
.entry-footer {
|
||||||
|
|
||||||
margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
|
margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin: $size__spacing-unit $size__site-margins calc(3 * #{$size__spacing-unit});
|
margin: $size__spacing-unit $size__site-margins calc(3 * #{$size__spacing-unit});
|
||||||
max-width: $size__site-tablet-content;
|
max-width: $size__site-tablet-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
max-width: $size__site-desktop-content;
|
max-width: $size__site-desktop-content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-thumbnail {
|
.post-thumbnail {
|
||||||
|
|
||||||
margin: $size__spacing-unit;
|
margin: $size__spacing-unit;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin: $size__spacing-unit $size__site-margins;
|
margin: $size__spacing-unit $size__site-margins;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-thumbnail-inner {
|
.post-thumbnail-inner {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-filters-enabled & {
|
.image-filters-enabled & {
|
||||||
|
|
||||||
.post-thumbnail {
|
.post-thumbnail {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
.post-thumbnail-inner {
|
.post-thumbnail-inner {
|
||||||
filter: grayscale(100%);
|
filter: grayscale(100%);
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
background: rgba(0, 0, 0, 0.35);
|
background: rgba(0, 0, 0, 0.35);
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
|
|
||||||
@supports (mix-blend-mode: multiply) {
|
@supports (mix-blend-mode: multiply) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before,
|
&:before,
|
||||||
&:after {
|
&:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
top: 0; left: 0;
|
top: 0; left: 0;
|
||||||
content: "\020";
|
content: "\020";
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include filter-duotone;
|
@include filter-duotone;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-content,
|
.entry-content,
|
||||||
.entry-summary {
|
.entry-summary {
|
||||||
max-width: calc(100% - (2 * #{ $size__spacing-unit }));
|
max-width: calc(100% - (2 * #{ $size__spacing-unit }));
|
||||||
margin: 0 $size__spacing-unit;
|
margin: 0 $size__spacing-unit;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
margin: 0 10%;
|
margin: 0 10%;
|
||||||
padding: 0 60px;
|
padding: 0 60px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-content {
|
.entry-content {
|
||||||
|
|
||||||
p {
|
p {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.more-link {
|
.more-link {
|
||||||
@include link-transition;
|
@include link-transition;
|
||||||
display: inline;
|
display: inline;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
content: "\02192";
|
content: "\02192";
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 0.5em;
|
margin-left: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color__link;
|
color: $color__link;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
|
||||||
&.button,
|
&.button,
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.button {
|
&.button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.button:hover {
|
&.button:hover {
|
||||||
background: $color__background-button-hover;
|
background: $color__background-button-hover;
|
||||||
color: $color__background-body;
|
color: $color__background-body;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Overwrite iframe embeds that have inline styles.
|
// Overwrite iframe embeds that have inline styles.
|
||||||
> iframe[style] {
|
> iframe[style] {
|
||||||
|
|
||||||
margin: 32px 0 !important;
|
margin: 32px 0 !important;
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
max-width: $size__site-tablet-content !important;
|
max-width: $size__site-tablet-content !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media(desktop) {
|
@include media(desktop) {
|
||||||
max-width: $size__site-desktop-content !important;
|
max-width: $size__site-desktop-content !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Page links
|
// Page links
|
||||||
.page-links a {
|
.page-links a {
|
||||||
margin: calc(0.5 * #{$size__spacing-unit});
|
margin: calc(0.5 * #{$size__spacing-unit});
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Classic editor audio embeds.
|
// Classic editor audio embeds.
|
||||||
.wp-audio-shortcode {
|
.wp-audio-shortcode {
|
||||||
max-width: calc(100vw - (2 * #{ $size__spacing-unit }));
|
max-width: calc(100vw - (2 * #{ $size__spacing-unit }));
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
max-width: $size__site-tablet-content;
|
max-width: $size__site-tablet-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media(desktop) {
|
@include media(desktop) {
|
||||||
max-width: $size__site-desktop-content;
|
max-width: $size__site-desktop-content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Author description */
|
/* Author description */
|
||||||
|
|
||||||
.author-bio {
|
.author-bio {
|
||||||
margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
|
margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
|
||||||
|
|
||||||
@include postContentMaxWidth();
|
@include postContentMaxWidth();
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
|
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media(desktop) {
|
@include media(desktop) {
|
||||||
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
|
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-title {
|
.author-title {
|
||||||
@include post-section-dash;
|
@include post-section-dash;
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-description {
|
.author-description {
|
||||||
|
|
||||||
display: inline;
|
display: inline;
|
||||||
color: $color__text-light;
|
color: $color__text-light;
|
||||||
font-size: $font__size-md;
|
font-size: $font__size-md;
|
||||||
line-height: $font__line-height-heading;
|
line-height: $font__line-height-heading;
|
||||||
|
|
||||||
.author-link {
|
.author-link {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color__link-hover;
|
color: $color__link-hover;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,102 +1,106 @@
|
||||||
.widget {
|
.widget {
|
||||||
margin: 0 0 #{$size__spacing-unit};
|
margin: 0 0 #{$size__spacing-unit};
|
||||||
|
|
||||||
/* Make sure select elements fit in widgets. */
|
.widget-title {
|
||||||
select {
|
font-size: $font__size-lg;
|
||||||
max-width: 100%;
|
}
|
||||||
}
|
|
||||||
|
/* Make sure select elements fit in widgets. */
|
||||||
a {
|
select {
|
||||||
color: $color__link;
|
max-width: 100%;
|
||||||
|
}
|
||||||
&:hover {
|
|
||||||
color: $color__link-hover;
|
a {
|
||||||
}
|
color: $color__link;
|
||||||
}
|
|
||||||
}
|
&:hover {
|
||||||
|
color: $color__link-hover;
|
||||||
.widget_archive,
|
}
|
||||||
.widget_categories,
|
}
|
||||||
.widget_meta,
|
}
|
||||||
.widget_nav_menu,
|
|
||||||
.widget_pages,
|
.widget_archive,
|
||||||
.widget_recent_comments,
|
.widget_categories,
|
||||||
.widget_recent_entries,
|
.widget_meta,
|
||||||
.widget_rss {
|
.widget_nav_menu,
|
||||||
|
.widget_pages,
|
||||||
ul {
|
.widget_recent_comments,
|
||||||
padding: 0;
|
.widget_recent_entries,
|
||||||
list-style: none;
|
.widget_rss {
|
||||||
|
|
||||||
li {
|
ul {
|
||||||
color: $color__text-light;
|
padding: 0;
|
||||||
@include font-family( $font__heading );
|
list-style: none;
|
||||||
font-size: calc(#{$font__size_base} * #{$font__size-ratio});
|
|
||||||
font-weight: 700;
|
li {
|
||||||
line-height: $font__line-height-heading;
|
color: $color__text-light;
|
||||||
margin-top: #{0.5 * $size__spacing-unit};
|
@include font-family( $font__heading );
|
||||||
margin-bottom: #{0.5 * $size__spacing-unit};
|
font-size: calc(#{$font__size_base} * #{$font__size-ratio});
|
||||||
}
|
font-weight: 700;
|
||||||
|
line-height: $font__line-height-heading;
|
||||||
@include nestedSubMenuPadding();
|
margin-top: #{0.5 * $size__spacing-unit};
|
||||||
}
|
margin-bottom: #{0.5 * $size__spacing-unit};
|
||||||
}
|
}
|
||||||
|
|
||||||
.widget_tag_cloud {
|
@include nestedSubMenuPadding();
|
||||||
|
}
|
||||||
.tagcloud {
|
}
|
||||||
@include font-family( $font__heading );
|
|
||||||
font-weight: 700;
|
.widget_tag_cloud {
|
||||||
}
|
|
||||||
}
|
.tagcloud {
|
||||||
|
@include font-family( $font__heading );
|
||||||
|
font-weight: 700;
|
||||||
.widget_search {
|
}
|
||||||
|
}
|
||||||
.search-field {
|
|
||||||
width: 100%;
|
|
||||||
|
.widget_search {
|
||||||
@include media(mobile) {
|
|
||||||
width: auto;
|
.search-field {
|
||||||
}
|
width: 100%;
|
||||||
}
|
|
||||||
|
@include media(mobile) {
|
||||||
.search-submit {
|
width: auto;
|
||||||
display: block;
|
}
|
||||||
margin-top: $size__spacing-unit;
|
}
|
||||||
}
|
|
||||||
}
|
.search-submit {
|
||||||
|
display: block;
|
||||||
.widget_calendar .calendar_wrap {
|
margin-top: $size__spacing-unit;
|
||||||
text-align: center;
|
}
|
||||||
|
}
|
||||||
table td,
|
|
||||||
table th {
|
.widget_calendar .calendar_wrap {
|
||||||
border: none;
|
text-align: center;
|
||||||
}
|
|
||||||
|
table td,
|
||||||
a {
|
table th {
|
||||||
text-decoration: underline;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-calendar-table {
|
a {
|
||||||
margin-bottom: 0;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-calendar-nav {
|
.wp-calendar-table {
|
||||||
margin: 0 0 $size__spacing-unit;
|
margin-bottom: 0;
|
||||||
display: table;
|
}
|
||||||
width: 100%;
|
|
||||||
@include font-family( $font__heading );
|
.wp-calendar-nav {
|
||||||
|
margin: 0 0 $size__spacing-unit;
|
||||||
span {
|
display: table;
|
||||||
display: table-cell;
|
width: 100%;
|
||||||
padding: 0.5em;
|
@include font-family( $font__heading );
|
||||||
}
|
|
||||||
}
|
span {
|
||||||
|
display: table-cell;
|
||||||
.wp-calendar-nav-prev,
|
padding: 0.5em;
|
||||||
.wp-calendar-nav-next {
|
}
|
||||||
width: 40%;
|
}
|
||||||
}
|
|
||||||
|
.wp-calendar-nav-prev,
|
||||||
|
.wp-calendar-nav-next {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,62 +1,62 @@
|
||||||
p {
|
p {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
dfn,
|
dfn,
|
||||||
cite,
|
cite,
|
||||||
em,
|
em,
|
||||||
i {
|
i {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
|
|
||||||
cite {
|
cite {
|
||||||
font-size: $font__size-xs;
|
font-size: $font__size-xs;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@include font-family( $font__heading );
|
@include font-family( $font__heading );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
font-size: $font__size-sm;
|
font-size: $font__size-sm;
|
||||||
font-family: $font__pre;
|
font-family: $font__pre;
|
||||||
line-height: $font__line-height-body;
|
line-height: $font__line-height-body;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
tt,
|
tt,
|
||||||
var {
|
var {
|
||||||
font-size: $font__size-sm;
|
font-size: $font__size-sm;
|
||||||
font-family: $font__code;
|
font-family: $font__code;
|
||||||
}
|
}
|
||||||
|
|
||||||
abbr, acronym {
|
abbr, acronym {
|
||||||
border-bottom: 1px dotted #666;
|
border-bottom: 1px dotted #666;
|
||||||
cursor: help;
|
cursor: help;
|
||||||
}
|
}
|
||||||
|
|
||||||
mark,
|
mark,
|
||||||
ins {
|
ins {
|
||||||
background: #fff9c0;
|
background: #fff9c0;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
big {
|
big {
|
||||||
font-size: 125%;
|
font-size: 125%;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,164 +1,164 @@
|
||||||
.author-description .author-link,
|
.author-description .author-link,
|
||||||
.comment-metadata,
|
.comment-metadata,
|
||||||
.comment-reply-link,
|
.comment-reply-link,
|
||||||
.comments-title,
|
.comments-title,
|
||||||
.comment-author .fn,
|
.comment-author .fn,
|
||||||
.discussion-meta-info,
|
.discussion-meta-info,
|
||||||
.entry-meta,
|
.entry-meta,
|
||||||
.entry-footer,
|
.entry-footer,
|
||||||
.main-navigation,
|
.main-navigation,
|
||||||
.no-comments,
|
.no-comments,
|
||||||
.not-found .page-title,
|
.not-found .page-title,
|
||||||
.error-404 .page-title,
|
.error-404 .page-title,
|
||||||
.post-navigation .post-title,
|
.post-navigation .post-title,
|
||||||
.page-links,
|
.page-links,
|
||||||
.page-description,
|
.page-description,
|
||||||
.pagination .nav-links,
|
.pagination .nav-links,
|
||||||
.sticky-post,
|
.sticky-post,
|
||||||
.site-title,
|
.site-title,
|
||||||
.site-info,
|
.site-info,
|
||||||
#cancel-comment-reply-link,
|
#cancel-comment-reply-link,
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
@include font-family( $font__heading );
|
@include font-family( $font__heading );
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-navigation,
|
.main-navigation,
|
||||||
.page-description,
|
.page-description,
|
||||||
.author-description .author-link,
|
.author-description .author-link,
|
||||||
.not-found .page-title,
|
.not-found .page-title,
|
||||||
.error-404 .page-title,
|
.error-404 .page-title,
|
||||||
.post-navigation .post-title,
|
.post-navigation .post-title,
|
||||||
.pagination .nav-links,
|
.pagination .nav-links,
|
||||||
.comments-title,
|
.comments-title,
|
||||||
.comment-author .fn,
|
.comment-author .fn,
|
||||||
.no-comments,
|
.no-comments,
|
||||||
.site-title,
|
.site-title,
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
line-height: $font__line-height-heading;
|
line-height: $font__line-height-heading;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.page-title {
|
||||||
@include font-family( $font__body );
|
@include font-family( $font__body );
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-branding,
|
.site-branding,
|
||||||
.main-navigation ul.main-menu > li,
|
.main-navigation ul.main-menu > li,
|
||||||
.social-navigation,
|
.social-navigation,
|
||||||
.author-description .author-bio,
|
.author-description .author-bio,
|
||||||
.nav-links {
|
.nav-links {
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: $font__size-xl;
|
font-size: $font__size-xl;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
font-size: $font__size-xxl;
|
font-size: $font__size-xxl;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-title,
|
.entry-title,
|
||||||
.not-found .page-title,
|
.not-found .page-title,
|
||||||
.error-404 .page-title,
|
.error-404 .page-title,
|
||||||
.has-larger-font-size,
|
.has-larger-font-size,
|
||||||
h2 {
|
h2 {
|
||||||
font-size: $font__size-lg;
|
font-size: $font__size-lg;
|
||||||
|
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
font-size: $font__size-xl;
|
font-size: $font__size-xl;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.has-regular-font-size,
|
.has-regular-font-size,
|
||||||
.has-large-font-size,
|
.has-large-font-size,
|
||||||
.comments-title,
|
.comments-title,
|
||||||
h3 {
|
h3 {
|
||||||
font-size: $font__size-lg;
|
font-size: $font__size-lg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-title,
|
.site-title,
|
||||||
.site-description,
|
.site-description,
|
||||||
.main-navigation,
|
.main-navigation,
|
||||||
.nav-links,
|
.nav-links,
|
||||||
.page-title,
|
.page-title,
|
||||||
.page-description,
|
.page-description,
|
||||||
.comment-author .fn,
|
.comment-author .fn,
|
||||||
.no-comments,
|
.no-comments,
|
||||||
h2.author-title,
|
h2.author-title,
|
||||||
p.author-bio,
|
p.author-bio,
|
||||||
h4 {
|
h4 {
|
||||||
font-size: $font__size-md;
|
font-size: $font__size-md;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination .nav-links,
|
.pagination .nav-links,
|
||||||
.comment-content,
|
.comment-content,
|
||||||
h5 {
|
h5 {
|
||||||
font-size: $font__size-sm;
|
font-size: $font__size-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-meta,
|
.entry-meta,
|
||||||
.entry-footer,
|
.entry-footer,
|
||||||
.discussion-meta-info,
|
.discussion-meta-info,
|
||||||
.site-info,
|
.site-info,
|
||||||
.has-small-font-size,
|
.has-small-font-size,
|
||||||
.comment-reply-link,
|
.comment-reply-link,
|
||||||
.comment-metadata,
|
.comment-metadata,
|
||||||
.comment-notes,
|
.comment-notes,
|
||||||
.sticky-post,
|
.sticky-post,
|
||||||
#cancel-comment-reply-link,
|
#cancel-comment-reply-link,
|
||||||
img:after,
|
img:after,
|
||||||
h6 {
|
h6 {
|
||||||
font-size: $font__size-xs;
|
font-size: $font__size-xs;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-title,
|
.site-title,
|
||||||
.page-title {
|
.page-title {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-description,
|
.page-description,
|
||||||
.page-links a {
|
.page-links a {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-description {
|
.site-description {
|
||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-navigation .post-title,
|
.post-navigation .post-title,
|
||||||
.entry-title,
|
.entry-title,
|
||||||
.not-found .page-title,
|
.not-found .page-title,
|
||||||
.error-404 .page-title,
|
.error-404 .page-title,
|
||||||
.comments-title,
|
.comments-title,
|
||||||
blockquote {
|
blockquote {
|
||||||
-webkit-hyphens: auto;
|
-webkit-hyphens: auto;
|
||||||
-moz-hyphens: auto;
|
-moz-hyphens: auto;
|
||||||
-ms-hyphens: auto;
|
-ms-hyphens: auto;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Do not hyphenate entry title on tablet view and bigger. */
|
/* Do not hyphenate entry title on tablet view and bigger. */
|
||||||
.entry-title {
|
.entry-title {
|
||||||
@include media(tablet) {
|
@include media(tablet) {
|
||||||
-webkit-hyphens: none;
|
-webkit-hyphens: none;
|
||||||
-moz-hyphens: none;
|
-moz-hyphens: none;
|
||||||
-ms-hyphens: none;
|
-ms-hyphens: none;
|
||||||
hyphens: none;
|
hyphens: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,32 @@
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: $font__size_base;
|
font-size: $font__size_base;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
color: $color__text-main;
|
color: $color__text-main;
|
||||||
@include font-family( $font__body );
|
@include font-family( $font__body );
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
line-height: $font__line-height-body;
|
line-height: $font__line-height-body;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
button,
|
button,
|
||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
optgroup,
|
optgroup,
|
||||||
textarea {
|
textarea {
|
||||||
color: $color__text-main;
|
color: $color__text-main;
|
||||||
@include font-family( $font__body );
|
@include font-family( $font__body );
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: $font__line-height-body;
|
line-height: $font__line-height-body;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "headings";
|
@import "headings";
|
||||||
|
|
||||||
@import "copy";
|
@import "copy";
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,34 @@
|
||||||
|
|
||||||
// Backgrounds
|
// Backgrounds
|
||||||
$color__background-body: #fff;
|
$color__background-body: #fff;
|
||||||
$color__background-input: #fff;
|
$color__background-input: #fff;
|
||||||
$color__background-screen: #f1f1f1;
|
$color__background-screen: #f1f1f1;
|
||||||
$color__background-hr: #ccc;
|
$color__background-hr: #ccc;
|
||||||
$color__background-button: #0073aa;
|
$color__background-button: #0073aa;
|
||||||
$color__background-button-hover: #111;
|
$color__background-button-hover: #111;
|
||||||
$color__background-pre: #eee;
|
$color__background-pre: #eee;
|
||||||
$color__background-ins: #fff9c0;
|
$color__background-ins: #fff9c0;
|
||||||
$color__background_selection: mix( $color__background-body, $color__background-button, 75% ); // lighten( salmon, 22.5% ); // lighten( #0999d4, 48% );
|
$color__background_selection: mix( $color__background-body, $color__background-button, 75% ); // lighten( salmon, 22.5% ); // lighten( #0999d4, 48% );
|
||||||
|
|
||||||
// Text
|
// Text
|
||||||
$color__text-main: #111;
|
$color__text-main: #111;
|
||||||
$color__text-light: #767676;
|
$color__text-light: #767676;
|
||||||
$color__text-hover: lighten( #111, 22.5% );
|
$color__text-hover: lighten( #111, 22.5% );
|
||||||
$color__text-screen: #21759b;
|
$color__text-screen: #21759b;
|
||||||
$color__text-input: #666;
|
$color__text-input: #666;
|
||||||
$color__text-input-focus: #111;
|
$color__text-input-focus: #111;
|
||||||
|
|
||||||
// Links
|
// Links
|
||||||
$color__link: #0073aa;
|
$color__link: #0073aa;
|
||||||
$color__link-visited: #0073aa;
|
$color__link-visited: #0073aa;
|
||||||
$color__link-hover: darken( $color__link, 10% );
|
$color__link-hover: darken( $color__link, 10% );
|
||||||
|
|
||||||
// Borders
|
// Borders
|
||||||
$color__border: #ccc;
|
$color__border: #ccc;
|
||||||
$color__border-link: #0073aa;
|
$color__border-link: #0073aa;
|
||||||
$color__border-link-hover: darken( $color__link, 10% );
|
$color__border-link-hover: darken( $color__link, 10% );
|
||||||
$color__border-button: #ccc #ccc #bbb;
|
$color__border-button: #ccc #ccc #bbb;
|
||||||
$color__border-button-hover: #ccc #bbb #aaa;
|
$color__border-button-hover: #ccc #bbb #aaa;
|
||||||
$color__border-button-focus: #aaa #bbb #bbb;
|
$color__border-button-focus: #aaa #bbb #bbb;
|
||||||
$color__border-input: $color__border;
|
$color__border-input: $color__border;
|
||||||
$color__border-abbr: #666;
|
$color__border-abbr: #666;
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
$columns: (
|
$columns: (
|
||||||
1: calc(1 * (100vw / 12)),
|
1: calc(1 * (100vw / 12)),
|
||||||
2: calc(2 * (100vw / 12)),
|
2: calc(2 * (100vw / 12)),
|
||||||
3: calc(3 * (100vw / 12)),
|
3: calc(3 * (100vw / 12)),
|
||||||
4: calc(4 * (100vw / 12)),
|
4: calc(4 * (100vw / 12)),
|
||||||
5: calc(5 * (100vw / 12)),
|
5: calc(5 * (100vw / 12)),
|
||||||
6: calc(6 * (100vw / 12)),
|
6: calc(6 * (100vw / 12)),
|
||||||
7: calc(7 * (100vw / 12)),
|
7: calc(7 * (100vw / 12)),
|
||||||
8: calc(8 * (100vw / 12)),
|
8: calc(8 * (100vw / 12)),
|
||||||
9: calc(9 * (100vw / 12)),
|
9: calc(9 * (100vw / 12)),
|
||||||
10: calc(10 * (100vw / 12)),
|
10: calc(10 * (100vw / 12)),
|
||||||
11: calc(11 * (100vw / 12)),
|
11: calc(11 * (100vw / 12)),
|
||||||
12: calc(12 * (100vw / 12))
|
12: calc(12 * (100vw / 12))
|
||||||
);
|
);
|
||||||
|
|
||||||
$columns__margin: $size__spacing-unit;
|
$columns__margin: $size__spacing-unit;
|
||||||
|
|
|
||||||
|
|
@ -1,83 +1,83 @@
|
||||||
/*
|
/*
|
||||||
* Chrome renders extra-wide characters for the Hoefler Text font.
|
* Chrome renders extra-wide characters for the Hoefler Text font.
|
||||||
* This results in a jumping cursor when typing in both the Classic and block
|
* This results in a jumping cursor when typing in both the Classic and block
|
||||||
* editors. The following font-face override fixes the issue by manually inserting
|
* editors. The following font-face override fixes the issue by manually inserting
|
||||||
* a custom font that includes just a Hoefler Text space replacement for that
|
* a custom font that includes just a Hoefler Text space replacement for that
|
||||||
* character instead.
|
* character instead.
|
||||||
*/
|
*/
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'NonBreakingSpaceOverride';
|
font-family: 'NonBreakingSpaceOverride';
|
||||||
src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAA0AAAAACDQAAALTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCahEICjx3CywAATYCJANUBCAFhiEHgWwbXQfILgpsY+rQRRARwyAs6uL7pxzYhxEE+32b3aeHmifR6tklkS9hiZA0ewkqGRJE+H7/+6378ASViK/PGeavqJyOzsceKi1s3BCiQsiOdn1r/RBgIJYEgCUhbm/8/8/h4saPssnTNkkiWUBrTRtjmQSajw3Ui3pZ3LYDPD+XG2C3JA/yKAS8/rU5eNfuGqRf4eNNgV4YAlIIgxglEkWe6FYpq10+wi3g+/nUgvgPFczNrz/RsTgVm/zfbPuHZlsuQECxuyqBcQwKFBjFgKO8AqP4bAN9tFJtnM9xPcbNjeXS/x1wY/xU52f5W/X1+9cnH4YwKIaoRRAkUkj/YlAAeF/624foiIDBgBmgQBeGAyhBljUPZUm/l2dTvmpqcBDUOHdbPZWd8JsBAsGr4w8/EDn82/bUPx4eh0YNrQTBuHO2FjQEAGBwK0DeI37DpQVqdERS4gZBhpeUhWCfLFz7J99aEBgsJCHvUGAdAPp4IADDCAPCEFMGpMZ9AQpTfQtQGhLbGVBZFV8BaqNyP68oTZgHNj3M8kBPfXTTC9t90UuzYhy9ciH0grVlOcqyCytisvbsERsEYztiznR0WCrmTksJwbSNK6fd1Rvr25I9oLvctUoEbNOmXJbqgYgPXEHJ82IUsrCnpkxh23F1rfZ2zcRnJYoXtauB3VTFkFXQg3uoZYD5qE0kdjDtoDoF1h2bulGmev5HbYhbrjtohQSRI4aNOkffIcT+d3v6atpaYh3JvPoQsztCcqvaBkppDSPcQ3bw3KaCBo1f5CJWTZEgW3LjLofYg51MaVezrx8xZitYbQ9KYeoRaqQdVLwSEfrKXLK1otCWOKNdR/YwYAfon5Yk8O2MJfSD10dPGA5PIJJQMkah0ugMJiv6x4Dm7LEa8xnrRGGGLAg4sAlbsA07sAt76DOsXKO3hIjtIlpnnFrt1qW4kh6NhS83P/6HB/fl1SMAAA==) format('woff2'),
|
src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAA0AAAAACDQAAALTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCahEICjx3CywAATYCJANUBCAFhiEHgWwbXQfILgpsY+rQRRARwyAs6uL7pxzYhxEE+32b3aeHmifR6tklkS9hiZA0ewkqGRJE+H7/+6378ASViK/PGeavqJyOzsceKi1s3BCiQsiOdn1r/RBgIJYEgCUhbm/8/8/h4saPssnTNkkiWUBrTRtjmQSajw3Ui3pZ3LYDPD+XG2C3JA/yKAS8/rU5eNfuGqRf4eNNgV4YAlIIgxglEkWe6FYpq10+wi3g+/nUgvgPFczNrz/RsTgVm/zfbPuHZlsuQECxuyqBcQwKFBjFgKO8AqP4bAN9tFJtnM9xPcbNjeXS/x1wY/xU52f5W/X1+9cnH4YwKIaoRRAkUkj/YlAAeF/624foiIDBgBmgQBeGAyhBljUPZUm/l2dTvmpqcBDUOHdbPZWd8JsBAsGr4w8/EDn82/bUPx4eh0YNrQTBuHO2FjQEAGBwK0DeI37DpQVqdERS4gZBhpeUhWCfLFz7J99aEBgsJCHvUGAdAPp4IADDCAPCEFMGpMZ9AQpTfQtQGhLbGVBZFV8BaqNyP68oTZgHNj3M8kBPfXTTC9t90UuzYhy9ciH0grVlOcqyCytisvbsERsEYztiznR0WCrmTksJwbSNK6fd1Rvr25I9oLvctUoEbNOmXJbqgYgPXEHJ82IUsrCnpkxh23F1rfZ2zcRnJYoXtauB3VTFkFXQg3uoZYD5qE0kdjDtoDoF1h2bulGmev5HbYhbrjtohQSRI4aNOkffIcT+d3v6atpaYh3JvPoQsztCcqvaBkppDSPcQ3bw3KaCBo1f5CJWTZEgW3LjLofYg51MaVezrx8xZitYbQ9KYeoRaqQdVLwSEfrKXLK1otCWOKNdR/YwYAfon5Yk8O2MJfSD10dPGA5PIJJQMkah0ugMJiv6x4Dm7LEa8xnrRGGGLAg4sAlbsA07sAt76DOsXKO3hIjtIlpnnFrt1qW4kh6NhS83P/6HB/fl1SMAAA==) format('woff2'),
|
||||||
url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUQAA0AAAAACDQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE9AAAABwAAAAchf5yU0dERUYAAATYAAAAHAAAAB4AJwAbT1MvMgAAAaAAAABJAAAAYJAcgU5jbWFwAAACIAAAAF4AAAFqUUxBZ2dhc3AAAATQAAAACAAAAAgAAAAQZ2x5ZgAAApAAAAAyAAAAPL0n8y9oZWFkAAABMAAAADAAAAA2Fi93Z2hoZWEAAAFgAAAAHQAAACQOSgWaaG10eAAAAewAAAAzAAAAVC7TAQBsb2NhAAACgAAAABAAAAAsAOQBAm1heHAAAAGAAAAAHQAAACAAWQALbmFtZQAAAsQAAAF6AAADIYvD/Adwb3N0AAAEQAAAAI4AAADsapk2o3jaY2BkYGAA4ov5mwzj+W2+MnCzXwCKMNzgCBSB0LfbQDQ7AxuI4mBgAlEAFKQIRHjaY2BkYGD3+NvCwMDBAALsDAyMDKhAFAA3+wH3AAAAeNpjYGRgYBBl4GBgYgABEMnIABJzAPMZAAVmAGUAAAB42mNgZlJhnMDAysDCKsKygYGBYRqEZtrDYMT4D8gHSmEHjgUFOQwODAqqf9g9/rYwMLB7MNUAhRlBcsxBrMlASoGBEQAj8QtyAAAAeNrjYGBkAAGmWQwMjO8gmBnIZ2NA0ExAzNjAAFYJVn0ASBsD6VAIDZb7AtELAgANIgb9AHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMCwQIFLQV8hXvXP//9AcRCfAcb///h/ygPW+w/vb7olBjUHCTCyMcAFGZmABBO6AogThgZgIUsXAEDcEzcAAHjaY2BgECMCyoEgACZaAed42mNgYmRgYGBnYGNgYAZSDJqMgorCgoqCjECRXwwNrCAKSP5mAAFGBiRgyAAAi/YFBQAAeNqtkc1OwkAUhU/5M25cEhcsZick0AwlBJq6MWwgJkAgYV/KAA2lJeUn+hY+gktXvpKv4dLTMqKycGHsTZNv7px7z50ZAFd4hYHjdw1Ls4EiHjVncIFnzVnc4F1zDkWjrzmPW+NNcwGlzIRKI3fJlUyrEjZQxb3mDH2fNGfRx4vmHKqG0JzHg6E0F9DOlFBGBxUI1GEzLNT4S0aLuTtsGAEUuYcQHkyg3KmIum1bNUvKlrjbbAIleqHHnS4iSudpQcySMYtdFiXlAxzSbAwfMxK6kZoHKhbjjespMTioOPZnzI+4ucCeTVyKMVKLfeAS6vSWaTinuZwzyy/Dc7vaed+6KaV0kukdPUk6yOcctZPvvxxqksq2lEW8RvHjMEO2FCl/zy6p3NEm0R9OFSafJdldc4QVeyaaObMBO0/5cCaa6d9Ggyubxire+lEojscdjoWUR1xGOy8KD8mG2ZLO2l2paDc3A39qmU2z2W5YNv5+u79e6QfGJY/hAAB42m3NywrCMBQE0DupWp/1AYI7/6DEaLQu66Mrd35BKUWKJSlFv1+rue4cGM7shgR981qSon+ZNwUJ8iDgoYU2OvDRRQ99DDDECAHGmGCKmf80hZSx/Kik/LliFbtmN6xmt+yOjdg9GztV4tROnRwX/Bsaaw51nt4Lc7tWaZYHp/MlzKx51LZs5htNri+2AAAAAQAB//8AD3jaY2BkYGDgAWIxIGZiYARCESBmAfMYAAR6AEMAAAABAAAAANXtRbgAAAAA2AhRFAAAAADYCNuG) format('woff');
|
url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUQAA0AAAAACDQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE9AAAABwAAAAchf5yU0dERUYAAATYAAAAHAAAAB4AJwAbT1MvMgAAAaAAAABJAAAAYJAcgU5jbWFwAAACIAAAAF4AAAFqUUxBZ2dhc3AAAATQAAAACAAAAAgAAAAQZ2x5ZgAAApAAAAAyAAAAPL0n8y9oZWFkAAABMAAAADAAAAA2Fi93Z2hoZWEAAAFgAAAAHQAAACQOSgWaaG10eAAAAewAAAAzAAAAVC7TAQBsb2NhAAACgAAAABAAAAAsAOQBAm1heHAAAAGAAAAAHQAAACAAWQALbmFtZQAAAsQAAAF6AAADIYvD/Adwb3N0AAAEQAAAAI4AAADsapk2o3jaY2BkYGAA4ov5mwzj+W2+MnCzXwCKMNzgCBSB0LfbQDQ7AxuI4mBgAlEAFKQIRHjaY2BkYGD3+NvCwMDBAALsDAyMDKhAFAA3+wH3AAAAeNpjYGRgYBBl4GBgYgABEMnIABJzAPMZAAVmAGUAAAB42mNgZlJhnMDAysDCKsKygYGBYRqEZtrDYMT4D8gHSmEHjgUFOQwODAqqf9g9/rYwMLB7MNUAhRlBcsxBrMlASoGBEQAj8QtyAAAAeNrjYGBkAAGmWQwMjO8gmBnIZ2NA0ExAzNjAAFYJVn0ASBsD6VAIDZb7AtELAgANIgb9AHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMCwQIFLQV8hXvXP//9AcRCfAcb///h/ygPW+w/vb7olBjUHCTCyMcAFGZmABBO6AogThgZgIUsXAEDcEzcAAHjaY2BgECMCyoEgACZaAed42mNgYmRgYGBnYGNgYAZSDJqMgorCgoqCjECRXwwNrCAKSP5mAAFGBiRgyAAAi/YFBQAAeNqtkc1OwkAUhU/5M25cEhcsZick0AwlBJq6MWwgJkAgYV/KAA2lJeUn+hY+gktXvpKv4dLTMqKycGHsTZNv7px7z50ZAFd4hYHjdw1Ls4EiHjVncIFnzVnc4F1zDkWjrzmPW+NNcwGlzIRKI3fJlUyrEjZQxb3mDH2fNGfRx4vmHKqG0JzHg6E0F9DOlFBGBxUI1GEzLNT4S0aLuTtsGAEUuYcQHkyg3KmIum1bNUvKlrjbbAIleqHHnS4iSudpQcySMYtdFiXlAxzSbAwfMxK6kZoHKhbjjespMTioOPZnzI+4ucCeTVyKMVKLfeAS6vSWaTinuZwzyy/Dc7vaed+6KaV0kukdPUk6yOcctZPvvxxqksq2lEW8RvHjMEO2FCl/zy6p3NEm0R9OFSafJdldc4QVeyaaObMBO0/5cCaa6d9Ggyubxire+lEojscdjoWUR1xGOy8KD8mG2ZLO2l2paDc3A39qmU2z2W5YNv5+u79e6QfGJY/hAAB42m3NywrCMBQE0DupWp/1AYI7/6DEaLQu66Mrd35BKUWKJSlFv1+rue4cGM7shgR981qSon+ZNwUJ8iDgoYU2OvDRRQ99DDDECAHGmGCKmf80hZSx/Kik/LliFbtmN6xmt+yOjdg9GztV4tROnRwX/Bsaaw51nt4Lc7tWaZYHp/MlzKx51LZs5htNri+2AAAAAQAB//8AD3jaY2BkYGDgAWIxIGZiYARCESBmAfMYAAR6AEMAAAABAAAAANXtRbgAAAAA2AhRFAAAAADYCNuG) format('woff');
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Font and typographic variables
|
// Font and typographic variables
|
||||||
|
|
||||||
$font__body: "NonBreakingSpaceOverride", "Hoefler Text", Garamond, "Times New Roman", serif;
|
$font__body: "NonBreakingSpaceOverride", "Hoefler Text", Garamond, "Times New Roman", serif;
|
||||||
$font__heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
$font__heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||||
$font__fallbacks: (
|
$font__fallbacks: (
|
||||||
/* Arabic */
|
/* Arabic */
|
||||||
ar: 'Tahoma, Arial, sans-serif',
|
ar: 'Tahoma, Arial, sans-serif',
|
||||||
ary: 'Tahoma, Arial, sans-serif',
|
ary: 'Tahoma, Arial, sans-serif',
|
||||||
azb: 'Tahoma, Arial, sans-serif',
|
azb: 'Tahoma, Arial, sans-serif',
|
||||||
ckb: 'Tahoma, Arial, sans-serif',
|
ckb: 'Tahoma, Arial, sans-serif',
|
||||||
fa-IR: 'Tahoma, Arial, sans-serif',
|
fa-IR: 'Tahoma, Arial, sans-serif',
|
||||||
haz: 'Tahoma, Arial, sans-serif',
|
haz: 'Tahoma, Arial, sans-serif',
|
||||||
ps: 'Tahoma, Arial, sans-serif',
|
ps: 'Tahoma, Arial, sans-serif',
|
||||||
/* Cyrillic */
|
/* Cyrillic */
|
||||||
be: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
be: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
||||||
bg-BG: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
bg-BG: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
||||||
kk: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
kk: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
||||||
mk-MK: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
mk-MK: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
||||||
mn: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
mn: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
||||||
ru-RU: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
ru-RU: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
||||||
sah: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
sah: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
||||||
sr-RS: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
sr-RS: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
||||||
tt-RU: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
tt-RU: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
||||||
uk: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
uk: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
|
||||||
/* Chinese (Hong Kong) */
|
/* Chinese (Hong Kong) */
|
||||||
zh-HK: '-apple-system, BlinkMacSystemFont, "PingFang HK", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif',
|
zh-HK: '-apple-system, BlinkMacSystemFont, "PingFang HK", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif',
|
||||||
/* Chinese (Taiwan) */
|
/* Chinese (Taiwan) */
|
||||||
zh-TW: '-apple-system, BlinkMacSystemFont, "PingFang TC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif',
|
zh-TW: '-apple-system, BlinkMacSystemFont, "PingFang TC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif',
|
||||||
/* Chinese (China) */
|
/* Chinese (China) */
|
||||||
zh-CN: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif',
|
zh-CN: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif',
|
||||||
/* Devanagari */
|
/* Devanagari */
|
||||||
bn-BD: 'Arial, sans-serif',
|
bn-BD: 'Arial, sans-serif',
|
||||||
hi-IN: 'Arial, sans-serif',
|
hi-IN: 'Arial, sans-serif',
|
||||||
mr: 'Arial, sans-serif',
|
mr: 'Arial, sans-serif',
|
||||||
ne-NP: 'Arial, sans-serif',
|
ne-NP: 'Arial, sans-serif',
|
||||||
/* Greek */
|
/* Greek */
|
||||||
el: '"Helvetica Neue", Helvetica, Arial, sans-serif',
|
el: '"Helvetica Neue", Helvetica, Arial, sans-serif',
|
||||||
/* Gujarati */
|
/* Gujarati */
|
||||||
gu: 'Arial, sans-serif',
|
gu: 'Arial, sans-serif',
|
||||||
/* Hebrew */
|
/* Hebrew */
|
||||||
he-IL: '"Arial Hebrew", Arial, sans-serif',
|
he-IL: '"Arial Hebrew", Arial, sans-serif',
|
||||||
/* Japanese */
|
/* Japanese */
|
||||||
ja: '-apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif',
|
ja: '-apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif',
|
||||||
/* Korean */
|
/* Korean */
|
||||||
ko-KR: '"Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif',
|
ko-KR: '"Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif',
|
||||||
/* Thai */
|
/* Thai */
|
||||||
th: '"Sukhumvit Set", "Helvetica Neue", helvetica, arial, sans-serif',
|
th: '"Sukhumvit Set", "Helvetica Neue", helvetica, arial, sans-serif',
|
||||||
/* Vietnamese */
|
/* Vietnamese */
|
||||||
vi: '"Libre Franklin", sans-serif',
|
vi: '"Libre Franklin", sans-serif',
|
||||||
);
|
);
|
||||||
$font__code: Menlo, monaco, Consolas, Lucida Console, monospace;
|
$font__code: Menlo, monaco, Consolas, Lucida Console, monospace;
|
||||||
$font__pre: "Courier 10 Pitch", Courier, monospace;
|
$font__pre: "Courier 10 Pitch", Courier, monospace;
|
||||||
|
|
||||||
$font__size_base: 22px;
|
$font__size_base: 22px;
|
||||||
$font__size-ratio: 1.125;
|
$font__size-ratio: 1.125;
|
||||||
|
|
||||||
$font__size-xxs: 1em / (1.5 * $font__size-ratio);
|
$font__size-xxs: 1em / (1.5 * $font__size-ratio);
|
||||||
$font__size-xs: 1em / (1.25 * $font__size-ratio);
|
$font__size-xs: 1em / (1.25 * $font__size-ratio);
|
||||||
$font__size-sm: 1em / (1 * $font__size-ratio);
|
$font__size-sm: 1em / (1 * $font__size-ratio);
|
||||||
$font__size-md: 1em * (1 * $font__size-ratio);
|
$font__size-md: 1em * (1 * $font__size-ratio);
|
||||||
$font__size-lg: 1em * (1.5 * $font__size-ratio);
|
$font__size-lg: 1em * (1.5 * $font__size-ratio);
|
||||||
$font__size-xl: 1em * (2 * $font__size-ratio);
|
$font__size-xl: 1em * (2 * $font__size-ratio);
|
||||||
$font__size-xxl: 1em * (2.5 * $font__size-ratio);
|
$font__size-xxl: 1em * (2.5 * $font__size-ratio);
|
||||||
$font__size-xxxl: 1em * (3 * $font__size-ratio);
|
$font__size-xxxl: 1em * (3 * $font__size-ratio);
|
||||||
|
|
||||||
$font__line-height-body: 1.8;
|
$font__line-height-body: 1.8;
|
||||||
$font__line-height-pre: 1.6;
|
$font__line-height-pre: 1.6;
|
||||||
$font__line-height-heading: 1.2;
|
$font__line-height-heading: 1.2;
|
||||||
$font__line-height-double: 2 * $font__line-height-heading;
|
$font__line-height-double: 2 * $font__line-height-heading;
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
// Responsive widths.
|
// Responsive widths.
|
||||||
|
|
||||||
$size__spacing-unit: 1rem;
|
$size__spacing-unit: 1rem;
|
||||||
$size__site-main: 100%;
|
$size__site-main: 100%;
|
||||||
$size__site-sidebar: 25%;
|
$size__site-sidebar: 25%;
|
||||||
$size__site-margins: calc(10% + 60px);
|
$size__site-margins: calc(10% + 60px);
|
||||||
$size__site-tablet-content: calc(8 * (100vw / 12) - 28px);
|
$size__site-tablet-content: calc(8 * (100vw / 12) - 28px);
|
||||||
$size__site-desktop-content: calc(6 * (100vw / 12) - 28px);
|
$size__site-desktop-content: calc(6 * (100vw / 12) - 28px);
|
||||||
|
|
||||||
// Responsive widths.
|
// Responsive widths.
|
||||||
|
|
||||||
$mobile_width: 600px;
|
$mobile_width: 600px;
|
||||||
$tablet_width: 768px;
|
$tablet_width: 768px;
|
||||||
$desktop_width: 1168px;
|
$desktop_width: 1168px;
|
||||||
$wide_width: 1379px;
|
$wide_width: 1379px;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
// Transition timeouts.
|
// Transition timeouts.
|
||||||
|
|
||||||
$link_transition: 110ms;
|
$link_transition: 110ms;
|
||||||
$icon_transition: 120ms;
|
$icon_transition: 120ms;
|
||||||
$button_transition: 150ms;
|
$button_transition: 150ms;
|
||||||
$background_transition: 200ms;
|
$background_transition: 200ms;
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
@import "colors";
|
@import "colors";
|
||||||
@import "fonts";
|
@import "fonts";
|
||||||
@import "structure";
|
@import "structure";
|
||||||
@import "columns";
|
@import "columns";
|
||||||
@import "transitions";
|
@import "transitions";
|
||||||
|
|
|
||||||
|
|
@ -2,4 +2,4 @@
|
||||||
Twenty Nineteen Customizer Styles
|
Twenty Nineteen Customizer Styles
|
||||||
|
|
||||||
NOTE: This file is automatically populated with styles if the user selects a custom primary color in the customzier.
|
NOTE: This file is automatically populated with styles if the user selects a custom primary color in the customzier.
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
Twenty Nineteen Customizer Styles
|
Twenty Nineteen Customizer Styles
|
||||||
|
|
||||||
NOTE: This file is automatically populated with styles if the user selects a custom primary color in the customzier.
|
NOTE: This file is automatically populated with styles if the user selects a custom primary color in the customzier.
|
||||||
*/
|
*/
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -7,7 +7,7 @@ Author URI: https://wordpress.org/
|
||||||
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
|
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
|
||||||
Requires at least: 4.9.6
|
Requires at least: 4.9.6
|
||||||
Requires PHP: 5.2.4
|
Requires PHP: 5.2.4
|
||||||
Version: 1.5
|
Version: 1.6
|
||||||
License: GNU General Public License v2 or later
|
License: GNU General Public License v2 or later
|
||||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||||
Text Domain: twentynineteen
|
Text Domain: twentynineteen
|
||||||
|
|
@ -2527,6 +2527,17 @@ h2:before {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1:not(.site-title).has-text-align-center:before,
|
||||||
|
h2.has-text-align-center:before {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1:not(.site-title).has-text-align-right:before,
|
||||||
|
h2.has-text-align-right:before {
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
background-color: #767676;
|
background-color: #767676;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
@ -2786,8 +2797,7 @@ body.page .main-navigation {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 250ms ease-in-out,
|
transition: background 250ms ease-in-out, transform 150ms ease;
|
||||||
transform 150ms ease;
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
@ -4209,6 +4219,15 @@ body.page .main-navigation {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.entry .entry-title.has-text-align-center:before {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry .entry-title.has-text-align-right:before {
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.entry .entry-title a {
|
.entry .entry-title a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
@ -4493,6 +4512,15 @@ body.page .main-navigation {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.author-bio .author-title.has-text-align-center:before {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-bio .author-title.has-text-align-right:before {
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.author-bio .author-description {
|
.author-bio .author-description {
|
||||||
display: inline;
|
display: inline;
|
||||||
color: #767676;
|
color: #767676;
|
||||||
|
|
@ -4587,6 +4615,15 @@ body.page .main-navigation {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.comments-area .comments-title-wrap .comments-title.has-text-align-center:before {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-area .comments-title-wrap .comments-title.has-text-align-right:before {
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 768px) {
|
@media only screen and (min-width: 768px) {
|
||||||
.comments-area .comments-title-wrap .comments-title {
|
.comments-area .comments-title-wrap .comments-title {
|
||||||
flex: 1 0 calc(3 * (100vw / 12));
|
flex: 1 0 calc(3 * (100vw / 12));
|
||||||
|
|
@ -5071,6 +5108,10 @@ body.page .main-navigation {
|
||||||
/* Make sure select elements fit in widgets. */
|
/* Make sure select elements fit in widgets. */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.widget .widget-title {
|
||||||
|
font-size: 1.6875em;
|
||||||
|
}
|
||||||
|
|
||||||
.widget select {
|
.widget select {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ Author URI: https://wordpress.org/
|
||||||
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
|
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
|
||||||
Requires at least: 4.9.6
|
Requires at least: 4.9.6
|
||||||
Requires PHP: 5.2.4
|
Requires PHP: 5.2.4
|
||||||
Version: 1.5
|
Version: 1.6
|
||||||
License: GNU General Public License v2 or later
|
License: GNU General Public License v2 or later
|
||||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||||
Text Domain: twentynineteen
|
Text Domain: twentynineteen
|
||||||
|
|
@ -2527,6 +2527,17 @@ h2:before {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1:not(.site-title).has-text-align-center:before,
|
||||||
|
h2.has-text-align-center:before {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1:not(.site-title).has-text-align-right:before,
|
||||||
|
h2.has-text-align-right:before {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
background-color: #767676;
|
background-color: #767676;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
@ -2786,8 +2797,7 @@ body.page .main-navigation {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 250ms ease-in-out,
|
transition: background 250ms ease-in-out, transform 150ms ease;
|
||||||
transform 150ms ease;
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
@ -4215,6 +4225,15 @@ body.page .main-navigation {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.entry .entry-title.has-text-align-center:before {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry .entry-title.has-text-align-right:before {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.entry .entry-title a {
|
.entry .entry-title a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
@ -4499,6 +4518,15 @@ body.page .main-navigation {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.author-bio .author-title.has-text-align-center:before {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-bio .author-title.has-text-align-right:before {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.author-bio .author-description {
|
.author-bio .author-description {
|
||||||
display: inline;
|
display: inline;
|
||||||
color: #767676;
|
color: #767676;
|
||||||
|
|
@ -4593,6 +4621,15 @@ body.page .main-navigation {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.comments-area .comments-title-wrap .comments-title.has-text-align-center:before {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-area .comments-title-wrap .comments-title.has-text-align-right:before {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 768px) {
|
@media only screen and (min-width: 768px) {
|
||||||
.comments-area .comments-title-wrap .comments-title {
|
.comments-area .comments-title-wrap .comments-title {
|
||||||
flex: 1 0 calc(3 * (100vw / 12));
|
flex: 1 0 calc(3 * (100vw / 12));
|
||||||
|
|
@ -5077,6 +5114,10 @@ body.page .main-navigation {
|
||||||
/* Make sure select elements fit in widgets. */
|
/* Make sure select elements fit in widgets. */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.widget .widget-title {
|
||||||
|
font-size: 1.6875em;
|
||||||
|
}
|
||||||
|
|
||||||
.widget select {
|
.widget select {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,110 +1,110 @@
|
||||||
/*
|
/*
|
||||||
Theme Name: Twenty Nineteen
|
Theme Name: Twenty Nineteen
|
||||||
Theme URI: https://wordpress.org/themes/twentynineteen/
|
Theme URI: https://wordpress.org/themes/twentynineteen/
|
||||||
Author: the WordPress team
|
Author: the WordPress team
|
||||||
Author URI: https://wordpress.org/
|
Author URI: https://wordpress.org/
|
||||||
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
|
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
|
||||||
Requires at least: 4.9.6
|
Requires at least: 4.9.6
|
||||||
Requires PHP: 5.2.4
|
Requires PHP: 5.2.4
|
||||||
Version: 1.5
|
Version: 1.6
|
||||||
License: GNU General Public License v2 or later
|
License: GNU General Public License v2 or later
|
||||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||||
Text Domain: twentynineteen
|
Text Domain: twentynineteen
|
||||||
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready
|
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready
|
||||||
|
|
||||||
This theme, like WordPress, is licensed under the GPL.
|
This theme, like WordPress, is licensed under the GPL.
|
||||||
Use it to make something cool, have fun, and share what you've learned with others.
|
Use it to make something cool, have fun, and share what you've learned with others.
|
||||||
|
|
||||||
Twenty Nineteen is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
|
Twenty Nineteen is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
|
||||||
Underscores is distributed under the terms of the GNU GPL v2 or later.
|
Underscores is distributed under the terms of the GNU GPL v2 or later.
|
||||||
|
|
||||||
Normalizing styles have been helped along thanks to the fine work of
|
Normalizing styles have been helped along thanks to the fine work of
|
||||||
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
|
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
>>> TABLE OF CONTENTS:
|
>>> TABLE OF CONTENTS:
|
||||||
----------------------------------------------------------------
|
----------------------------------------------------------------
|
||||||
# Variables
|
# Variables
|
||||||
# Normalize
|
# Normalize
|
||||||
# Typography
|
# Typography
|
||||||
## Headings
|
## Headings
|
||||||
## Copy
|
## Copy
|
||||||
# Elements
|
# Elements
|
||||||
## Lists
|
## Lists
|
||||||
## Tables
|
## Tables
|
||||||
# Forms
|
# Forms
|
||||||
## Buttons
|
## Buttons
|
||||||
## Fields
|
## Fields
|
||||||
# Navigation
|
# Navigation
|
||||||
## Links
|
## Links
|
||||||
## Menus
|
## Menus
|
||||||
## Next & Previous
|
## Next & Previous
|
||||||
# Accessibility
|
# Accessibility
|
||||||
# Alignments
|
# Alignments
|
||||||
# Clearings
|
# Clearings
|
||||||
# Layout
|
# Layout
|
||||||
# Widgets
|
# Widgets
|
||||||
# Content
|
# Content
|
||||||
## Archives
|
## Archives
|
||||||
## Posts and pages
|
## Posts and pages
|
||||||
## Comments
|
## Comments
|
||||||
# Blocks
|
# Blocks
|
||||||
# Media
|
# Media
|
||||||
## Captions
|
## Captions
|
||||||
## Galleries
|
## Galleries
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
@import "sass/variables-site/variables-site";
|
@import "sass/variables-site/variables-site";
|
||||||
@import "sass/mixins/mixins-master";
|
@import "sass/mixins/mixins-master";
|
||||||
|
|
||||||
/* Normalize */
|
/* Normalize */
|
||||||
|
|
||||||
@import "sass/normalize";
|
@import "sass/normalize";
|
||||||
|
|
||||||
/* Typography */
|
/* Typography */
|
||||||
|
|
||||||
@import "sass/typography/typography";
|
@import "sass/typography/typography";
|
||||||
|
|
||||||
/* Elements */
|
/* Elements */
|
||||||
|
|
||||||
@import "sass/elements/elements";
|
@import "sass/elements/elements";
|
||||||
|
|
||||||
/* Forms */
|
/* Forms */
|
||||||
|
|
||||||
@import "sass/forms/forms";
|
@import "sass/forms/forms";
|
||||||
|
|
||||||
/* Navigation */
|
/* Navigation */
|
||||||
|
|
||||||
@import "sass/navigation/navigation";
|
@import "sass/navigation/navigation";
|
||||||
|
|
||||||
/* Accessibility */
|
/* Accessibility */
|
||||||
|
|
||||||
@import "sass/modules/accessibility";
|
@import "sass/modules/accessibility";
|
||||||
|
|
||||||
/* Alignments */
|
/* Alignments */
|
||||||
|
|
||||||
@import "sass/modules/alignments";
|
@import "sass/modules/alignments";
|
||||||
|
|
||||||
/* Clearings */
|
/* Clearings */
|
||||||
|
|
||||||
@import "sass/modules/clearings";
|
@import "sass/modules/clearings";
|
||||||
|
|
||||||
/* Layout */
|
/* Layout */
|
||||||
|
|
||||||
@import "sass/layout/layout";
|
@import "sass/layout/layout";
|
||||||
|
|
||||||
/* Content */
|
/* Content */
|
||||||
|
|
||||||
@import "sass/site/site";
|
@import "sass/site/site";
|
||||||
|
|
||||||
/* Widgets */
|
/* Widgets */
|
||||||
|
|
||||||
@import "sass/site/secondary/widgets";
|
@import "sass/site/secondary/widgets";
|
||||||
|
|
||||||
/* Blocks */
|
/* Blocks */
|
||||||
|
|
||||||
@import "sass/blocks/blocks";
|
@import "sass/blocks/blocks";
|
||||||
|
|
||||||
/* Media */
|
/* Media */
|
||||||
|
|
||||||
@import "sass/media/media";
|
@import "sass/media/media";
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue