fix(open-source): pull #modern styles out of .post

Author: sarmstead

custom-modern-open-source.hbs

@@ -1,13 +1,13 @@
 {{!-- This template is used to render the precise layout of /open-source --}}
-{{!< default}} 
+{{!< default}}
 {{#post}}
   <div id="modern">
-    <div class="{{post_class}}">
+    <div class="container">
       <h1>{{title}}</h1>
       <div class="two-up">{{content}}</div>
     </div>
 
-    <div class="{{post_class}} program-news">
+    <div class="container program-news">
       {{#get "pages" filter="slug:program-news"}}
         {{#foreach pages}}
           <h3>Program News</h3>
@@ -22,7 +22,7 @@
       {{/foreach}}
     {{/get}}
 
-    <div class="{{post_class}} mission-and-vision">
+    <div class="container mission-and-vision">
       {{#get "pages" filter="tag:[hash-oss-our-vision, hash-oss-our-mission]"}}
         {{#foreach pages}}
           <div class="column">
@@ -33,13 +33,13 @@
       {{/get}}
     </div>
 
-    <div class="{{post_class}} projects">
+    <div class="container projects">
       <h2>Projects</h2>
       <h3>Learn more about our current and past efforts</h3>
       <div class="projects-list">
         {{#get "pages" order="featured desc, title asc" filter="tag:[hash-oss-project]"}}
           {{#foreach pages}}
-          <div class="{{post_class}} project">
+          <div class="project">
               <h3>{{title}}</h1>
               {{{html}}}
           </div>
@@ -59,10 +59,10 @@
       </div>
     </div>
 
-    <div class="post" aria-labelledby="team-heading">
+    <div class="container" aria-labelledby="team-heading">
       <h2 id="team-heading">Team</h2>
       <h3>Meet the people behind our program</h3>
-      <div class="grid">
+      <div class="page-open-source__team">
         {{#get "pages" order="featured desc, title asc" filter="tags:hash-oss-team" limit="all" include="feature_image"}}
           {{#foreach pages}}
             <figure>
@@ -78,7 +78,7 @@
         {{/get}}
       </div>
     </div>
-      <div class="{{post_class}} program-support">
+      <div class="container program-support">
         {{#get "pages" filter="tag:[hash-oss-program-support]"}}
         {{#foreach pages}}
         <h2>{{title}}</h2>
@@ -95,4 +95,4 @@
 {{/post}}
 {{#contentFor 'scripts'}}
 <script src="{{asset 'dist/post.js'}}" defer></script>
-{{/contentFor}}
+{{/contentFor}}

src/css/app.css

@@ -22,6 +22,7 @@
 @import './pages/post.css';
 @import './pages/home.css';
 @import './pages/conferences.css';
+@import './pages/open-source.css';
 
 @import './modern.css';
 

src/css/modern.css

@@ -38,11 +38,6 @@
         gap: 2.5rem;
         margin-bottom: 2.5rem;
         margin-top: 2.5rem;
-        padding: 0 0 2.5rem 0;
-
-        h3 {
-            font-size: 42px;
-        }
     }
 
     .post .column img {
@@ -57,7 +52,7 @@
         margin-bottom: 2.5rem;
         margin-top: 2.5rem;
         border-radius: 0.5rem;
-        padding-top: 1rem;
+        padding: 20px;
     }
 
     .program-support span {
@@ -95,7 +90,7 @@
         margin-bottom: 2.5rem;
         margin-top: 2.5rem;
         border-radius: 0.5rem;
-        padding-top: 1rem;
+        padding: 20px;
     }
     .project {
         width: 100%;
@@ -159,7 +154,6 @@
         }
         .mission-and-vision {
             grid-template-columns: 1fr 1fr;
-            padding: 0 2.5rem 4rem 2.5rem;
         }
     }
 
@@ -180,6 +174,10 @@
             max-width: calc((100vw - 900px) / 2);
             padding-right: 2rem;
         }
+
+        .projects, .program-support {
+            padding: 60px;
+        }
     }
 
     .gh-toc .is-active-link::before {
@@ -190,18 +188,6 @@
         text-align: center;
     }
 
-    .grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-        gap: 2.5rem;
-        width: 100%;
-        margin-bottom: 2.5rem;
-    }
-    @media (min-width: 1350px) {
-      .grid {
-        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-      }
-    }
     .team-photo {
         width: 100%;
         height: auto;

src/css/pages/open-source.css

@@ -0,0 +1,18 @@
+.page-open-source {
+    .page-open-source__team {
+        display: grid;
+        grid-template-columns: 1fr;
+    }
+
+    @media (min-width: 834px) {
+        .page-open-source__team {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+    }
+
+    @media (min-width: 1440px) {
+        .page-open-source__team {
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+        }
+    }
+}