Change fonts, add paddings around ul, remove text-shadow from buttons and articles, change buttons color

static/css/style.less

@@ -1,33 +1,56 @@
 @import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
 @import url("/fontawesome/css/all.min.css");
-@import url('https://fonts.googleapis.com/css?family=PT+Mono&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600&display=swap');
 
+@import url('https://fonts.googleapis.com/css?family=PT+Mono&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
 * {
     box-sizing: border-box;
-
 }
 
-@foreground: #dfdfdf;
-@foreground2: #b8b8b8;
-@highlightFg: #ffbb00;
-@highlightFg2: #ffe292;
-@background: #222222;
-@background2: rgb(27, 27, 27);
-@background3: rgb(20, 20, 20);
-@background4: rgb(37, 37, 37);
-@visitedLink: #6d881b;
-@twitter: #1DA1F2;
+:root{
+	--foreground: #dfdfdf;
+	--foreground2: #b8b8b8;
+	--highlightFg: #ffbb00;
+	--highlightFg2: #ffe292;
+	--background: #222222;
+	--background2: rgb(27, 27, 27);
+	--background3: rgb(20, 20, 20);
+	--background4: rgb(37, 37, 37);
+	--twitter: #1DA1F2;
+	--buttonColor: #2f2f2f;
+	--docsColor: #168530;
+	--bugsColor: #185e94;
+	--codeColor: #a01e1e;
+	--discordColor: #44013b;
+	--storeColor: #686602;
+	--donateColor: #835518;
+}
+
+@foreground: var(--foreground);
+@foreground2: var(--foreground2);
+@highlightFg: var(--highlightFg);
+@highlightFg2: var(--highlightFg2);
+@background: var(--background);
+@background2:var(--background2);
+@background3: var(--background3);
+@background4: var(--background4);
+@twitter: var(--twitter);
+@buttonColor: var(--buttonColor);
+@docsColor:var(--docsColor);
+@bugsColor: var(--bugsColor);
+@codeColor: var(--codeColor);
+@discordColor: var(--discordColor);
+@storeColor: var(--storeColor);
+@donateColor: var(--donateColor);
+
+@textShadowColor: @background3;
+@boxShadowColor:@background2;
+
 @borderRoundness: 0.3rem;
 @borderRoundnessVeryRound: 2rem;
 @borderRoundnessNotVeryRound: .1rem;
-@donateColor: #cf8524;
-@docsColor: #21ba45;
-@bugsColor: #2185d0;
-@codeColor: #db2828;
-@discordColor: #69005b;
-@storeColor: #9e9b00;
 @textShadow: 0.1rem;
+@textShadowIntense: 0.4rem;
 @portrait: ~"only screen and (max-width:1000px), only screen and (orientation:portrait)";
 @boxShadowBlur: 0.8rem;
 @boxShadowSpread: 0.3rem;
@@ -90,7 +113,8 @@ pre,
 code {
     position: relative;
     border-radius: @borderRoundness;
-    overflow: auto !important;
+	overflow: auto !important;
+	font-family: "PT Mono";
 }
 
 .hljs-ln-numbers {
@@ -119,6 +143,10 @@ code {
 
 // Normalize ul,li
 
+ul{
+	padding:0.5rem;
+
+}
 ul,
 li {
     text-decoration: none;
@@ -137,8 +165,8 @@ nav li {
 
 }
 nav ul{
-	margin-bottom:0.5rem;
-
+	
+	margin-top:0.5rem;
 }
 
 nav li:before {
@@ -146,35 +174,34 @@ nav li:before {
 }
 
 .shadowed {
-    box-shadow: 0 0 @boxShadowBlur @boxShadowSpread @background2;
+    box-shadow: 0 0 @boxShadowBlur @boxShadowSpread @boxShadowColor;
 }
 
 .textShadowed {
     text-shadow:
-        0 0 @textShadow @background3,
-        0 0 @textShadow @background3,
-        0 0 @textShadow @background3,
-        0 0 @textShadow @background3,
-        0 0 @textShadow @background3,
-        0 0 @textShadow @background3,
-        0 0 @textShadow @background3,
-        0 0 @textShadow @background3,
-        0 0 @textShadow @background3;
+        0 0 @textShadow @textShadowColor,
+        0 0 @textShadow @textShadowColor,
+        0 0 @textShadow @textShadowColor,
+        0 0 @textShadow @textShadowColor,
+        0 0 @textShadow @textShadowColor,
+        0 0 @textShadow @textShadowColor,
+        0 0 @textShadow @textShadowColor,
+        0 0 @textShadow @textShadowColor,
+        0 0 @textShadow @textShadowColor;
 }
 
 .textShadowedIntense {
     text-shadow:
-        0 0 0.4vmin @background3,
-        0 0 0.4vmin @background3,
-        0 0 0.4vmin @background3,
-        0 0 0.4vmin @background3,
-        0 0 2vmin @background3,
-        0 0 2vmin @background3,
-        0 0 0.4vmin @background3;
+        0 0 @textShadowIntense @textShadowColor,
+        0 0 @textShadowIntense @textShadowColor,
+        0 0 @textShadowIntense @textShadowColor,
+        0 0 @textShadowIntense @textShadowColor,
+        0 0 (@textShadowIntense*2) @textShadowColor,
+        0 0 (@textShadowIntense*2) @textShadowColor,
+        0 0 @textShadowIntense @textShadowColor;
 }
 
 
-
 #topmenu {
 
     background-color: @background;
@@ -217,7 +244,7 @@ nav li:before {
     all: unset;
     appearance: none;
     background-color: @background2  !important;
-    border: 0.1rem solid @background  !important;
+    border: 0.1rem solid @background3  !important;
     border-radius: @borderRoundness;
     color: @highlightFg;
     padding: 0.3rem;
@@ -226,13 +253,13 @@ nav li:before {
     text-decoration: none;
     margin: 0.3rem;
     display: inline-block;
-    transition: 0.5s background-color;
-    border-radius: @borderRoundnessNotVeryRound;
     padding: 0.6rem;
     padding-left: 1rem;
-    padding-right: 1rem;
+	padding-right: 1rem;
+	cursor: pointer;
+	text-shadow: none;
+	font-weight: bolder!important;
     .genericCl();
-
     a {
         text-decoration: none !important;
 
@@ -374,7 +401,7 @@ h3 {
 
 
 .genericCl {
-    background: @background2  !important;
+    background: @buttonColor  !important;
     color: @foreground  !important;
     font-weight: bold;
 }
@@ -471,8 +498,8 @@ body {
 
     overflow-x: hidden;
 
-    font-family: 'Quicksand', serif;
-
+    font-family: 'Ubuntu', sans-serif;	// font-family: 'JetBrains Mono', monospace;
+	// font-family: 'Padauk', sans-serif;
     background: @background  !important;
     color: @foreground  !important;
     min-height: 100%;
@@ -611,7 +638,7 @@ body {
 
     &.blur {
         filter: blur(100vh);
-        margin-top: 50vh;
+        margin-top: 40vh;
     }
 }
 
@@ -716,7 +743,7 @@ section {
 
         display: flex;
         flex-direction: column;
-
+		text-shadow: none;
         h1 {}
 
         .more {
@@ -899,11 +926,6 @@ section#contribute {
 
 
 
-/*******/
-button:hover {
-    background-color: @background  !important;
-}
-
 section#showcase {
     text-align: center;
     width: 100%;