/** * Fonts - system fonts. * --------------------------------------------------------------------------- */ body, button, input, label { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } em, article p, article li, article blockquote, article table, article dl { font-family: Georgia, serif; } em { font-weight: 500; } code, pre { font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace; } /** * Defaults * --------------------------------------------------------------------------- */ /* === Design Commons === */ :root { --bg-color: #ffffff; --text-color: #333333; --button-color: #333333; --accent-color: #265CBF; --meta-color: #727478; --tag-color: #6d6c6c; --line-color: #dfdfdf; --block-color: #f5f5f5; } /* === Box Model === */ *, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* === HTML === */ html { overflow-x: hidden; } body { overflow-x: hidden; font-weight: 400; font-style: normal; color: var(--text-color); font-size: 1.25rem; line-height: 1.8; background: var(--bg-color); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga" on; margin: 0; } /* === Links === */ a { color: var(--accent-color); text-decoration: none; transition: 250ms all cubic-bezier(0.3, -0.55, 0.1, 1.1); } a:hover { color: initial !important; } h1 a, h2 a, h3 a { color: inherit; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: var(--accent-color); } /* === Headers === */ h1, h2, h3, h4, h5, h6 { font-weight: 600; margin: 8px 0 16px; } h1 { font-weight: 700; font-size: 280%; letter-spacing: 0; line-height: 1.15; } h2 { font-weight: 700; font-size: 250%; letter-spacing: -0.01em; line-height: 1.25; } h3 { font-size: 160%; letter-spacing: -0.01em; line-height: 1.25; } h4 { font-size: 140%; letter-spacing: -0.01em; line-height: 1.45; } h5 { font-size: 125%; letter-spacing: 0; line-height: 1.45; } h6 { font-size: 110%; letter-spacing: 0; line-height: 1.45; } p+h2, ul+h2, ol+h2, h6+h2, table+h2, dl+h2 { padding-top: 32px; } /* === Blockquotes, quotes, and cites === */ blockquote { padding: 8px 36px 36px 48px; font-style: italic; font-size: 120%; line-height: 1.6; } blockquote blockquote {} blockquote cite { font-size: 16px; } /* === Code and Preformatted text === */ code, pre { background: transparent; border: 1px solid var(--line-color); color: var(--text-color); font-size: 14px; font-weight: 400; line-height: inherit; margin: 0 0 2em; padding: 4px 8px; white-space: pre-wrap; } pre { padding: 2em; } pre code {} /* === Paragraphs === */ p { font-size: 1em; padding: 0; margin: 0 0 40px; } /* === Address === */ address { padding: 0 0 2em; } /* === Separators === */ hr { margin: 0 auto 2em; border: 0; height: 50px; position: relative; } hr::before { content: "..."; display: inline-block; white-space: nowrap; font-size: 22px; font-weight: 400; left: 0; letter-spacing: 0.95em; line-height: 1; margin-right: auto; margin-left: 21px; position: absolute; right: 0; text-align: center; top: calc(50% - 18px); color: inherit; } /* === Lists === */ ul { margin: 0; padding: 0 0 2em 20px; } ul li { margin-bottom: 0; } ol { padding: 0 0 2em 24px; } ol li { margin-bottom: 0; } ol ol, ul ul, ol ul, ul ol { padding-bottom: 0; list-style-type: none; } dl {} dt {} dd {} /* === Tables === */ table { margin: 0 0 2em; line-height: 1.4; border: 1px solid var(--line-color); width: 100%; border-radius: 4px; } caption { padding: 8px; font-size: 16px; } thead {} tfoot {} tbody {} th {} td, th { padding: 8px 1em; border: 0; } /* wp-calendar */ #wp-calendar { background: #fff; text-align: center; } #today { background: var(--accent-color); border-radius: 4px; color: #fff; } /* === Embeds === */ object {} embed {} iframe { margin: 20px 0; min-width: 100%; } video {} .mejs-container { margin: 2em 0; } /* === Forms === */ form {} fieldset {} fieldset legend {} label { color: var(--meta-color); font-weight: 500; font-size: 0.875em; } input, select, textarea { height: 40px; font-size: 0.95em; background-color: #fff; border: 2px solid var(--line-color); border-radius: 4px; color: var(--text-color); display: inline-block; margin: 0; line-height: 1.7; outline: 0; padding: .33em 1em; position: relative; vertical-align: top; width: 100%; } /* Not all types, but these are more common for themes. */ input[type="button"] {} input[type="checkbox"] {} input[type="email"] {} input[type="password"] {} input[type="radio"] {} input[type="reset"] {} input[type="search"] {} input[type="submit"] {} input[type="text"] {} input[type="url"] {} textarea { overflow: auto; padding-top: 0.75em; height: 200px; } select { } select optgroup {} select option {} button, input[type=submit], .button { font-size: 0.825em; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--button-color); border: 0; color: #fff; cursor: pointer; display: inline-block; border-radius: 4px; font-weight: 500; padding: 0 1.3em; line-height: 40px; position: relative; text-decoration: none; width: auto; } .search-form, .post-password-form p { display: flex; align-items: flex-end; } .search-form > label, .post-password-form label { flex: 1; margin-right: 8px; } /* === Alignement (WP classes) === */ .alignleft { float: left; margin: 0 40px 1em 0; } .alignright { float: right; margin: 0 0 1em 40px; } .aligncenter { text-align: center; margin-left: auto; margin-right: auto; list-style: none; } .alignnone { margin-left: -80px; margin-right: -80px; width: calc(100% + 160px); height: auto; max-width: 860px; } /** * Images * --------------------------------------------------------------------------- */ img { max-width: 100%; height: auto; } a img {} figure { margin: 0 0 2em; display: block; max-width: 100%; } /* === WP editor image sizes === */ img.size-thumbnail {} img.size-medium {} img.size-large {} img.size-full {} img.emoji { width: 20px; margin: 0 4px 4px 0; } /* === Thumbnails === */ .thumbnail { margin: 1em -80px 2em; width: calc(100% + 160px); height: auto; max-width: 860px; } /* === Captions === */ .wp-caption {} .wp-caption img {} .wp-caption-text { color: var(--meta-color); font-size: 0.875em; font-weight: 500; text-align: center; line-height: 1.45; } .wp-caption-text a {} .wp-caption-text a:hover {} /* === Gallery === */ .gallery { display: flex; flex-wrap: wrap; margin: 2em -8px; } .gallery-columns-1 .gallery-item { width: 100%; } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-3 .gallery-item { width: 33.33%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery-columns-5 .gallery-item { width: 20%; } .gallery-columns-6 .gallery-item { width: 16.66%; } .gallery-columns-7 .gallery-item { width: 14.28%; } .gallery-columns-8 .gallery-item { width: 12.5%; } .gallery-columns-9 .gallery-item { width: 11.11%; } .gallery .gallery-item {} .gallery-icon { padding: 8px; } .gallery .gallery-icon img { object-fit: cover; width: 100%; height: 100%; } .gallery .gallery-caption { padding: 0 8px; } /* === Avatars === */ .avatar { border-radius: 100px; float: left; width: 44px; height: 44px; margin: 5px 16px 0 0; } a .avatar {} a:hover .avatar {} /** * Blocks * --------------------------------------------------------------------------- */ .editor-post-title__block { font-size: 1.25rem; line-height: 1.8; } .wp-block { max-width: calc(700px + 14px* 2); } .wp-block[data-align=wide], .wp-block[data-align=full] { max-width: none; } .wp-block-separator, .wp-block-table td, .wp-block-table th { border: 0; } .wp-block-quote, .wp-block-pullquote { border: 0 !important; } .wp-block-pullquote__citation, .wp-block-pullquote cite, .wp-block-pullquote footer { font-size: 16px; text-transform: none; font-style: italic; } .wp-block-gallery, .wp-block-image { margin-bottom: 2em; padding-top: 8px; padding-bottom: 0; } .wp-block-image.is-resized.alignleft { margin-right: 40px; } .wp-block-image.is-resized.alignright { margin-left: 40px; }