Frontend lol

public/css/f0ck.css

@@ -26,7 +26,11 @@
 body {
   background-color: var(--bg-color);
   color: var(--font-color);
-  /*overflow: hidden;*/
+
+  overflow: hidden;
+  height: 100%;
+  margin: 0;
+  padding: 0;
 }
 /* End of Body */
 
@@ -53,70 +57,9 @@ button {
   border-radius: 0px;
   vertical-align: bottom !important;
 }
-
-img.logo {
-  height: 48px;
-}
+  
 /* END OF NAV */
 
-/* f0ck Grid! */
-.f0ckgrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
-  grid-gap: 20px;
-  align-items: stretch;
-}
-
-.f0ckgrid img {
-  box-shadow: 2px 2px 6px 0px rgb(0, 0, 0);
-  max-width: 100%;
-}
-/* End of f0ck Grid! */
-
-/* Image Thumbs */
-a img.thumb {
-  border: 2px solid black;
-  transition: .1s ease-out;
-}
-
-img.thumb:hover {
-     box-shadow: 0px 0px 0px 2px #dac8d2;
-  border-radius: 5px;
-  transition: .1s ease-in;
-}
-/* End of Image Thumbs */
-
-/* List Styling
-ul.f0ck-links {
-  list-style: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-li.post {
-  width: 128px;
-  height: 128px;
-  margin-top: 5px;
-  line-height: 128px;
-  float: left;
-  margin: 5px;
-  transition: .1s ease-out;
-}
-
-li.post:hover {
-  box-shadow: 0px 0px 0px 2px #dac8d2;
-  border-radius: 5px;
-  transition: .1s ease-in;
-}
-
-li.post:hover img {
-border-radius: 5px;
-opacity: 0.8;
-}
-End of List Styling */
-
 /* MISC */
 ::-webkit-scrollbar {
   width: 12px;
@@ -131,3 +74,121 @@ End of List Styling */
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
 }
+
+/* Flummikram lol */
+div.pscroll {
+  opacity: 0.7;
+  position: fixed;
+  display: inline-block;
+  height: 64px;
+  width: 64px;
+  left: 50%;
+  cursor: pointer;
+  margin-left: -36px;
+  z-index: 999;
+}
+div.pscroll:hover {
+  opacity: 0.9;
+}
+div#up {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAANlBMVEUiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIjIyP///8iIiLm5uY3NzdKSkpAQEAqKipZf6aEAAAACnRSTlOxIfAAKvPn6quuQpaxIgAAAMZJREFUeF7t17uOwjAYROHjOMCuL0l4/5ddbQU0M4p/RIE8/flkyY1NTr/XNrjrT8qsSwtsWaGFBpcYcKEF9xFgAhMo9xIBytFrP8owUPb6v10JmN4K6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4LiN4LD2Cv53c8AaUPAL08AXVk9zeeoG3nhb69XuP5fdkLZQITmED840kMIP75zonbaH4j5T8NALtW477R3QAAAABJRU5ErkJggg==');
+  top: 5.8em;
+}
+div#down {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAANlBMVEUiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIjIyMiIiLm5uY3NzcqKipAQED///9KSkpHtWFIAAAACnRSTlMqACGx8/Cu6uerGsmyTAAAAM9JREFUeF7t1zkOwzAMBVEt3kLK2/0vm3KQivhWigTQ7+dBpZhyeW3+cNtSckqzd2xOafGu1TT1AVPyzv0YMIABDMD0fQB7u9S1HcCNXhAM4CAQZl98gZ8PgNsB3G69NwAEqQdAUHoABKUHQNB6AAStB0DQegAErQdA0HoABK0HQNB6AAShBwgE+gBACHuAWKCPAIS4B4gEegFAoHcFQKBXAAR6BUCgVwAEehlAoNcBt7Nd7TTXAYjD/uKDMYAB9B+etQ+o/cd3Lsv6NF9ryW9/v8EFMSsbFgAAAABJRU5ErkJggg==');
+  bottom: 5em;
+}
+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%;
+}
+
+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;
+  background-color: #292922;
+}
+#logoHead {
+  margin: 6px 0 0 4px;
+  padding: 0;
+  font-size: 14px;
+}
+#logo {
+  padding: 1px 4px 1px 4px;
+  height: 48px;
+}
+#itemInfo {
+  display: none;
+  height: 61px;
+  position: absolute;
+  left: 200px;
+  right: 270px;
+  top: 4px;
+}
+#itemInfo div.infoText {
+  margin-top: 3px;
+}
+#pagePosition, #itemPosition {
+  position: absolute;
+  right: 8px;
+  bottom: 6px;
+  padding: 0;
+  color: #7d7b6a;
+  background-color: #333;
+}
+#pagePosition span, #itemPosition span {
+  color: #9d9b8a;
+}
+#pagePosition {
+  display: block;
+}
+#itemPosition {
+  display: none;
+}
+
+div#wrapper {
+  display: block;
+}
+div#itemview {
+  z-index: 999;
+  background-color: rgba(0,0,0,0.8);
+  display: none;
+}