feat(jannis-baum#87): mark color

tuurep · Jul 18, 2024 · 673990f · 673990f
1 parent 76a5d86
commit 673990f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 22 deletions.
diff --git a/static/style.css b/static/style.css
@@ -17,13 +17,6 @@ body {
 } 
 .content-txt { max-width: 1200px; }
 
-/* --------------------------------------------------------------------------
- * HEADINGS ----------------------------------------------------------------- */
-h1, h2 {
-    border-bottom: 0.2px solid #444;
-    padding-bottom: 0.75rem;
-}
-
 /* --------------------------------------------------------------------------
  * CODE --------------------------------------------------------------------- */
 pre {
@@ -71,15 +64,6 @@ a#parent-dir {
 }
 a#parent-dir:hover { opacity: 1; }
 
-/* --------------------------------------------------------------------------
- * QUOTES ------------------------------------------------------------------- */
-blockquote {
-    padding: 0 1em;
-    color: #6a6a6a;
-    border-left: .25em solid #353535;
-    margin-left: 0
-}
-
 /* --------------------------------------------------------------------------
  * TABLES ------------------------------------------------------------------- */
 table {
@@ -115,10 +99,6 @@ li[class^='dir-list-']:before { margin-right: 0.5rem; }
 li.dir-list-directory:before { content: '📁' }
 li.dir-list-file:before { content: '📄' }
 
-/* --------------------------------------------------------------------------
- * IMAGES ------------------------------------------------------------------- */
-img, svg { max-width: 100%; }
-
 /* --------------------------------------------------------------------------
  * HORIZONTAL RULE ---------------------------------------------------------- */
 hr {
@@ -179,8 +159,23 @@ dt + dt + dd {
 }                        /* Self height - margin - padding */
 
 /* --------------------------------------------------------------------------
- * KEYBOARD INPUT ----------------------------------------------------------- */
+ * MISCELLANEOUS ------------------------------------------------------------ */
+/* headings */
+h1, h2 {
+    border-bottom: 0.2px solid #444;
+    padding-bottom: 0.75rem;
+}
+/* quotes */
+blockquote {
+    padding: 0 1em;
+    color: #6a6a6a;
+    border-left: .25em solid #353535;
+    margin-left: 0
+}
+/* images */
+img, svg { max-width: 100%; }
 
+/* keyboard */
 kbd {
     background-color: #161616;
     border: 1px solid #242424;
@@ -189,6 +184,12 @@ kbd {
     border-radius: 6px;
 }
 
+/* highlight/mark */
+mark {
+  background-color: rgba(255, 255, 175, 0.8);
+  color: #222;
+}
+
 /* --------------------------------------------------------------------------
  * LIGHT MODE --------------------------------------------------------------- */
 @media (prefers-color-scheme: light) {
@@ -248,4 +249,9 @@ kbd {
         border: 1px solid #eff1f3;
         box-shadow: inset 0 -1px 0 #eff1f3;
     }
+
+    mark {
+        background-color: rgba(255, 255, 175, 1);
+        color: #1f2328;
+    }
 }
diff --git a/tests/markdown-extended.md b/tests/markdown-extended.md
@@ -91,7 +91,18 @@ That is so funny! :joy:
 
 ## Highlight/Mark
 
-I need to highlight/mark these ==very important words==.
+I need to highlight/mark these ==very important words==. There can also be
+longer highlighted sections which may be relevant for testing styles:
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, ==sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Amet justo donec enim diam
+vulputate ut pharetra sit amet. Neque egestas congue quisque egestas diam in.
+Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Massa
+placerat duis ultricies lacus sed turpis tincidunt id aliquet. Lacus sed viverra
+tellus in hac habitasse platea dictumst. Facilisi morbi tempus iaculis urna id.
+Feugiat in fermentum posuere urna. Ultricies tristique nulla aliquet enim
+tortor. Vitae congue mauris rhoncus aenean.== Mi eget mauris pharetra et ultrices
+neque. Tincidunt vitae semper quis lectus nulla.
 
 ## Subscript