Modern (#23)

📗 

New layout details to support Corporate Sponsors page and consolidate
styles with recent Open Source page changes.

custom-modern-open-source.hbs

@@ -0,0 +1,97 @@
+{{!< default}} 
+{{#post}}
+  <div id="modern">
+    <div class="{{post_class}}">
+      <h1>{{title}}</h1>
+      <div class="two-up">{{content}}</div>
+    </div>
+
+    <div class="{{post_class}} program-news">
+      {{#get "pages" filter="slug:program-news"}}
+        {{#foreach pages}}
+          <h2>Program News</h2>
+          <ul>
+            {{#get "posts" order="desc, title asc" filter="tag:[news]"}}
+              {{#foreach posts limit="3"}}
+                <li>{{#link href=(url)}}{{title}}{{/link}}</li>
+              {{/foreach}}
+            {{/get}}
+          </ul>
+        </div>
+      {{/foreach}}
+    {{/get}}
+
+    <div class="{{post_class}} mission-and-vision">
+      {{#get "pages" filter="tag:[hash-oss-our-vision, hash-oss-our-mission]"}}
+        {{#foreach pages}}
+          <div class="column">
+            <h3>{{title}}</h3>
+            {{{html}}}
+          </div>
+        {{/foreach}}
+      {{/get}}
+    </div>
+
+    <div class="{{post_class}} 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">
+              <h3>{{title}}</h1>
+              {{{html}}}
+          </div>
+          {{/foreach}}
+        {{/get}}
+      </div>
+      <div class="contribute">
+        {{#get "pages" filter="tag:[hash-oss-contribute]"}}
+        {{#foreach pages}}
+        {{#if feature_image}}
+        <img src="{{feature_image}}" alt="{{title}}" class="feature-image">
+        {{/if}}
+        <h3>{{title}}</h1>
+        <div>{{content}}</div>
+        {{/foreach}}
+        {{/get}}
+      </div>
+    </div>
+
+    <div class="post" aria-labelledby="team-heading">
+      <h2 id="team-heading">Team</h2>
+      <h3>Meet the people behind our program</h3>
+      <div class="grid">
+        {{#get "pages" order="featured desc, title asc" filter="tags:hash-oss-team" limit="all" include="feature_image"}}
+          {{#foreach pages}}
+            <figure>
+              {{#if feature_image}}
+                <img src="{{feature_image}}" alt="{{title}}" class="feature-image team-photo">
+              {{/if}}
+              <figcaption class="team-info">
+                <p class="team-name">{{title}}</p>
+                {{content}}
+              </figcaption>
+            </figure>
+          {{/foreach}}
+        {{/get}}
+      </div>
+    </div>
+      <div class="{{post_class}} program-support">
+        {{#get "pages" filter="tag:[hash-oss-program-support]"}}
+        {{#foreach pages}}
+        <h2>{{title}}</h2>
+        {{{content}}}
+        <span>Program-Specific Funding</span>
+        <span>Donated Services</span>
+        <span>Memberships</span>
+        <span>Corporate Sponsorships</span>
+      </div>
+      {{/foreach}}
+      {{/get}}
+      </div>
+  </div>
+{{/post}}
+{{#contentFor 'scripts'}}
+<script src="{{asset 'dist/post.js'}}" defer></script>
+{{/contentFor}}

custom-modern.hbs

@@ -0,0 +1,15 @@
+{{!< default}}
+{{#post}}
+<div id="modern">
+  <div class="{{post_class}}">
+    <h1>{{title}}</h1>
+      <aside class="gh-sidebar">
+        <div class="gh-toc"></div>
+      </aside>
+      <div class="post-content">{{content}}</div>
+    </div>
+</div>
+{{/post}}
+{{#contentFor 'scripts'}}
+<script src="{{asset 'dist/post.js'}}" defer></script>
+{{/contentFor}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rubycentral-theme",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A Ghost theme for Ruby Central",
   "engines": {
     "ghost": ">=4.0.0"

src/css/app.css

@@ -19,7 +19,7 @@
 /* @import './pages/content.css'; */
 
 @import './rubycentral.css';
-@import './open-source.css';
+@import './modern.css';
 
 /* Vendor */
 @import './vendors/ghost.css';

src/css/layout/navigation.css

@@ -12,14 +12,18 @@ footer ul {
   font-size: var(--small);
 }
 
-nav, nav ul {
+nav,
+nav ul {
   display: flex;
   width: 100%;
+  align-items: center;
+  max-width: 1024px;
   justify-content: space-between;
+  margin: 0 auto;
 }
 
 nav .logo-circle {
-  transition: transform .25s ease-in-out;
+  transition: transform 0.25s ease-in-out;
   flex-shrink: 0;
   width: 30px;
   height: 30px;
@@ -28,18 +32,14 @@ nav .logo-circle {
   margin: 10px 0 0 0;
   border-radius: 30px;
   box-shadow: 0 9px 18px rgba(129, 0, 0, 0.3), 0 2px 5px rgba(137, 0, 0, 0.2);
-  background: no-repeat center 6px / 80% url(/assets/images/gem-logo.svg), linear-gradient(to top, #DF3434 0%, #FB5E55 100%);
+  background: no-repeat center 6px / 80% url(/assets/images/gem-logo.svg),
+    linear-gradient(to top, #df3434 0%, #fb5e55 100%);
 }
 
 nav .logo-circle {
   transform: scale(1.05);
 }
 
-nav > ul > li:last-child {
-  margin-left: auto;
-  margin-right: 1.5rem;
-}
-
 footer {
   padding: 130px 0;
   text-align: center;
@@ -60,15 +60,15 @@ nav > ul > li:last-child > a {
 }
 
 nav li.subitem {
-    text-align: center;
+  text-align: center;
 }
 
 footer ul.nav a {
   padding: 15px 20px;
 }
 footer .nav .nav-contact-us > a > span {
   background-attachment: local;
-  background-image: url("/assets/images/contact-icon.svg");
+  background-image: url('/assets/images/contact-icon.svg');
   background-clip: padding-box;
   background-origin: padding-box;
   background-repeat: no-repeat;
@@ -133,19 +133,19 @@ nav .menu-icon.close {
     margin: 4.5rem 0px;
     z-index: 2;
     background: #fff;
-    border: 2px solid #F4EEE6;
+    border: 2px solid #f4eee6;
     border-top: none;
     border-radius: 0 0 0 20px;
-    transition: right .4s ease-in-out;
+    transition: right 0.4s ease-in-out;
     box-shadow: -4px 4px 5px rgba(253, 204, 204, 0.3);
   }
 
   nav ul:before {
-    content: "";
+    content: '';
     position: absolute;
     left: -203%;
     top: 0;
-    border: 2px solid #F4EEE6;
+    border: 2px solid #f4eee6;
     border-left: none;
     border-bottom: none;
     border-radius: 0 20px 0 0;
@@ -174,7 +174,7 @@ nav .menu-icon.close {
   }
 
   nav ul {
-    width: 50%
+    width: 50%;
   }
 
   nav ul::before {