Update themes

This commit is contained in:
Oliver Davies 2019-05-08 08:07:01 +01:00
parent e00f87f2f5
commit 168d1a5ee7
98 changed files with 6532 additions and 2223 deletions

View file

@ -160,7 +160,7 @@
@include button-transition;
border: none;
font-size: $font__size-sm;
font-family: $font__heading;
@include font-family( $font__heading );
line-height: $font__line-height-heading;
box-sizing: border-box;
font-weight: bold;
@ -230,7 +230,7 @@
li {
color: $color__text-light;
font-family: $font__heading;
@include font-family( $font__heading );
font-size: calc(#{$font__size_base} * #{$font__size-ratio});
font-weight: bold;
line-height: $font__line-height-heading;
@ -299,7 +299,7 @@
//! Verse
.wp-block-verse {
font-family: $font__body;
@include font-family( $font__body );
font-size: $font__size_base;
line-height: 1.8;
}
@ -307,7 +307,7 @@
//! Paragraphs
.has-drop-cap {
&:not(:focus):first-letter {
font-family: $font__heading;
@include font-family( $font__heading );
font-size: $font__size-xxxl;
line-height: 1;
font-weight: bold;
@ -348,7 +348,7 @@
cite {
display: inline-block;
font-family: $font__heading;
@include font-family( $font__heading );
line-height: 1.6;
text-transform: none;
color: $color__text-light;
@ -452,7 +452,8 @@
&:not(.is-large),
&:not(.is-style-large) {
border-left: 2px solid $color__link;
border-width: 2px;
border-color: $color__link;
padding-top: 0;
padding-bottom: 0;
}
@ -512,7 +513,7 @@
}
.aligncenter {
@include postContentMaxWidth();
@include media(tablet) {
@ -559,7 +560,7 @@
.wp-block-cover-image-text,
.wp-block-cover-text,
h2 {
font-family: $font__heading;
@include font-family( $font__heading );
font-size: $font__size-lg;
font-weight: bold;
line-height: 1.25;
@ -624,7 +625,7 @@
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
font-size: $font__size-xs;
font-family: $font__heading;
@include font-family( $font__heading );
line-height: $font__line-height-pre;
margin: 0;
padding: ( $size__spacing-unit * .5 );
@ -690,7 +691,7 @@
//! File
.wp-block-file {
font-family: $font__heading;
@include font-family( $font__heading );
.wp-block-file__button {
display: table;
@ -699,7 +700,7 @@
border-radius: 5px;
background: $color__background-button;
font-size: $font__size-base;
font-family: $font__heading;
@include font-family( $font__heading );
line-height: $font__line-height-heading;
text-decoration: none;
font-weight: bold;
@ -733,46 +734,29 @@
code {
font-size: $font__size-md;
white-space: pre-wrap;
word-break: break-word;
word-break: break-word;
}
}
//! Columns
.wp-block-columns {
&.alignfull {
padding-left: $size__spacing-unit;
padding-right: $size__spacing-unit;
}
.wp-block-column > * {
@include media(mobile) {
flex-wrap: nowrap;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
@include media(tablet) {
.wp-block-column > * {
flex-wrap: nowrap;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
&[class*='has-'] > * {
margin-right: $size__spacing-unit;
&:last-child {
margin-right: 0;
}
}
&.alignfull,
&.alignfull .wp-block-column {
padding-left: calc(2 * #{$size__spacing-unit});
padding-right: calc(2 * #{$size__spacing-unit});
.wp-block-column:not(:first-child) {
margin-left: 32px;
}
}
}
@ -781,7 +765,7 @@
.wp-block-latest-comments {
.wp-block-latest-comments__comment-meta {
font-family: $font__heading;
@include font-family( $font__heading );
font-weight: bold;
.wp-block-latest-comments__comment-date {
@ -837,14 +821,14 @@
// Use white text against these backgrounds by default.
color: $color__background-body;
p,
h1,
h2,
h3,
h4,
h5,
h6,
a {
> p,
> h1,
> h2,
> h3,
> h4,
> h5,
> h6,
> a {
color: $color__background-body;
}
}
@ -853,14 +837,14 @@
color: $color__text-main;
// Use dark gray text against this background by default.
p,
h1,
h2,
h3,
h4,
h5,
h6,
a {
> p,
> h1,
> h2,
> h3,
> h4,
> h5,
> h6,
> a {
color: $color__text-main;
}
}
@ -893,25 +877,25 @@
//! Custom foreground colors
.has-primary-color,
.wp-block-pullquote.is-style-solid-color blockquote.has-primary-color,
.wp-block-pullquote.is-style-solid-color blockquote.has-primary-color p {
.wp-block-pullquote.is-style-solid-color blockquote.has-primary-color > p {
color: $color__link;
}
.has-secondary-color,
.wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color,
.wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color p {
.wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color > p {
color: $color__border-link-hover;
}
.has-dark-gray-color,
.wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color,
.wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color p {
.wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color > p {
color: $color__text-main;
}
.has-light-gray-color,
.wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color,
.wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color p {
.wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color > p {
color: $color__text-light;
}

View file

@ -2,7 +2,7 @@ table {
margin: 0 0 $size__spacing-unit;
border-collapse: collapse;
width: 100%;
font-family: $font__heading;
@include font-family( $font__heading );
td,
th {

View file

@ -10,7 +10,7 @@ input[type="submit"] {
border-radius: 5px;
box-sizing: border-box;
color: $color__background-body;
font-family: $font__heading;
@include font-family( $font__heading );
font-size: $font__size-sm;
font-weight: 700;
line-height: $font__line-height-heading;

View file

@ -24,7 +24,7 @@
.wp-caption-text {
color: $color__text-light;
font-size: $font__size-xs;
font-family: $font__heading;
@include font-family( $font__heading );
line-height: $font__line-height-pre;
margin: 0;
padding: ( $size__spacing-unit * .5 );

View file

@ -32,7 +32,7 @@
.gallery-caption {
display: block;
font-size: $font__size-xs;
font-family: $font__heading;
@include font-family( $font__heading );
line-height: $font__line-height-pre;
margin: 0;
padding: ( $size__spacing-unit * .5 );

View file

@ -82,97 +82,9 @@
@mixin box-shadow( $size ) {
box-shadow:
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.
}
/* Fallback for non-latin fonts */
@mixin non-latin-fonts( $wrapper_classname: '.site' ) {
/* Arabic */
html[lang="ar"] #{$wrapper_classname} *,
html[lang="ary"] #{$wrapper_classname} *,
html[lang="azb"] #{$wrapper_classname} *,
html[lang="ckb"] #{$wrapper_classname} *,
html[lang="fa-IR"] #{$wrapper_classname} *,
html[lang="haz"] #{$wrapper_classname} *,
html[lang="ps"] #{$wrapper_classname} * {
font-family: Tahoma, Arial, sans-serif !important;
}
/* Cyrillic */
html[lang="be"] #{$wrapper_classname} *,
html[lang="bg-BG"] #{$wrapper_classname} *,
html[lang="kk"] #{$wrapper_classname} *,
html[lang="mk-MK"] #{$wrapper_classname} *,
html[lang="mn"] #{$wrapper_classname} *,
html[lang="ru-RU"] #{$wrapper_classname} *,
html[lang="sah"] #{$wrapper_classname} *,
html[lang="sr-RS"] #{$wrapper_classname} *,
html[lang="tt-RU"] #{$wrapper_classname} *,
html[lang="uk"] #{$wrapper_classname} * {
font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif !important;
}
/* Chinese (Hong Kong) */
html[lang="zh-HK"] #{$wrapper_classname} * {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang HK', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important;
}
/* Chinese (Taiwan) */
html[lang="zh-TW"] #{$wrapper_classname} * {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important;
}
/* Chinese (China) */
html[lang="zh-CN"] #{$wrapper_classname} * {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important;
}
/* Devanagari */
html[lang="bn-BD"] #{$wrapper_classname} *,
html[lang="hi-IN"] #{$wrapper_classname} *,
html[lang="mr"] #{$wrapper_classname} *,
html[lang="ne-NP"] #{$wrapper_classname} * {
font-family: Arial, sans-serif !important;
}
/* Greek */
html[lang="el"] #{$wrapper_classname} * {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
/* Gujarati */
html[lang="gu"] #{$wrapper_classname} * {
font-family: Arial, sans-serif !important;
}
/* Hebrew */
html[lang="he-IL"] #{$wrapper_classname} * {
font-family: 'Arial Hebrew', Arial, sans-serif !important;
}
/* Japanese */
html[lang="ja"] #{$wrapper_classname} * {
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif !important;
}
/* Korean */
html[lang="ko-KR"] #{$wrapper_classname} * {
font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', Dotum, sans-serif !important;
}
/* Thai */
html[lang="th"] #{$wrapper_classname} * {
font-family: 'Sukhumvit Set', 'Helvetica Neue', helvetica, arial, sans-serif !important;
}
/* Vietnamese */
html[lang="vi"] #{$wrapper_classname} * {
font-family: 'Libre Franklin', sans-serif !important;
}
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.
}
/* Calculates maximum width for post content */
@ -202,4 +114,19 @@
}
}
/* Ensure all font family declarations come with non-latin fallbacks */
@mixin font-family( $font_family: $font__body ) {
font-family: $font_family;
@extend %non-latin-fonts;
}
/* 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";

View file

@ -26,8 +26,9 @@
background: transparent;
color: inherit;
cursor: pointer;
transition: background 250ms ease-in-out,
transform 150ms ease;
transition:
background 250ms ease-in-out,
transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
@ -447,7 +448,7 @@
position: fixed;
z-index: 100000; /* Make sure appears above mobile admin bar */
width: 100vw;
height: 100vh;
height: 100vh;
max-width: 100vw;
transform: translateX(+100%);
animation: slide_in_right 0.3s forwards;

View file

@ -176,7 +176,7 @@
.nav-next {
min-width: 50%;
width: 100%;
font-family: $font__heading;
@include font-family( $font__heading );
font-weight: bold;
.secondary-text {

View file

@ -15,7 +15,12 @@
display: flex;
flex-wrap: wrap;
.widget {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
width: 100%;
word-wrap: break-word;
@include media(desktop) {
margin-right: calc(3 * #{$size__spacing-unit});
width: calc(50% - (3 * #{$size__spacing-unit}));
@ -25,6 +30,11 @@
.site-info {
color: $color__text-light;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
a {
color: inherit;

View file

@ -242,7 +242,7 @@
mix-blend-mode: multiply;
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 & {
background: $color__link;
opacity: .8;
@ -256,7 +256,7 @@
}
/* Fourth layer: overlay. */
.image-filters-enabled & .site-branding-container:after {
.image-filters-enabled & .site-branding-container:after {
background: rgba(0, 0, 0, 0.35);
mix-blend-mode: overlay;
opacity: 0.5;

View file

@ -30,7 +30,12 @@
.site-branding {
color: $color__text-light;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
position: relative;
word-wrap: break-word;
@include media(tablet) {
margin: 0 $size__site-margins;

View file

@ -50,6 +50,7 @@
.error-404.not-found,
.no-results.not-found {
.page-title,
.page-content {
margin: calc(3 * #{$size__spacing-unit}) #{$size__spacing-unit};

View file

@ -7,7 +7,12 @@
}
.comments-area {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
word-wrap: break-word;
@include postContentMaxWidth();
@include media(tablet) {
@ -127,7 +132,7 @@
.comment-body {
color: $color__text-light;
font-family: $font__heading;
@include font-family( $font__heading );
font-size: $font__size-xs;
font-weight: 500;
margin-top: $size__spacing-unit;
@ -143,7 +148,7 @@
.comment-edit-link {
color: $color__text-light;
font-family: $font__heading;
@include font-family( $font__heading );
font-weight: 500;
}
}
@ -372,7 +377,7 @@
.comment-notes,
label {
font-family: $font__heading;
@include font-family( $font__heading );
font-size: $font__size-xs;
color: $color__text-light;
}

View file

@ -30,7 +30,7 @@
li {
color: $color__text-light;
font-family: $font__heading;
@include font-family( $font__heading );
font-size: calc(#{$font__size_base} * #{$font__size-ratio});
font-weight: 700;
line-height: $font__line-height-heading;
@ -45,7 +45,7 @@
.widget_tag_cloud {
.tagcloud {
font-family: $font__heading;
@include font-family( $font__heading );
font-weight: 700;
}
}

View file

@ -15,7 +15,7 @@ blockquote {
cite {
font-size: $font__size-xs;
font-style: normal;
font-family: $font__heading;
@include font-family( $font__heading );
}
}

View file

@ -18,14 +18,13 @@
.site-title,
.site-info,
#cancel-comment-reply-link,
img:after,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $font__heading;
@include font-family( $font__heading );
}
.main-navigation,
@ -53,7 +52,7 @@ h6 {
}
.page-title {
font-family: $font__body;
@include font-family( $font__body );
}
.site-branding,
@ -146,13 +145,20 @@ h6 {
.error-404 .page-title,
.comments-title,
blockquote {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-break: break-word;
word-wrap: break-word;
}
/* Do not hyphenate entry title on tablet view and bigger. */
.entry-title {
@include media(tablet) {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
}

View file

@ -7,7 +7,7 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: $color__text-main;
font-family: $font__body;
@include font-family( $font__body );
font-weight: 400;
font-size: 1em;
line-height: $font__line-height-body;
@ -21,7 +21,7 @@ select,
optgroup,
textarea {
color: $color__text-main;
font-family: $font__body;
@include font-family( $font__body );
font-weight: 400;
line-height: $font__line-height-body;
text-rendering: optimizeLegibility;
@ -30,5 +30,3 @@ textarea {
@import "headings";
@import "copy";
@include non-latin-fonts();

View file

@ -16,6 +16,52 @@
$font__body: "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", 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__fallbacks: (
/* Arabic */
ar: 'Tahoma, Arial, sans-serif',
ary: 'Tahoma, Arial, sans-serif',
azb: 'Tahoma, Arial, sans-serif',
ckb: 'Tahoma, Arial, sans-serif',
fa-IR: 'Tahoma, Arial, sans-serif',
haz: 'Tahoma, Arial, sans-serif',
ps: 'Tahoma, Arial, sans-serif',
/* Cyrillic */
be: '"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',
mk-MK: '"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',
sah: '"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',
uk: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
/* Chinese (Hong Kong) */
zh-HK: '-apple-system, BlinkMacSystemFont, "PingFang HK", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif',
/* Chinese (Taiwan) */
zh-TW: '-apple-system, BlinkMacSystemFont, "PingFang TC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif',
/* Chinese (China) */
zh-CN: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif',
/* Devanagari */
bn-BD: 'Arial, sans-serif',
hi-IN: 'Arial, sans-serif',
mr: 'Arial, sans-serif',
ne-NP: 'Arial, sans-serif',
/* Greek */
el: '"Helvetica Neue", Helvetica, Arial, sans-serif',
/* Gujarati */
gu: 'Arial, sans-serif',
/* Hebrew */
he-IL: '"Arial Hebrew", Arial, sans-serif',
/* Japanese */
ja: '-apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif',
/* Korean */
ko-KR: '"Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif',
/* Thai */
th: '"Sukhumvit Set", "Helvetica Neue", helvetica, arial, sans-serif',
/* Vietnamese */
vi: '"Libre Franklin", sans-serif',
);
$font__code: Menlo, monaco, Consolas, Lucida Console, monospace;
$font__pre: "Courier 10 Pitch", Courier, monospace;