heading responsiveness band-aid fix

Ultramarine-Linux · Aug 11, 2024 · 30b6857 · 30b6857
1 parent 783e073
commit 30b6857
Showing 1 changed file with 49 additions and 20 deletions.
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -35,11 +35,11 @@ nav ul {
   padding: 0;
 }
 
-.content > section > * + * {
+.content>section>*+* {
   margin-top: 1.25rem;
 }
 
-.content > section > :first-child {
+.content>section> :first-child {
   margin-top: 0;
 }
 
@@ -69,24 +69,47 @@ h2 {
 }
 
 h1 {
-  font-size: 3.25rem;
+  font-size: 220%;
   font-weight: 800;
 }
 
 h2 {
-  font-size: 2.5rem;
+  font-size: 190%;
 }
 
 h3 {
-  font-size: 1.75rem;
+  font-size: 160%;
 }
 
 h4 {
-  font-size: 1.3rem;
+  font-size: 135%;
 }
 
 h5 {
-  font-size: 1rem;
+  font-size: 110%;
+}
+
+@media (min-width: 800px) {
+  h1 {
+    font-size: 3.25rem;
+    font-weight: 800;
+  }
+
+  h2 {
+    font-size: 2.5rem;
+  }
+
+  h3 {
+    font-size: 1.75rem;
+  }
+
+  h4 {
+    font-size: 1.3rem;
+  }
+
+  h5 {
+    font-size: 1rem;
+  }
 }
 
 p {
@@ -115,50 +138,50 @@ a {
   gap: 0.5rem;
 }
 
-article > section :is(ul, ol) > * + * {
+article>section :is(ul, ol)>*+* {
   margin-top: 0.75rem;
 }
 
-article > section nav :is(ul, ol) > * + * {
+article>section nav :is(ul, ol)>*+* {
   margin-top: inherit;
 }
 
-article > section li > :is(p, pre, blockquote):not(:first-child) {
+article>section li> :is(p, pre, blockquote):not(:first-child) {
   margin-top: 1rem;
 }
 
-article > section :is(ul, ol) {
+article>section :is(ul, ol) {
   padding-left: 1em;
 }
 
-article > section nav :is(ul, ol) {
+article>section nav :is(ul, ol) {
   padding-left: inherit;
 }
 
-article > section nav {
+article>section nav {
   margin-top: 1rem;
   margin-bottom: 2rem;
 }
 
-article > section ::marker {
+article>section ::marker {
   font-weight: bold;
   color: var(--theme-text-light);
 }
 
-article > section iframe {
+article>section iframe {
   width: 100%;
   height: auto;
   aspect-ratio: 16 / 9;
 }
 
-a > code {
+a>code {
   position: relative;
   color: var(--theme-text-accent);
   background: transparent;
   text-underline-offset: var(--padding-block);
 }
 
-a > code::before {
+a>code::before {
   content: "";
   position: absolute;
   top: 0;
@@ -203,11 +226,11 @@ code {
   word-break: break-word;
 }
 
-pre.astro-code > code {
+pre.astro-code>code {
   all: unset;
 }
 
-pre > code {
+pre>code {
   font-size: 1em;
 }
 
@@ -239,11 +262,13 @@ table {
 tr:nth-of-type(odd) {
   background: var(--theme-bg-hover);
 }
+
 th {
   background: var(--color-black);
   color: var(--theme-color);
   font-weight: bold;
 }
+
 td,
 th {
   padding: 6px;
@@ -358,9 +383,11 @@ h2.heading {
   color: var(--theme-text);
   text-decoration: underline;
 }
+
 .header-link svg {
   opacity: 0.6;
 }
+
 .header-link:hover svg {
   opacity: 0.8;
 }
@@ -369,9 +396,11 @@ h2.heading {
 .header-link {
   padding-inline-start: 1rem;
 }
+
 .header-link.depth-3 {
   padding-inline-start: 2rem;
 }
+
 .header-link.depth-4 {
   padding-inline-start: 3rem;
 }
@@ -461,4 +490,4 @@ pre.astro-code:hover button {
 
 .full-width {
   width: 100%;
-}
+}