1
1
Fork 0
This repository has been archived on 2022-03-02. You can view files and clone it, but cannot push or open issues or pull requests.
natenom-websites/scss/import/blog.scss

329 lines
8 KiB
SCSS

// :root
:root {
--branding--title--text-transform: initial !important;
--global--color-background: #{$white} !important;
--global--color-dark-gray: #{$blog_body-bg} !important;
//--global--color-primary: var(--global--color-white) !important;
--global--font-size-page-title: 39px !important;
--global--font-size-xl: 30px !important;
--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 600px) !important;
}
// general
body {
#page {
header#masthead {
padding-top: var(--global--spacing-vertical);
padding-bottom: var(--global--spacing-vertical);
row-gap: 10px;
.site-logo {
border: 0;
width: unset;
margin: unset;
padding: 0;
margin-right: 20px;
img.custom-logo {
max-width: 32px;
}
}
.site-branding {
.site-description {
font-size: .6em;
font-style: italic;
}
}
nav#site-navigation {
.primary-menu-container {
ul#primary-menu-list {
.menu-item {
a {
text-decoration-style: solid;
text-decoration: underline;
&:hover {
text-decoration-style: dotted;
}
p.menu-item-description {
display: none;
}
}
}
}
}
}
}
aside.widget-area {
margin-top: calc(2 * var(--global--spacing-vertical));
}
footer {
.site-info {
display: none;
}
}
}
}
@media (max-width: 481px) {
body {
#page {
header#masthead {
nav#site-navigation {
top: 32px;
}
}
}
}
}
@media (min-width: 482px) {
body {
#page {
header#masthead {
.site-branding {
display: grid;
grid-gap: 20px;
grid-template-columns: auto auto;
.site-description {
margin: auto;
}
}
}
}
}
}
body:not(.is-dark-theme) {
#page {
header#masthead {
.site-logo {
filter: invert(80%);
}
}
}
}
// post preview
body {
&.home,
&.tag,
&.category,
&.search {
#page {
#content {
#primary {
#main {
article.post {
header.entry-header {
figure.post-thumbnail {
max-width: calc(.5 * var(--responsive--alignwide-width));
a.post-thumbnail-inner {
img.attachment-post-thumbnail {
margin-top: 40px;
}
}
}
h2.entry-title {
line-height: 42px;
max-width: var(--responsive--alignfull-width);
text-align: center;
width: var(--responsive--alignwide-width);
a {
font-size: 39px;
}
}
}
.entry-content {
h2 {
font-size: 30px;
line-height: 35px;
}
a.more-link {
background: var(--button--color-background);
border: var(--button--border-width) solid var(--button--color-background);
color: var(--button--color-text);
font-weight: var(--button--font-weight);
padding: 10px 40px;
text-decoration: none;
&:hover {
background: transparent;
color: var(--button--color-text-hover);
}
}
}
}
}
}
}
}
}
}
// tag / category / search header
body {
&.tag,
&.category,
&.search {
#page {
#content {
#primary {
#main {
header.page-header {
border-bottom: 3px solid $nom-blue;
h1 {
font-weight: 400;
}
}
}
}
}
}
}
}
// search
body.search {
#page {
#content {
#primary {
#main {
article.post {
.entry-content {
a.more-link {
float: left;
padding: 5.5px 40px;
margin-top: 30px;
}
}
}
}
}
}
}
}
// post
body {
&.post-template-cover,
&.single-post {
#page {
#content {
#primary {
#main {
article.post {
header.entry-header {
h1.entry-title {
font-size: 39px;
font-weight: 400;
line-height: 42px;
margin-bottom: -20px;
text-align: center;
text-decoration: none;
}
}
.entry-content {
p.has-drop-cap::first-letter {
font-size: 7.2rem;
}
figure {
figcaption {
color: var(--global--color-primary);
}
}
.wp-block-quote {
border-left: 3px solid $nom-blue;
&::before {
content: "";
}
cite {
color: var(--global--color-primary);
}
p {
font-weight: normal;
font-style: italic;
}
}
.wp-block-image {
margin-top: inherit;
margin-bottom: inherit;
}
.yarpp-related {
margin: 3em auto 0 auto !important;
ol {
color: rgb(155, 155, 170);
list-style: none;
margin: 0;
padding-left: 0;
li {
margin: 15px 0;
a {
font-weight: normal !important;
text-decoration: underline;
&:hover {
text-decoration-style: dotted;
}
}
}
}
}
}
}
}
}
}
}
}
}
// lightbox plugin
#slb_viewer_wrap {
#slb_viewer_slb_default {
.slb_viewer_layout {
.slb_container {
padding: 0 !important; // kein Rand
box-shadow: none !important; // kein »glow« bzw. Schatten
.slb_details {
.inner {
.slb_data {
background: var(--global--color-background);
.slb_data_content {
display: grid;
grid-template-areas: "title status" "desc desc";
margin: 10px;
.slb_data_title {
color: var(--global--color-primary);
font-family: var(--global--font-primary);
font-size: var(--global--font-size-xs);
font-weight: 500;
grid-area: title;
letter-spacing: 0;
margin: 0;
}
.slb_group_status {
color: var(--global--color-primary);
font-family: var(--global--font-primary);
font-size: var(--global--font-size-xss);
font-style: unset;
grid-area: status;
margin: auto 0;
text-align: center;
}
.slb_data_desc {
color: var(--global--color-primary);
font-family: var(--global--font-primary);
font-size: var(--global--font-size-xss);
grid-area: desc;
margin: 0;
}
}
}
}
}
}
}
}
}