feat: ✨ stylistic tweaks for mobile compatibility

www/static/dergstyle.css

@@ -20,6 +20,7 @@ body {
 	--highlight_2: #edd29e;
 
 	--text_1: #FFFFFF;
+	--text_border: #A0A0A080;
 
     color: var(--text_1);
     background: var(--bg_1);
@@ -149,11 +150,15 @@ a:hover {
 	margin-right: 2rem;
 }
 
+:target { 
+	scroll-margin-top: 6rem;
+}
+
 #main_content_wrapper {
 	--content-width: 	min(100vw, calc(20rem + 40vw));
 	--content-total-margin: calc(calc(100vw - var(--content-width)) / 2);
 
-	--content-padding: 	max(0px, min(1rem, var(--content-total-margin)));
+	--content-padding: 	max(0.5rem, min(1rem, var(--content-total-margin)));
 	--content-margin:   max(0px, calc(var(--content-total-margin) - 1rem));
 
 	padding: 0rem var(--content-padding) 1rem var(--content-padding);
@@ -175,6 +180,9 @@ a:hover {
 	top: 0px;
 
 	background: var(--bg_2);
+	
+	box-shadow: 0px 5px 5px 0px #00000040;
+	z-index: 5;
 }
 
 #post_file_titles {
@@ -223,13 +231,6 @@ a:hover {
 
 	padding: 0.75rem;
 }
-#main_content_wrapper article h1 {
-	text-align: left;
-	padding-left: 3vmin;
-	margin-bottom: 0.2rem;
-
-	border-bottom: solid 1px darkgrey;
-}
 
 #main_content_wrapper article img {
 	display: block;

www/static/gallerystyle.css

@@ -0,0 +1,64 @@
+.gallery {
+	display: flex;
+	flex-direction: row;
+  
+  flex-flow: row wrap;
+	
+  justify-content: center;
+	
+	list-style-type: none;
+	margin-top: 1rem;
+	padding: 0px;
+}
+
+.gallery li {
+  margin: 0.2rem;
+  margin-bottom: 1rem;
+  border: 1px solid var(--text_border);
+  float: left;
+  
+  border-radius: 1rem;
+  box-shadow: 0px 5px 5px 0px #00000040;
+  
+  background: var(--bg_2);
+  
+  height: auto;
+  
+  transition: 0.3s;
+  z-index: 1;
+}
+
+.gallery li:hover {
+  border: 1px solid var(--text_1);
+  transform: scale(1.02);
+}
+
+#main_content_wrapper .gallery img {  
+  width: 100%;
+  height: 15rem;
+  margin: 0;
+  
+  border-radius: 1rem 1rem 0 0;
+
+  object-fit: cover;
+}
+
+@media screen and (max-width: 48rem) {
+  .gallery li {
+    width: 45%;
+  }
+  
+  #main_content_wrapper .gallery img {  
+    height: 100%;
+    width: auto;
+  }
+  
+  #main_content_wrapper .gallery figure {
+     height: auto;
+  }
+}
+
+.gallery figcaption {
+  padding: 0.1rem;
+  text-align: center;
+}

www/static/modest.css

