Merge pull request #888 from Queen-codes/restyle-homepage

feat: restyle CC's open source website to match vocab design feel

assets/static/css/style.css

@@ -1,3 +1,147 @@
 @import "/static/vocabulary/css/vocabulary.css" layer(vocabulary);
 
-/*put local styles here*/
+/* Homepage Styles */
+
+.home-page main {
+  margin-top: 3rem;
+
+  font-family: 'Source Sans Pro';
+}
+
+/* Hero-section */
+
+.hero-section h2 {
+  margin-top: 0;
+
+  font-style: normal;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 2.5rem;  
+}
+
+.home-page main p {
+  font-size: 1.5rem;
+  line-height: 1.5;
+  margin-bottom: 1rem;
+}
+
+.home-page li {
+  list-style-type: none;
+}
+
+.hero-section img {
+  width: 100%;
+  margin-top: 1.5rem
+}
+
+.hero-description a {
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.home-page main article figure {
+  order: -1;
+}
+
+.home-page main .posts ul li h3 {
+  font-size: 1.5rem;
+}
+
+/* PROJECTS */
+
+.posts > h2 {
+  text-align: center;
+}
+
+.home-page .projects ul {
+  display: grid;
+  gap: 2rem;
+  margin-right: 2rem;
+}
+
+.home-page .projects article {
+  padding: 3rem;
+
+  background: var(--vocabulary-brand-color-soft-turquoise);
+  border-top: 3px solid black;
+}
+
+.home-page .projects article a {
+    --underline-background-color: var(--vocabulary-brand-color-soft-turquoise);
+}
+
+@media (min-width: 1024px) {
+/* Styles for screens 768px and larger go here */
+
+.hero-section img {
+  width: auto;
+} 
+
+.hero-section {
+  display: grid;
+  grid-column: 2 / span 9;
+  grid-template:
+      "title title title"
+      "description description description "
+      "graphic graphic graphic";
+
+  margin-bottom: 6.4em;
+  gap: 0 4em;
+}
+
+.hero-section h2 {
+  grid-area: title;
+}
+
+.hero-description {
+  grid-area: description;
+  width: 41.67%
+}
+
+.home-page .projects ul { 
+  grid-template-columns: 1fr 1fr;
+
+  font-size: 1rem;
+}
+
+.home-page .projects {
+  grid-column: 2 / 10;
+  margin-bottom: 6rem;
+}
+
+.home-page .project h5 {
+  font-size: 1.25rem;
+}
+
+.home-page main .posts h2 {
+  text-align: center;
+  margin-bottom: .7em;
+}
+
+.home-page main .posts {
+  grid-column: 2 / span 9;
+}
+
+.home-page main .posts ul {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  margin-top: 8em;
+  gap: 2em;
+  box-sizing: border-box;
+  width:100%;
+  margin: 0 auto;
+  margin-top: 0;
+
+  font-size: 1rem;
+  list-style: none;
+}
+
+}
+
+@media (min-width: 1314px) {
+.hero-image {
+  grid-column: 3;
+  margin-top: -6rem;
+}
+}

content/contents.lr

@@ -7,7 +7,7 @@ block_content:
 #### hero ####
 title:
 
-We have been building <span class="has-text-forest-green">free software</span> at <span class="has-text-orange">Creative Commons (CC)</span> for over a decade.
+We have been building free software at Creative Commons (CC) for over a decade.
 ----
 links:
 
@@ -36,43 +36,33 @@ links_product:
 
 <img src="./product.svg">
 
-<h4 class="heading">Help us build our products</h4>
+<h4>Help us build our products</h4>
 
-<div class="list">
-  <h5 class="link-heading"><a href="/contributing-code/" class="has-text-forest-green">Contribution Guidelines</a></h5>
-  <p class="link-caption">Learn how to contribute and then get started.</p>
+<div>
+  <h5><a href="/contributing-code/">Contribution Guidelines</a></h5>
+  <p>Learn how to contribute and then get started.</p>
 
-  <h5 class="link-heading"><a href="/community/community-team/" class="has-text-forest-green">Community Team</a></h5>
-  <p class="link-caption">Become a member of our community volunteer team.</p>
+  <h5><a href="/community/community-team/">Community Team</a></h5>
+  <p>Become a member of our community volunteer team.</p>
 
-  <h5 class="link-heading"><a href="/contributing-code/projects/" class="has-text-forest-green">All Available Projects</a></h5>
-  <p class="link-caption">See all of our open source projects in one place.</p>
+  <h5><a href="/contributing-code/projects/">All Available Projects</a></h5>
+  <p>See all of our open source projects in one place.</p>
 </div>
 ----
 links_integrate:
 
 <img src="./integrate.svg">
 
-<h4 class="heading">Integrate CC licenses</h4>
+<h4>Integrate CC licenses</h4>
 
-<div class="list">
-  <h5 class="link-heading"><a href="https://github.com/creativecommons/chooser/" class="has-text-forest-green">Chooser</a></h5>
-  <p class="link-caption">CC license selection tool for your project.</p>
+<div>
+  <h5><a href="https://github.com/creativecommons/chooser/">Chooser</a></h5>
+  <p>CC license selection tool for your project.</p>
 
-  <h5 class="link-heading"><a href="https://creativecommons.org/platform/toolkit/" class="has-text-forest-green">Platform Toolkit</a></h5>
-  <p class="link-caption">Give users the option to openly license their content.</p>
+  <h5><a href="https://creativecommons.org/platform/toolkit/">Platform Toolkit</a></h5>
+  <p>Give users the option to openly license their content.</p>
 </div>
 ----
-links_plugins:
-
-<img src="./plugins.svg">
-
-<h4 class="heading">Use Our Plugins</h4>
-
-<div class="list">
-  <h5 class="link-heading"><a href="https://wordpress.org/plugins/creative-commons/" class="has-text-forest-green">Wordpress Plugin</a></h5>
-  <p class="link-caption">Mark your work with a CC license from within WordPress.</p>
-</div>
 #### recent-posts ####
 title: Recent Blog Posts
 #### featured-projects ####

models/home.ini

@@ -10,3 +10,8 @@ type = string
 label = Block Content
 type = flow
 flow_blocks = hero, get-involved, recent-posts, featured-projects
+
+[fields.body_class]
+label = Body Class
+type = string
+default = "home-page"

themes/vocabulary_theme/templates/blocks/get-involved.html

@@ -9,11 +9,6 @@ <h3>{{ this.links_product }}</h3>
     <li>
       <article class="project">
         <h3>{{ this.links_integrate }}</h3>
-      </article>
-    </li>
-    <li>
-      <article class="project">
-        <h3>{{ this.links_plugins }} </h3>
         <!--Evaluate: Vocabulary markup uses <a> tags here also. To retain?-->
       </article>
     </li>

themes/vocabulary_theme/templates/blocks/hero.html

@@ -1,7 +1,9 @@
-<article>
+<article class="hero-section">
     <h2> {{ this.title }} </h2>
-    <div class="description">
+    <div class="hero-description">
         {{ this.links }}
     </div>
-    <img class="image" src="./github.svg" />
+    <div class="hero-image">
+        <img class="image" src="./github.svg" />
+    </div>
 </article>

themes/vocabulary_theme/templates/blocks/recent-posts.html

@@ -5,10 +5,10 @@ <h2>  {{ this.title }} </h2>
     <ul>
       {% for post in site.query('/blog/entries') %}
         {% set post_loop = loop %}
-        {% if post_loop.index <= 3 %}
+        {% if post_loop.index <= 4 %}
           {{ render_post_summary(post) }}
         {% endif %}
       {% endfor %}
     </ul>
-
    <a class="more" href="/blog/entries">See all posts</a>
+  </article>

themes/vocabulary_theme/templates/layout.html

@@ -33,7 +33,7 @@
 <meta name="twitter:creator" content="@creativecommons">
 <title>{% block title %}Welcome{% endblock %} — Creative Commons Open Source</title>
 
-<body {% if this.body_class %}class="{{ this.body_class }}"{% endif %}>
+<body {% if this.is_homepage %} class="home-page" {% elif this.body_class %} class="{{ this.body_class }}" {% endif %}>
 
 <a class="skip-to-content" href="#main-content-marker">Skip to content</a>
 <header>
@@ -89,6 +89,8 @@ <h1><a class="identity-logo product" href="{{ '/'|url }}">Open source</a></h1>
 </header>
 
   <!-- Breadcrumb -->
+   <!--TODO: EVALUATE USE OF BREADCRUMB;REMOVE OR KEEP-->
+  {#
   {% if this._path !=  '/'%}
     <div class="breadcrumb-container">
       <nav class="container breadcrumb caption bold" aria-label="breadcrumbs">
@@ -126,7 +128,7 @@ <h1><a class="identity-logo product" href="{{ '/'|url }}">Open source</a></h1>
       </nav>
     </div>
   {% endif %}
-
+#}
   <!-- Body -->
   <span id="main-content-marker"></span>
   <main>