diff options
| author | fr33domlover <fr33domlover@riseup.net> | 2019-08-06 17:36:39 +0300 |
|---|---|---|
| committer | fr33domlover <fr33domlover@riseup.net> | 2019-08-06 17:36:39 +0300 |
| commit | e39cd02053a2455e506ea57ee61cdad1e4080aa2 (patch) | |
| tree | ef0285f0e127cbf9c77079e25eca2e8bda7e593d | |
| parent | 3d46cd992e1871f77525811cc2024e2f0e96b06d (diff) | |
Add combined CSS theme, thank you ikomi!
| -rw-r--r-- | html/forgefed-vocabulary.html | 10 | ||||
| -rw-r--r-- | html/forgefed.html | 10 | ||||
| -rw-r--r-- | html/index.html | 4 | ||||
| -rw-r--r-- | html/template.html | 4 | ||||
| -rw-r--r-- | html/theme.css | 366 |
5 files changed, 380 insertions, 14 deletions
diff --git a/html/forgefed-vocabulary.html b/html/forgefed-vocabulary.html index 61eb742..c90eae4 100644 --- a/html/forgefed-vocabulary.html +++ b/html/forgefed-vocabulary.html @@ -1,10 +1,10 @@ <!doctype html> -<html class="default"> +<html class="default light"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>ForgeFed Vocabulary</title> - <link rel="stylesheet" type="text/css" href="/light.css" /> + <link rel="stylesheet" type="text/css" href="/theme.css" /> </head> <body class="body"> <header class="header"> @@ -26,9 +26,9 @@ </header> <main class="main"> <h1 class="main-title"> - ForgeFed Vocabulary - draft - 2019-07-30 master - <a href="https://notabug.org/peers/forgefed/commit/e54dd94dfb9a5dd4f58d4f3ea4313f7b9e1709f4"> - e54dd94 + ForgeFed Vocabulary - draft - 2019-08-06 master + <a href="https://notabug.org/peers/forgefed/commit/3d46cd992e1871f77525811cc2024e2f0e96b06d"> + 3d46cd9 </a> </h1> diff --git a/html/forgefed.html b/html/forgefed.html index 277013a..d8d7f41 100644 --- a/html/forgefed.html +++ b/html/forgefed.html @@ -1,10 +1,10 @@ <!doctype html> -<html class="default"> +<html class="default light"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>ForgeFed</title> - <link rel="stylesheet" type="text/css" href="/light.css" /> + <link rel="stylesheet" type="text/css" href="/theme.css" /> </head> <body class="body"> <header class="header"> @@ -26,9 +26,9 @@ </header> <main class="main"> <h1 class="main-title"> - ForgeFed - draft - 2019-07-30 master - <a href="https://notabug.org/peers/forgefed/commit/e54dd94dfb9a5dd4f58d4f3ea4313f7b9e1709f4"> - e54dd94 + ForgeFed - draft - 2019-08-06 master + <a href="https://notabug.org/peers/forgefed/commit/3d46cd992e1871f77525811cc2024e2f0e96b06d"> + 3d46cd9 </a> </h1> diff --git a/html/index.html b/html/index.html index 928ad81..06b8cbb 100644 --- a/html/index.html +++ b/html/index.html @@ -1,10 +1,10 @@ <!doctype html> -<html class="default"> +<html class="default light"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>ForgeFed</title> - <link rel="stylesheet" type="text/css" href="/light.css" /> + <link rel="stylesheet" type="text/css" href="/theme.css" /> </head> <body class="body"> <header class="header"> diff --git a/html/template.html b/html/template.html index 0aac8a2..5eb59ba 100644 --- a/html/template.html +++ b/html/template.html @@ -1,10 +1,10 @@ <!doctype html> -<html class="default"> +<html class="default $theme$"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>$title$</title> - <link rel="stylesheet" type="text/css" href="/$theme$.css" /> + <link rel="stylesheet" type="text/css" href="/theme.css" /> </head> <body class="body"> <header class="header"> diff --git a/html/theme.css b/html/theme.css new file mode 100644 index 0000000..b5c8353 --- /dev/null +++ b/html/theme.css @@ -0,0 +1,366 @@ +/* Font links ------------------------------------------------------------- */
+
+@font-face {
+ font-family:"Open Sans";
+ font-weight: 400;
+ font-style: normal;
+ src: local("Open Sans Regular"),
+ url("/fonts/open-sans/open-sans-regular.woff2") format("woff2"),
+ url("/fonts/open-sans/open-sans-regular.woff") format("woff");
+}
+@font-face {
+ font-family:"Open Sans";
+ font-weight: 400;
+ font-style: italic;
+ src: local("Open Sans Italic"),
+ url("/fonts/open-sans/open-sans-italic.woff2") format("woff2"),
+ url("/fonts/open-sans/open-sans-italic.woff") format("woff");
+}
+@font-face {
+ font-family:"Open Sans";
+ font-weight: 600;
+ font-style: normal;
+ src: local("Open Sans Bold"),
+ url("/fonts/open-sans/open-sans-bold.woff2") format("woff2"),
+ url("/fonts/open-sans/open-sans-bold.woff") format("woff");
+}
+@font-face {
+ font-family:"Open Sans";
+ font-weight: 600;
+ font-style: italic;
+ src: local("Open Sans Bold Italic"),
+ url("/fonts/open-sans/open-sans-bold-italic.woff2") format("woff2"),
+ url("/fonts/open-sans/open-sans-bold-italic.woff") format("woff");
+}
+
+@font-face {
+ font-family:"Hack";
+ font-weight: 400;
+ font-style: normal;
+ src: local("Hack Regular"),
+ url("/fonts/hack/hack-regular.woff2") format("woff2"),
+ url("/fonts/hack/hack-regular.woff") format("woff");
+}
+
+
+/* General ---------------------------------------------------------------- */
+
+/* Default light theme */
+:root, :root.light {
+ /* Font declarations */
+ --sans-font: Open Sans, Noto Sans, Helvetica, sans-serif;
+ --mono-font: Hack, Noto Mono, Courier, monospace;
+
+ /* Effect transitions */
+ --link-trans: color 0.5s, background 0.5s, ease-in-out;
+ --img-trans: opacity 0.5s ease-in-out;
+
+ /* Palette */
+ --orange: #ff851b;
+ --light-gray: #c8c8c8; /* (HS)L: 200/255 */
+ --gray: #808080; /* (HS)L: 128/255 */
+ --gray-50: #323232; /* (HS)L: 50/255 */
+ --gray-240: #f0f0f0; /* (HS)L: 240/255 */
+
+ /* Sections */
+ --bg-color: #fff;
+ --text-color: var(--gray);
+ --heading-color: var(--orange);
+ --link-color: var(--gray-50);
+ --link-hover-color: #000;
+ --link-hover-bg-color: none;
+ --link-visited-color: var(--light-gray);
+ --nav-link-color: var(--gray);
+ --main-title-link-color: var(--gray);
+ --main-title-link-hover-color: var(--gray-50);
+ --toc-bg-color: var(--gray-240);
+ --toc-link-color: var(--gray);
+ --toc-link-hover-color: var(--gray-50);
+
+ /* Syntax highlighting */
+ --code-border-color: var(--light-gray);
+ --code-bg-color: var(--gray-240);
+ --code-text-color: var(--gray);
+ --code-error-color: #c60901;
+ --code-datatype-color: var(--gray-50);
+ --code-string-color: var(--orange);
+}
+
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ background: var(--bg-color);
+ color: var(--text-color);
+ font-family: var(--sans-font);
+ font-size: 62.5%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ color: var(--heading-color);
+ word-wrap: break-word;
+}
+h1 {
+ margin: 4rem 0 2rem;
+ font-size: 2.8rem;
+}
+h2 {
+ margin: 3rem 0 1.5rem;
+ font-size: 2.4rem;
+}
+h3 {
+ margin: 3rem 0 1.5rem;
+ font-size: 2.2rem;
+}
+
+a {
+ color: var(--link-color);
+ text-decoration: none;
+}
+ a:hover {
+ background: var(--link-hover-bg-color);
+ color: var(--link-hover-color);
+ border-radius: 0.2rem;
+ transition: var(--link-trans);
+ }
+ a:visited { color: var(--link-visited-color); }
+
+code {
+ font-family: var(--mono-font);
+}
+
+
+/* Sections --------------------------------------------------------------- */
+
+.header {
+ margin: 5rem auto;
+}
+
+ .header-title {
+ text-align: center;
+ margin: 0 auto 1.6rem;
+ font-size: 3.8rem;
+ }
+ .header-title__link, .header-title__link:hover {
+ background: none;
+ color: var(--heading-color);
+ text-decoration: none;
+ }
+
+
+.nav {
+ margin: 0 auto;
+}
+ .nav__link {
+ font-size: 2rem;
+ color: var(--nav-link-color);
+ text-decoration: none;
+ }
+
+
+.main {
+ font-size: 1.6rem;
+ word-wrap: break-word;
+}
+
+ .main-title { font-size: 2.6rem; }
+
+ .main-title a { color: var(--main-title-link-color); }
+ .main-title a:hover { color: var(--main-title-link-hover-color); }
+
+ .main p { margin: 1.5rem 0; }
+
+ .main ul { list-style: none; }
+ .main ul li:before {
+ content: "•";
+ padding: 0 0.5rem 0 0;
+ }
+
+.toc {
+ margin: 2rem 0 4rem;
+ background: var(--toc-bg-color);
+ border-radius: 0.5rem;
+}
+
+ .toc-title {
+ margin: 0 0 1rem;
+ color: var(--heading-color);
+ font-size: 2rem;
+ }
+
+ .toc a { color: var(--toc-link-color); }
+ .toc a:hover { color: var(--toc-link-hover-color); }
+
+ .toc ul { list-style: none; }
+ .toc ul li:before { content: unset; }
+ .toc ul li ul li { margin: 0 0 0 1.2rem; }
+ .toc ul li ul li ul li { margin: 0 0 0 2.6rem; }
+
+
+.footer {
+ margin: 4rem auto;
+ font-size: 1.2rem;
+}
+
+ .footer p {
+ margin: 1rem 0;
+ text-align: center;
+ }
+
+ .footer a[rel="license"]:hover {
+ background: none;
+ }
+ .footer a[rel="license"] img {
+ margin: 1rem auto;
+ border: 0;
+ opacity: 0.8;
+ }
+ .footer a[rel="license"] img:hover {
+ opacity: 1.0;
+ transition: var(--img-trans);
+ }
+
+
+/* Syntax highlighting ---------------------------------------------------- */
+
+div.sourceCode {
+ padding: 0 1rem;
+ border-top: 1.2rem solid var(--code-border-color);
+ border-radius: 0.5rem;
+ background: var(--code-bg-color);
+}
+pre.sourceCode {
+ padding: 2rem 0;
+ background: var(--code-bg-color);
+ overflow: auto;
+}
+.sourceLine, .sourceLine:hover {
+ background: var(--code-bg-color);
+ color: var(--code-text-color);
+}
+.sourceLine .er { color: var(--code-error-color); }
+.sourceLine .dt { color: var(--code-datatype-color); }
+.sourceLine .st { color: var(--code-string-color); }
+
+
+/* Media queries ---------------------------------------------------------- */
+
+@media (max-width: 689px) {
+ .header, .main, .footer { padding: 0 2rem; }
+
+ /* Stack nav items */
+ .nav { width: 18rem; }
+ .nav__link { display: block; }
+
+ /* TOC spans full width */
+ .toc {
+ margin: 0 -2rem;
+ padding: 4rem 2rem;
+ }
+}
+
+
+@media (min-width: 690px) {
+ .header, .main, .footer { padding: 0 5rem; }
+
+ /* Horizontal nav */
+ .nav { text-align: center; }
+ .nav__link {
+ margin: 0 1rem;
+ display: inline;
+ }
+
+ /* TOC is 45% of min-width */
+ .toc {
+ margin: 0;
+ padding: 4rem;
+ width: 31rem;
+ }
+}
+
+
+@media (min-width: 960px) {
+ /* Center sections, set fixed width */
+ .header, .main, .footer {
+ width: 95rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+}
+
+
+/* Dark theme ------------------------------------------------------------- */
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ /* Palette */
+ --orange: #ff851b;
+ --light-gray: #c8c8c8; /* (HS)L: 200/255 */
+ --gray: #808080; /* (HS)L: 128/255 */
+ --gray-50: #323232; /* (HS)L: 50/255 */
+ --gray-35: #232323; /* (HS)L: 35/255 */
+
+ /* Sections */
+ --bg-color: var(--gray-50);
+ --text-color: #fff;
+ --heading-color: var(--orange);
+ --link-color: var(--light-gray);
+ --link-hover-color: var(--gray-50);
+ --link-hover-bg-color: var(--light-gray);
+ --link-visited-color: var(--gray);
+ --nav-link-color: var(--light-gray);
+ --main-title-link-color: var(--link-color);
+ --main-title-link-hover-color: var(--link-hover-color);
+ --toc-bg-color: var(--gray-35);
+ --toc-link-color: var(--link-color);
+ --toc-link-hover-color: var(--link-hover-color);
+
+ /* Syntax highlighting */
+ --code-border-color: #ed9c55; /* light orange */
+ --code-bg-color: var(--gray-35);
+ --code-text-color: #555; /* (HS)L: 85/255 */
+ --code-error-color: #c60901; /* red */
+ --code-datatype-color: var(--gray);
+ --code-string-color: #ed9c55;
+ }
+}
+
+
+/* Repeat inside a .dark class to continue to support theme selection links in
+ * the nav. The .dark and .light classes allow users to override the media
+ * query-detected setting via the selection links if desired. */
+:root.dark {
+ /* Palette */
+ --orange: #ff851b;
+ --light-gray: #c8c8c8; /* (HS)L: 200/255 */
+ --gray: #808080; /* (HS)L: 128/255 */
+ --gray-50: #323232; /* (HS)L: 50/255 */
+ --gray-35: #232323; /* (HS)L: 35/255 */
+
+ /* Sections */
+ --bg-color: var(--gray-50);
+ --text-color: #fff;
+ --heading-color: var(--orange);
+ --link-color: var(--light-gray);
+ --link-hover-color: var(--gray-50);
+ --link-hover-bg-color: var(--light-gray);
+ --link-visited-color: var(--gray);
+ --nav-link-color: var(--light-gray);
+ --main-title-link-color: var(--link-color);
+ --main-title-link-hover-color: var(--link-hover-color);
+ --toc-bg-color: var(--gray-35);
+ --toc-link-color: var(--link-color);
+ --toc-link-hover-color: var(--link-hover-color);
+
+ /* Syntax highlighting */
+ --code-border-color: #ed9c55; /* light orange */
+ --code-bg-color: var(--gray-35);
+ --code-text-color: #555; /* (HS)L: 85/255 */
+ --code-error-color: #c60901; /* red */
+ --code-datatype-color: var(--gray);
+ --code-string-color: #ed9c55;
+}
|