new content

1 files changed, 135 insertions, 303 deletions

diff --git a/style.css b/style.css
index f1d5295..9d28237 100644
--- a/style.css
+++ b/style.css
@@ -1,330 +1,162 @@
-/*
-The MIT License (MIT)
+@import url("https://fonts.googleapis.com/css2?family=Lora:wght@500&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap");
 
-Copyright (c) 2015 Thomas Frössman
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-*/
-@import url(http://fonts.googleapis.com/css?family=Inconsolata);
-@import url(http://fonts.googleapis.com/css?family=PT+Sans);
-@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-video {
-  display: inline-block;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-[hidden] {
-  display: none;
-}
-html {
-  font-family: sans-serif;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-}
 body {
-  margin: 0;
-}
-a:focus {
-  outline: thin dotted;
-}
-a:active,
-a:hover {
-  outline: 0;
-}
-h1 {
-  font-size: 2em;
-}
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-b,
-strong {
-  font-weight: bold;
-}
-dfn {
-  font-style: italic;
-}
-mark {
-  background: #ff0;
-  color: #000;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, serif;
-  font-size: 1em;
-}
-pre {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-q {
-  quotes: "\201C" "\201D" "\2018" "\2019";
+  margin: 40px auto;
+  width: 610px;
+  max-width: 100%;
+  line-height: 1.6;
+  font-size: 16px;
+  background: #fffff4;
+  color: #3a1616;
+  padding: 0 10px;
+  font-size: 18px;
+  line-height: 28px;
+  font-family: "Lora";
+  font-weight: 500;
+  /* Smooth the font a little bit, it's a
+         bit too bold on retina screens */
+  -webkit-font-smoothing: antialiased;
 }
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sup {
-  top: -0.5em;
-}
-sub {
-  bottom: -0.25em;
-}
-img {
-  border: 0;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-figure {
-  margin: 0;
-}
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-legend {
-  border: 0;
-  padding: 0;
-}
-button,
-input,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  margin: 0;
-}
-button,
+
+/* --------------------------------------------------- */
+/* Make a nice input form with rounded corners and hover
+ animations*/
+/* --------------------------------------------------- */
 input {
-  line-height: normal;
-}
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
-  cursor: pointer;
-}
-button[disabled],
-input[disabled] {
-  cursor: default;
-}
-input[type="checkbox"],
-input[type="radio"] {
+  padding: 10px 16px;
+  margin: 2px 0;
   box-sizing: border-box;
-  padding: 0;
-}
-input[type="search"] {
-  -webkit-appearance: textfield;
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box;
-  box-sizing: content-box;
-}
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-textarea {
-  overflow: auto;
-  vertical-align: top;
+  border: 2px solid #dabebe;
+  border-radius: 6px;
+  background: #fffff4;
+  color: #3a1616;
+  font-size: 16px;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  outline: none;
+}
+input:focus {
+  border: 2px solid #3a1616;
 }
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
+
+/* --------------------------------------- */
+/* The button is very similar to the input */
+/* --------------------------------------- */
+.button {
+  background-color: #fffff4;
+  border: none;
+  color: black;
+  padding: 6px 14px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  transition-duration: 0.4s;
+  cursor: pointer;
+  border: 2px solid #3a1616;
+  border-radius: 6px;
 }
-html {
-  font-family: 'PT Sans', sans-serif;
+.button:hover {
+  background-color: #3a1616;
+  color: white;
 }
-pre,
-code {
-  font-family: 'Inconsolata', monospace;
+
+/* ----------------------------------------------- */
+/* Various classes for messages of different kinds */
+/* ----------------------------------------------- */
+.isa_info,
+.isa_success,
+.isa_warning,
+.isa_error {
+  width: 90%;
+  margin: 10px 0px;
+  padding: 12px;
+}
+.isa_info {
+  color: #00529b;
+  background-color: #bde5f8;
+}
+.isa_success {
+  color: #4f8a10;
+  background-color: #dff2bf;
+}
+.isa_warning {
+  color: #9f6000;
+  background-color: #feefb3;
+}
+.isa_error {
+  color: #d8000c;
+  background-color: #ffd2d2;
 }
 h1,
 h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: 'PT Sans Narrow', sans-serif;
-  font-weight: 700;
-}
-html {
-  background-color: #e6fafc;
-  color: #4c4f69;
-  margin: 1em;
-}
-body {
-  /* background-color: #f5e0dc; */
-  margin: 0 auto;
-  max-width: 23cm;
-  /* border: 1pt solid #586e75; */
-  padding: 1em;
+h3 {
+  line-height: 1.2;
+  font-family: "Lora";
 }
-code {
-  color: #cdd6f4;
-  background-color: #073642;
-  padding: 2px;
+
+img {
+  width: 500px;
+  max-width: 100%;
+  border-radius: 10px;
+  text-align: center;
 }
+
+/* --------------------------------------------- */
+/* Bold hover animations on links and clickables */
+/* --------------------------------------------- */
 a {
-  color: #1e66f5;
-}
-a:visited {
-  color: #e64553;
+  cursor: pointer;
+  color: #217ab7;
+  line-height: inherit;
+  transition: 0.14s;
 }
 a:hover {
-  color: #e64553;
+  color: white;
+  background-color: #3297d3;
 }
-h1 {
-  color: #04a5e5;
+a:visited {
+  color: #43458b;
+  border-color: #43458b;
 }
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: #04a5e5;
+a:visited:hover {
+  color: white;
+  background-color: #9251ac;
 }
+
 pre {
-  background-color: #002b36;
-  color: #839496;
-  border: 1pt solid #586e75;
-  padding: 1em;
-  box-shadow: 5pt 5pt 8pt #073642;
-}
-pre code {
-  background-color: #002b36;
-}
-h1 {
-  font-size: 2.8em;
-}
-h2 {
-  font-size: 2.4em;
+  font-family: "Inconsolata", monospace;
 }
-h3 {
-  font-size: 1.8em;
-}
-h4 {
-  font-size: 1.4em;
-}
-h5 {
-  font-size: 1.3em;
-}
-h6 {
-  font-size: 1.15em;
-}
-.tag {
-  background-color: #073642;
-  color: #d33682;
-  padding: 0 0.2em;
-}
-.todo,
-.next,
-.done {
-  color: #002b36;
-  background-color: #dc322f;
-  padding: 0 0.2em;
-}
-.tag {
-  -webkit-border-radius: 0.35em;
-  -moz-border-radius: 0.35em;
-  border-radius: 0.35em;
-}
-.TODO {
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
-  background-color: #2aa198;
-}
-.NEXT {
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
-  background-color: #268bd2;
-}
-.ACTIVE {
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
-  background-color: #268bd2;
-}
-.DONE {
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
-  background-color: #859900;
-}
-.WAITING {
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
-  background-color: #cb4b16;
-}
-.HOLD {
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
-  background-color: #d33682;
-}
-.NOTE {
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
-  background-color: #d33682;
-}
-.CANCELLED {
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
-  background-color: #859900;
+
+::selection {
+  color: white;
+  background: #ff4081;
 }
+
 #postamble {
-  padding-top: 12px;
-  font-size: 12px;
 }
+/* #table-of-contents { */
+/*   height: 100%; /\* Full-height: remove this if you want "auto" height *\/ */
+/*   width: 160px; /\* Set the width of the sidebar *\/ */
+/*   position: fixed; /\* Fixed Sidebar (stay in place on scroll) *\/ */
+/*   z-index: 1; /\* Stay on top *\/ */
+/*   top: 0; /\* Stay at the top *\/ */
+/*   left: 0; */
+/*   overflow-x: hidden; /\* Disable horizontal scroll *\/ */
+/*   padding-top: 20px; */
+/* } */
 
+/* #table-of-contents ul a { */
+/*   padding: 6px 8px 6px 16px; */
+/*   text-decoration: none; */
+/*   font-size: 25px; */
+/*   display: block; */
+/* } */
+
+.src,
 .example {
-  color: #fdf6e3;
-}
-.src {
-  color: #fdf6e3;
+  color: #ebdbb2;
+  background-color: #282828;
 }