use pure css for styling homepage

this is not a pixel perfect replica of the previous design, nor is it trying to be. But this does greatly simplify the styling for the homepage, particularly around media queries.
Saver3011 · Oct 22, 2021 · 087a5d7 · 087a5d7
1 parent cd8c2d7
commit 087a5d7
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 240 deletions.
diff --git a/assets/css/index.scss b/assets/css/index.scss
@@ -23,35 +23,77 @@
   max-width: 600px;
 }
 
-/*Timeline height changed with JS. timeline-cell height is set as a backup.*/
-.timeline-cell {
-  height: 700px;
+.twitter-timeline, .timeline-cell {
+  height: 450px;
+  @media (min-width: 600px) {
+    height: 700px !important;
+  }
 }
 
+
+@media (min-width: 600px) {
+  #follow-us .container {
+    display: flex;
+    flex-direction: row-reverse;
+    > div {
+      flex: 1 1 50%;
+    }
+  }
+  #open-source-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
 .open-source-title a {
   text-decoration: none;
+  &:link, &:visited {
+    color: inherit;
+  }
+  &:hover, &:active {
+    color: var(--tw-color-text-link);
+  }
 }
 
-.open-source-title a:link, .open-source-title a:visited {
-  color: inherit;
-}
-
-.open-source-title a:hover, .open-source-title a:active {
-  color: var(--tw-color-text-link);
-}
 
 /* Center text vertically */
 
-.career-title {
-  margin-top: 230px;
+#career-text {
+  text-align: center;
 }
-
-.open-source-title {
-  margin-top: 325px;
+@media (min-width: 600px) {
+  #career .container {
+    display: flex;
+    > div {
+      flex: 1 1 50%;
+    }
+  }
+  #career-text {
+    text-align: left;
+    margin-top: 230px;
+  }
 }
 
 /* Our Philosophy - images */
 
+#emoji-cards {
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+}
+.emoji-card {
+  padding: var(--feather-grid-large) var(--feather-grid-mega);
+  max-width: 600px;
+  margin: 0 auto;
+  flex: 1 1 33%;
+}
+
+@media (min-width: 900px) {
+  #emoji-cards {
+    flex-direction: row;
+  }
+}
+
 img.emoji-img {
   display: block;
   width: 175px;
@@ -67,87 +109,30 @@ img.emoji-img {
   }
 }
 
-/* Less than 600px */
-
-@media (max-width: 600px) {
-  .timeline-cell {
-    height: 450px;
-  }
-
-  .career-title, .open-source-title {
-    margin-top: 0;
-  }
-}
-
 /* Explore Projects */
 
-.explore-projects {
+#explore-projects {
   background-image: url("../assets/network.svg");
   background-repeat: no-repeat;
-    background-size: auto 380px;
-  background-position: bottom right -50px;
-}
-
-/* Empty space for mobile layout of explore projects */
-.explore-projects-blank {
-  height: 320px;
-  display: none;
-}
-
-/* Greater than 1400px */
-@media (min-width: 1400px) {
-  .explore-projects {
-    background-position: bottom right;
-  }
-}
-
-/* Explore Projects media query breakpoints */
-
-/* Image size slightly smaller between 1050px and 1236px */
-@media (max-width: 1236px) and (min-width: 1050px) {
-  .explore-projects {
-    background-position: bottom right -100px;
-    background-size: auto 350px;
-  }
-}
-
-@media (max-width: 1050px) {
-  .explore-projects {
-    background-position: bottom right -250px;
-  }
-}
+  background-size: auto 380px;
+  background-position: bottom left 5vw;
 
