Sorting the css properties

inc/css/main.css

@@ -1,6 +1,6 @@
 @font-face {
-    font-family: hkg;
     src: url("/inc/fonts/HKGrotesk-Regular.woff");
+    font-family: hkg;
 }
 
 :root {
@@ -18,19 +18,19 @@
 }
 
 * {
-    margin: 0;
+    font-family: hkg, sans-serif;
+    color: var(--c2);
     padding: 0;
+    margin: 0;
     text-decoration: none;
-    color: var(--c2);
-    font-family: hkg, sans-serif;
 }
 
 html, body {
-    max-width: 100%;
+    position: relative;
     height: 100%;
+    max-width: 100%;
     max-height: 100%;
     overflow: hidden;
-    position: relative;
 }
 
 body {
@@ -38,7 +38,7 @@ body {
 }
 
 header, #bg-box, #exhibition, .flying-text {
-    border-radius: 0.8vh;
+    border-radius: 5px;
 }
 
 .hidden {
@@ -50,19 +50,19 @@ header, #bg-box, #exhibition, .flying-text {
 header {
     box-sizing: border-box;
     position: relative;
-    height: var(--h-header);
     font-size: 1.5vmax;
+    background-color: var(--c1);
     width: 60%;
+    height: var(--h-header);
     margin: 2.5vh auto;
     text-align: center;
-    background-color: var(--c1);
     z-index: 1;
 }
 
 nav a {
     display: inline-block;
-    vertical-align: middle;
     min-width: 16%;
+    vertical-align: middle;
 }
 
 a:hover {
@@ -75,9 +75,9 @@ a:hover {
 }
 
 #logo img {
+    filter: grayscale(1);
     width: calc(var(--h-header) + 3vh);
     margin-top: -1.5vh;
-    filter: grayscale(1);
 }
 
 #logo img:hover {
@@ -100,28 +100,28 @@ a:hover {
     scrollbar-width: none;
 
     transform-origin: bottom left;
-    transform: rotate(-90deg);
 
-    background-color: var(--c1);
+    overflow-y: auto;
+    overflow-x: hidden;
+
     position: absolute;
+    background-color: var(--c1);
     /* because of the transform width and height are switched */
+    bottom: 2.5vh;
+    left: 97.5vw;
     width: var(--h-ex);
     height: 95vw;
-    left: 97.5vw;
+    transform: rotate(-90deg);
-    bottom: 2.5vh;
-    overflow-y: auto;
-    overflow-x: hidden;
-
 }
 
 .thumb-box {
-    height: var(--h-ex-thumb);
+    transform-origin: bottom left;
-    margin-top: calc(var(--h-ex-thumb) * 0.53);
     /* keep the ~ratio of a photo
        (spacing should be the same all the time) */
     width: calc(var(--h-ex-thumb) * 1.49);
-    transform-origin: bottom left;
+    height: var(--h-ex-thumb);
-    /* shift the thumbs 1*width to the left */
+    margin-top: calc(var(--h-ex-thumb) * 0.53);
+    /* shift the thumbs 1.49*width to the left */
     transform: rotate(90deg) translateX(calc(var(--h-ex-thumb) * -1.49));
 }
 
@@ -130,14 +130,14 @@ a:hover {
 }
 
 .thumb {
+    filter: blur(2px) grayscale(1);
     width: 100%;
     height: 100%;
-    filter: blur(2px) grayscale(1);
 }
 
 .thumb:hover {
-    cursor: pointer;
     filter: grayscale(0);
+    cursor: pointer;
 }
 
 
@@ -146,29 +146,26 @@ a:hover {
 
 #info-box {
     position: relative;
-    height: var(--h-info);
     width: 95%;
+    height: var(--h-info);
     margin: auto;
 }
 
 #bg-box {
+    background-color: var(--c1);
     width: 100%;
     height: 100%;
-    background-color: var(--c1);
     overflow: hidden;
 }
 
 #info-box table {
     display: inline-block;
     position: absolute;
-    height: auto;
-    padding: 5vh;
-    /* Element does not respect the padding of parent >:|
-       So I will make it respect it...*/
     top: 0;
     bottom: 0;
+    height: auto;
+    padding: 5vh;
     margin-bottom: 2.5vh;
-
 }
 
 #info-box table * {
@@ -185,13 +182,13 @@ a:hover {
 }
 
 #btn-close {
-    /* I made this a bit smaller to make alignment easier */
-    line-height: 2.0vw;
-    font-size: 4.5vw;
     position: absolute;
-    right: 1.6vw;
+    font-size: 4.5vw;
-    top: 1.6vw;
     color: var(--c2);
+    top: 1.6vw;
+    right: 1.6vw;
+    /* I made this a bit smaller to make alignment easier */
+    line-height: 2.0vw;
     z-index: 1;
 }
 
@@ -203,20 +200,20 @@ a:hover {
 /******************* MAGNIFY *******************/
 
 .magnify {
-    display: inline-block;
-    max-width: 60%;
-    background-position: center;
-    background-repeat: no-repeat;
     background-size: contain;
     background-clip: content-box;
+    display: inline-block;
+    background-repeat: no-repeat;
+    background-position: center;
+    max-width: 60%;
 }
 
 @media only screen and (max-width: 800px) {
 
     #bg-box {
+        background-color: var(--c1);
         width: 100%;
         height: 100%;
-        background-color: var(--c1);
         overflow: hidden;
     }
 
@@ -224,7 +221,7 @@ a:hover {
         box-sizing: border-box;
         display: block;
         position: relative;
-        padding: 0 2.5vh;
+        padding: 0 2.5%;
         margin-top: 7.5vh;
     }
 
@@ -234,7 +231,6 @@ a:hover {
 
     #info-box img {
         max-height: 50%;
-        width: 100%;
     }
 
     .magnify {
@@ -250,39 +246,44 @@ a:hover {
 
 #welcome {
     position: absolute;
-    height: var(--h-info);
-    width: 100%;
     top: 12.5vh;
+    width: 100%;
+    height: var(--h-info);
 }
 
 #welcome img {
     position: relative;
-    height: calc(var(--h-info) * 0.5);
+    top: 17vh;
     left: 50vw;
+    height: calc(var(--h-info) * 0.5);
     margin-left: calc(var(--h-info) * 0.25 * -0.70);
-    top: 17vh;
 }
 
 .flying-text {
-    position: absolute;
     display: inline-block;
-    color: var(--c2);
+    position: absolute;
     font-size: 0.01vw;
+    color: var(--c2);
     background-color: var(--c1);
-    padding: 0.5vw;
-    text-align: center;
     top: 50%;
     left: 50%;
+    padding: 0.5vw;
+    text-align: center;
     z-index: -1;
 }
 
 /******************* COMING SOON *******************/
 
 .coming-soon {
+    text-align: center;
+}
+.coming-soon p{
     position: relative;
     display: inline-block;
     font-size: 8vmin;
     color: var(--c2);
     top: 30vh;
     background-color: var(--c1);
+    border-radius: 1vh;
+    padding: 20px;
 }

tmpl/soon.html

@@ -1,3 +1,3 @@
 {{define "body"}}
-<h1 class="coming-soon">❤ COMING SOON ❤</h1>
+<div class="coming-soon"><p>❤ COMING SOON ❤</p></div>
 {{end}}