They call it redesign

1 files changed, 43 insertions, 81 deletions

diff --git a/style.css b/style.css
index 91ca31c..14836b9 100644
--- a/style.css
+++ b/style.css
@@ -1,71 +1,45 @@
-/*
-  Spacing
-*/
-
-div {
-  --spacing: .25em;
+@font-face {
+  font-family: 'Liosevka';
+  src: url('liosevka.woff2') format('woff2'), /* Super Modern Browsers */
+       url('liosevka-regular.woff') format('woff'); /* Pretty Modern Browsers */
 }
 
-
-
-/*
-  Separator
-*/
-
-/* Content */
-
-li:first-child:after {
-  /*content: '|';*/
-  /*content: '\000BB';*/ /* For » arrows */
-  content: '';
-  border-right: 2px solid;
-  transition: border-right 50ms;
-  margin-right: var(--spacing);
-}
-
-/* Hover effects */
-
-ul:hover li:first-child:after {
-  /*font-weight: bolder;*/
-  border-right: 4px solid;
+html, body {
+    margin: 0;
+    height: 100%;
 }
 
-/* Link separator */
-
-div {
+#main {
   --link-separator: '|';
+  --text-color: #908090;
+  --spacing: .25em;
+  letter-spacing: -1em;
+  text-align: left;
+  display: inline-block;
+  padding-left: 2em;
+  padding-right: 2em;
+  padding-top: 30px;
 }
 
-
-/*
-  Colors
-*/
-
-/* Background */
-
 body {
-  background-color: #141D20;
-}
-
-/* Text */
-
-div {
-  --text-color: #a070a0;
-}
-
-/* Heading */
-
-h1 {
-  color: #6EE2FF;
+  background-image: url('fullblur-edit.png');
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  font-family: 'Liosevka', monospace;
+  overflow-x: hidden;
+  text-align: center;
 }
 
 .ip-addr {
-    color: #5EC2A3;
+  background-color: #efbfdf;
+  color: black;
+  padding: 10px 20px;
+  display: inline;
 }
 
-/* Categories */
-
 
+/* Categories */
 
 ul.wikicol {
   color: #9ed670;
@@ -88,25 +62,19 @@ ul.calccol {
 }
 
 
-
-/*
-  Amount of chars in longest category name + 1
-*/
-
-li {
-  width: 8ch;
+li:first-child:after {
+  /*content: '|';*/
+  /*content: '\000BB';*/ /* For » arrows */
+  content: '';
+  border-right: 3px solid;
+  padding-bottom: 7px;
+  transition: border-right 500ms;
+  margin-right: var(--spacing);
 }
 
-
-/*
-  Actual code
-*/
-
-body {
-  font-family: 'Inconsolata', monospace;
-  margin: 0;
-  overflow-x: hidden;
-  text-align: center;
+ul:hover li:first-child:after {
+  /*font-weight: bolder;*/
+  border-right: 6px solid;
 }
 
 h1 {
@@ -129,9 +97,9 @@ li, a {
   color: var(--text-color);
   display: inline-block;
   position: relative;
-  font-size: 1.5em;
+  font-size: 1.2em;
   letter-spacing: normal;
-  transition: color 200ms;
+  transition: color 300ms;
 }
 
 .hdr {
@@ -158,6 +126,7 @@ li, h1 {
 
 li {
   margin-right: var(--spacing);
+  width: 8ch;
 }
 
 a + a:before {
@@ -167,11 +136,4 @@ a + a:before {
   color: var(--text-color);
 }
 
-div {
-  letter-spacing: -1em;
-  text-align: left;
-  display: inline-block;
-  padding-left: 2em;
-  padding-right: 2em;
-  padding-top: 30px;
-}
+