add more links

chromium · Jan 9, 2024 · 647b474 · 647b474
1 parent 423a52e
commit 647b474
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 9 deletions.
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -86,8 +86,11 @@ body {
       @include query($bp-lrg){
         grid-column: span 7;
       }
-      @include query($bp-2xl){
-        grid-column: span 6;
+      @include query($bp-xlg){
+        grid-column: span 9;
+      }
+      @include query($bp-3xl){
+        grid-column: span 10;
       }
     }
 
@@ -96,8 +99,11 @@ body {
       @include query($bp-lrg){
         grid-column: span 5;
       }
-      @include query($bp-2xl){
-        grid-column: span 6;
+      @include query($bp-xlg){
+        grid-column: span 3;
+      }
+      @include query($bp-3xl){
+        grid-column: span 2;
       }
     }
 

diff --git a/_sass/_typography.scss b/_sass/_typography.scss
@@ -159,6 +159,10 @@ li:has(.box) {
   }
 }
 
+a {
+  color: var(--fg);
+}
+
 header {
   h1 + p { // subtitle
     &::before {

diff --git a/index.html b/index.html
@@ -19,8 +19,8 @@ <h1 class="f-3xh black wide">chrome<wbr>.security</h1>
     </ul>
   </nav>
 
-  <div class="grid-ones flex">
-    <section class="box featured">
+  <div class="grid-ones grid-12">
+    <section class="grid-twos-primary box featured">
       <p>Chrome Security’s mission is to make it safe to click on links.</p>
       <p>We have five focus areas:</p>
       <ul>
@@ -33,7 +33,7 @@ <h1 class="f-3xh black wide">chrome<wbr>.security</h1>
       <p>We provide the building blocks so that all of Chrome is built with security at front of mind.</p>
     </section>
 
-    <figure class="box chromeball">
+    <figure class="grid-twos-secondary box chromeball">
       {% include chromeball-protect.svg %}
     </figure>
   </div>
@@ -70,8 +70,47 @@ <h3>Protecting Chrome Traffic with Hybrid Kyber KEM</h3>
   <hr class="grid-ones squiggle box">
 
   <section class="grid-ones grid-12">
-    <h2 class="grid-ones box f-xhr black wide lower text-right">Hand-crafted links for you</h2>
-    <section class="grid-fours"></section>
+    <h2 class="grid-ones box f-xhr black wide lower text-right">Hand-crafted links for ✨you✨</h2>
+    <section class="grid-fours box">
+      <h4 class="f-xlg thick">For <strong>security researchers</strong>...</h4>
+      <ul>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+      </ul>
+    </section>
+    <section class="grid-fours box">
+      <h4 class="f-xlg thick">For <strong>enterprise managers</strong>...</h4>
+      <ul>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+      </ul>
+    </section>
+    <section class="grid-fours box">
+      <h4 class="f-xlg thick">For <strong>CISOs</strong>...</h4>
+      <ul>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+      </ul>
+    </section>
+    <section class="grid-fours box">
+      <h4 class="f-xlg thick">For <strong>press & interested parties</strong>...</h4>
+      <ul>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+        <li><a href="#">Some links for you</a></li>
+      </ul>
+    </section>
   </section>
 </main>