Custom markdown for inserting images

[cx.git] / public / design / css / style.css

diff --git a/public/design/css/style.css b/public/design/css/style.css
index f01947315cc6d6fd2c5c7669fce4f6dc88391a99..8bef5af6d543005de35c6d7d520c00663716b4f9 100644 (file)
--- a/public/design/css/style.css
+++ b/public/design/css/style.css
@@ -103,6 +103,13 @@ article > h1 + .updated {
   margin-top: 0;
 }
 
+hr {
+  width: 80%;
+  margin: 4em auto;
+  border: 0;
+  height: 1px;
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+}
 
 /* Typography */
 :is(h1, h2, h3) {
@@ -118,6 +125,7 @@ article > h1 + .updated {
 .updated {
   font-size: 0.8em;
   color: #aaa;
+  margin: 0 !important;
 }
 
 :is(h2, h3):not(:first-child) {
@@ -143,9 +151,19 @@ article + article {
 article img {
   display: block;
   width: 100%;
-  margin: 2rem auto;
+  min-height: 20rem;
+  max-height: 40vh;
+  object-fit: cover;
+  margin: 0 auto 1rem !important;
 }
 
+/*@supports (aspect-ratio: 1) {
+  article img {
+    max-height: unset;
+    aspect-ratio: 3/2;
+  }
+}*/
+
 /* Supporting Content */
 
 code:not([class*="language"]) {
@@ -157,6 +175,17 @@ code:not([class*="language"]) {
   padding-left: 0.15em;
 }
 
+pre code {
+  margin: 2rem 0;
+  padding: 0.5em 1rem;
+  display: block;
+  border-left: 3px solid rgba(0, 0, 0, 0.35);
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 0 0.25rem 0.25rem 0;
+  overflow-x: auto;
+  font-size: 0.8em !important;
+}
+
 blockquote {
   margin: 2rem 0;
   padding: 0.5em 1rem;