From ac20181ca18c3b2d95f3b25358dfd7738c2cd322 Mon Sep 17 00:00:00 2001 From: Scott Date: Sat, 9 Nov 2019 11:51:40 -0600 Subject: [PATCH 1/6] did backgrounds and text sizes --- _sass/main.scss | 21 +++++++++++---------- _sass/pages/_index.scss | 2 +- _sass/partials/_backgrounds.scss | 32 ++++++++++++++++++-------------- _sass/partials/_layout.scss | 2 +- _sass/variables/_colors.scss | 2 ++ 5 files changed, 33 insertions(+), 26 deletions(-) diff --git a/_sass/main.scss b/_sass/main.scss index b414efc..b8267c8 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -73,16 +73,17 @@ body { .hero-banner { padding-top: 30px; padding-bottom: 30px; +} - h1 { - font-weight: normal; - font-size: 48px; - text-align: center; - } +h1 { + font-weight: normal; + font-size: 48px; + text-align: center; +} - h2 { - font-weight: normal; - font-size: 38px; - text-align: center; - } +h2 { + font-weight: normal; + font-size: 38px; + text-align: center; } + diff --git a/_sass/pages/_index.scss b/_sass/pages/_index.scss index 457073b..a0e033b 100644 --- a/_sass/pages/_index.scss +++ b/_sass/pages/_index.scss @@ -4,7 +4,7 @@ .three-buttons { position: absolute; - top: calc(100% - 80px); + top: calc(100% - 47px); width: 100%; text-align: center; diff --git a/_sass/partials/_backgrounds.scss b/_sass/partials/_backgrounds.scss index 80b94fe..7b1803f 100644 --- a/_sass/partials/_backgrounds.scss +++ b/_sass/partials/_backgrounds.scss @@ -1,20 +1,24 @@ -[class^="bkgd"] { - background-size: cover; - background-repeat: no-repeat; -} +// [class^="bkgd"] { +// background-size: cover; +// background-repeat: no-repeat; +// } .bkgd-1 { - background-image: url(/assets/images/mobile-partition-left.png); - - @media (min-width: $desktop-min-width) { - background-image: url(/assets/images/partition-left.png); - } + background: linear-gradient(292.39deg, #D1D1D1 0%, rgba(231, 231, 231, 0) 100%); + border-top: 20px solid $yellow; + border-bottom: 20px solid $pink; + border-left: 20px solid $red; + border-right: 20px solid $green; + width: 70%; + margin: auto; } .bkgd-2 { - background-image: url(/assets/images/mobile-partition-right.png); - - @media (min-width: $desktop-min-width) { - background-image: url(/assets/images/partition-right.png); - } + background: linear-gradient(57.07deg, #D1D1D1 0%, rgba(231, 231, 231, 0) 100%); + border-top: 20px solid $green; + border-bottom: 20px solid $brown; + border-left: 20px solid $blue; + border-right: 20px solid $purple; + width: 70%; + margin: auto; } diff --git a/_sass/partials/_layout.scss b/_sass/partials/_layout.scss index 7a7c788..ca2414e 100644 --- a/_sass/partials/_layout.scss +++ b/_sass/partials/_layout.scss @@ -5,7 +5,7 @@ display: flex; &.-standard { - padding: 120px 60px; + padding: 60px 60px; align-items: center; justify-content: space-evenly; } diff --git a/_sass/variables/_colors.scss b/_sass/variables/_colors.scss index 2af8d6b..117576f 100644 --- a/_sass/variables/_colors.scss +++ b/_sass/variables/_colors.scss @@ -14,3 +14,5 @@ $yellow: #FEF035; $orange: #F59331; $green: #16A050; $pink: #F18DB9; +$red: #DE1D41; +$brown: #74420B;; From a44bda3a5e6237f84916e9453bbab7c33ace5113 Mon Sep 17 00:00:00 2001 From: Scott Date: Sat, 9 Nov 2019 12:17:48 -0600 Subject: [PATCH 2/6] more formatting --- _sass/main.scss | 4 ++++ _sass/partials/_backgrounds.scss | 8 ++++---- _sass/partials/_layout.scss | 1 + 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/_sass/main.scss b/_sass/main.scss index b8267c8..c922c41 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -71,8 +71,12 @@ body { } .hero-banner { + width: 81%; + margin: auto; padding-top: 30px; padding-bottom: 30px; + border-bottom: 10px solid $blue; + margin-bottom: 8px; } h1 { diff --git a/_sass/partials/_backgrounds.scss b/_sass/partials/_backgrounds.scss index 7b1803f..b6f31cc 100644 --- a/_sass/partials/_backgrounds.scss +++ b/_sass/partials/_backgrounds.scss @@ -5,8 +5,8 @@ .bkgd-1 { background: linear-gradient(292.39deg, #D1D1D1 0%, rgba(231, 231, 231, 0) 100%); - border-top: 20px solid $yellow; - border-bottom: 20px solid $pink; + border-top: 10px solid $yellow; + border-bottom: 10px solid $pink; border-left: 20px solid $red; border-right: 20px solid $green; width: 70%; @@ -15,8 +15,8 @@ .bkgd-2 { background: linear-gradient(57.07deg, #D1D1D1 0%, rgba(231, 231, 231, 0) 100%); - border-top: 20px solid $green; - border-bottom: 20px solid $brown; + border-top: 10px solid $green; + border-bottom: 10px solid $brown; border-left: 20px solid $blue; border-right: 20px solid $purple; width: 70%; diff --git a/_sass/partials/_layout.scss b/_sass/partials/_layout.scss index ca2414e..d07db2f 100644 --- a/_sass/partials/_layout.scss +++ b/_sass/partials/_layout.scss @@ -4,6 +4,7 @@ .simple-cols { display: flex; + &.-standard { padding: 60px 60px; align-items: center; From 57bb7aa71bfc3c5780435d981f0fdd166b840bfe Mon Sep 17 00:00:00 2001 From: Scott Date: Sat, 9 Nov 2019 12:46:15 -0600 Subject: [PATCH 3/6] buttons --- _sass/main.scss | 28 +++++++++++++++++++++++++--- _sass/partials/_backgrounds.scss | 11 +++++++++++ index.html | 10 +++++----- 3 files changed, 41 insertions(+), 8 deletions(-) diff --git a/_sass/main.scss b/_sass/main.scss index c922c41..7fd8c4c 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -44,7 +44,7 @@ body { // Make .page-content extend content-width .page-content { @extend %content-width; } -.btn { +.btn-primary { display: inline-block; text-align: center; text-decoration: none; @@ -54,13 +54,35 @@ body { font-size: 24px; border-radius: 9px; margin: 0 auto; - + &:hover { + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + } &.-spaced-top { margin-top: 30px; } } -.btn:hover { background-color: #888; } +.btn-secondary { + background-color: #FCFCFC; + width: 210px; + display: inline-block; + text-align: center; + text-decoration: none; + padding: 10px 20px; + color: #464646; + font-size: 24px; + border-radius: 9px; + margin: 0 auto; + border: 3px solid #464646; + box-sizing: border-box; + border-radius: 9px; + &.-spaced-top { + margin-top: 30px; + } + &:hover { + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + } +} .logo-large { height: 130px; } .logo-med { height: 90px; } diff --git a/_sass/partials/_backgrounds.scss b/_sass/partials/_backgrounds.scss index b6f31cc..1e125c0 100644 --- a/_sass/partials/_backgrounds.scss +++ b/_sass/partials/_backgrounds.scss @@ -13,6 +13,13 @@ margin: auto; } +.bkgd-1b { + border-top: 10px solid $purple; + border-bottom: 10px solid $orange; + width: 70%; + margin: auto; +} + .bkgd-2 { background: linear-gradient(57.07deg, #D1D1D1 0%, rgba(231, 231, 231, 0) 100%); border-top: 10px solid $green; @@ -22,3 +29,7 @@ width: 70%; margin: auto; } + +.under-bottons { + margin-top: -34px; +} diff --git a/index.html b/index.html index 54c3349..db533e1 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@

Our Tool

TransitTalk Logo - Learn More + Learn More

@@ -28,7 +28,7 @@

Our Tool

-
+

Transit Talk aims to create a transparent record of issues riders encounter, helping riders avoid problems on their commutes in real time while also helping transit agencies become more responsive to the needs of their customers. @@ -36,14 +36,14 @@

Our Tool

Our Mission

- More Info + More Info

Our Team

- Meet Us + Meet Us

Transit Talk is a volunteer-run project that was created at Chi Hack Night, a weekly community event where people of all backgrounds come together to work on civic tech projects. @@ -52,7 +52,7 @@

Our Team

Application to Other Cities

- Visit our Github + Visit our Github

Transit Talk is built for more than just Chicago. Through the use of GTFS, a universal data standard used by transit agencies around the world, Transit Talk can be implemented elsewhere easily. Visit our “In Your City” tab to learn more.

From 5e97af8211c3f0830b24d20e703edf98fb186e23 Mon Sep 17 00:00:00 2001 From: Scott Date: Sat, 9 Nov 2019 17:20:36 -0600 Subject: [PATCH 4/6] padding --- _sass/partials/_backgrounds.scss | 8 ++------ _sass/partials/_layout.scss | 10 ++++++++++ index.html | 2 +- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/_sass/partials/_backgrounds.scss b/_sass/partials/_backgrounds.scss index 1e125c0..388288e 100644 --- a/_sass/partials/_backgrounds.scss +++ b/_sass/partials/_backgrounds.scss @@ -16,7 +16,7 @@ .bkgd-1b { border-top: 10px solid $purple; border-bottom: 10px solid $orange; - width: 70%; + width: 73%; margin: auto; } @@ -28,8 +28,4 @@ border-right: 20px solid $purple; width: 70%; margin: auto; -} - -.under-bottons { - margin-top: -34px; -} +} \ No newline at end of file diff --git a/_sass/partials/_layout.scss b/_sass/partials/_layout.scss index d07db2f..00d7728 100644 --- a/_sass/partials/_layout.scss +++ b/_sass/partials/_layout.scss @@ -51,6 +51,16 @@ font-size: 20px; } +.index-mission { + border-top: 10px solid #493390; + margin-top: -34px; + margin-bottom: 6px; + padding: 130px 60px 60px 60px !important; +} + +.three-buttons { + z-index: 1 +} /** * Desktop Only - A class for elements that should only show up on desktop * devices. diff --git a/index.html b/index.html index db533e1..f6fb07a 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@

Our Tool

-
+

Transit Talk aims to create a transparent record of issues riders encounter, helping riders avoid problems on their commutes in real time while also helping transit agencies become more responsive to the needs of their customers. From defed7c155b263b1cb8d5b20dac9390e6f441750 Mon Sep 17 00:00:00 2001 From: Scott Date: Sat, 9 Nov 2019 18:03:32 -0600 Subject: [PATCH 5/6] hover --- _sass/main.scss | 3 +++ _sass/partials/_backgrounds.scss | 9 +++++++++ in-your-city.html | 4 ++-- index.html | 4 ++-- mission.html | 2 +- tool.html | 4 ++-- 6 files changed, 19 insertions(+), 7 deletions(-) diff --git a/_sass/main.scss b/_sass/main.scss index 7fd8c4c..7d33ecb 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -56,6 +56,7 @@ body { margin: 0 auto; &:hover { box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + transform: translateY(-1px); } &.-spaced-top { margin-top: 30px; @@ -81,6 +82,8 @@ body { } &:hover { box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + transform: translateY(-1px); + } } diff --git a/_sass/partials/_backgrounds.scss b/_sass/partials/_backgrounds.scss index 388288e..ae9c4f6 100644 --- a/_sass/partials/_backgrounds.scss +++ b/_sass/partials/_backgrounds.scss @@ -11,6 +11,7 @@ border-right: 20px solid $green; width: 70%; margin: auto; + margin-bottom: 6px; } .bkgd-1b { @@ -18,6 +19,7 @@ border-bottom: 10px solid $orange; width: 73%; margin: auto; + margin-bottom: 6px; } .bkgd-2 { @@ -28,4 +30,11 @@ border-right: 20px solid $purple; width: 70%; margin: auto; + margin-bottom: 6px; +} + +.bkgd-2b { + border-top: 10px solid #1BA4E3; + width: 73%; + margin: auto; } \ No newline at end of file diff --git a/in-your-city.html b/in-your-city.html index 6b6f278..d1a3b8f 100644 --- a/in-your-city.html +++ b/in-your-city.html @@ -18,8 +18,8 @@

In Your City

-
- Visit our Github +
+ Visit our Github

You don’t need to know what much about GTFS to create a version of Transit Talk for your city. Simply head over to out GitHub repository, create a fork of the app, and follow the instructions to build and install an instance of your own!

diff --git a/index.html b/index.html index f6fb07a..784c969 100644 --- a/index.html +++ b/index.html @@ -50,9 +50,9 @@

Our Team

-
+

Application to Other Cities

- Visit our Github + Visit our Github

Transit Talk is built for more than just Chicago. Through the use of GTFS, a universal data standard used by transit agencies around the world, Transit Talk can be implemented elsewhere easily. Visit our “In Your City” tab to learn more.

diff --git a/mission.html b/mission.html index 4781ef0..60c5158 100644 --- a/mission.html +++ b/mission.html @@ -16,7 +16,7 @@

Making Transit Better

-
+

As a team of volunteers of varying transit-riding backgrounds, we understand the problems commuters face when using public transit. We aim to make everyone’s commute simpler, and to allow them to make educated choices on each trip.

diff --git a/tool.html b/tool.html index ed9892c..6764b6d 100644 --- a/tool.html +++ b/tool.html @@ -15,7 +15,7 @@

Rider-Powered Transit Information

-
+

Transit Talk allows users to quickly submit issue reports, generating a real time, crowd-sourced map of issues that can ultimately be used by transit advocates, transit agencies, and transit riders.

@@ -29,7 +29,7 @@

Rider-Powered Transit Information

alt="TransitTalk Mobile Screenshot">
-
+

Users can save stops they frequent and check what’s going on before they head out for the day, understanding which routes (or even specific vehicles) to avoid to make their commute better and simpler.

From fd71d6247e79205a42a1426b100be8a772f3c375 Mon Sep 17 00:00:00 2001 From: Scott Date: Sat, 9 Nov 2019 18:05:21 -0600 Subject: [PATCH 6/6] done on desktop --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 784c969..14ffb83 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,7 @@

Our Team

-
+

Application to Other Cities

Visit our Github