.

public/css/f0ck.css

@@ -1,9 +1,3 @@
-/* f0ck.me Stylesheet v2 */
-/* Created in April of 2019 by the notorious and super sexy Alman Abu Ottermann */
-/* This style makes use of the Milligram CSS framework and might not work as expected without! */
-/* Contact: sirx @ f0ck . it */
-/* This style is not meant to be used anywhere else than on f0ck.me or any other f0ck related website! */
-
 /*Theming*/
 :root {
   --primary-color: #302AE6;
@@ -22,108 +16,26 @@
 }
 /*End of Theming*/
 
-/* Body */
-body {
+html, body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  overflow: hidden;
   background-color: var(--bg-color);
   color: var(--font-color);
-
-  overflow: hidden;
+}
+div.pageWrapper {
   height: 100%;
-  margin: 0;
-  padding: 0;
-}
-/* End of Body */
-
-/* Fieldset & Legend
-legend {
-  border-radius: 2px;
-  background: black;
-  font-family: monospace;
-  border: 1px white solid;
-  color: white;
-}
-
-fieldset {
-  border: 1px solid white;
-  padding: 20px;
-  background: black;
-}
-End of Fieldset & Legend */
-
-/* NAV */
-button {
-  background: #000101;
-  border: 1px solid white;
-  border-radius: 0px;
-  vertical-align: bottom !important;
-}
-  
-/* END OF NAV */
-
-/* MISC */
-::-webkit-scrollbar {
-  width: 12px;
-}
-
-::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
-}
-
-/* Flummikram lol */
-footer {
-  position: fixed;
-  bottom: 0;
-}
-
-div.content {
-  position: absolute;
-  top: 54px;
-  left: 8px;
-  bottom: 25px;
-  right: 8px;
-  margin-top: 25px;
-  overflow: hidden;
-}
-div.posts {
-  position: relative;
   width: 100%;
-  height: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 0.2fr 2.6fr 0fr;
 }
-
-div.posts > a {
-  width: 128px;
-  height: 128px;
-  box-shadow: 2px 2px 6px 0px rgb(0, 0, 0);
-  margin: 4px;
-  float: left;
-  outline: none;
-  box-shadow: inset 0 0 10px #4c4a4a;
-}
-div.posts > a > img.thumb {
-  border: 2px solid black;
-  transition: .1s ease-out;
-}
-div.posts > a > img.thumb:hover {
-  box-shadow: 0px 0px 0px 2px #dac8d2;
-  border-radius: 5px;
-  transition: .1s ease-in;
-}
-
-/* fml */
-div#header {
-  height: 65px;
-  left: 8px;
-  right: 8px;
-  top: 0;
-  position: absolute;
+div#header, div#footer {
+  z-index: 9999;
   background-color: #292922;
 }
+
 #logoHead {
   margin: 6px 0 0 4px;
   padding: 0;
@@ -147,7 +59,7 @@ div#header {
 #pagePosition, #itemPosition {
   position: absolute;
   right: 8px;
-  bottom: 6px;
+  top: 6px;
   padding: 0;
   color: #7d7b6a;
   background-color: #333;
@@ -162,32 +74,21 @@ div#header {
   display: none;
 }
 
-div#wrapper {
-  display: block;
+div#content {
+  position: relative;
 }
-div#itemview {
-  z-index: 999;
-  background-color: rgba(0,0,0,0.8);
+
+div.wrapper {
   display: none;
-
-  flex-direction: row;
-  width: 100%;
-}
-
-div.items {
-  /*position: relative;*/
-  flex: 1 1 0px;
-
-  width: 100%;
-  height: 100%;
-}
-img.item {
   position: absolute;
-  max-height: 100%;
-  max-width: 100%;
   top: 0;
-  bottom: 0;
   left: 0;
-  right: 0;
-  margin: auto;
+  height: 100%;
+  width: 100%;
+}
+
+div#howtowrapper {
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 999;
 }