✨ Rewrite for Kirby

assets/src/fonts.css

@@ -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');
+}

assets/src/highlight-monokai.css

@@ -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;
+}

assets/src/main.css

@@ -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;
+	  }
+    }
+}

assets/src/normalize.css

@@ -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;
+}