-@media (max-width: 860px) {
-  .explore-projects {
-    background-position: bottom right -350px;
+  @media (min-width: 600px) {
+    background-position: bottom left 35vw;
   }
-}
-
-@media (max-width: 700px) {
-  .explore-projects {
-    background-position: bottom right -400px;
-  }
-}
-
-/* Empty space now displayed */
-@media (max-width: 600px) {
-  .explore-projects-blank {
-    display: block;
-  }
-
-  .explore-projects {
-    background-position: bottom right -250px;
+  @media (min-width: 1100px) {
+    background-position: bottom right;
   }
 }
+.explore-text {
+  // space to display network graphic
+  margin-bottom: 320px;
 
-@media (max-width: 480px) {
-  .explore-projects {
-    background-position: bottom right -350px;
+  @media (min-width: 600px) {
+    margin-bottom: 0;
+    max-width: 35%;
   }
-}
-
-@media (max-width: 380px) {
-  .explore-projects {
-    background-position: bottom right -400px;
+  @media (min-width: 1100px) {
+    max-width: 40%;
   }
-}
+}
diff --git a/content/_index.html b/content/_index.html
@@ -1,32 +1,31 @@
 ---
 title: Twitter Open Source
 custom_css: index.scss
-custom_js: index.js
 ---
 
 <!-- #OurPhilosophy -->
 
-<div class="section grey">
-    <div class="Grid container">
-        <div id="philosophy-text" class="Grid-cell u-size4of6 u-before1of6 u-after1of6">
+<div class="section grey" id="philosophy">
+    <div class="container">
+        <div id="philosophy-text">
             <h1 class="small-title center-text mega-margin">#OurPhilosophy</h1>
             <p class="center-text mega-margin">For anything to grow, you need three things:</p>
         </div>
     </div>
-    <div class="Grid small-container">
-        <div class="Grid-cell u-size1of3 emoji-card">
+    <div class="small-container" id="emoji-cards">
+        <div class="emoji-card">
             <img src="assets/fire.png" alt="Fire emoji" class="emoji-img center-margin large-margin">
             <h1 class="center-text medium-margin">Heat</h1>
             <p class="center-text">Heat means work.<br/>Upstream contributions, bug fixes, designs, docs--the rigorous work that drives the community.</p>
         </div>
 
-        <div class="Grid-cell u-size1of3 emoji-card">
+        <div class="emoji-card">
             <img src="assets/sun.png" alt="Sun emoji" class="emoji-img center-margin large-margin">
             <h1 class="center-text medium-margin">Light</h1>
             <p class="center-text">Light means visibility. <br/>For the projects, contributions, opportunities, challenges, and people that impact the community.</p>
         </div>
 
-        <div class="Grid-cell u-size1of3 emoji-card">
+        <div class="emoji-card">
             <img src="assets/pride.png" alt="Pride heart emoji" class="emoji-img center-margin large-margin">
             <h1 class="center-text medium-margin">Love</h1>
             <p class="center-text">Love means culture and support.<br/>Why we care. How we work. Actions that grow the community.</p>
@@ -37,39 +36,41 @@ <h1 class="center-text medium-margin">Love</h1>
 
 <!-- Explore Projects -->
 
-<div class="section explore-projects">
-    <div class="Grid container">
-        <div class="Grid-cell left-text u-size5of12 u-after1of12">
+<div class="section" id="explore-projects">
+    <div class="container">
+        <div class="explore-text">
             <h1 class="small-title mega-margin">Explore Projects</h1>
             <p class="mega-margin">Twitter has been built on open source since the beginning. Openness is part of our DNA. The projects you see here were born at Twitter, and patches are always welcome!</p>
             <a href="/projects/" class="Button Button--primary Button--large">View All Projects</a>
         </div>
-        <div class="Grid-cell explore-projects-blank"></div>
     </div>
 </div>
 
 <!-- Follow Us @TwitterOSS -->
 
-<div class="grey section">
-    <div class="Grid container">
-        <!-- The heading "Follow Us @TwitterOSS" is inserted with Javascript -->
-        <div id="open-source-timeline" class="Grid-cell timeline-cell u-size1of2">
-            <a class="twitter-timeline" data-height="700px" href="https://twitter.com/TwitterOSS?ref_src=twsrc%5Etfw">Tweets by TwitterOSS</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+<div class="grey section" id="follow-us">
+    <div class="container">
+        <div class="center-text" id="open-source-text">
+            <h1 class="small-title mega-margin open-source-title">Follow Us <a target="_blank"
+                    href="https://twitter.com/TwitterOSS">@TwitterOSS</a></h1>
+        </div>
+        <div id="open-source-timeline" class="timeline-cell">
+            <a class="twitter-timeline" data-height="450px" href="https://twitter.com/TwitterOSS?ref_src=twsrc%5Etfw">Tweets by TwitterOSS</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
         </div>
     </div>
 </div>
 
 <!-- Join the Flock -->
 
-<div class="section">
-    <div class="Grid container">
-        <div id="career-text" class="Grid-cell left-text u-size5of12 u-after1of12 same-mega-margin">
+<div class="section" id="career">
+    <div class="container">
+        <div id="career-text" class="same-mega-margin">
             <h1 class="small-title mega-margin career-title">Join the Flock</h1>
             <p class="mega-margin">We are always on the lookout for innovative and creative individuals who are passionate about building a platform where all voices can be heard.</p>
             <a href="https://careers.twitter.com" class="Button Button--primary Button--large">View All Careers</a>
         </div>
-        <div class="Grid-cell timeline-cell u-size1of2">
-            <a class="twitter-timeline" data-height="700px" href="https://twitter.com/TwitterCareers?ref_src=twsrc%5Etfw">Tweets by TwitterCareers</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+        <div class="timeline-cell">
+            <a class="twitter-timeline" data-height="450px" href="https://twitter.com/TwitterCareers?ref_src=twsrc%5Etfw">Tweets by TwitterCareers</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
         </div>
     </div>
 </div>