feat(Elife): Responsive title typography

stencila · Apr 24, 2020 · d01c883 · d01c883
1 parent 268dd32
commit d01c883
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/themes/elife/custom-properties.css b/src/themes/elife/custom-properties.css
@@ -4,6 +4,8 @@
 
   /* Typography */
   --text-size-rem-small: 0.6875;
+  --text-size-h1--narrow-rem: 1.8125rem; /* 29px */
+  --text-size-h1--normal-rem: 2.25rem; /* 36px */
   --letter-spacing: 0.5px;
 
   /* Spacing */

diff --git a/src/themes/elife/styles.css b/src/themes/elife/styles.css
@@ -68,6 +68,18 @@ main {
   & > :--datePublished {
     text-align: center;
   }
+
+  & > :--title {
+    font-size: var(--text-size-h1--narrow-rem);
+    line-height: calc(36 / 29);
+  }
+}
+
+@media all and (--medium-viewport) {
+  :--Article:not(:--reference) > :--title {
+    font-size: var(--text-size-h1--normal-rem);
+    line-height: calc(48 / 36);
+  }
 }
 
 /* Visually hide affiliations at narrower viewports, maintaining vertical whitespace */