prettify css add support for wrap images and img/art grids

4 files changed, 128 insertions, 3 deletions

diff --git a/static/css/dark.css b/static/css/dark.css
index 1cb3028..31b025a 100644
--- a/static/css/dark.css
+++ b/static/css/dark.css
@@ -26,6 +26,8 @@
   --switch-ol: var(--color4);
   --switch-moon: var(--color3);
   --switch-sun: var(--color13);
+
+  --code-border: var(--fg);
 }
 
 /* general */
@@ -66,6 +68,11 @@ main {
   background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
 }
 
+pre, code {
+  border-radius: 5px;
+  border: 1px solid var(--code-border);
+}
+
 /* nav bar */
 body > header {
   background: linear-gradient(var(--body-bg) calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
@@ -129,4 +136,3 @@ div.gallery:hover {
 .switch input:focus + .slider {
   box-shadow: 0 0 0.1em var(--switch-ol);
 }
-
diff --git a/static/css/light.css b/static/css/light.css
index 27df3c4..0b1456c 100644
--- a/static/css/light.css
+++ b/static/css/light.css
@@ -26,6 +26,8 @@
   --switch-ol: var(--color0);
   --switch-moon: var(--color3);
   --switch-sun: var(--color13);
+
+  --code-border: var(--fg);
 }
 
 /* general */
@@ -62,6 +64,11 @@ body {
   color: var(--fg);
 }
 
+pre, code {
+  border-radius: 5px;
+  border: 1px solid var(--code-border);
+}
+
 main {
   background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
 }
@@ -129,4 +136,3 @@ div.gallery:hover {
 .switch input:focus + .slider {
   box-shadow: 0 0 0.1em var(--switch-ol);
 }
-
diff --git a/static/css/style.css b/static/css/style.css
index 0ba4e05..9be32e0 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -3,6 +3,20 @@
   font-size: larger;
 }
 
+h1 {
+  text-align: center;
+}
+
+ul {
+  margin-left: 2em;
+  margin-right: 2em;
+}
+
+ul.page-list {
+  margin-left: 0;
+  margin-right: 0;
+}
+
 body, html {
   margin: 0;
   padding: 0;
@@ -42,12 +56,23 @@ a{
 
 body > header, body > footer, main {
   justify-self: center;
-  width: clamp(45ch, 50%, 75ch);
+  width: clamp(30ch, calc(100% - 1em), 75ch);
   padding-left: 0.5em;
   padding-right: 0.5em;
 }
 
 
+/* article elements */
+div.article-info {
+  line-height: 0.3;
+  font-size: smaller;
+}
+
+div.article-info > div.article-tags {
+  font-size: larger;
+}
+
+
 /* nav bar / header */
 body > header {
   display: flex;
@@ -103,6 +128,10 @@ body > footer {
   text-align: center;
 }
 
+body > footer > span {
+  font-size: smaller;
+}
+
 
 /* theme swticher */
 .switch {
@@ -154,3 +183,77 @@ body > footer {
 .slider.round:before {
   border-radius: 1em;
 }
+
+
+/* code blocks */
+code.crypto {
+  font-size: smaller;
+  overflow-wrap: anywhere;
+}
+
+
+/* images */
+img {
+  border-radius: 5px;
+  max-width: 100%;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  vertical-align: middle;
+}
+
+img.wrap-right {
+  float: right;
+}
+
+img.wrap-left {
+  float: left;
+}
+
+img.qr {
+  max-width: 200px;
+  padding: 1em;
+}
+
+/* img grid */
+div.img-grid, div.img-grid > p {
+  display: grid;
+  gap: 1em;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+div.img-grid img {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+
+/* art grid */
+div.art-grid, div.art-grid > p {
+  display: grid;
+  gap: 1em;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-auto-rows: minmax(250px, auto);
+}
+
+div.art-grid img {
+  border: 1px solid white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+@media screen and (min-width: 600px) {  
+  div.art-grid img.wide {
+    grid-column: span 2 / auto;
+  }
+  
+  div.art-grid img.tall {
+    grid-row: span 2 / auto;
+  }
+}
diff --git a/static/scripts/theme.js b/static/scripts/theme.js
index 489060f..1a425d5 100644
--- a/static/scripts/theme.js
+++ b/static/scripts/theme.js
@@ -21,6 +21,7 @@ window.onload = () => {
       href = href.replace('dark.css', 'light.css');
       theme.setAttribute('href', href);
 
+      /*
       let code_theme = document.getElementById('code-theme-css');
 
       let code_href;
@@ -29,6 +30,7 @@ window.onload = () => {
         code_href = code_href.replace('solarized-dark.min.css', 'solarized-light.min.css');
         code_theme.setAttribute('href', code_href);
       }
+      */
     }
   }
 
@@ -50,31 +52,39 @@ function toggleTheme(){
   let theme = document.getElementById('theme-css');
   let href = theme.getAttribute('href');
 
+  /*
   let code_theme = document.getElementById('code-theme-css');
   let code_href;
   if (code_theme !== null){
     code_href = code_theme.getAttribute('href');
   }
+  */
 
   if(href.endsWith('dark.css')){
     href = href.replace('dark.css', 'light.css');
+    /*
     if (code_theme !== null){
       code_href = code_href.replace('solarized-dark.min.css', 'solarized-light.min.css');
     }
+    */
   }
   else if (href.endsWith('light.css')){
     href = href.replace('light.css', 'dark.css');
+    /*
     if (code_theme !== null){
       code_href = code_href.replace('solarized-light.min.css', 'solarized-dark.min.css');
     }
+    */
   }
   else{
     console.log('Wrong replacement.');
   }
 
   theme.setAttribute('href', href);
+  /*
   if (code_theme !== null){
     code_theme.setAttribute('href', code_href);
   }
+  */
   setTheme();
 }