Merge pull request #586 from jupyter/tidy-container

Refactored container for simplicity
jupyter · Dec 31, 2021 · 9956b8c · 9956b8c
2 parents 193fd41 + ff5cbcc
commit 9956b8c
Show file tree

Hide file tree

Showing 15 changed files with 62 additions and 171 deletions.
diff --git a/_includes/cards.html b/_includes/cards.html
@@ -1,5 +1,5 @@
 
-    <div class="row">
+    <div class="row content content--wide">
        <h4 class="col-sm-12">{{include.cohort_name}}</h4>
       {% assign sorted = include.cohort | sort: "name" %}
       {% for member in sorted %}

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -9,9 +9,9 @@
     image_alt=page.title_image_alt
 %}
 
-<article class="post-content">
+<article>
   <div class="section-white top-section-border">
-    <div class="page_content container">
+    <div class="container content content--copy">
       {{ content }}
     </div>
   </div>

diff --git a/_sass/_about.scss b/_sass/_about.scss
@@ -1,9 +1,3 @@
-/* Styling for the Sponsor logos on About page*/
-.about-section .row {
-    padding-left: 30px;
-    padding-right: 30px;
-}
-
 #donate-link {
     margin: 20px auto 0px auto;
     width: 240px;
@@ -15,7 +9,7 @@
 }
 
 /* .Card-header, .card-info, .card-link, and .material are used for cards within the steering council section of the page. */
