✨ Rewrite for Kirby
This commit is contained in:
parent
07201d05de
commit
f854d60108
GPG key ID:
CADE6F0C09F21B09
116 changed files with 4156 additions and 8875 deletions
80
assets/src/fonts.css
Normal file
80
assets/src/fonts.css
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
/**************
|
||||
* Raleway
|
||||
**************/
|
||||
|
||||
/* raleway-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Raleway'),
|
||||
local('Raleway-Regular'),
|
||||
url('../fonts/raleway-v14-latin-regular.woff2') format('woff2');
|
||||
}
|
||||
/* raleway-italic - latin */
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Raleway Italic'),
|
||||
local('Raleway-Italic'),
|
||||
url('../fonts/raleway-v14-latin-italic.woff2') format('woff2');
|
||||
}
|
||||
/* raleway-700 - latin */
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Raleway Bold'),
|
||||
local('Raleway-Bold'),
|
||||
url('../fonts/raleway-v14-latin-700.woff2') format('woff2');
|
||||
}
|
||||
/* raleway-700italic - latin */
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: local('Raleway Bold Italic'),
|
||||
local('Raleway-BoldItalic'),
|
||||
url('../fonts/raleway-v14-latin-700italic.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/**************
|
||||
* JetBrains Mono
|
||||
**************/
|
||||
|
||||
/* JetBrains Mono Regular */
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('JetBrains Mono'),
|
||||
url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* JetBrains Mono Regular Italic */
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('JetBrains Mono Italic'),
|
||||
url('../fonts/JetBrainsMono-RegularItalic.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* JetBrains Mono Bold */
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('JetBrains Mono Bold'),
|
||||
url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* JetBrains Mono Bold Italic italic */
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: local('JetBrains Mono Bold Italic'),
|
||||
url('../fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
|
||||
}
|
||||
177
assets/src/highlight-monokai.css
Normal file
177
assets/src/highlight-monokai.css
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
/*!
|
||||
Theme: Monokai
|
||||
Author: Wimer Hazenberg (http://www.monokai.nl)
|
||||
License: ~ MIT (or more permissive) [via base16-schemes-source]
|
||||
Maintainer: @highlightjs/core-team
|
||||
Version: 2021.09.0
|
||||
*/
|
||||
|
||||
/*
|
||||
WARNING: DO NOT EDIT THIS FILE DIRECTLY.
|
||||
|
||||
This theme file was auto-generated from the Base16 scheme monokai
|
||||
by the Highlight.js Base16 template builder.
|
||||
|
||||
- https://github.com/highlightjs/base16-highlightjs
|
||||
*/
|
||||
|
||||
/*
|
||||
base00 #272822 Default Background
|
||||
base01 #383830 Lighter Background (Used for status bars, line number and folding marks)
|
||||
base02 #49483e Selection Background
|
||||
base03 #75715e Comments, Invisibles, Line Highlighting
|
||||
base04 #a59f85 Dark Foreground (Used for status bars)
|
||||
base05 #f8f8f2 Default Foreground, Caret, Delimiters, Operators
|
||||
base06 #f5f4f1 Light Foreground (Not often used)
|
||||
base07 #f9f8f5 Light Background (Not often used)
|
||||
base08 #f92672 Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
|
||||
base09 #fd971f Integers, Boolean, Constants, XML Attributes, Markup Link Url
|
||||
base0A #f4bf75 Classes, Markup Bold, Search Text Background
|
||||
base0B #a6e22e Strings, Inherited Class, Markup Code, Diff Inserted
|
||||
base0C #a1efe4 Support, Regular Expressions, Escape Characters, Markup Quotes
|
||||
base0D #66d9ef Functions, Methods, Attribute IDs, Headings
|
||||
base0E #ae81ff Keywords, Storage, Selector, Markup Italic, Diff Changed
|
||||
base0F #cc6633 Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?>
|
||||
*/
|
||||
|
||||
pre code.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
color: #f8f8f2;
|
||||
background: #272822;
|
||||
}
|
||||
|
||||
.hljs::selection,
|
||||
.hljs ::selection {
|
||||
background-color: #49483e;
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
|
||||
/* purposely do not highlight these things */
|
||||
.hljs-formula,
|
||||
.hljs-params,
|
||||
.hljs-property
|
||||
{}
|
||||
|
||||
/* base03 - #75715e - Comments, Invisibles, Line Highlighting */
|
||||
.hljs-comment {
|
||||
color: #75715e;
|
||||
}
|
||||
|
||||
/* base04 - #a59f85 - Dark Foreground (Used for status bars) */
|
||||
.hljs-tag {
|
||||
color: #a59f85;
|
||||
}
|
||||
|
||||
/* base05 - #f8f8f2 - Default Foreground, Caret, Delimiters, Operators */
|
||||
.hljs-subst,
|
||||
.hljs-punctuation,
|
||||
.hljs-operator {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.hljs-operator {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
|
||||
.hljs-bullet,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-selector-tag,
|
||||
.hljs-name,
|
||||
.hljs-deletion {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
/* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
|
||||
.hljs-symbol,
|
||||
.hljs-number,
|
||||
.hljs-link,
|
||||
.hljs-attr,
|
||||
.hljs-variable.constant_,
|
||||
.hljs-literal {
|
||||
color: #fd971f;
|
||||
}
|
||||
|
||||
/* base0A - Classes, Markup Bold, Search Text Background */
|
||||
.hljs-title,
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-title.class_
|
||||
{
|
||||
color: #f4bf75;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight:bold;
|
||||
color: #f4bf75;
|
||||
}
|
||||
|
||||
/* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
|
||||
.hljs-code,
|
||||
.hljs-addition,
|
||||
.hljs-title.class_.inherited__,
|
||||
.hljs-string {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
/* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
|
||||
.hljs-built_in,
|
||||
.hljs-doctag, /* guessing */
|
||||
.hljs-quote,
|
||||
.hljs-keyword.hljs-atrule,
|
||||
.hljs-regexp {
|
||||
color: #a1efe4;
|
||||
}
|
||||
|
||||
/* base0D - Functions, Methods, Attribute IDs, Headings */
|
||||
.hljs-function .hljs-title,
|
||||
.hljs-attribute,
|
||||
.ruby .hljs-property,
|
||||
.hljs-title.function_,
|
||||
.hljs-section {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
/* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
|
||||
.hljs-type,
|
||||
/* .hljs-selector-id, */
|
||||
/* .hljs-selector-class, */
|
||||
/* .hljs-selector-attr, */
|
||||
/* .hljs-selector-pseudo, */
|
||||
.hljs-template-tag,
|
||||
.diff .hljs-meta,
|
||||
.hljs-keyword {
|
||||
color: #ae81ff;
|
||||
}
|
||||
.hljs-emphasis {
|
||||
color: #ae81ff;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
|
||||
.hljs-meta,
|
||||
/*
|
||||
prevent top level .keyword and .string scopes
|
||||
from leaking into meta by accident
|
||||
*/
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-meta .hljs-string
|
||||
{
|
||||
color: #cc6633;
|
||||
}
|
||||
|
||||
.hljs-meta .hljs-keyword,
|
||||
/* for v10 compatible themes */
|
||||
.hljs-meta-keyword {
|
||||
font-weight: bold;
|
||||
}
|
||||
433
assets/src/main.css
Normal file
433
assets/src/main.css
Normal file
|
|
@ -0,0 +1,433 @@
|
|||
@import "normalize.css";
|
||||
@import "fonts.css";
|
||||
@import "highlight-monokai.css";
|
||||
|
||||
/* nextDESIGN v9
|
||||
*
|
||||
* nextDESIGN is a personal web design for mmk2410.org.
|
||||
* The current version (v9) is focused in simplicity and minimalism.
|
||||
*
|
||||
* 2020-2022 © Marcel Kapfer <opensource@mmk2410.org>
|
||||
* Licensed under the MIT License
|
||||
*/
|
||||
|
||||
/***************
|
||||
* Variables
|
||||
***************/
|
||||
|
||||
:root {
|
||||
--c-bg: #fafafa;
|
||||
--c-bg-inv: #333;
|
||||
--c-bg-main: #fff;
|
||||
--c-bg-main-inv: #222;
|
||||
--c-primary: #4d3c9b;
|
||||
--c-bg-category: #4d3c9b;
|
||||
--c-primary-inv: #ad9bff;
|
||||
--c-bg-category-inv: #755bf0;
|
||||
--c-bg-tag: #8171c8;
|
||||
--c-bg-tag-inv: #a49ccc;
|
||||
--c-font: #333;
|
||||
--c-font-inv: #fafafa;
|
||||
--c-btn-font: var(--c-font);
|
||||
--c-btn-bg: var(--c-bg-category);
|
||||
--c-btn-shadow: #aaa;
|
||||
--c-btn-shadow-inv: #000;
|
||||
|
||||
--s-content: 800px;
|
||||
--s-nav-title: 36px;
|
||||
--s-border: 2px;
|
||||
--s-border-radius: 2px;
|
||||
--s-comment-margin-top: 60px;
|
||||
--s-font-size: 18px;
|
||||
|
||||
--p-box-shadow: 1px 1px 5px #888;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: var(--s-font-size);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--c-bg);
|
||||
color: var(--c-font);
|
||||
font-family: "Raleway", sans-serif;
|
||||
line-height: 1.5;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--c-bg-inv);
|
||||
color: var(--c-font-inv);
|
||||
}
|
||||
}
|
||||
|
||||
body > header {
|
||||
align-items: center;
|
||||
color: var(--c-font);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px 40px;
|
||||
|
||||
#title {
|
||||
color: var(--c-font);
|
||||
font-size: var(--s-nav-title);
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--c-primary);
|
||||
text-decoration-thickness: 5px;
|
||||
}
|
||||
|
||||
& a {
|
||||
color: var(--c-primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
& nav {
|
||||
display: inline;
|
||||
|
||||
& a {
|
||||
text-transform: capitalize;
|
||||
padding: 5px 6px;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
&:after {
|
||||
width: 100%;
|
||||
background: var(--c-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
margin: auto;
|
||||
height: 2px;
|
||||
width: 0;
|
||||
background: 0 0;
|
||||
transition: width .25s ease, background-color .25s ease;
|
||||
}
|
||||
}
|
||||
|
||||
& ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
float: right;
|
||||
|
||||
& li {
|
||||
display: inline;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-menu {
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
color: var(--c-primary);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--c-primary-inv);
|
||||
}
|
||||
}
|
||||
|
||||
& input[type=checkbox] {
|
||||
display: none
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
border-radius: initial;
|
||||
flex-direction: column;
|
||||
background: var(--c-bg-main);
|
||||
padding-bottom: 0;
|
||||
|
||||
& nav {
|
||||
display: none;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
& ul {
|
||||
float: unset;
|
||||
|
||||
& li {
|
||||
display: block;
|
||||
padding: 0;
|
||||
|
||||
& a {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& input[type=checkbox]:checked ~ nav {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: var(--c-bg-inv);
|
||||
|
||||
& a {
|
||||
color: var(--c-primary-inv);
|
||||
}
|
||||
|
||||
#title {
|
||||
color: var(--c-font-inv);
|
||||
text-decoration-color: var(--c-primary-inv);
|
||||
}
|
||||
|
||||
& nav {
|
||||
& a {
|
||||
&:hover {
|
||||
&:after {
|
||||
background: var(--c-primary-inv);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: var(--c-bg-main);
|
||||
border: solid var(--s-border) var(--c-primary);
|
||||
border-radius: 25px;
|
||||
box-shadow: var(--p-box-shadow);
|
||||
margin: 50px auto 100px;
|
||||
max-width: var(--s-content);
|
||||
padding: 20px 60px 80px;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--c-bg-main-inv);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
& article {
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
& h1, & h2 {
|
||||
font-size: 3rem;
|
||||
margin: 20px 0 0;
|
||||
padding: 0;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--c-primary);
|
||||
text-decoration-thickness: 4px;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
text-decoration-color: var(--c-primary-inv);
|
||||
}
|
||||
}
|
||||
|
||||
& h2 {
|
||||
font-size: 2rem;
|
||||
margin: 40px 0 0;
|
||||
text-decoration-thickness: 3px;
|
||||
|
||||
& a {
|
||||
color: var(--c-font);
|
||||
text-decoration-color: var(--c-primary);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--c-font-inv);
|
||||
text-decoration-color: var(--c-primary-inv);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
& h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
& .gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
& figure {
|
||||
margin: 0;
|
||||
|
||||
& img {
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
& a {
|
||||
color: var(--c-primary);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--c-primary-inv);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
& code {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 1px solid var(--c-primary);
|
||||
padding: 8px 12px;
|
||||
border-radius: 20px;
|
||||
line-height: 3;
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s;
|
||||
margin-right: 5px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--c-btn-shadow) 1px 2px 6px;
|
||||
text-decoration: none;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
box-shadow: var(--c-btn-shadow-inv) 1px 2px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-color: var(--c-primary-inv);
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
pre.hljs {
|
||||
border-radius: 20px;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
display: inline;
|
||||
padding-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
margin-top: var(--s-comment-margin-top);
|
||||
text-align: center;
|
||||
|
||||
& a {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
& p {
|
||||
font-size: 0.95rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#tags > a, #categories > a {
|
||||
font-size: 0.9rem;
|
||||
color: #fff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 20px;
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--c-btn-shadow) 1px 1px 4px;
|
||||
text-decoration: none;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
box-shadow: var(--c-btn-shadow-inv) 1px 1px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tags > a {
|
||||
color: var(--c-bg-tag);
|
||||
border: 1px solid var(--c-bg-tag);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--c-bg-tag-inv);
|
||||
border-color: var(--c-bg-tag-inv);
|
||||
}
|
||||
}
|
||||
|
||||
#categories > a {
|
||||
color: var(--c-primary);
|
||||
border: 1px solid var(--c-primary);
|
||||
margin-right: 3px;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--c-primary-inv);
|
||||
border: 1px solid var(--c-primary-inv);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px 80px;
|
||||
|
||||
.tagories {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#tags a, #categories a {
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--c-font);
|
||||
color: var(--c-font-inv);
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
|
||||
& a {
|
||||
color: var(--c-font-inv);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
349
assets/src/normalize.css
vendored
Normal file
349
assets/src/normalize.css
vendored
Normal file
|
|
@ -0,0 +1,349 @@
|
|||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
:is(a) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue