Implements various minor improvements: (#4)

* Implements various minor improvements: * Updates site content. * Improves styling * Update content * Replace example links with links to repos and repo library Co-authored-by: Abhra Biswas <[email protected]>
PeopleForBikes · Jan 21, 2022 · 4782678 · 4782678
1 parent e78b1d9
commit 4782678
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 46 deletions.
diff --git a/config.toml b/config.toml
@@ -23,8 +23,8 @@ juice_logo_path = "logo_pfb.svg"
 juice_extra_menu = [
  # { title = "Overview", link = "/" },
  # { title = "Community", link = "/community" },
- { title = "Docs ⍈", link = "https://peopleforbikes.github.io/docs" },
- { title = "Github ⍈", link = "https://github.com/PeopleForBikes" }
+ { title = "Docs ↗", link = "https://peopleforbikes.github.io/docs" },
+ { title = "Github ↗", link = "https://github.com/PeopleForBikes" }
 ]
 site_description = "PeopleForBikes community site."
 repository_url = "https://github.com/PeopleForBikes/PeopleForBikes.github.io"
diff --git a/content/_index.md b/content/_index.md
@@ -4,14 +4,14 @@ sort_by = "weight"
 +++
 # Overview
 
-**PeopleForBikes** is an organization promoting cycling in the US.
+**[PeopleForBikes](https://www.peopleforbikes.org/)** is an industry coalition made up of 280 cycling-industry members and a cycling community of almost 1.4 million individual riders to promote stronger representation in congress and coordinated advocacy programs and help develop and promote economic policies that benefit bike businesses.
 
-**PeopleForBikes Tech** is the technical branch of it. We aim at simplifying and
-automating tasks to help our advocates focus on what they do best: get more
+**[PeopleForBikes Tech](https://example.com/)** is PFB's technical arm. We aim to simplify and
+automate tasks to help our advocates focus on what they do best: get more
 people riding bikes more often, and make bike riding better for everyone.
 
 Our projects:
 
-* retrieve: Simplify downloading PeopleForBikes dataset
-* svggloo: Render SVG templates
-* measure: Quantify and identify bike lanes in cities
+* [retrieve](https://github.com/PeopleForBikes/retrieve): Simplify downloading PeopleForBikes dataset
+* [svggloo](https://github.com/PeopleForBikes/svggloo): Render SVG templates
+* [measure](https://github.com/orgs/PeopleForBikes/repositories?q=&type=all&language=&sort=): Quantify and identify bike lanes in cities
diff --git a/sass/_custom.scss b/sass/_custom.scss
@@ -1,15 +1,113 @@
-h1, .title-text {
- font-size: 1.75rem;
+h1,
+.title-text {
+ font-size: 1.75rem;
+ margin-bottom: 40px;
 }
 
-h2, .subtitle-text {
- font-size: 1.5rem;
+h2,
+.subtitle-text {
+ font-size: 1.5rem;
 }
 
 h3 {
- font-size: 1.125rem;
+  font-size: 1.125rem;
 }
 
 .text {
- font-size: 1rem;
+ font-size: 1rem;
+}
+
+header {
+ .logo {
+ margin-left: 0 !important;
+ font-family: Montserrat !important;
+ font-weight: bold !important;
+ }
+
+ @media screen and (max-width: 768px) {
+ nav {
+ text-align: center;
+ }
+ }
+
+ .nav-item {
+ font-family: Montserrat;
+ font-weight: normal !important;
+
+ &:hover {
+ color: white !important;
+ }
+ }
+}
+
+.hero {
+ padding-top: 55px !important;
+ padding-bottom: 55px !important;
+
+ @media screen and (max-width: 768px) {
+ .welcome {
+ max-width: none !important;
+ }
+ }
+ .welcome {
+ max-width: 50% !important;
+
+ .heading-text {
+ font-family: "Dharma Gothic E";
+ font-size: 5.5rem;
+ text-transform: uppercase !important;
+ padding: 0;
+ margin-bottom: -15px;
+ color: white;
+ }
+
+ .title-text {
+ font-family: "Dharma Gothic E";
+ font-size: 3rem;
+ color: white;
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ .hero-image {
+ display: none;
+ }
+ }
+
+ .hero-image {
+ width: 25% !important;
+ }
+
+ .explore-more {
+ bottom: 0px !important;
+ pointer-events: none !important;
+ cursor: default !important;
+ }
+}
+
+main {
+ padding-right: 80px !important;
+ padding-left: 80px !important;
+
+ .subtext {
+ font-weight: bold;
+ }
+
+ .content.text {
+ #overview {
+ display: none;
+ }
+
+ p:first-of-type {
+ margin-top: 0 !important;
+ }
+
+ ul {
+ margin-top: 0 !important;
+
+ li {
+ padding: 0 !important;
+ }
+ }
+ }
 }
diff --git a/templates/index.html b/templates/index.html
@@ -2,9 +2,9 @@
 {% block hero %}
 <script async defer src="https://buttons.github.io/buttons.js"></script>
 <section class="text-center welcome">
- <h1 class="heading-text" style="font-size: 50px">PeopleForBikes</h1>
+ <h1 class="heading-text">grok biking safety, nationwide</h1>
  <h3 class="title-text">
- Better riding for everyone.
+ Technology that helps _____
  </h3>
  <p>
  <a class="github-button" href="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/PeopleForBikes/PeopleForBikes.github.io" data-size="large"

diff --git a/themes/juice/sass/_text.scss b/themes/juice/sass/_text.scss
@@ -1,39 +1,41 @@
 .heading-text {
- font-family: "Fira Sans", sans-serif;
- font-size: 32px;
- font-weight: 600;
- padding: 10px 0 25px 0;
- color: var(--primary-text-color);
+  font-family: "Montserrat", sans-serif;
+  font-size: 32px;
+  font-weight: 600;
+  padding: 10px 0 25px 0;
+  color: var(--primary-text-color);
 }
 
-h1, .title-text {
- font-family: "Fira Sans", sans-serif;
- font-size: 25px;
- font-weight: 500;
- color: var(--primary-text-color);
- border-left: var(--primary-color) 8px solid;
- padding-left: 10px;
+h1,
+.title-text {
+ font-family: "Montserrat", sans-serif;
+ font-size: 25px;
+ font-weight: 500;
+ color: var(--primary-text-color);
+ border-left: var(--primary-color) 8px solid;
+ padding-left: 10px;
 }
 
-h2, .subtitle-text {
- font-family: "Fira Sans", sans-serif;
- font-size: 20px;
- font-weight: 500;
- color: var(--primary-text-color);
+h2,
+.subtitle-text {
+ font-family: "Montserrat", sans-serif;
+ font-size: 20px;
+ font-weight: 500;
+ color: var(--primary-text-color);
 }
 
 .text {
- font-family: "Fira Sans", sans-serif;
- font-size: 18px;
- font-weight: 400;
- line-height: 26px;
- letter-spacing: 0.2px;
- color: var(--primary-text-color);
+  font-family: "Montserrat", sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0.2px;
+  color: var(--primary-text-color);
 }
 
 .subtext {
- font-family: "Fira Sans", sans-serif;
- font-size: 16px;
- font-weight: 400;
- letter-spacing: 0.1px;
-}
+  font-family: "Montserrat", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.1px;
+}
diff --git a/themes/juice/templates/index.html b/themes/juice/templates/index.html
@@ -10,8 +10,7 @@
  <link rel="icon" type="image/png" href="/favicon.ico">
  {% endblock favicon %}
  {% include "_variables.html" %}
- <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css?family=Montserrat:Light,400,500,600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/normalize.css">
  <link rel="stylesheet" href="{{ get_url(path="juice.css") }}">
  {% block head %}