Mayland: Update with the latest Varia
This commit is contained in:
Takashi Irie
parent
e62e04f39a
commit
ea362e875b
5 changed files with 1383 additions and 955 deletions
|
|
@ -189,6 +189,10 @@ $config-button: (
|
|||
*/
|
||||
$config-cover: (
|
||||
"height": calc( 15 * #{map-deep-get($config-global, "spacing", "vertical")} ),
|
||||
"color": (
|
||||
"foreground": #{map-deep-get($config-global, "color", "white")},
|
||||
"background": #{map-deep-get($config-global, "color", "black")},
|
||||
)
|
||||
);
|
||||
|
||||
/**
|
||||
|
|
@ -294,7 +298,7 @@ $config-header: (
|
|||
// Fonts
|
||||
"font": (
|
||||
"family": map-deep-get($config-global, "font", "family", "primary"),
|
||||
"size": map-deep-get($config-global, "font", "size", "xl"),
|
||||
"size": map-deep-get($config-global, "font", "size", "lg"),
|
||||
"weight": 700,
|
||||
"line-height": 1,
|
||||
),
|
||||
|
|
|
|||
|
|
@ -25,80 +25,122 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
.site-branding,
|
||||
.main-navigation,
|
||||
.entry-header,
|
||||
.entry-footer,
|
||||
.page-title,
|
||||
.author-title,
|
||||
.comments-title,
|
||||
.comment-reply-title,
|
||||
.logged-in-as,
|
||||
.comment-notes {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment-reply-title {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.comment .comment-reply-title {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.main-navigation > div {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.main-navigation > div > ul,
|
||||
.social-navigation > div > ul,
|
||||
.pagination .nav-links {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Header
|
||||
*/
|
||||
#masthead {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-top: $spacing_vertical;
|
||||
padding-bottom: $spacing_vertical;
|
||||
|
||||
@extend %responsive-width-wide;
|
||||
.site-header {
|
||||
max-width: 100%;
|
||||
padding-left: $spacing_unit;
|
||||
padding-right: $spacing_unit;
|
||||
position: relative;
|
||||
|
||||
@include media(mobile) {
|
||||
padding-top: #{2 * $spacing_vertical};
|
||||
padding-bottom: #{1.5 * $spacing_vertical};
|
||||
padding: #{1.5 * $spacing_unit} $spacing_vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
letter-spacing: map-deep-get($config-global, "font", "letter-spacing", "xl");
|
||||
}
|
||||
|
||||
.site-logo + .site-title {
|
||||
margin-top: #{ 0.25 * $spacing_vertical};
|
||||
}
|
||||
|
||||
.site-title + .site-description {
|
||||
margin-top: #{ 0.5 * $spacing_unit};
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigation
|
||||
* CSS-grid Desktop Menu
|
||||
*/
|
||||
.site-header > * {
|
||||
&.main-navigation {
|
||||
@include media(mobile) {
|
||||
@include media(mobile) {
|
||||
.site-header {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto;
|
||||
grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
|
||||
grid-template-areas:
|
||||
"site-branding main-navigation";
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.social-navigation {
|
||||
@include media(mobile) {
|
||||
margin-top: 0;
|
||||
.site-branding {
|
||||
grid-area: site-branding;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
& + .site-title {
|
||||
margin-top: #{map-deep-get($config-global, "spacing", "unit")};
|
||||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
& + .site-description {
|
||||
margin-top: #{0.5 * $baseline-unit};
|
||||
}
|
||||
}
|
||||
|
||||
.main-navigation {
|
||||
align-self: center;
|
||||
grid-area: main-navigation;
|
||||
justify-self: flex-end;
|
||||
|
||||
& > div > ul {
|
||||
justify-content: flex-end;
|
||||
margin-left: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
|
||||
margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
|
||||
|
||||
& > li > a {
|
||||
padding: 0 #{map-deep-get($config-header, "main-nav", "link-padding")};
|
||||
}
|
||||
|
||||
& > .menu-item-has-children > a::after {
|
||||
font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
|
||||
}
|
||||
}
|
||||
|
||||
& > div > ul > li:hover,
|
||||
& > div > ul > li.focus,
|
||||
& > div > ul > li.current-menu-item {
|
||||
|
||||
& > a {
|
||||
color: #{map-deep-get($config-global, "color", "primary", "default")};
|
||||
}
|
||||
|
||||
& > ul {
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
border-bottom: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid #{map-deep-get($config-global, "color", "primary", "default")};
|
||||
border-left: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid transparent;
|
||||
border-right: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid transparent;
|
||||
content: "";
|
||||
display: block;
|
||||
margin-left: #{map-deep-get($config-global, "spacing", "unit")};
|
||||
width: #{map-deep-get($config-global, "spacing", "unit")};
|
||||
}
|
||||
}
|
||||
|
||||
& li {
|
||||
|
||||
& > a {
|
||||
background: #{map-deep-get($config-global, "color", "primary", "default")};
|
||||
color: #{map-deep-get($config-global, "color", "background", "default")};
|
||||
}
|
||||
|
||||
&:hover > a,
|
||||
&.focus > a,
|
||||
&.current-menu-item > a {
|
||||
background: #{map-deep-get($config-global, "color", "primary", "hover")};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-navigation {
|
||||
align-self: center;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -106,14 +148,16 @@ a {
|
|||
/**
|
||||
* Main
|
||||
*/
|
||||
#main {
|
||||
.site-main {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.site-main > article > .entry-header {
|
||||
.site-main > article > .entry-header,
|
||||
.site-main > .page-header,
|
||||
.site-main > .not-found > .page-header {
|
||||
margin-top: #{0.666 * $spacing_vertical};
|
||||
@include media(mobile) {
|
||||
margin-top: $spacing_vertical;
|
||||
margin-top: #{2 * $spacing_vertical};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -176,31 +220,92 @@ a {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.comment-respond {
|
||||
.form-submit {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Blocks
|
||||
*/
|
||||
|
||||
// Posts List
|
||||
.a8c-posts-list {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.a8c-posts-list-item__excerpt {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/**
|
||||
* Widget
|
||||
* Widgets
|
||||
*/
|
||||
.widget {
|
||||
select {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
font-size: #{map-deep-get($config-heading, "font", "size", "h3")};
|
||||
margin-bottom: #{0.5 * $spacing_vertical};
|
||||
}
|
||||
|
||||
.widget_archive,
|
||||
.widget_categories,
|
||||
.widget_meta,
|
||||
.widget_nav_menu,
|
||||
.widget_pages,
|
||||
.widget_recent_comments,
|
||||
.widget_recent_entries,
|
||||
.widget_rss {
|
||||
|
||||
ul {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
color: map-deep-get($config-global, "color", "foreground", "light");
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
ul {
|
||||
counter-reset: submenu;
|
||||
}
|
||||
|
||||
ul > li > a::before {
|
||||
font-weight: normal;
|
||||
content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
|
||||
counter-increment: submenu
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget_tag_cloud {
|
||||
.tagcloud {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.widget_search {
|
||||
.search-field {
|
||||
width: 100%;
|
||||
|
||||
@include media(mobile) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.search-submit {
|
||||
display: block;
|
||||
margin-top: $typescale-base;
|
||||
}
|
||||
}
|
||||
|
||||
.widget_calendar .calendar_wrap {
|
||||
text-align: center;
|
||||
|
||||
table td,
|
||||
table th {
|
||||
border: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.widget_links li,
|
||||
.widget_jp_blogs_i_follow li,
|
||||
.widget_rss_links li {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,17 +107,9 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
|
|||
* Responsive breakpoints
|
||||
* - breakpoints values are defined in _config-global.scss
|
||||
*/
|
||||
/**
|
||||
* Align widths
|
||||
* - Sets negative margin for .alignwide and .alignfull blocks
|
||||
*/
|
||||
/**
|
||||
* Align wide widths
|
||||
* - Sets negative margin for .alignwide and .alignfull blocks
|
||||
*/
|
||||
/**
|
||||
* Align container widths
|
||||
* - Sets a fixed-width on content within alignwide and alignfull blocks
|
||||
* - Sets .alignwide widths
|
||||
*/
|
||||
/**
|
||||
* Crop Text Boundry
|
||||
|
|
@ -335,7 +327,8 @@ object {
|
|||
|
||||
.wp-block-cover,
|
||||
.wp-block-cover-image {
|
||||
background-color: #242424;
|
||||
background-color: black;
|
||||
color: white;
|
||||
min-height: calc( 15 * 32px);
|
||||
/* Treating H2 separately to account for legacy /core styles */
|
||||
}
|
||||
|
|
@ -343,18 +336,22 @@ object {
|
|||
.wp-block-cover .wp-block-cover__inner-container,
|
||||
.wp-block-cover .wp-block-cover-image-text,
|
||||
.wp-block-cover .wp-block-cover-text,
|
||||
.wp-block-cover .block-editor-block-list__block,
|
||||
.wp-block-cover-image .wp-block-cover__inner-container,
|
||||
.wp-block-cover-image .wp-block-cover-image-text,
|
||||
.wp-block-cover-image .wp-block-cover-text {
|
||||
color: #FAF8F5;
|
||||
.wp-block-cover-image .wp-block-cover-text,
|
||||
.wp-block-cover-image .block-editor-block-list__block {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.wp-block-cover .wp-block-cover__inner-container a,
|
||||
.wp-block-cover .wp-block-cover-image-text a,
|
||||
.wp-block-cover .wp-block-cover-text a,
|
||||
.wp-block-cover .block-editor-block-list__block a,
|
||||
.wp-block-cover-image .wp-block-cover__inner-container a,
|
||||
.wp-block-cover-image .wp-block-cover-image-text a,
|
||||
.wp-block-cover-image .wp-block-cover-text a {
|
||||
.wp-block-cover-image .wp-block-cover-text a,
|
||||
.wp-block-cover-image .block-editor-block-list__block a {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
|
|
@ -438,6 +435,45 @@ object {
|
|||
padding-left: 0;
|
||||
}
|
||||
|
||||
.wp-block-latest-posts > li > a {
|
||||
font-family: Poppins, sans-serif;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.125;
|
||||
}
|
||||
|
||||
.wp-block-latest-posts:not(.is-grid) > li {
|
||||
/* Vertical margins logic */
|
||||
margin-top: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.wp-block-latest-posts:not(.is-grid) > li:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wp-block-latest-posts:not(.is-grid) > li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.wp-block-latest-posts .wp-block-latest-posts__post-date {
|
||||
color: #6e6e6e;
|
||||
font-size: 0.83333rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
[class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
|
||||
.has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
|
||||
.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
|
||||
font-size: 0.83333rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-block-media-text .block-editor-inner-blocks {
|
||||
padding-right: 16px;
|
||||
padding-left: 16px;
|
||||
|
|
@ -646,14 +682,20 @@ table th,
|
|||
color: #FAF8F5 !important;
|
||||
}
|
||||
|
||||
.has-background:not(.has-background-background-color) a,
|
||||
.has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6,
|
||||
.has-background .wp-block-quote__citation {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.has-primary-background-color[class] {
|
||||
background-color: #8D6708 !important;
|
||||
color: #FAF8F5;
|
||||
}
|
||||
|
||||
.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6,
|
||||
.has-primary-background-color[class] .wp-block-quote__citation {
|
||||
color: currentColor;
|
||||
.has-primary-background-color[class] {
|
||||
background-color: #8D6708 !important;
|
||||
color: #FAF8F5;
|
||||
}
|
||||
|
||||
.has-secondary-background-color[class] {
|
||||
|
|
@ -661,71 +703,36 @@ table th,
|
|||
color: #FAF8F5;
|
||||
}
|
||||
|
||||
.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6,
|
||||
.has-secondary-background-color[class] .wp-block-quote__citation {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.has-foreground-background-color[class] {
|
||||
background-color: #242424 !important;
|
||||
color: #FAF8F5;
|
||||
}
|
||||
|
||||
.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6,
|
||||
.has-foreground-background-color[class] .wp-block-quote__citation {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.has-foreground-light-background-color[class] {
|
||||
background-color: #6e6e6e !important;
|
||||
color: #FAF8F5;
|
||||
}
|
||||
|
||||
.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6,
|
||||
.has-foreground-light-background-color[class] .wp-block-quote__citation {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.has-foreground-dark-background-color[class] {
|
||||
background-color: #111111 !important;
|
||||
color: #FAF8F5;
|
||||
}
|
||||
|
||||
.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6,
|
||||
.has-foreground-dark-background-color[class] .wp-block-quote__citation {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.has-background-light-background-color[class] {
|
||||
background-color: #DDDDDD !important;
|
||||
color: #242424;
|
||||
}
|
||||
|
||||
.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6,
|
||||
.has-background-light-background-color[class] .wp-block-quote__citation {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.has-background-dark-background-color[class] {
|
||||
background-color: #CCC5B9 !important;
|
||||
color: #242424;
|
||||
}
|
||||
|
||||
.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6,
|
||||
.has-background-dark-background-color[class] .wp-block-quote__citation {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.has-background-background-color[class] {
|
||||
background-color: #FAF8F5 !important;
|
||||
color: #242424;
|
||||
}
|
||||
|
||||
.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6,
|
||||
.has-background-background-color[class] .wp-block-quote__citation {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.is-small-text,
|
||||
.has-small-font-size {
|
||||
font-size: 0.83333em;
|
||||
|
|
@ -776,15 +783,18 @@ table th,
|
|||
}
|
||||
|
||||
.margin-right-none {
|
||||
margin-top: 0 !important;
|
||||
/*rtl:ignore*/
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.margin-right-half {
|
||||
margin-top: 16px !important;
|
||||
/*rtl:ignore*/
|
||||
margin-right: 16px !important;
|
||||
}
|
||||
|
||||
.margin-right-default {
|
||||
margin-top: 32px !important;
|
||||
/*rtl:ignore*/
|
||||
margin-right: 32px !important;
|
||||
}
|
||||
|
||||
.margin-bottom-none {
|
||||
|
|
@ -800,15 +810,18 @@ table th,
|
|||
}
|
||||
|
||||
.margin-left-none {
|
||||
margin-top: 0 !important;
|
||||
/*rtl:ignore*/
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.margin-left-half {
|
||||
margin-top: 16px !important;
|
||||
/*rtl:ignore*/
|
||||
margin-left: 16px !important;
|
||||
}
|
||||
|
||||
.margin-left-default {
|
||||
margin-top: 32px !important;
|
||||
/*rtl:ignore*/
|
||||
margin-left: 32px !important;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -827,15 +840,18 @@ table th,
|
|||
}
|
||||
|
||||
.padding-right-none {
|
||||
padding-top: 0 !important;
|
||||
/*rtl:ignore*/
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.padding-right-half {
|
||||
padding-top: 16px !important;
|
||||
/*rtl:ignore*/
|
||||
padding-right: 16px !important;
|
||||
}
|
||||
|
||||
.padding-right-default {
|
||||
padding-top: 32px !important;
|
||||
/*rtl:ignore*/
|
||||
padding-right: 32px !important;
|
||||
}
|
||||
|
||||
.padding-bottom-none {
|
||||
|
|
@ -851,15 +867,18 @@ table th,
|
|||
}
|
||||
|
||||
.padding-left-none {
|
||||
padding-top: 0 !important;
|
||||
/*rtl:ignore*/
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.padding-left-half {
|
||||
padding-top: 16px !important;
|
||||
/*rtl:ignore*/
|
||||
padding-left: 16px !important;
|
||||
}
|
||||
|
||||
.padding-left-default {
|
||||
padding-top: 32px !important;
|
||||
/*rtl:ignore*/
|
||||
padding-left: 32px !important;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue