fix(corporate-sponsorship): pull #modern styles out of .post

Author: sarmstead

custom-modern-corporate-sponsorship-program.hbs

@@ -1,12 +1,12 @@
 {{!-- This template is used to render the precise layout of /corporate-sponsorship --}}
-{{!< default}} 
+{{!< default}}
 {{#post}}
   <div id="modern">
-    <div class="{{post_class}}">
+    <div class="container">
       <h1>{{title}}</h1>
       <div>{{content}}</div>
     </div>
-    <div class="{{post_class}} corporate-sponsors">
+    <div class="container corporate-sponsors">
       <div class="level ruby">
         <div class="name"><h3>Ruby</h3></div>
         <div class="bucket">
@@ -44,7 +44,7 @@
         </div>
       </div>
     </div>
-    <div class="{{post_class}}">
+    <div class="container">
       {{#get "pages" filter="slug:benefits-of-supporting-ruby-central"}}
       {{#foreach pages}}
         <h3>{{title}}</h3>
@@ -53,7 +53,7 @@
       {{/get}}
     </div>
 
-    <div class="{{post_class}} program-news">
+    <div class="container program-news">
       {{#get "pages" filter="slug:program-news"}}
       {{#foreach pages}}
         <h3>Program News</h3>
@@ -67,7 +67,7 @@
       {{/foreach}}
     {{/get}}
     </div>
-    <div class="{{post_class}}">
+    <div class="container">
       {{#get "pages" filter="slug:more-corporate-sponsorship-details"}}
       {{#foreach pages}}
         <div>{{content}}</div>
@@ -77,4 +77,4 @@
 {{/post}}
 {{#contentFor 'scripts'}}
 <script src="{{asset 'dist/post.js'}}" defer></script>
-{{/contentFor}}
+{{/contentFor}}

src/css/app.css

@@ -14,6 +14,7 @@
 @import './layout/reset.css';
 @import './layout/navigation.css';
 @import './layout/dropdown.css';
+@import './layout/container.css';
 /* @import './layout/header.css'; */
 /* @import './layout/footer.css'; */
 

src/css/base/typography.css

@@ -5,7 +5,7 @@ body {
     color: var(--text);
     font-family: 'Inter', sans-serif;
     font-size: 1rem;
-    line-height: 1.4rem;
+    line-height: 1.5rem;
 }
 
 h1,
@@ -21,7 +21,7 @@ h6 {
 }
 
 p {
-    margin: 0;
+    margin-bottom: 16px;
 }
 
 h2 {

src/css/layout/container.css

@@ -0,0 +1,26 @@
+.container,
+.container--full-width {
+    margin: 0 auto;
+}
+
+.container {
+    max-width: 1135px;
+    padding: 0 20px;
+    width: 100%;
+}
+
+.container--full-width {
+    max-width: unset;
+}
+
+@media (min-width: 834px) {
+    .container {
+        padding: 0 40px;
+    }
+}
+
+@media (min-width: 1440px) {
+    .container {
+        padding: 0;
+    }
+}

src/css/modern.css

@@ -230,18 +230,23 @@
         width: 45%;
     }
     .level .name {
-        text-align: center;
         padding: 1rem 0 0.25rem 0;
         margin: auto;
         border-top-left-radius: .75rem;
         border-top-right-radius: .75rem;
+
+        h3 {
+            text-align: center;
+
+        }
     }
 
     .corporate-sponsors {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         gap: 1rem;
+        margin-top: 48px;
     }
     .level.ruby, .level.gold {
         flex: 1 1 100%;