make topmenu left buttons 100% width in portrait and format

static/css/style.less

@@ -3,58 +3,59 @@
 
 @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;
 }
 
-: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;
+: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;
-    --buttonColorFg:var(--foreground);
+    --buttonColorFg: var(--foreground);
 
     --docsColor: #0c5858;
-    --docsColorFg:var(--foreground);
+    --docsColorFg: var(--foreground);
 
-	--bugsColor: #680404;
-    --bugsColorFg:var(--foreground);
+    --bugsColor: #680404;
+    --bugsColorFg: var(--foreground);
 
     --codeColor: #6d003f;
-    --codeColorFg:var(--foreground);
+    --codeColorFg: var(--foreground);
 
 
-	--discordColor: #44013b;
-    --discordColorFg:var(--foreground);
+    --discordColor: #44013b;
+    --discordColorFg: var(--foreground);
 
     --storeColor: #686602;
-    --storeColorFg:var(--foreground);
+    --storeColorFg: var(--foreground);
 
     --donateColor: #8cc800;
     --donateColorFg: #212700;
 
 
     --itchColor: #b11f38;
-    --itchColorFg:var(--foreground);
+    --itchColorFg: var(--foreground);
 
     --youtubeColor: #c4302b;
-    --youtubeColorFg:var(--foreground);
+    --youtubeColorFg: var(--foreground);
 
-    --twitterColor:#1475b1;
-    --twitterColorFg:var(--foreground);
+    --twitterColor: #1475b1;
+    --twitterColorFg: var(--foreground);
 
     --highlightedColor: #ffbb00;
-    --highlightedColorFg:#242424;
+    --highlightedColorFg: #242424;
 
     --textShadowColor: var(--background3);
-    --boxShadowColor:var(--background2);
+    --boxShadowColor: var(--background2);
 }
 
 
@@ -72,10 +73,11 @@
 img {
     max-width: 100%;
 }
