Use more full width content

Author: rmosolgo

guides/_config.yml

@@ -21,6 +21,7 @@ defaults:
       path: ""
     values:
       layout: "default"
+      fullwidth: true
 
 algolia:
   application_id: '8VO8708WUV'

guides/_layouts/default.html

@@ -53,27 +53,29 @@
           <a href="{{ site.baseurl }}/" class="img-link">
             <img class="graphql-ruby-img" src="{{ site.baseurl }}/graphql-ruby.png" alt="GraphQL Ruby Logo" />
           </a>
-          <a href="{{ site.baseurl }}/getting_started">Get Started</a>
-          <a href="{{ site.baseurl }}/guides">Guides</a>
-          <a href="{% api_doc_root %}">API</a>
-          <a href="https://buttondown.email/graphql-ruby">Newsletter</a>
-          <a href="https://github.com/rmosolgo/graphql-ruby">Source Code</a>
-          <a href="https://graphql.pro">Upgrade to Pro</a>
-          <input
-            class="search-input"
-            onkeyup="GraphQLRubySearch.run(this)"
-            type="text"
-            placeholder="Search the docs..."
-          />
-          <a href="#" onclick="event.preventDefault(); detectDarkTheme(true)" class="dark-theme-button"></a>
+          <div class="nav-links">
+            <a href="{{ site.baseurl }}/getting_started">Get Started</a>
+            <a href="{{ site.baseurl }}/guides">Guides</a>
+            <a href="{% api_doc_root %}">API</a>
+            <a href="https://buttondown.email/graphql-ruby">Newsletter</a>
+            <a href="https://github.com/rmosolgo/graphql-ruby">Source Code</a>
+            <a href="https://graphql.pro">Upgrade to Pro</a>
+            <input
+              class="search-input"
+              onkeyup="GraphQLRubySearch.run(this)"
+              type="text"
+              placeholder="Search the docs..."
+            />
+            <a href="#" onclick="event.preventDefault(); detectDarkTheme(true)" class="dark-theme-button"></a>
+          </div>
         </div>
       </div>
       <div class="search-results-container">
         <div id="search-results">
         </div>
       </div>
     </div>
-    <div class="container">
+    <div class="container {% if page.fullwidth %} fullwidth {% endif %}">
       {{ content }}
     </div>
     <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearchLite.min.js"></script>

guides/css/main.scss

@@ -92,6 +92,11 @@ strong, b {
     align-items: center;
     $fade-time: 0.2s;
 
+    .nav-links {
+      margin-left: auto;
+      display: flex;
+    }
+
     .img-link {
       transition: background $fade-time;
 
@@ -133,12 +138,15 @@ strong, b {
 }
 
 .header-container {
-  max-width: 1240px;
-  margin: 0px auto;
+  margin: 0px 20px 0px 20px;
 }
 
 .container {
   max-width: 1200px;
+  &.fullwidth {
+    max-width: 100%;
+    margin: 0px 20px 0px 20px;
+  }
   margin: 0px auto;
   padding: 10px 20px;
   background: $container-color;
@@ -448,8 +456,6 @@ table {
   margin: 10px;
   border: 1px solid $subtle-color;
   border-radius: 3px;
-  // make it float right in a flex container
-  margin-left: auto;
 }
 
 .search-results-container {

guides/index.html

@@ -1,5 +1,6 @@
 ---
 title: Welcome
+fullwidth: false
 ---
 <div class="hero">
   <div class="hero-title">