Make the website minimalistic

6 files changed, 31 insertions, 836 deletions

diff --git a/css/header.css b/css/header.css
deleted file mode 100644
index 4830f72..0000000
--- a/css/header.css
+++ /dev/null
@@ -1,21 +0,0 @@
-div.page_header {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  
-  background-color: var(--theme-color);
-  border-radius: 15px 15px 0 0;
-}
-
-.floating_element {
-  color: var(--bg-color);
-  position: relative;
-  background-color: var(--theme-color);
-  border-radius: 0px 0px 20px 20px;
-  text-align: center;
-
-  img {
-    max-width: 13%;
-    display: block;
-  }
-}
diff --git a/css/isso.css b/css/isso.css
deleted file mode 100644
index d8b3f00..0000000
--- a/css/isso.css
+++ /dev/null
@@ -1,324 +0,0 @@
-/* ========================================================================== */
-/* Generic styling                                                            */
-/* ========================================================================== */
-#isso-thread * {
-    /* Reset */
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-/* ========================================================================== */
-/* Thread heading area                                                        */
-/* ========================================================================== */
-#isso-thread {
-    padding: 4px 8px 4px 8px;
-    margin: 0;
-    text-align: left;
-    color: var(--text-color);
-}
-h4.isso-thread-heading {
-    padding-bottom: 8px;
-    color: var(--gray-color);
-    font-weight: bold;
-}
-.isso-feedlink {
-    padding-bottom: 8px;
-    float: right;
-    padding-left: 1em;
-}
-.isso-feedlink a {
-    font-size: 0.8em;
-    vertical-align: bottom;
-}
-
-/* ========================================================================== */
-/* Comments                                                                   */
-/* ========================================================================== */
-
-.isso-comment {
-    max-width: 68em;
-    margin: 0 auto;
-}
-.isso-preview .isso-comment {
-    padding-top: 0;
-    margin: 0;
-}
-.isso-comment:not(:first-of-type),
-.isso-follow-up .isso-comment {
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    margin-bottom: 0.5em;
-}
-.isso-avatar {
-    display: block;
-    float: left;
-    margin: 0.95em 0.95em 0;
-}
-.isso-avatar svg {
-    max-width: 48px;
-    max-height: 48px;
-    width: 100%;
-    height: 100%;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: 3px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-.isso-text-wrapper {
-    display: block;
-    padding: 0.95em;
-}
-.isso-follow-up {
-    padding-left: calc(7% + 20px);
-}
-.isso-comment-footer {
-    font-size: 0.95em;
-}
-.isso-comment-header {
-    font-size: 0.85em;
-}
-.isso-comment-header a {
-    text-decoration: none;
-}
-/* Only for comment header, spacer between up-/downvote should have no padding */
-.isso-comment-header .isso-spacer {
-    padding: 0 6px;
-}
-.isso-spacer,
-.isso-permalink,
-.isso-note,
-.isso-parent {
-    color: gray;
-    font-weight: normal;
-    text-shadow: none;
-}
-.isso-spacer:hover,
-.isso-permalink:hover,
-.isso-note:hover,
-.isso-parent:hover {
-    color: #606060;
-}
-.isso-note {
-    float: right;
-}
-.isso-author {
-    font-weight: bold;
-    color: var(--gray-color);
-}
-.isso-page-author-suffix {
-    font-weight: bold;
-    color: #2c2c2c;
-}
-.isso-textarea,
-.isso-preview {
-    margin-top: 0.2em;
-    width: 100%;
-    border: 1px solid #f0f0f0;
-    border-radius: 2px;
-    box-shadow: 0 0 2px #888;
-}
-.isso-text p {
-    margin-top: 0.2em;
-}
-.isso-text p:last-child {
-    margin-bottom: 0.2em;
-}
-.isso-text h1,
-.isso-text h2,
-.isso-text h3,
-.isso-text h4,
-.isso-text h5,
-.isso-text h6 {
-    font-size: 130%;
-    font-weight: bold;
-}
-.isso-comment-footer {
-    font-size: 0.80em;
-    color: gray;
-    clear: left;
-}
-.isso-feedlink,
-.isso-comment-footer a {
-    font-weight: bold;
-    text-decoration: none;
-}
-.isso-feedlink:hover,
-.isso-comment-footer a:hover {
-    color: #111111;
-    text-shadow: #aaaaaa 0 0 1px;
-}
-.isso-comment-footer > a {
-    position: relative;
-    top: .2em;
-}
-.isso-comment-footer > a + a {
-    padding-left: 1em;
-}
-.isso-comment-footer .isso-votes {
-    color: gray;
-}
-.isso-upvote svg,
-.isso-downvote svg {
-    position: relative;
-    top: .2em;
-}
-/* Reply postbox under existing comment */
-.isso-comment .isso-postbox {
-    margin-top: 0.8em;
-}
-.isso-comment.isso-no-votes > * > .isso-comment-footer .isso-votes {
-    display: none;
-}
-
-/* ========================================================================== */
-/* Postbox                                                                    */
-/* ========================================================================== */
-.isso-postbox {
-    max-width: 68em;
-    margin: 0 auto;
-    clear: right;
-}
-.isso-form-wrapper {
-    display: block;
-    padding: 0;
-    background: var(--bg-color);
-    color: var(--text-color);
-}
-.isso-textarea,
-.isso-preview {
-    margin: 0 0 .3em;
-    padding: .4em .8em;
-    border-radius: 3px;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-.isso-textarea {
-    outline: 0;
-    width: 100%;
-    resize: none;
-    background: var(--bg-color);
-    color: var(--text-color);
-}
-.isso-form-wrapper input[type=checkbox] {
-    vertical-align: middle;
-    position: relative;
-    accent-color: var(--theme-color);
-    background: var(--bg-color);
-    margin-left: 0;
-    margin-right: 4px;
-}
-.isso-notification-section {
-    font-size: 0.90em;
-    padding-top: .3em;
-    display: none;
-    padding-bottom: 10px;
-}
-.isso-auth-section {
-    display: block;
-}
-.isso-textarea:focus,
-.isso-auth-section input:focus {
-    border-color: rgba(0, 0, 0, 0.8);
-}
-.isso-input-wrapper {
-    display: inline-block;
-    position: relative;
-    max-width: 25%;
-    margin: 0;
-}
-.isso-input-wrapper input {
-    padding: .3em 10px;
-    max-width: 100%;
-    border-radius: 3px;
-    line-height: 1.4em;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    background: var(--bg-color);
-    color: var(--text-color);
-}
-.isso-input-wrapper label {
-    display: inline-block;
-    line-height: 1.4em;
-    height: 1.4em;
-}
-.isso-post-action {
-    display: block;
-    float: right;
-    margin: 1.4em 0 0 5px;
-}
-.isso-post-action > input {
-    padding: calc(.3em - 1px);
-    border-radius: 2px;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    cursor: pointer;
-    outline: 0;
-    line-height: 1.4em;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    background: var(--bg-color);
-    color: var(--text-color);
-}
-.isso-post-action > input:hover {
-    background-color: var(--gray-color);
-}
-.isso-post-action > input:active {
-    background-color: var(--theme-color);
-}
-
-/* ========================================================================== */
-/* Postbox (preview mode)                                                     */
-/* ========================================================================== */
-.isso-preview,
-.isso-post-action input[name="edit"],
-.isso-postbox.isso-preview-mode > .isso-form-wrapper input[name="preview"],
-.isso-postbox.isso-preview-mode > .isso-form-wrapper .isso-textarea {
-    display: none;
-}
-.isso-postbox.isso-preview-mode > .isso-form-wrapper .isso-preview {
-    display: block;
-}
-.isso-postbox.isso-preview-mode > .isso-form-wrapper input[name="edit"] {
-    display: inline;
-}
-.isso-preview {
-    /*background-color: #f8f8f8;
-    background: repeating-linear-gradient(
-        -45deg,
-        #f8f8f8,
-        #f8f8f8 10px,
-        #fff 10px,
-        #fff 20px
-    );*/
-}
-
-/* ========================================================================== */
-/* Animations                                                                 */
-/* ========================================================================== */
-
-/* "target" means the comment that's being linked to, for example:
- * https://example.com/blog/example/#isso-15
- */
-.isso-target {
-    animation: isso-target-fade 5s ease-out;
-}
-@keyframes isso-target-fade {
-    0% { background-color: #eee5a1; }
-    /* This color should be changed when used on a dark background,
-     * maybe #3f3c1c for example
-     */
-}
-
-/* ========================================================================== */
-/* Media queries                                                              */
-/* ========================================================================== */
-@media screen and (max-width:600px) {
-    .isso-input-wrapper {
-        display: block;
-        max-width: 100%;
-        margin: 0 0 .3em;
-    }
-    .isso-input-wrapper input {
-        width: 100%;
-    }
-    .isso-post-action {
-        margin-top: 0;
-    }
-}
diff --git a/css/main.css b/css/main.css
index d6c0d76..97cf762 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,254 +1,8 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  hyphens: auto;
-  /*word-break: break-all;*/
+:root {
+  font-family: monospace;
 }
 
-html {
-  min-height: 100%;
-  min-width: 100%;
-
-  display: flex;
-  flex-direction: column;
-}
-
-body {
-  min-height: 100%;
-  width: 100%;
-
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-
-  font-family: Verdana, sans-serif;
-  font-size: 11pt;
-
-  text-align: center;
-}
-
-div#page, div#divbodyholder, div#cgit {
-  background-color: var(--bg-color);
-
-  padding: 3px 0px 3px 0px;
-
-  min-height: 100%;
-  width: 100%;
-
-  flex-grow: 1;
-
-  /*background-image: url(/icons/collage.png);
-  background-size: contain;
-  background-attachment: fixed;
-  background-repeat: repeat;*/
-}
-
-div.inner_page {
-  position: relative;
-
-  width: 65%;
-    
-  align-items: center;
-  justify-content: center;
-
-  margin: 0px auto 0px auto;
-
-  border-width: 0px;
-  border-color: var(--theme-color);
-  border-style: solid;
-  border-radius: 15px;
-
-  box-shadow: 0px 0px 33px 14px #000000;
-}
-
-div.page_header {
-  padding-top: 2em;
-  padding-bottom: 2em;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  
-  background-color: var(--theme-color);
-  border-radius: 15px 15px 0 0;
-}
-
-
-div.page_header img {
-  margin: 3px 0px 0px 40px;
-
-  border: 0px 0px 0px;
-}
-
-div.table_of_contents {
-  clear: center;
-
-  min-width: 200px;
-
-  margin: 3px 3px 3px 3px;
-  padding: 10px;
-
-  background-color: var(--bg-color);
-
-  text-align: center;
-}
-
-div.table_of_contents_item {
-  clear: center;
-  text-align: center;
-
+/*iframe {
   width: 100%;
-  margin: 4px 0px 0px 0px;
-
-  background-color: var(--bg-color);
-  color: var(--text-color);
-}
-
-div.table_of_contents_item a {
-    margin: 6px 0px 0px 6px;
-}
-
-div.content_section, div.content {
-  margin: 3px 3px 3px 3px;
-  background-color: var(--bg-color);
-  text-align: left;
-}
-
-div.content_section_text, div.content {
-  padding: 4px 8px 4px 8px;
-  color: var(--text-color);
-}
-
-a.ablack {
-  color: var(--bg-color);
-  text-decoration: none;
-}
-
-div.subtitle {
-  margin-bottom: 2ex;
-  text-align: center;
-}
-
-div#footer {
-  padding-top: 5px;
-  color: var(--text-color);
-}
-
-div.content_section_text pre {
-  margin: 8px 0px 8px 0px;
-  padding: 8px 8px 8px 8px;
-
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--text-color);
-
-  background-color: var(--bg-color);
-
-  font-style: italic;
-}
-
-div.content_section_text p,
-div.content p {
-  margin-bottom: 6px;
-  text-align: left;
-}
-
-div.content_section_text p:first-letter,
-div.content:first-letter {
-	font-size: 15pt;
-}
-
-ul, ol {
-  padding: 4px 8px 4px 16px;
-  margin-left: 1%;
-
-  text-align: left;
-}
-
-div.section_header,
-summary.section_header {
-  padding: 3px 6px 3px 6px;
-  border-radius: 15px;
-
-  background-color: var(--theme-color);
-
-  color: var(--bg-color);
-  font-weight: bold;
-  font-size: 112%;
-  text-align: center;
-}
-
-div.section_header_last {
-  border-radius: 0px 0px 15px 15px;
-}
-
-.floating_element {
-  color: var(--bg-color);
-  position: relative;
-  background-color: var(--theme-color);
-  border-radius: 0px 0px 20px 20px;
-
-  img {
-    max-width: 13%;
-    display: block;
-  }
-}
-
-table.services_table {
-  border-collapse: collapse;
-
-  padding: 5px 20px 15px 20px;
-  margin: 10px auto 10px auto;
-}
-
-tr.services_table_item {
-  border-top: 1px solid var(--text-color);
-  border-bottom: 1px solid var(--text-color);
-}
-
-td:nth-of-type(5) {
-  word-break: break-all;
-}
-
-/*img.floating_element {
-  justify-content: center;
-  position: relative;
-  float: left;
-  max-width: 13%;
+  aspect-ratio: unset;
 }*/
-
-a {
-  color: var(--text-color);
-  word-break: break-all;
-}
-
-a:hover {
-  text-decoration: underline;
-  font-weight: bold;
-  color: var(--text-color);
-}
-
-div.section_header_last a:visited, 
-div.section_header_last a:link, 
-div.section_header_last a:active {
-  font-weight: initial;
-}
-
-div.section_header_last a:hover {
-  text-decoration: underline;
-  font-weight: bold;
-  color: var(--text-color);
-}
-
-.word-break {
-  word-break: all;
-}
-
-div.validator {
-}
-
-/*
- * There was a CSS snippet to reset custom browser behaviour
- * https://stackoverflow.com/a/19184796
- * 
- */
diff --git a/css/responsivity.css b/css/responsivity.css
index 58fc1f3..75d4ec7 100644
--- a/css/responsivity.css
+++ b/css/responsivity.css
@@ -1,8 +1,4 @@
-@media (max-width: 1024px) and (min-width: 401px) and (orientation: portrait){
-	div.inner_page {
-		width: 95%;
-	}
-
+@media (max-width: 1199px) and (min-width: 401px) {
 	body {
 		font-size: 32pt;
 	}
@@ -46,148 +42,44 @@
 		padding-right: 10px;
 		white-space: nowrap;
 	}
-}
 
-/* iframe */
-@media (width: 400px) and (height: 250px) {
-	div.inner_page {
-		width: 95%;
+	iframe {
+		width: 100%;
+		aspect-ratio: 1/1!important;
 	}
+}
 
+@media only screen and (orientation: landscape)
+and (min-width: 992px)
+and (max-width: 1199px) {
 	body {
-		font-size: 11pt;
-	}
-
-	div.content_section_text p::first-letter,div.content::first-letter {
-		font-size: 15pt;
-	}
-
-	/*
-	 * Force table to not be like tables anymore
-	 */
-	table, thead, tbody, th, td, tr {
-		display: block;
-	}
-
-	/*
-	 * Hide table headers (but not display: none;, for accessibility)
-	 */
-	thead tr {
-		position: absolute;
-		top: -9999%;
-		left: -9999%;
-	}
-
-	td {
-		/* Behave  like a "row" */
-		border: none;
-		position: relative;
-		padding-left: 50%;
-	}
-
-	td::before {
-		/* Now like a table header */
-		position: absolute;
-		/* Top/left values mimic padding */
-		left: 6px;
-		width: 45%;
-		padding-right: 10px;
-		white-space: nowrap;
+		font-size: 14pt;
 	}
 }
-
-@media (max-width: 400px) and (orientation: portrait){
-	div.inner_page {
-		width: 100%;
-		margin: 0;
-	}
-
+@media only screen and (orientation: landscape)
+and (min-width: 768px)
+and (max-width: 991px) {
 	body {
-		font-size: 24pt;
+		font-size: 14pt;
 	}
 }
 @media only screen and (orientation: landscape)
-	  and (min-width: 992px)
-	  and (max-width: 1199px) {
-	    body { font-size: 14pt; }
-        }
-	@media only screen and (orientation: landscape)
-	  and (min-width: 768px)
-	  and (max-width: 991px) {
-            body { font-size: 14pt; }
-        }
-	@media only screen and (orientation: landscape)
-	  and (min-width: 480px)
-	  and (max-width: 767px) {
-            body { font-size: 11pt; }
-        }
-	@media only screen and (orientation: landscape)
-	  and (max-width: 479px) {
-            body { font-size: 8pt; }
-        }
-	@media only screen and (orientation: landscape)
-	  and (min-device-width : 375px)
-	  and (max-device-width : 667px) {
-            body { font-size: 9.5pt; }
-        }
-
-/* https://css-tricks.com/responsive-data-tables/ */
-/*
-Max width before this PARTICULAR table gets nasty
-This query will take effect for any screen smaller than 760px
-and also iPads specifically.
-*/
-/*@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px)  {*/
-@media (max-width: 1024px) and (min-width: 401px) {
-	div.inner_page {
-		width: 95%;
-	}
-
+and (min-width: 480px)
+and (max-width: 767px) {
 	body {
-		font-size: 32pt;
-	}
-
-	div.content_section_text p::first-letter,div.content::first-letter {
-		font-size: 37pt;
-	}
-
-	/*
-	 * Force table to not be like tables anymore
-	 */
-	table, thead, tbody, th, td, tr {
-		display: block;
-	}
-
-	/*
-	 * Hide table headers (but not display: none;, for accessibility)
-	 */
-	thead tr {
-		position: absolute;
-		top: -9999%;
-		left: -9999%;
-	}
-
-	tbody tr {
-		border-top: 5px solid var(--gray-color);
-		border-bottom: 5px solid var(--gray-color);
+		font-size: 11pt;
 	}
-
-	td {
-		/* Behave  like a "row" */
-		border: none;
-		position: relative;
-		padding-left: 50%;
+}
+@media only screen and (orientation: landscape)
+and (max-width: 479px) {
+	body {
+		font-size: 8pt;
 	}
-
-	td::before {
-		/* Now like a table header */
-		position: absolute;
-		/* Top/left values mimic padding */
-		left: 6px;
-		width: 45%;
-		padding-right: 10px;
-		white-space: nowrap;
+}
+@media only screen and (orientation: landscape)
+and (min-device-width : 375px)
+and (max-device-width : 667px) {
+	body {
+		font-size: 9.5pt;
 	}
 }
diff --git a/css/theme.css b/css/theme.css
deleted file mode 100644
index 2d15bc5..0000000
--- a/css/theme.css
+++ /dev/null
@@ -1,85 +0,0 @@
-/* Thanks to https://alexandersandberg.com/articles/creating-a-website-theme-switcher-with-css-only */
-:root {
-  /* Light mode */
-  --light-text: #222430;
-  --light-bg: #f5f6f7;
-  --light-theme: #1f9aff;
-  --light-gray: #707070;
-
-  /* Dark mode */
-  --dark-text: #f7f7f7;
-  --dark-bg: #222430;
-  --dark-theme: #bd93f9;
-  --dark-gray: #838383;
-
-  /* Default mode */
-  --text-color: var(--dark-text);
-  --bg-color: var(--dark-bg);
-  --theme-color: var(--dark-theme);
-  --gray-color: var(--dark-gray);
-}
-
-#theme-switch:checked ~ #page {
-  --text-color: var(--light-text);
-  --bg-color: var(--light-bg);
-  --theme-color: var(--light-theme);
-  --gray-color: var(--light-gray);
-}
-
-#theme-switch:checked ~ #divbodyholder {
-  --text-color: var(--light-text);
-  --bg-color: var(--light-bg);
-  --theme-color: var(--light-theme);
-  --gray-color: var(--light-gray);
-}
-
-:root {
-  /* Light mode */
-  --light-switch-text: "тёмный|dark";
-
-  /* Dark mode */
-  --dark-switch-text: "светлый|light";
-
-  /* Default mode */
-  --switch-text: var(--dark-switch-text);
-}
-
-#theme-switch:checked ~ #page {
-  --switch-text: var(--light-switch-text);
-}
-
-#theme-switch:checked ~ #divbodyholder {
-  --switch-text: var(--light-switch-text);
-}
-
-#switch-label::after {
-  content: var(--switch-text);
-}
-
-#theme-switch {
-  position: absolute !important;
-  height: 0px;
-  width: 0px;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --switch-text: var(--dark-switch-text);
-    --text-color: var(--dark-text);
-    --bg-color: var(--dark-bg);
-    --theme-color: var(--dark-theme);
-    --gray-color: var(--dark-gray);
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    --switch-text: var(--light-switch-text);
-    --text-color: var(--light-text);
-    --bg-color: var(--light-bg);
-    --theme-color: var(--light-theme);
-    --gray-color: var(--light-gray);
-  }
-}
diff --git a/css/third-party.css b/css/third-party.css
deleted file mode 100644
index 1c44e61..0000000
--- a/css/third-party.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.spoiler, .spoiler a {
-  color: black;
-  background-color: black;
-}
-
-.spoiler:hover, .spoiler:hover a {
-  color: gray;
-}
-
-/* https://flaviocopes.com/css-system-fonts */
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-  "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
-  "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-/* https://stackoverflow.com/a/40032327 */
-pre {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}