first
This commit is contained in:
@ -0,0 +1,40 @@
|
||||
.screen-reader-text {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
-webkit-clip-path: inset(50%);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
clip: auto !important;
|
||||
-webkit-clip-path: none;
|
||||
clip-path: none;
|
||||
color: #21759b;
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
height: auto;
|
||||
left: 5px;
|
||||
line-height: normal;
|
||||
padding: 15px 23px 14px;
|
||||
text-decoration: none;
|
||||
top: 5px;
|
||||
width: auto;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
/* Do not show the outline on the skip link target. */
|
||||
#content[tabindex="-1"]:focus {
|
||||
outline: 0;
|
||||
}
|
||||
@ -0,0 +1,277 @@
|
||||
// Gutenberg text color options
|
||||
|
||||
.has-black-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-primary: var(--global--color-black, #000000);
|
||||
color: var(--local--color-primary);
|
||||
}
|
||||
color: var(--global--color-black);
|
||||
}
|
||||
|
||||
.has-gray-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-primary: var(--global--color-gray, #000000);
|
||||
color: var(--local--color-primary);
|
||||
}
|
||||
color: var(--global--color-gray);
|
||||
}
|
||||
|
||||
.has-dark-gray-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-primary: var(--global--color-dark-gray, #000000);
|
||||
color: var(--local--color-primary);
|
||||
}
|
||||
color: var(--global--color-dark-gray);
|
||||
}
|
||||
|
||||
.has-green-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-primary: var(--global--color-green, #FFFFFF);
|
||||
color: var(--local--color-primary);
|
||||
}
|
||||
color: var(--global--color-green);
|
||||
}
|
||||
|
||||
.has-blue-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-primary: var(--global--color-blue, #FFFFFF);
|
||||
color: var(--local--color-primary);
|
||||
}
|
||||
color: var(--global--color-blue);
|
||||
}
|
||||
|
||||
.has-purple-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-primary: var(--global--color-purple, #FFFFFF);
|
||||
color: var(--local--color-primary);
|
||||
}
|
||||
color: var(--global--color-purple);
|
||||
}
|
||||
|
||||
.has-red-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-primary: var(--global--color-red, #FFFFFF);
|
||||
color: var(--local--color-primary);
|
||||
}
|
||||
color: var(--global--color-red);
|
||||
}
|
||||
|
||||
.has-orange-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-primary: var(--global--color-orange, #FFFFFF);
|
||||
color: var(--local--color-primary);
|
||||
}
|
||||
color: var(--global--color-orange);
|
||||
}
|
||||
|
||||
.has-yellow-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-primary: var(--global--color-yellow, #FFFFFF);
|
||||
color: var(--local--color-primary);
|
||||
}
|
||||
color: var(--global--color-yellow);
|
||||
}
|
||||
|
||||
.has-white-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-primary: var(--global--color-white, #FFFFFF);
|
||||
color: var(--local--color-primary);
|
||||
}
|
||||
color: var(--global--color-white);
|
||||
}
|
||||
|
||||
// Gutenberg background-color options
|
||||
.has-background {
|
||||
|
||||
a,
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.has-black-background-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-background: var(--global--color-black, #000000);
|
||||
background-color: var(--local--color-background);
|
||||
}
|
||||
background-color: var(--global--color-black);
|
||||
}
|
||||
|
||||
.has-dark-gray-background-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-background: var(--global--color-dark-gray, #000000);
|
||||
background-color: var(--local--color-background);
|
||||
}
|
||||
background-color: var(--global--color-dark-gray);
|
||||
}
|
||||
|
||||
.has-gray-background-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-background: var(--global--color-gray, #000000);
|
||||
background-color: var(--local--color-background);
|
||||
}
|
||||
background-color: var(--global--color-gray);
|
||||
}
|
||||
|
||||
.has-light-gray-background-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-background: var(--global--color-light-gray, #FFFFFF);
|
||||
background-color: var(--local--color-background);
|
||||
}
|
||||
background-color: var(--global--color-light-gray);
|
||||
}
|
||||
|
||||
.has-green-background-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-background: var(--global--color-green, #FFFFFF);
|
||||
background-color: var(--local--color-background);
|
||||
}
|
||||
background-color: var(--global--color-green);
|
||||
}
|
||||
|
||||
.has-blue-background-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-background: var(--global--color-blue, #FFFFFF);
|
||||
background-color: var(--local--color-background);
|
||||
}
|
||||
background-color: var(--global--color-blue);
|
||||
}
|
||||
|
||||
.has-purple-background-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-background: var(--global--color-purple, #FFFFFF);
|
||||
background-color: var(--local--color-background);
|
||||
}
|
||||
background-color: var(--global--color-purple);
|
||||
}
|
||||
|
||||
.has-red-background-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-background: var(--global--color-red, #FFFFFF);
|
||||
background-color: var(--local--color-background);
|
||||
}
|
||||
background-color: var(--global--color-red);
|
||||
}
|
||||
|
||||
.has-orange-background-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-background: var(--global--color-orange, #FFFFFF);
|
||||
background-color: var(--local--color-background);
|
||||
}
|
||||
background-color: var(--global--color-orange);
|
||||
}
|
||||
|
||||
.has-yellow-background-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-background: var(--global--color-yellow, #FFFFFF);
|
||||
background-color: var(--local--color-background);
|
||||
}
|
||||
background-color: var(--global--color-yellow);
|
||||
}
|
||||
|
||||
.has-white-background-color[class] {
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-background: var(--global--color-white, #FFFFFF);
|
||||
background-color: var(--local--color-background);
|
||||
}
|
||||
background-color: var(--global--color-white);
|
||||
}
|
||||
|
||||
.has-background:not(.has-text-color) {
|
||||
|
||||
&.has-black-background-color[class],
|
||||
&.has-gray-background-color[class],
|
||||
&.has-dark-gray-background-color[class] {
|
||||
color: var(--global--color-white);
|
||||
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-primary: var(--global--color-background, #FFFFFF);
|
||||
// Reverse the local foreground color in darkmode
|
||||
.is-dark-theme & {
|
||||
--local--color-primary: var(--global--color-primary, #000000);
|
||||
}
|
||||
color: var(--local--color-primary, var(--global--color-primary));
|
||||
}
|
||||
}
|
||||
|
||||
&.has-green-background-color[class],
|
||||
&.has-blue-background-color[class],
|
||||
&.has-purple-background-color[class],
|
||||
&.has-red-background-color[class],
|
||||
&.has-orange-background-color[class],
|
||||
&.has-yellow-background-color[class],
|
||||
&.has-white-background-color[class] {
|
||||
color: var(--global--color-dark-gray);
|
||||
|
||||
// Localize CSS-variables to limit relationship scope
|
||||
> [class*="__inner-container"] {
|
||||
--local--color-primary: var(--global--color-primary, #000000);
|
||||
// Reverse the local foreground color in darkmode
|
||||
.is-dark-theme & {
|
||||
--local--color-primary: var(--global--color-background, #FFFFFF);
|
||||
}
|
||||
color: var(--local--color-primary, var(--global--color-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom gradients
|
||||
.has-purple-to-yellow-gradient-background {
|
||||
background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow));
|
||||
}
|
||||
|
||||
.has-yellow-to-purple-gradient-background {
|
||||
background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple));
|
||||
}
|
||||
|
||||
.has-green-to-yellow-gradient-background {
|
||||
background: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow));
|
||||
}
|
||||
|
||||
.has-yellow-to-green-gradient-background {
|
||||
background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green));
|
||||
}
|
||||
|
||||
.has-red-to-yellow-gradient-background {
|
||||
background: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow));
|
||||
}
|
||||
|
||||
.has-yellow-to-red-gradient-background {
|
||||
background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red));
|
||||
}
|
||||
|
||||
.has-purple-to-red-gradient-background {
|
||||
background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red));
|
||||
}
|
||||
|
||||
.has-red-to-purple-gradient-background {
|
||||
background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple));
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
.is-IE {
|
||||
|
||||
&.is-dark-theme {
|
||||
color: #fff;
|
||||
|
||||
*,
|
||||
a,
|
||||
.site-description,
|
||||
.entry-title,
|
||||
.entry-footer,
|
||||
.widget-area,
|
||||
.post-navigation .meta-nav,
|
||||
.footer-navigation-wrapper li a:link,
|
||||
.site-footer > .site-info,
|
||||
.site-footer > .site-info a,
|
||||
.site-footer > .site-info a:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sub-menu-toggle svg,
|
||||
.sub-menu-toggle path,
|
||||
.post-navigation .meta-nav svg,
|
||||
.post-navigation .meta-nav path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.primary-navigation > div > .menu-wrapper > li > .sub-menu li {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
&.primary-navigation-open {
|
||||
@include media(mobile-only) {
|
||||
|
||||
.primary-navigation > .primary-menu-container,
|
||||
.menu-button-container {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
color: #21759b;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation .nav-links {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.post-thumbnail .wp-post-image {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
// Measure
|
||||
// - The width of a line of text, in characters, is known as its measure.
|
||||
|
||||
header *,
|
||||
main *,
|
||||
footer * {
|
||||
max-width: var(--global--spacing-measure);
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
header,
|
||||
nav,
|
||||
article,
|
||||
figure,
|
||||
hr,
|
||||
main,
|
||||
section,
|
||||
footer {
|
||||
max-width: none;
|
||||
}
|
||||
@ -0,0 +1,184 @@
|
||||
/*
|
||||
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/.
|
||||
*/
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
>>> TABLE OF CONTENTS:
|
||||
----------------------------------------------------------------
|
||||
# Margins & paddings
|
||||
# Typography
|
||||
# Page breaks
|
||||
# Links
|
||||
# Visibility
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
@media print {
|
||||
|
||||
/* Margins & paddings */
|
||||
|
||||
@page {
|
||||
margin: 2cm;
|
||||
}
|
||||
|
||||
.entry .entry-header,
|
||||
.entry,
|
||||
.single .site-main > article > .entry-footer {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.site-footer .site-info {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Fonts */
|
||||
|
||||
body {
|
||||
font: 13pt Georgia, "Times New Roman", Times, serif; // Fallback for browsers without CSS variables support.
|
||||
font: 13pt var(--global--font-secondary, Georgia, "Times New Roman", Times, serif);
|
||||
line-height: 1.3;
|
||||
background: #fff !important;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
// Override color settings that changes the text to white.
|
||||
.has-background-dark * {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
h1,
|
||||
.entry-title,
|
||||
.singular .entry-title,
|
||||
.page-title {
|
||||
font-size: 22pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
.has-regular-font-size,
|
||||
.has-large-font-size,
|
||||
h2.author-title,
|
||||
p.author-bio,
|
||||
.comments-title,
|
||||
.archive-description {
|
||||
font-size: 14pt;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.comment-meta,
|
||||
.comment-meta .comment-author .fn {
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
/* Page breaks */
|
||||
|
||||
a {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
page-break-after: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
table,
|
||||
pre,
|
||||
figure {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol,
|
||||
dl {
|
||||
page-break-before: avoid;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
|
||||
a:link,
|
||||
a:visited,
|
||||
a {
|
||||
background: transparent;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a[href^="http"]:after {
|
||||
content: " < " attr(href) "> ";
|
||||
}
|
||||
|
||||
a:after > img {
|
||||
content: "";
|
||||
}
|
||||
|
||||
article a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
a:not(:local-link):after { // stylelint-disable-line selector-pseudo-class-no-unknown
|
||||
content: " < " attr(href) "> ";
|
||||
}
|
||||
|
||||
.entry-title a:after {
|
||||
content: "\a < " attr(href) "> ";
|
||||
white-space: pre;
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
.cat-links a:after,
|
||||
.tags-links a:after,
|
||||
.byline a:after,
|
||||
.comment-metadata a:after,
|
||||
.wp-block-calendar a:after,
|
||||
.wp-block-tag-cloud a:after,
|
||||
.page-links a:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Visibility */
|
||||
.primary-navigation,
|
||||
.site-title + .primary-navigation,
|
||||
.footer-navigation,
|
||||
.entry-footer,
|
||||
.post-navigation,
|
||||
.navigation.pagination,
|
||||
.widget-area,
|
||||
.edit-link,
|
||||
.more-link,
|
||||
.comment-reply,
|
||||
.reply,
|
||||
.comment .comment-metadata .edit-link,
|
||||
.comment-respond,
|
||||
#dark-mode-toggler {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.entry .entry-content .wp-block-button .wp-block-button__link,
|
||||
.entry .entry-content .button,
|
||||
.entry .entry-content .wp-block-file__button {
|
||||
color: #000;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user