-p{
-    display:inline-block;
-    margin-top:0.2rem;
-    margin-bottom:0.2rem;
+
+p {
+    display: inline-block;
+    margin-top: 0.2rem;
+    margin-bottom: 0.2rem;
 }
 
 
@@ -134,12 +136,16 @@ html {
     left: 0;
 }
 
+pre {
+    padding: 1rem;
+}
+
 pre,
 code {
     position: relative;
     border-radius: @borderRoundness;
-	overflow: auto !important;
-	font-family: "PT Mono";
+    overflow: auto !important;
+    font-family: "PT Mono";
 }
 
 .hljs-ln-numbers {
@@ -168,10 +174,11 @@ code {
 
 // Normalize ul,li
 
-ul{
-	padding:0.5rem;
+ul {
+    padding: 0.5rem;
 
 }
+
 ul,
 li {
     text-decoration: none;
@@ -183,12 +190,14 @@ li {
 }
 
 
-li{
-    margin-top:0.1rem;
-    p{
-        display:inline;
+li {
+    margin-top: 0.1rem;
+
+    p {
+        display: inline;
     }
 }
+
 nav ul,
 nav li {
     text-align: left;
@@ -197,9 +206,10 @@ nav li {
     white-space: nowrap;
 
 }
-nav ul{
-	
-	margin-top:0.5rem;
+
+nav ul {
+
+    margin-top: 0.5rem;
 }
 
 nav li:before {
@@ -225,26 +235,23 @@ nav li:before {
 
 .textShadowedIntense {
     text-shadow:
-    0 0 (@textShadowIntense/2) var(--textShadowColor),
-    0 0 (@textShadowIntense/2) var(--textShadowColor),
-    0 0 (@textShadowIntense/2) var(--textShadowColor),
+        0 0 (@textShadowIntense/2) var(--textShadowColor),
+        0 0 (@textShadowIntense/2) var(--textShadowColor),
+        0 0 (@textShadowIntense/2) var(--textShadowColor),
 
 
-    0 0 @textShadowIntense var(--textShadowColor),
+        0 0 @textShadowIntense var(--textShadowColor),
+
+        0 0 (@textShadowIntense*2) var(--textShadowColor),
+        0 0 (@textShadowIntense*2) var(--textShadowColor),
+        0 0 (@textShadowIntense*4) var(--textShadowColor),
+        0 0 (@textShadowIntense*4) var(--textShadowColor),
 
-    0 0 (@textShadowIntense*2) var(--textShadowColor),
-    0 0 (@textShadowIntense*2) var(--textShadowColor),
-    0 0 (@textShadowIntense*4) var(--textShadowColor),
-    0 0 (@textShadowIntense*4) var(--textShadowColor),
 
-    
         0 0 (@textShadowIntense/4) var(--foreground),
         0 0 (@textShadowIntense/4) var(--foreground),
         0 0 (@textShadowIntense/4) var(--foreground),
-        0 0 (@textShadowIntense/4) var(--foreground)
-        
-
-        ;
+        0 0 (@textShadowIntense/4) var(--foreground);
 }
 
 
@@ -261,12 +268,13 @@ nav li:before {
     padding: 0.2rem;
     padding-left: 1rem;
     padding-right: 1rem;
-    a{
-        text-decoration: none!important;
+
+    a {
+        text-decoration: none !important;
     }
 
-    button.icon{
-        min-width:1.7rem;
+    button.icon {
+        min-width: 1.7rem;
     }
 
     >div {
@@ -275,23 +283,32 @@ nav li:before {
         @media @portrait {
             flex-direction: column;
         }
+
         margin-right:0.3rem;
 
     }
+
     >div:nth-child(2) {
         // The last ul is on the right.
         margin-left: auto;
 
     }
-    >div:last-child{
-        margin-right:0;
+
+    >div:last-child {
+        margin-right: 0;
     }
 
 
     >div:first-child {
         // The first ul is on the left
         margin-right: auto;
-        margin-left:0;
+        margin-left: 0;
+
+        @media @portrait {
+            button {
+                width: 100%;
+            }
+        }
     }
 
 
@@ -303,8 +320,8 @@ nav li:before {
 
     all: unset;
     appearance: none;
-    background-color: var(--background2)  !important;
-    border: 0.1rem solid var(--background3)  !important;
+    background-color: var(--background2) !important;
+    border: 0.1rem solid var(--background3) !important;
     border-radius: @borderRoundness;
     color: var(--highlightFg);
     padding: 0.3rem;
@@ -315,11 +332,12 @@ nav li:before {
     display: inline-block;
     padding: 0.6rem;
     padding-left: 1rem;
-	padding-right: 1rem;
-	cursor: pointer;
-	text-shadow: none;
-	font-weight: bolder!important;
+    padding-right: 1rem;
+    cursor: pointer;
+    text-shadow: none;
+    font-weight: bolder !important;
     .genericCl();
+
     a {
         text-decoration: none !important;
 
@@ -337,15 +355,16 @@ button:hover {
 
 }
 
-button.icon{
-    i{
-        margin:0!important;
-        padding:0!important;
+button.icon {
+    i {
+        margin: 0 !important;
+        padding: 0 !important;
     }
+
     padding:0.5rem;
     padding-left:0.7rem;
     padding-right:0.7rem;
-    
+
     text-align: center;
     font-size: 1.2rem;
 }
@@ -475,76 +494,78 @@ h3 {
 
 
 .genericCl {
-    background: var(--buttonColor)  !important;
-    color: var(--buttonColorFg)  !important;
+    background: var(--buttonColor) !important;
+    color: var(--buttonColorFg) !important;
     font-weight: bold;
 }
 
-.highlightedCl{
+.highlightedCl {
     .genericCl();
-    background: var(--highlightedColor)  !important;
-    color: var(--highlightedColorFg)!important;
+    background: var(--highlightedColor) !important;
+    color: var(--highlightedColorFg) !important;
 }
 
 .donateCl {
     .genericCl();
-    background: var(--donateColor)  !important;
-    color: var(--donateColorFg)  !important;
+    background: var(--donateColor) !important;
+    color: var(--donateColorFg) !important;
 
 }
 
 .docsCl {
     .genericCl();
-    background: var(--docsColor)  !important;
-    color: var(--docsColorFg)  !important;
+    background: var(--docsColor) !important;
+    color: var(--docsColorFg) !important;
 
 }
 
 .bugsCl {
     .genericCl();
-    background: var(--bugsColor)  !important;
-    color: var(--bugsColorFg)  !important;
+    background: var(--bugsColor) !important;
+    color: var(--bugsColorFg) !important;
 
 }
 
 
 .codeCl {
     .genericCl();
-    background: var(--codeColor)  !important;
-    color: var(--codeColorFg)  !important;
+    background: var(--codeColor) !important;
+    color: var(--codeColorFg) !important;
 
 }
 
 .discordCl {
     .genericCl();
-    background: var(--discordColor)  !important;
-    color: var(--discordColorFg)  !important;
+    background: var(--discordColor) !important;
+    color: var(--discordColorFg) !important;
 
 }
 
 .storeCl {
     .genericCl();
-    background: var(--storeColor)  !important;
-    color: var(--storeColorFg)  !important;
+    background: var(--storeColor) !important;
+    color: var(--storeColorFg) !important;
 
 }
 
 .twitterCl {
     .genericCl();
-    background: var(--twitterColor)  !important;
-    color: var(--twitterColorFg)  !important;
+    background: var(--twitterColor) !important;
+    color: var(--twitterColorFg) !important;
 
 }
+
 .youtubeCl {
     .genericCl();
-    background: var(--youtubeColor)  !important;
-    color: var(--youtubeColorFg)  !important;
+    background: var(--youtubeColor) !important;
+    color: var(--youtubeColorFg) !important;
 
 }
+
 .itchCl {
     .genericCl();
-    background: var(--itchColor)  !important;
-    color: var(--itchColorFg)  !important;
+    background: var(--itchColor) !important;
+    color: var(--itchColorFg) !important;
 
 }
 
@@ -593,17 +614,17 @@ figure.githubUser {
             font-size: 1.2rem;
 
         }
-        .ghbio{
-            display:none!important;
+
+        .ghbio {
+            display: none !important;
         }
-       
+
         margin-top:2rem;
         margin-bottom:.5rem;
         padding-bottom:1rem;
         border-bottom: 0.1rem solid var(--highlightFg);
-        >figcaption {
-         
-        }
+
+        >figcaption {}
     }
 }
 
@@ -612,10 +633,10 @@ body {
 
     overflow-x: hidden;
 
-    font-family: 'Ubuntu', sans-serif;	// font-family: 'JetBrains Mono', monospace;
-	// font-family: 'Padauk', sans-serif;
-    background: var(--background)  !important;
-    color: var(--foreground)  !important;
+    font-family: 'Ubuntu', sans-serif; // font-family: 'JetBrains Mono', monospace;
+    // font-family: 'Padauk', sans-serif;
+    background: var(--background) !important;
+    color: var(--foreground) !important;
     min-height: 100%;
     width: 100%;
     position: relative;
@@ -625,7 +646,7 @@ body {
     flex-direction: column;
     align-items: center;
     font-size: .8706rem;
-    word-wrap:break-word;
+    word-wrap: break-word;
     white-space: normal;
     .textShadowed();
 
@@ -762,8 +783,8 @@ body {
 .responsiveWidth {
     max-width: 1200px;
     width: 99vw;
-    margin-left:auto;
-	margin-right:auto;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 
@@ -783,18 +804,20 @@ body {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    >article{
-        p{
-            display:inline;
+
+    >article {
+        p {
+            display: inline;
 
         }
     }
+
     &.hlist {
         flex-direction: row;
 
         >article {
             flex-basis: 30%;
-          
+
         }
 
 
@@ -865,7 +888,8 @@ section {
 
         display: flex;
         flex-direction: column;
-		text-shadow: none;
+        text-shadow: none;
+
         h1 {}
 
         .more {
@@ -1044,8 +1068,8 @@ section#contribute {
 
 
 
-button#startbtn{
-    font-size:1.6rem;
+button#startbtn {
+    font-size: 1.6rem;
 }
 
 
@@ -1056,11 +1080,11 @@ section#showcase {
     margin-bottom: 0;
     padding: 0;
     display: flex;
-position:relative;
+    position: relative;
     flex-direction: column;
-	min-height:40vh;
-	.textShadowedIntense();
-    
+    min-height: 40vh;
+    .textShadowedIntense();
+
     #gameDescription {
         text-align: right !important;
         width: 50%;
@@ -1108,21 +1132,21 @@ position:relative;
         right: 1rem;
     }
 
-	> div {
-		padding: 1rem;
+    >div {
+        padding: 1rem;
         background: none;
         box-shadow: none;
         width: 100%;
         display: block;
-      background-position: center;
+        background-position: center;
         background-size: cover;
-		margin-top: 0;
-		margin-bottom: 0;
-	}
-	
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+
+    @media @portrait {
 
-	@media @portrait {
-      
 
         #gameDescription h2 {
             text-align: center !important;