better css

Author: shazz

themes/pelican-chunk/static/css/so-simple/entry-content.css

@@ -57,6 +57,13 @@
     background: #f5f5f5;
 }
 
+/* Limit article images to 640px width on desktop */
+.entry-content img {
+    max-width: 640px;
+    width: 100%;
+    height: auto;
+}
+
 .entry-content a img {
     border: 10px solid #ddd;
 }

themes/pelican-chunk/static/css/so-simple/header.css

@@ -1,15 +1,16 @@
 #header {
     padding-top: 40px !important;
     background: var(--_body-bg);
-    max-height: 20rem;
+    max-height: none;
 }
 
 .header-banner {
     position: relative;
     display: block;
-    min-height: 18rem;
+    height: 250px;
     width: 100%;
     align-items: right;
+    overflow: hidden;
 }
 
 .header-banner img {
@@ -36,17 +37,10 @@
 :root #floppy {
     display: block;
     position: absolute;
-    max-width: 100%;
+    width: clamp(150px, 15%, 400px);
+    aspect-ratio: 1 / 1;
     top: 20px;
     left: 10%;
-    max-height: 20rem;
-    /* left: calc(var(--_side-nav-w) + var(--_content-space-x)); */
-    /* top: 220px; */
-    /* transform: translate(-50%, -50%); */
-    /* max-height: none; */
-    /* max-width: none; */
-    /* width: min(var(--_disc-w), 20rem); */
-    /* bottom: auto; */
-    /* box-shadow: 0 -20px 30px -10px #0000009c; */
+    object-fit: contain;
     z-index: 11;
 }

themes/pelican-chunk/static/css/so-simple/mobile.css

@@ -77,7 +77,7 @@
 
     :root #floppy {
         left: calc(var(--_content-space-x));
-        max-height: 19.2rem;
+        width: clamp(120px, 12%, 350px);
     }
 
     /* Mobile: Smaller fork ribbon */
@@ -201,8 +201,7 @@
 
     :root #floppy {
         transform: translate(-18%, -15%);
-        /* bottom: 0px; */
-        width: 23%;
+        width: clamp(120px, 27%, 270px);
     }
 
     /* Small mobile: smaller fork ribbon */
@@ -214,8 +213,9 @@
     .header-banner {
         position: relative;
         display: block;
-        min-height: 12rem;
+        height: 120px;
         width: 100%;
+        overflow: hidden;
     }
 
     .header-banner img {
@@ -224,7 +224,7 @@
         top: 0;
         left: 0;
         width: 100%;
-        height: 50%;
+        height: 100%;
         object-fit: cover;
     }