@@ -0,0 +1,203 @@
+/*
+modest.css, licensed under MIT license, Crafted with <3 by John Otander (@4lpine).
+
+Taken from: https://github.com/markdowncss/modest
+
+Modified to fit Dergsite needs
+*/
+
+@media print {
+    *,
+    *:before,
+    *:after {
+        background: transparent !important;
+        color: #000 !important;
+        box-shadow: none !important;
+        text-shadow: none !important;
+    }
+    
+    a,
+    a:visited {
+        text-decoration: underline;
+    }
+    
+    a[href]:after {
+        content: " (" attr(href) ")";
+    }
+    
+    abbr[title]:after {
+        content: " (" attr(title) ")";
+    }
+    
+    a[href^="#"]:after,
+    a[href^="javascript:"]:after {
+        content: "";
+    }
+    
+    pre,
+    blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+    }
+    
+    thead {
+        display: table-header-group;
+    }
+    
+    tr,
+    img {
+        page-break-inside: avoid;
+    }
+    
+    img {
+        max-width: 100% !important;
+    }
+    
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+    
+    h2,
+    h3 {
+        page-break-after: avoid;
+    }
+}
+
+pre,
+code {
+    font-family: Menlo, Monaco, "Courier New", monospace;
+}
+
+.modest-no-decoration {
+    text-decoration: none;
+}
+
+html {
+    font-size: 14px;
+}
+
+@media screen and (min-width: 32rem) and (max-width: 48rem) {
+    html {
+        font-size: 16px;
+    }
+}
+
+@media screen and (min-width: 48rem) {
+    html {
+        font-size: 17px;
+    }
+}
+
+article {
+    line-height: 1.5;
+}
+
+article p,
+.modest-p {
+    font-size: 1rem;
+    margin-bottom: 1.3rem;
+}
+
+article h1,
+.modest-h1,
+article h2,
+.modest-h2,
+article h3,
+.modest-h3,
+article h4,
+.modest-h4 {
+    margin: 1.5em 0 .3em;
+    font-weight: inherit;
+    line-height: 1.42;
+    
+    padding-left: 1.5rem;
+}
+
+article > :first-child {
+    margin-top: 0.3rem !important;
+}
+
+article h1,
+.modest-h1 {
+    margin-top: 0;
+    font-size: 1.998rem;
+}
+
+article h2,
+.modest-h2 {
+    font-size: 1.427rem;
+}
+
+article h3,
+.modest-h3 {
+    font-size: 1.299rem;
+}
+
+article h4,
+.modest-h4 {
+    font-size: 1.1rem;
+}
+
+article h5,
+.modest-h5 {
+    font-size: 1rem;
+}
+
+article h6,
+.modest-h6 {
+    font-size: .88rem;
+}
+
+article small,
+.modest-small {
+    font-size: .707rem;
+}
+
+/* https://github.com/mrmrs/fluidity */
+
+article h1,
+article h2,
+article h3 {
+    border-bottom: 1px solid var(--text_border);
+    padding-bottom: .3rem;
+}
+
+blockquote {
+    padding-left: 0.8rem;
+    margin-left:  0.8rem;
+    margin-right: 4em;  
+}
+
+blockquote {
+    border-left: 4px solid var(--text_border);
+    text-align: justify;
+}
+
+pre {
+    border-radius: 0.5rem;
+
+    box-shadow: 2px 5px 5px 0px #00000040;
+    
+    border-left: 4px solid #206475;
+    background-color: var(--bg_2);
+    margin-bottom: 1.3rem;
+    margin-left:  0.8rem;
+    margin-right: 4em;
+}
+pre code {
+    border-radius: 0.5rem;
+}
+
+@media screen and (max-width: 32rem) {
+    pre, blockquote {
+        margin-right: 1.5em;
+    }
+}
+
+article ul,
+article ol {
+    padding-left: 2em;
+}

www/static/solarized-dark.css

@@ -0,0 +1,84 @@
+/*
+
+Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #002b36;
+  color: #839496;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #586e75;
+}
+
+/* Solarized Green */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-addition {
+  color: #859900;
+}
+
+/* Solarized Cyan */
+.hljs-number,
+.hljs-string,
+.hljs-meta .hljs-meta-string,
+.hljs-literal,
+.hljs-doctag,
+.hljs-regexp {
+  color: #2aa198;
+}
+
+/* Solarized Blue */
+.hljs-title,
+.hljs-section,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #268bd2;
+}
+
+/* Solarized Yellow */
+.hljs-attribute,
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-class .hljs-title,
+.hljs-type {
+  color: #b58900;
+}
+
+/* Solarized Orange */
+.hljs-symbol,
+.hljs-bullet,
+.hljs-subst,
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-link {
+  color: #cb4b16;
+}
+
+/* Solarized Red */
+.hljs-built_in,
+.hljs-deletion {
+  color: #dc322f;
+}
+
+.hljs-formula {
+  background: #073642;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}