-div.page_content img.council-member-photo {
+img.council-member-photo {
     width: 160px;
     height: 160px;
     border-top-left-radius: 2px;

diff --git a/_sass/_markdown.scss b/_sass/_markdown.scss
@@ -1,58 +1,3 @@
-/* Page content */
-div.page_content img {
-  height:200px;
-  width: 60%;
-  margin: 0px 20%;
-}
-
-div.page_content, div.post_content {
-  padding: 0;
-  margin: 0px auto;
-  max-width: 980px;
-}
-
-div.page_content.container > p,
-div.page_content.container > h1,
-div.page_content.container > h2,
-div.page_content.container > h3,
-div.page_content.container > h4,
-div.page_content.container > div.highlighter-rouge
-{
-    padding-left:30px;
-    padding-right: 30px;
-}
-
-div.page_content.container > iframe {
-    margin-left: 30px;
-}
-
-div.page_content.container > ul {
-    padding-left: 50px;
-}
-
-
-.clear {
-  clear: both;
-}
-
-/*Styling for the community section */
-/* Style for inter-repo links */
-.link1 {
-  stroke: white;
-  stroke-width: 1;
-}
-
-/* Style for repo-contributor links */
-.link2 {
-  stroke: #e6e6e6;
-  stroke-width: 2;
-}
-
-.node text {
-  pointer-events: none;
-  font: 0px sans-serif;
-}
-
 img.section-icon {
   max-width:60px;
   max-height:60px;

diff --git a/_sass/_nav.scss b/_sass/_nav.scss
@@ -1,9 +1,3 @@
-body {
-    font-weight: 400;
-    /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
-    padding-top: 70px;
-}
-
 .jupytercon-nav > li > .black-tab {
     color: black;
 }
@@ -290,7 +284,7 @@ body {
     border-radius: 2px;
     color: white;
     letter-spacing: 1px;
-    padding: 13px 60px;
+    padding: 13px;
     text-decoration: none;
     -webkit-transition: .2s;
 }
@@ -327,13 +321,6 @@ body {
     }
 }
 
-/* all elements in .containers that have a anchor 
- * need to be scrolled by at least 3 em to not be behind the hidden header.
- */
-.container *{
-    scroll-margin-top: 3em;
-}
-
 /* Medium devices (desktops, 992px and up) */
 @media (min-width: 992px) {
     p {
@@ -463,11 +450,6 @@ body {
 
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {
-    .container {
-        margin-left:10px;
-        margin-right:10px;
-        width: calc(100% - 20px);
-    }
     .tab {
         text-align: center;
     }
@@ -494,13 +476,6 @@ body {
         font-weight: 500;
         line-height: 1.153em;
     }
-    .companies li {
-        width: 30%;
-        padding: 4%;
-    }
-    body {
-        padding-top: 50px;
-    }
 }
 
 /* Extra small devices (these are mostly fixes to make sure elements act correctly to look good) */

diff --git a/_sass/bootstrap/_container.scss b/_sass/bootstrap/_container.scss
diff --git a/_sass/bootstrap/_index.scss b/_sass/bootstrap/_index.scss
@@ -22,6 +22,5 @@
 @import "text";         // <p> tags
 @import "lists";        // <ol> and <ul> tags
 @import "code";         // <code> and <pre> tags
-@import "container";    // The .container class
 @import "scaffolding";  // Row and column gridding
 @import "jumbotron";    // The large hero element atop the page
diff --git a/_sass/bootstrap/_scaffolding.scss b/_sass/bootstrap/_scaffolding.scss
@@ -1,7 +1,3 @@
-.row {
-  margin-right: -15px;
-  margin-left: -15px;
-}
 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
   position: relative;
   min-height: 1px;

diff --git a/_sass/components/_containers.scss b/_sass/components/_containers.scss
@@ -0,0 +1,14 @@
+.container {
+  padding-right: 1em;
+  padding-left: 1em;
+}
+.content {
+  margin-right: auto;
+  margin-left: auto;
+  &.content--copy {
+     max-width: 630px;
+  }
+  &.content--wide {
+     max-width: 930px;
+  }
+}
diff --git a/_sass/components/_navbar.scss b/_sass/components/_navbar.scss
@@ -2,11 +2,6 @@
 
 .navbar {
     display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1030;
     border-bottom: 1px solid darken($light-gray, 10%);
     background-color: $white;
     padding: 15px 25px;

diff --git a/_sass/components/_page-header.scss b/_sass/components/_page-header.scss
@@ -5,6 +5,7 @@
     text-align: center;
     background-color: $light-gray;
     h1 {
+        margin: 0;
         font-size: 2.5em;
         line-height: 1.3;
         @media (max-width: 767px) {

diff --git a/about.md → about.html b/about.md → about.html
@@ -1,5 +1,5 @@
 ---
-layout: page
+layout: default
 title: "About Us"
 tagline: Project Jupyter’s origins and governance
 permalink: /about
@@ -376,23 +376,28 @@
     alt: 2i2c logo
 ---
 
-Project Jupyter is a non-profit, open-source project, born out of the [IPython Project](https://ipython.org) in 2014 as
-it evolved to support interactive data science and scientific computing across all programming languages. Jupyter will
-always be 100% open-source software, free for all to use and released under the liberal terms of the
-[modified BSD license](https://opensource.org/licenses/BSD-3-Clause).
+{% include page-header.html
+    title=page.title
+    tagline=page.tagline
+%}
 
-Jupyter is developed in the open on GitHub, through the consensus of the Jupyter community. For more information on our
-governance approach, please see our [Governance Document](https://github.com/jupyter/governance/blob/master/governance.md).
+<article class="container">
+  <div class="section-white top-section-border">
+    <div class="content content--copy">
 
-All online and in-person interactions and communications directly related to the project are covered by the
-[Jupyter Code of Conduct](https://github.com/jupyter/governance/blob/master/conduct/code_of_conduct.md).
-This Code of Conduct sets expectations to enable a diverse community of
-users and contributors to participate in the project with respect and safety.
+        <p>Project Jupyter is a non-profit, open-source project, born out of the <a href="https://ipython.org">IPython Project</a> in 2014 as it evolved to support interactive data science and scientific computing across all programming languages. Jupyter will always be 100% open-source software, free for all to use and released under the liberal terms of the <a href="https://opensource.org/licenses/BSD-3-Clause">modified BSD license</a>.</p>
+
+        <p>Jupyter is developed in the open on GitHub, through the consensus of the Jupyter community. For more information on our governance approach, please see our <a href="https://github.com/jupyter/governance/blob/master/governance.md">Governance Document</a>.</p>
+
+   <p>All online and in-person interactions and communications directly related to the project are covered by the <a href="https://github.com/jupyter/governance/blob/master/conduct/code_of_conduct.md">Jupyter Code of Conduct</a>. This Code of Conduct sets expectations to enable a diverse community of users and contributors to participate in the project with respect and safety.</p>
+
+    </div>
+</div>
 
 <div class="about-section section-white top-section-border">
-    <div class="row">
-    <h3 class="col-sm-12 section-header">Distinguished Contributors</h3>
-    <p class="col-sm-12">
+    <div class="row content content--copy">
+    <h3 class="section-header">Distinguished Contributors</h3>
+    <p>
       Project Jupyter <a href="https://jupyter.org/governance/distinguished_contributors.html">Distinguished
       Contributors</a> are recognized for their substantial contributions
       to Jupyter itself in both quality and quantity over at least two
@@ -409,16 +414,16 @@ <h3 class="col-sm-12 section-header">Distinguished Contributors</h3>
 </div>
 
 <div id="steering-council" class="about-section section-white top-section-border">
-    <div class="row">
+    <div class="row content content--copy">
         <img src="{{site.url}}/assets/steering.svg" class="section-icon img-responsive" alt="steering committee icon">
-        <h3 class="col-sm-12 section-header">Steering Council</h3>
-        <p class="col-sm-12">
+        <h3 class="section-header">Steering Council</h3>
+        <p>
         The role of the Jupyter Steering Council is to ensure, through working with and serving the broader Jupyter community,
         the long-term well-being of the project, both technically and as a community. The Jupyter Steering Council currently consists
         of the following members (in alphabetical order).
         </p>
     </div>
-    <div class="row">
+    <div class="row content content--wide">
         {% assign sorted = page.steering | sort: "last" %}
         {% for member in sorted %}
         <div class="col-sm-3 col-xs-6 material section-content section-center">
@@ -431,10 +436,10 @@ <h3 class="col-sm-12 section-header">Steering Council</h3>
 
     <hr>
     {% assign num = page.numfocus_subcomittee | size %}
-    <div class="row">
-        <h3 class="col-sm-12 section-header">NumFOCUS Subcommittee Member{% if num > 1 %}s{% endif %}</h3>
+    <div class="row content content--copy">
+        <h3 class="section-header">NumFOCUS Subcommittee Member{% if num > 1 %}s{% endif %}</h3>
     </div>
-    <div class="row">
+    <div class="row content content--wide">
         {% assign sorted = page.numfocus_subcomittee | sort: "last" %}
         {% for member in sorted  %}
             <div class="col-sm-3 col-xs-6 material">
@@ -448,10 +453,10 @@ <h3 class="col-sm-12 section-header">NumFOCUS Subcommittee Member{% if num > 1 %
 
     <hr>
     {% assign num = page.trademark_subcomittee | size %}
-    <div class="row">
-        <h3 class="col-sm-12 section-header">Trademark Subcommittee Member{% if num > 1 %}s{% endif %}</h3>
+    <div class="row content content--copy">
+        <h3 class="section-header">Trademark Subcommittee Member{% if num > 1 %}s{% endif %}</h3>
     </div>
-    <div class="row">
+    <div class="row content content--wide">
         {% assign sorted = page.trademark_subcomittee | sort: "last" %}
         {% for member in sorted  %}
             <div class="col-sm-3 col-xs-6 material">
@@ -465,10 +470,10 @@ <h3 class="col-sm-12 section-header">Trademark Subcommittee Member{% if num > 1
 
     <hr>
     {% assign num = page.retired_steering | size %}
-    <div class="row">
-        <h3 class="col-sm-12 section-header">Retired Steering Council Member{% if num > 1 %}s{% endif %}</h3>
+    <div class="row content content--copy">
+        <h3 class="section-header">Retired Steering Council Member{% if num > 1 %}s{% endif %}</h3>
     </div>
-    <div class="row">
+    <div class="row content content--wide">
         {% assign sorted = page.retired_steering | sort: "last" %}
         {% for member in sorted  %}
             <div class="col-sm-3 col-xs-6 material">
@@ -481,10 +486,10 @@ <h3 class="col-sm-12 section-header">Retired Steering Council Member{% if num >
     </div>
 </div>
 
-<div id="sponsors" class="about-section section-grey top-section-border">
+<div id="sponsors" class="about-section section-grey top-section-border content content--wide">
     <div class="row">
         <img src="{{site.baseurl}}/assets/sponsors2.svg" class="section-icon img-responsive" loading="lazy" alt="sponsors">
-        <h3 class="col-sm-12 section-header">Sponsors</h3>
+        <h3 class="section-header">Sponsors</h3>
         <p class="support-paragraph">Project Jupyter receives direct funding from the following sources</p>
     </div>
     <ul class="logogrid">
@@ -502,7 +507,7 @@ <h3 class="col-sm-12 section-header">Sponsors</h3>
     </ul>
 </div>
 
-<div id="partners" class="about-section section-white top-section-border">
+<div id="partners" class="about-section section-white top-section-border content content--wide">
     <div class="row section-header">
         <img src="{{site.baseurl}}/assets/institutional_partners2.svg"
              class="section-icon img-responsive"
@@ -528,8 +533,8 @@ <h3 class="col-sm-12 section-header">Institutional Partners</h3>
     </ul>
 </div>
 
-<div id="donate" class="about-section section-grey">
-    <div class="row">
+<div id="donate" class="about-section section-grey content content--wide">
+    <div class="row content content--copy">
         <img src="{{site.url}}/assets/donations-icon2.svg" class="section-icon img-responsive" loading="lazy" alt="Donate">
         <h3 class="col-sm-12 section-header">Donate</h3>
         <p>
@@ -561,11 +566,12 @@ <h3 class="col-sm-12 section-header">Donate</h3>
         </div>
     </div>
 
-    <div class="row">
+    <div class="row content">
         <div id="col-md-12 donate-formatting">
             <a href="https://numfocus.salsalabs.org/donate-to-jupyter/index.html" class="orange-button" id="donate-link">
                 Support Project Jupyter
             </a>
         </div>
     </div>
 </div>
+</article>
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -16,3 +16,4 @@
 @import "components/jupyterhub";
 @import "components/page-header";
 @import "components/iframes";
+@import "components/containers";