Synchronized build

Author: lektor-bot

index.html

@@ -110,9 +110,12 @@ <h2>Our Work Relies On You!</h2>
   <main>
 
 
-        <article class="hero-section">
+        <article class="topic-summary">
     <h2> We have been building free software at Creative Commons (CC) for over a decade. </h2>
-    <div class="hero-description">
+    <figure>
+        <img class="image" src="./github.svg" />
+    </figure>
+    <div class="description">
         <p>We work on code and products that support digital creativity and sharing, from usability of our legal tools to enabling discovery of CC-licensed content.</p>
   <!-- Button linking to the developer community page -->
   <a href="/community">
@@ -129,9 +132,7 @@ <h2> We have been building free software at Creative Commons (CC) for over a dec
 
 <!--TODO: Refactor code for the get involved section? -->
     </div>
-    <div class="hero-image">
-        <img class="image" src="./github.svg" />
-    </div>
+    
 </article>
 
         <article class="projects">

static/css/style.css

@@ -348,33 +348,60 @@ main > aside.sidebar nav.filter-menu ul li.current a {
   font-size: 1rem;
 }
 
+.home-page .topic-summary {
+  grid-column: 2 / span 9;
+  display: grid;
+  grid-template:
+      "title graphic graphic"
+      "description graphic graphic"
+      "button graphic graphic";
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-bottom: 6.4em;
+  gap: 0 4em;
+}
 
-@media (min-width: 1024px) {
-  .hero-section img {
-    width: auto;
-  }
+.home-page .topic-summary h2 {
+  grid-area: title;
 
-  .hero-section {
-    display: grid;
-    grid-column: 2 / span 9;
-    grid-template:
-        "title title title"
-        "description description description "
-        "graphic graphic graphic";
+  font-size: 2.4em;
+}
 
-    margin-bottom: 6.4em;
-    gap: 0 4em;
-  }
+.home-page .topic-summary img {
+  width: 100%;
+  grid-area: graphic;
+  margin-top: 3.1em;
+}
 
-  .hero-section h2 {
-    grid-area: title;
-  }
+.home-page .topic-summary figure {
+  width: 100%;
+  grid-area: graphic;
+  margin: 0;
+  padding: 0;
+  margin-top: .6em;
+}
 
-  .hero-description {
-    grid-area: description;
-    width: 41.67%
-  }
+.home-page .topic-summary .description {
+  grid-area: description;
+}
+
+.home-page .topic-summary .description p {
+  margin-bottom: 1em;
+}
+
+.home-page .topic-summary .description a {
+  display: inline;
+  box-sizing: border-box;
+  grid-column-start: 1;
+  grid-row-start: 3;
+
+  text-transform: uppercase;
+  font-size: 1.5em;
+  font-weight: 700;
+}
 
+
+@media (min-width: 1024px) {
   .projects ul {
     grid-template-columns: 1fr 1fr;
 
@@ -431,3 +458,14 @@ main > aside.sidebar nav.filter-menu ul li.current a {
     margin-top: -6rem;
   }
 }
+
+@media (max-width: 900px) {
+  .home-page .topic-summary {
+    display: block;
+  }
+
+  .home-page .topic-summary figure {
+    display: none;
+  }
+}
+