un-nest new css

flatironinstitute · Mar 14, 2024 · 14fffb6 · 14fffb6
1 parent b6f4df3
commit 14fffb6
Showing 1 changed file with 108 additions and 74 deletions.
diff --git a/assets/css/main-v2.css b/assets/css/main-v2.css
@@ -45,7 +45,10 @@ body {
   color: var(--primary-text);
   font-size: 16pt;
   font-weight: 400;
-  @media (min-width: 1000px) {
+}
+
+@media (min-width: 1000px) {
+  body {
     display: grid;
     min-height: 100dvh;
     grid-template-columns: 35% 1fr;
@@ -59,23 +62,29 @@ main {
   row-gap: 3rem;
   padding: 2.25em 1.5em 0.25em 1.5em;
   max-width: 60rem;
-  h2 {
-    color: var(--primary-text-dark);
-    font-size: 1.2rem;
-    line-height: 1;
-    margin-bottom: 1rem;
-  }
-  section {
-    font-size: 12pt;
-    line-height: 1.5;
-    padding-top: 3rem;
-    border-top: solid 2px #efefef;
-  }
-  section:first-child {
-    border-top: none;
-    padding-top: 0;
-  }
-  @media (min-width: 1000px) {
+}
+
+main h2 {
+  color: var(--primary-text-dark);
+  font-size: 1.2rem;
+  line-height: 1;
+  margin-bottom: 1rem;
+}
+
+main section {
+  font-size: 12pt;
+  line-height: 1.5;
+  padding-top: 3rem;
+  border-top: solid 2px #efefef;
+}
+
+main section:first-child {
+  border-top: none;
+  padding-top: 0;
+}
+
+@media (min-width: 1000px) {
+  main {
     height: 100%;
     grid-column-start: 2;
     grid-row: span 2 / span 2;
@@ -88,53 +97,66 @@ section#upcoming ul {
   padding: 0;
   margin: 0;
   margin-top: 3rem;
-  li {
-    display: grid;
-    row-gap: 1rem;
-    @media (min-width: 1000px) {
-      grid-template-columns: max-content 1fr;
-      column-gap: 3rem;
-    }
-  }
-  h3,
-  [data-type="date"] {
-    color: var(--primary-text-dark);
-    font-size: 1.5rem;
-  }
-  h3 {
-    line-height: 1.3;
-    margin-bottom: 1rem;
-  }
-  [data-type="date"] {
-    line-height: 1.2;
+}
+
+section#upcoming ul li {
+  display: grid;
+  row-gap: 1rem;
+}
+
+@media (min-width: 1000px) {
+  section#upcoming ul li {
+    grid-template-columns: max-content 1fr;
+    column-gap: 3rem;
   }
 }
 
+section#upcoming ul li h3,
+section#upcoming ul li [data-type="date"] {
+  color: var(--primary-text-dark);
+  font-size: 1.5rem;
+}
+
+section#upcoming ul li h3 {
+  line-height: 1.3;
+  margin-bottom: 1rem;
+}
+
+section#upcoming ul li [data-type="date"] {
+  line-height: 1.2;
+}
 section#past ul {
   list-style: none;
   padding: 0;
   margin: 0;
-  li > * + * {
-    margin-left: 0.5rem;
-  }
-  li {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    border-top: solid 2px #efefef;
-    &:first-child {
-      border-top: none;
-    }
-  }
+}
+
+section#past ul li > * + * {
+  margin-left: 0.5rem;
+}
+
+section#past ul li {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-top: solid 2px #efefef;
+}
+
+section#past ul li:first-child {
+  border-top: none;
 }
 
 section#about {
   padding-bottom: 2rem;
-  .columns {
-    display: grid;
-    @media (min-width: 1000px) {
-      grid-template-columns: 1fr max-content;
-      column-gap: 3rem;
-    }
+}
+
+section#about .columns {
+  display: grid;
+}
+
+@media (min-width: 1000px) {
+  section#about .columns {
+    grid-template-columns: 1fr max-content;
+    column-gap: 3rem;
   }
 }
 
@@ -148,15 +170,20 @@ header {
   flex-direction: column;
   align-items: center;
   text-align: center;
-  h1 {
-    /* font-size: 1.75rem; */
-    font-size: clamp(0.9rem, 7cqi, 2rem);
-    line-height: 1.3;
-    a {
-      color: inherit;
-    }
-  }
-  @media (min-width: 1000px) {
+}
+
+header h1 {
+  /* font-size: 1.75rem; */
+  font-size: clamp(0.9rem, 7cqi, 2rem);
+  line-height: 1.3;
+}
+
+header h1 a {
+  color: inherit;
+}
+
+@media (min-width: 1000px) {
+  header {
     align-items: flex-end;
     text-align: right;
     height: 100%;
@@ -168,19 +195,26 @@ footer {
   padding: 1em 3em;
   background: var(--primary);
   color: var(--primary-foreground);
-  @media (min-width: 1000px) {
+}
+
+@media (min-width: 1000px) {
+  footer {
     height: 100%;
   }
-  ul.icons {
-    list-style: none;
-    font-size: 1.5rem;
-    color: var(--primary-foreground);
-    display: flex;
-    justify-content: center;
-    column-gap: 1rem;
-    @media (min-width: 1000px) {
-      justify-content: flex-end;
-    }
+}
+
+footer ul.icons {
+  list-style: none;
+  font-size: 1.5rem;
+  color: var(--primary-foreground);
+  display: flex;
+  justify-content: center;
+  column-gap: 1rem;
+}
+
+@media (min-width: 1000px) {
+  footer ul.icons {
+    justify-content: flex-end;
   }
 }