Add text section styling.

RubenVerborgh · Mar 2, 2023 · 8849eb3 · 8849eb3
1 parent ffbbb04
commit 8849eb3
Showing 1 changed file with 65 additions and 4 deletions.
diff --git a/_shared/styles/web-fundamentals.css b/_shared/styles/web-fundamentals.css
@@ -1,5 +1,6 @@
 .shower {
   --accent: #453688;
+  --gray: #737373;
 }
 
 html, body:not(.full) {
@@ -94,14 +95,71 @@ nav h2 {
 
 nav ol {
   counter-reset: topic;
-
   margin-left: 1em;
 }
 nav ol li:before {
   counter-increment: topic;
   content: counter(topic) '. '; */
 }
 
+/* Text sections */
+
+.shower > section {
+  width: 100%;
+  font-size: 50%;
+  padding: 0 1.6em 2em;
+  line-height: 1.5;
+}
+
+@media (min-width:1174px) {
+  .shower > section {
+    font-size: 66%;
+    padding: 0 2.4em 2.5em;
+  }
+}
+
+@media (min-width:2348px) {
+  .shower > section {
+    font-size: 133%;
+  }
+}
+
+.shower.full > section {
+  display: none;
+}
+
+.shower > section h2 {
+  font-size: 1.5em;
+  font-weight: bold;
+  color: var(--accent);
+}
+.shower > section h3 {
+  margin-top: .5em;
+  font-size: 1.2em;
+  font-weight: bold;
+}
+.shower > section h4 {
+  font-weight: bold;
+  margin-left: 2em;
+}
+
+.shower > section li {
+  margin-left: 3em;
+}
+
+.shower > section a {
+  color: var(--accent);
+}
+.shower > section a[href*="ugent.be"]:after {
+  content: " 🔐";
+}
+.shower > section a:hover {
+  text-decoration: underline;
+}
+.shower > section cite a {
+  font-style: italic;
+}
+
 /* General */
 .slide h3 {
   margin-bottom: 0;
@@ -449,16 +507,19 @@ blockquote.white::before {
 .do .example, .dont .example {
   min-height: 210px;
 }
+.do ul li, .dont ul li {
+  margin: 0;
+  font-weight: normal;
+  font-style: italic;
+  color: #737373;
+}
 .do + ul {
   margin: 0;
   bottom: 42px;
   position: absolute;
 }
 .do + ul li {
   margin: 0;
-  font-weight: normal;
-  font-style: italic;
-  color: #737373;
 }
 
 /* Queries */