Switch to org-mode for generating the website

1 files changed, 236 insertions, 110 deletions

diff --git a/docs/style.css b/docs/style.css
index 74eebb9..d35af15 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -1,117 +1,243 @@
-/* Cem Keylan (C) 2019-2020 */
-
+/*
+ * Stylesheet for Carbs Linux website
+ * Copyright (c) 2019-2021 Cem Keylan
+ */
 :root {
-    --color0:      #0A1E2B;
-    --color1:      #5C5B6F;
-    --color2:      #9B506D;
-    --color3:      #C34266;
-    --color4:      #7B9BB7;
-    --color5:      #BF6790;
-    --color6:      #6a9faf;
-    --color7:      #A676D2;
-    --color8:      #8b8288;
-    --color9:      #5C5B6F;
-    --color10:     #9B506D;
-    --color11:     #C34266;
-    --color12:     #4E708D;
-    --color13:     #BF6790;
-    --color14:     #528899;
-    --color15:     #c7bac3;
-    --fg:          #0a1e2b;
-    --bg:          #ffffff;
-    --altbg:       #bf6790;
-    --link:        #bf6790;
-    --linkalt:     #4e708d;
-}
-
-
-html {
-	background-color: var(--bg);
-	font-family: monospace;
-	font-size: 16px;
-	color: var(--fg);
-	padding-bottom: 100px;
-	-webkit-text-size-adjust: 100%;
-	-ms-text-size-adjust: 100%;
-	-ms-overflow-style: scrollbar;
-	-webkit-tap-highlight-color: transparent;
-}
-.header {
-	text-align: center;
-}
-.header strong{
-	color: var(--color5)
-}
-.header a{
-	text-decoration: none;
-	text-align: center;
-	color: var(--fg);
-	margin-left: 10px;
-	margin-right: 10px;
-}
-.header a:hover{
-	text-decoration: none;
-	text-align: center;
-	color: var(--linkalt);
-	margin-left: 10px;
-	margin-right: 10px;
-}
-.border {
-	padding-top: 1%;
-	border-bottom: solid 2px;
-	color: var(--fg);
-}
-a {
-	text-decoration: none;
-	font-weight: bold;
-	color: var(--link);
-}
-a:hover {
-	text-decoration: underline;
-	font-weight: bold;
-	color: var(--linkalt);
-}
-.post-title {
-	text-align: center;
-}
-ul li::before {
-	color: var(--color4);
-}
+  --color-carbs-color-bg: #F3F6F8;
+  --color-carbs-color-fg: #0A1E2B;
+  --color-carbs-highlight: #E9ECEE;
+  --color-carbs-pink: #BF6790;
+  --color-carbs-purple: #8C45D4;
+  --color-carbs-blue: #3F74A6;
+  --color-carbs-blue-alt: #3F41A6;
+  --color-carbs-red: #D32C2C;
+  --color-carbs-grey: #738B8B;
+  --color-carbs-green: #027A59;
+  --color-carbs-orange: #B45123; }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --color-carbs-color-bg: #0A1E2B;
+      --color-carbs-color-fg: #F3F6F8;
+      --color-carbs-highlight: #0A2830;
+      --color-carbs-pink: #BF6790;
+      --color-carbs-purple: #A6A6D2;
+      --color-carbs-blue: #6790BF;
+      --color-carbs-blue-alt: #67BCBF;
+      --color-carbs-red: #C34266;
+      --color-carbs-grey: #686868;
+      --color-carbs-green: #67BF96;
+      --color-carbs-orange: #F47A00; } }
 body {
-	width: 80%;
-	max-width: 1050px;
-	margin-left: auto;
-	margin-right: auto;
-	margin-top: 20px;
-	overflow: none;
-        overflow-y: scroll;
-	padding-right: 10px;
-	padding-left: 10px;
-	color: var(--fg);
-}
+  margin: 0;
+  background-color: var(--color-carbs-color-bg);
+  font-family: "Noto Sans", "Open Sans", sans-serif;
+  font-size: 16px;
+  color: var(--color-carbs-color-fg);
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: transparent; }
+
+/* Reasonable line-height for better readability. */
+p, pre, li, dt, dd, table, code, address {
+  line-height: 1.5em; }
+
+p {
+  margin-top: 1em;
+  margin-bottom: 1em; }
+
+#content {
+  width: 95%;
+  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: left;
+  max-width: 50em; }
+
+.subtitle {
+  color: var(--color-carbs-color-fg);
+  font-weight: normal;
+  font-size: 16px;
+  font-style: italic; }
+
+code, pre.src {
+  padding: .2em .4em;
+  margin: 0;
+  font-size: 85%; }
+
 code {
-	color: var(--fg);
-	content: "> ";
-}
-p,tr,td,table { color: var(--fg); }
+  background-color: var(--color-carbs-highlight);
+  border-radius: 3px; }
+
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+  color: inherit; }
+  h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
+    text-decoration: none; }
+
 h1 {
-	color: var(--color7);
-	font-weight: bolder;
-}
+  color: var(--color-carbs-pink);
+  font-weight: 800; }
+  h1 a:hover {
+    color: #bf6a67; }
+    @media (prefers-color-scheme: dark) {
+      h1 a:hover {
+        color: #bf6a67; } }
 h2 {
-	color: var(--color4);
-	font-weight: bold;
-}
+  color: var(--color-carbs-blue);
+  font-weight: 700; }
+  h2 a:hover {
+    color: var(--color-carbs-purple); }
+
 h3 {
-	color: var(--fg);
-	font-weight: bold;
-}
-.footer {
-	text-align: center;
-}
-
-pre { margin-left: 2em; }
+  color: var(--color-carbs-color-fg);
+  font-weight: 600; }
+  h3 a:hover {
+    color: var(--color-carbs-blue); }
+
+pre {
+  font: monospace;
+  border-radius: 3px;
+  border: 1px solid var(--color-carbs-highlight);
+  background-color: var(--color-carbs-highlight);
+  padding: 0.5em;
+  margin: 1em; }
+  pre code, pre.src {
+    display: block;
+    overflow: auto; }
+  pre code {
+    background: transparent; }
+
+a {
+  text-decoration: none;
+  font-weight: bold;
+  color: var(--color-carbs-pink); }
+
+a:hover {
+  text-decoration: underline;
+  color: var(--color-carbs-blue-alt); }
+
 blockquote {
-	border-left: 1px solid var(--color6);
-	font-style: italic;
-}
+  border-left: 1px solid var(--color-carbs-highlight);
+  font-style: italic; }
+
+#preamble {
+  margin-bottom: 2em; }
+
+#navbar {
+  background: #0A1E2B none repeat scroll 0 0 !important;
+  border-bottom: 5px solid #BF6790 !important;
+  min-height: 40px;
+  padding: 10px 15px !important; }
+  #navbar label, #navbar #hamburger {
+    display: none; }
+  #navbar a.navbartitle {
+    margin: 0 !important;
+    padding: 0 !important;
+    color: #BF6790 !important;
+    float: left !important;
+    font-weight: bolder !important;
+    font-size: 200% !important; }
+    #navbar a.navbartitle:hover {
+      text-decoration: none;
+      color: #BF6790; }
+  #navbar #navbarlist li a {
+    color: #F3F6F8;
+    font-weight: bold;
+    text-decoration: none; }
+  #navbar ul {
+    display: block;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    text-align: right;
+    font-size: 0;
+    letter-spacing: 0; }
+    #navbar ul li {
+      display: inline-block;
+      font-size: 14px;
+      font-family: "Noto Sans", "Open Sans", sans-serif !important;
+      line-height: 1.4;
+      letter-spacing: 0;
+      padding-top: 14px;
+      padding-right: 15px;
+      padding-left: 15px;
+      margin: 0; }
+      #navbar ul li a:hover {
+        color: #A6A6D2 !important;
+        text-decoration: none !important; }
+
+@media screen and (max-width: 768px) {
+  #navbar label {
+    display: inline-block;
+    box-sizing: border-box;
+    color: #F3F6F8;
+    background: #BF6790;
+    border-radius: 0.2em;
+    font-style: normal;
+    text-align: center;
+    margin-right: auto;
+    margin-left: auto;
+    font-size: 1em;
+    padding: 0.5em 0;
+    font-size: 1em;
+    width: 2.2em;
+    height: 100%;
+    float: right; }
+  #navbar ul {
+    margin-left: 0;
+    margin-right: 0;
+    text-align: left; }
+  #navbar #navbarlist {
+    margin-top: 50px;
+    display: none; }
+    #navbar #navbarlist li {
+      box-sizing: border-box;
+      border-top: 1px solid var(--color-carbs-purple);
+      display: block;
+      width: 100%;
+      padding: 0.5em; }
+  #navbar input:checked ~ #navbarlist {
+    display: block; } }
+
+footer {
+  clear: both;
+  margin-top: 2em;
+  background: #0A1E2B none repeat scroll 0 0 !important;
+  border-top: 5px solid #BF6790 !important;
+  padding: 10px 15px !important;
+  bottom: 0; }
+  footer p {
+    text-align: center;
+    color: #F3F6F8; }
+
+/* Syntax highlighting for org-mode source block exports */
+.org-comment, .org-comment-delimiter {
+  color: var(--color-carbs-grey);
+  font-style: italic; }
+
+.org-builtin {
+  color: var(--color-carbs-blue); }
+
+.org-constant {
+  color: var(--color-carbs-pink); }
+
+.org-doc {
+  color: var(--color-carbs-grey); }
+
+.org-function-name {
+  color: var(--color-carbs-blue); }
+
+.org-variable-name {
+  color: var(--color-carbs-purple); }
+
+.org-keyword {
+  color: var(--color-carbs-blue-alt); }
+
+.org-string {
+  color: var(--color-carbs-green); }
+
+.org-type {
+  color: var(--color-carbs-orange); }
+
+.org-warning {
+  color: var(--color-carbs-red); }