EcoWP/css/content.css

/*--------------------------------------------------------------
# Stylesheet displaying content (blocks & basic tags)
# For editor & front
--------------------------------------------------------------*/

/* Global styles
--------------------------------------------- */
/**
Global vars
 */

:root {
    /* Set sans-serif & mono fonts */
    --sans-font: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
    --mono-font: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    --serif-font: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

    /* Default (dark) theme */
    --bg: #2e3440;
    --accent-bg: #434c5e;
    --text: #eceff4;
    --text-light: #d8dee9;
    --accent: #88c0d0;
    --code: #d8dee9;
    --preformatted: #d8dee9;
    --marked: #8fbcbb;
    --disabled: #4c566a;
}

/* Light theme */
@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --bg: #eceff4;
        --accent-bg: #e5e9f0;
        --text: #2e3440;
        --text-light: #4c566a;
        --code: #4c566a;
        --preformatted: #4c566a;
        --disabled: #d8dee9;
    }
}

/**
Layout
 */
.wp-site-blocks > .alignleft {
    float: left;
    margin-right: 2em;
}
.wp-site-blocks > .alignright {
    float: right;
    margin-left: 2em;
}
.wp-site-blocks > .aligncenter {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

main#primary,
.editor-styles-wrapper {
    padding: 0 1em;
}

main#primary > * {
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

main#primary > *.alignwide {
    max-width: 880px;
}

main#primary > *.alignfull {
    width: calc(100% + 20px);
    margin: 0 -10px;
    max-width: unset;
}

.has-text-align-center {
    text-align: center;
}

.page-header {
    max-width: 600px;
    width: calc(100% - 10px);
    margin: 0 auto;
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
}

/**
Typography
 */

body {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    font-family: var(--serif-font);
    line-height: 1.33;
    background-color: var(--bg);
}

body .entry-content {
    font-size: 20px;
    font-weight: 100;
}

a {
    color: var(--accent);
    text-decoration: underline;
}

.entry-title > a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--sans-font);
    font-variant: small-caps;
    color: var(--text);
    font-weight: normal;
}

h1 {
    font-size: 3rem;
}
h2 {
    font-size: 2.2rem;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}
h3 {
    font-size: 1.2rem;
    margin-top: 1.15em;
    margin-bottom: 1em;
}
h4 {
    color: var(--text-light);
    font-size: 1.04rem;
    margin-top: 1.1em;
    margin-bottom: 1em;
}
h5 {
    color: var(--text-light);
    font-size: 1.04rem;
    margin-top: 1em;
}
h6 {
    color: var(--accent);
    font-size: 1rem;
    margin-top: 1em;
}
p {
    margin-top: 0;
    margin-bottom: 1em;
}
ol,
ul {
    margin-bottom: 1em;
}

.wp-block-image figcaption {
    text-align: center;
    font-size: .9em;
    color: var(--text-light);
}

.has-small-font-size {
    font-size: 0.8rem !important;
}
.has-normal-font-size {
    font-size: 1rem !important;
}
.has-big-font-size {
    font-size: 1.2rem !important;
}
.has-huge-font-size {
    font-size: 2rem !important;
}
.has-text-font-family {
    font-family: var(--sans-font) !important;
}
.has-title-font-family {
    font-family: var(--serif-font) !important;
}
/**
Colors
 */
.has-red-color {
    color: var(--ise-red) !important;
}
.has-blue-color {
    color: var(--ise-blue) !important;
}
.has-dark-grey-color {
    color: var(--ise-dark-grey) !important;
}
.has-grey-color {
    color: var(--ise-grey) !important;
}
.has-light-grey-color {
    color: var(--ise-light-grey) !important;
}
.has-red-background-color {
    background-color: var(--ise-red) !important;
}
.has-blue-background-color {
    background-color: var(--ise-blue) !important;
}
.has-dark-grey-background-color {
    background-color: var(--ise-dark-grey) !important;
}
.has-grey-background-color {
    background-color: var(--ise-grey) !important;
}
.has-light-grey-background-color {
    background-color: var(--ise-light-grey) !important;
}
.has-red-border-color {
    border-color: var(--ise-red) !important;
}
.has-blue-border-color {
    border-color: var(--ise-blue) !important;
}
.has-dark-grey-border-color {
    border-color: var(--ise-dark-grey) !important;
}
.has-grey-border-color {
    border-color: var(--ise-grey) !important;
}
.has-light-grey-border-color {
    border-color: var(--ise-light-grey) !important;
}