diff --git a/.stylelintrc b/.stylelintrc index 09efac9..2a745e0 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -7,6 +7,7 @@ "at-rule-empty-line-before": null, "color-hex-case": "upper", "at-rule-no-unknown": null, + "no-descending-specificity": null, "scss/at-rule-no-unknown": true } } \ No newline at end of file diff --git a/_sass/main.scss b/_sass/main.scss index b414efc..2d03613 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -45,22 +45,32 @@ body { .page-content { @extend %content-width; } .btn { - display: inline-block; - text-align: center; - text-decoration: none; - padding: 10px 20px; - background-color: #464646; - color: #FFF; + height: 50px; font-size: 24px; + line-height: 28px; + display: flex; + align-items: center; + text-align: center; border-radius: 9px; margin: 0 auto; + margin-left: auto; + margin-right: auto; +} - &.-spaced-top { - margin-top: 30px; - } +.btn:hover { + box-shadow: 4px 0 4px rgba(0, 0, 0, 0.25), 0 4px 4px rgba(0, 0, 0, 0.25); + background-color: #888; +} + +.btn-primary { + background-color: #464646; + color: #FFF; } -.btn:hover { background-color: #888; } +.btn-secondary { + color: #464646; + border: 3px solid #464646; +} .logo-large { height: 130px; } .logo-med { height: 90px; } @@ -73,6 +83,8 @@ body { .hero-banner { padding-top: 30px; padding-bottom: 30px; + margin-bottom: 6px; + border-bottom: 10px solid #1BA4E3; h1 { font-weight: normal; @@ -83,6 +95,244 @@ body { h2 { font-weight: normal; font-size: 38px; + line-height: 56px; + text-align: center; + } +} + +.section-1 { + display: flex; + background: linear-gradient(292.39deg, #D1D1D1 0%, rgba(231, 231, 231, 0) 100%); + border-top: 10px solid #FEF035; + border-bottom: 10px solid #F18DB9; + border-left: 10px solid #F59331; + border-right: 10px solid #F59331; + margin-bottom: 6px; + + .h1-left { + display: inline-block; + text-align: center; + width: 40%; + + h1 { + padding-top: 80px; + } + + img { + height: 300px; + } + } + + .center-btn { + .btn-learn { + width: 170px; + margin-top: 60px; + padding: 0 0 0 24px; + } + + margin: 0 auto; + width: 20%; + text-align: center; + + .img-container { + height: 130px; + padding-top: 10px; + } + } + + .homepage-p-right { + display: inline-block; + height: 100px; + width: 40%; + float: right; + padding: 80px 0; + + p { + width: 70%; + margin: auto; + } + } + + .homepage-p-center { + display: inline-block; + width: 60%; + margin: auto; + + p { + font-size: 20px; + padding: 30px 0; + } + } + + .tool-p-right { + display: inline-block; + height: 100px; + float: right; + width: 50%; + + p { + width: 60%; + margin: auto; + padding-top: 90px; + } + } + + .mission-p-right { + display: inline-block; + height: 100px; + float: right; + width: 50%; + + p { + width: 60%; + margin: auto; + padding-top: 50px; + } + } +} + +.three-buttons { + border-top: 10px solid #493390; + text-align: center; + + .features-img { + height: 170px; + margin-top: -70px; + } +} + +.section-2 { + display: flex; + border-bottom: 10px solid #F59331; + margin-bottom: 6px; + height: 240px; + + .h1-right { + display: inline-block; + width: 50%; + float: right; + text-align: center; + } + + .center-text { + width: 100%; + text-align: center; + margin: auto; + font-size: 20px; + + p { + width: 70%; + margin: auto; + } + } + + .p-left { + display: inline-block; + height: 100px; + float: left; + width: 50%; + + p { + width: 60%; + margin: auto; + margin-top: 90px; + } + } + + .btn-mission { + width: 170px; + margin-top: 30px; + padding: 0 0 0 32px; + } + + .btn-div { + width: 100%; + + .btn-github { + margin-top: 90px; + } + } +} + +.section-3 { + display: flex; + background: linear-gradient(292.39deg, #D1D1D1 0%, rgba(231, 231, 231, 0) 100%); + border-top: 10px solid #16A050; + border-bottom: 10px solid #DE1D41; + border-left: 10px solid #F18DB9; + border-right: 10px solid #F18DB9; + margin-bottom: 6px; + height: 300px; + + .h1-left { + display: inline-block; + width: 50%; + padding-top: 60px; + text-align: center; + } + + .p-left { + display: inline-block; + height: 100px; + float: left; + width: 50%; + + p { + width: 60%; + margin: auto; + padding-top: 100px; + } + } + + .p-right { + display: inline-block; + height: 100px; + float: right; + width: 50%; + + p { + padding-top: 100px; + width: 60%; + margin: auto; + } + + img { + height: 320px; + margin-left: 90px; + margin-top: -7px; + } + } + + .center-text { + width: 31%; + text-align: center; + margin: auto; + font-size: 20px; + } + + .btn-team { + width: 170px; + margin-top: 30px; + padding: 0 0 0 40px; + } +} + +.section-4 { + border-top: 10px solid #1BA4E3; + height: 260px; + text-align: center; + margin: auto; + + p { + width: 50%; + margin: auto; + padding-top: 30px; + } + + .p-center { text-align: center; + margin: auto; + font-size: 20px; + padding: 50px 0 100px 0; } } diff --git a/in-your-city.html b/in-your-city.html index 6b6f278..01fa24f 100644 --- a/in-your-city.html +++ b/in-your-city.html @@ -7,27 +7,27 @@
-
-- Transit Talk is a Ruby on Rails web app based on a data standard called GTFS, which makes storing transit station and route information quite simple. -
- -- We’ve tried to create Transit Talk in a way that allows for a coder in any given city to plug in a couple lines of code and immediately have a beautiful, functioning issue reporting system for their local public transit network. -
-- 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! +
+ Transit Talk is a Ruby on Rails web app based on a data standard called GTFS, which makes storing transit station and route information quite simple.
+
+ We’ve tried to create Transit Talk in a way that allows for a coder in any given city to plug in a couple lines of code and immediately have a beautiful, functioning issue reporting system for their local public transit network.
- Feel free to join the Chi Hack Night Slack group and chat with us on the #transit-talk channel if you have any questions about setting up your own fork of Transit Talk. -
+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!
++ Feel free to join the Chi Hack Night Slack group and chat with us on the #transit-talk channel if you have any questions about setting up your own fork of Transit Talk. +
+@@ -34,26 +35,30 @@
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. +
-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.
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. -
- 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.
+ Here at Transit Talk, we aim to create a transparent record of the issues riders encounter on their commutes, empowering them to make educated decisions about their commutes while also encouraging transit agencies to become more responsive to the needs of their riders. +
+- 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. -
-Transit information should be open and easily accessible. We hope to bridge the gap between transit administrations and their users, and to allow users to have some control over their commutes.
+ +
+ - Transit information should be open and easily accessible. We hope to bridge the gap between transit administrations and their users, and to allow users to have some control over their commutes. -
-
+
-
- - Transit Talk was formed out of Chi Hack Night, a weekly meeting of civic tech do-gooders, and was created by an all-volunteer group of computer scientists, transit advocates, and more. -
+ Transit Talk was formed out of Chi Hack Night, a weekly meeting of civic tech do-gooders, and was created by an all-volunteer group of computer scientists, transit advocates, and more. +
+
+ Transit Talk is a mobile-first web app that empowers transit riders to quickly and easily submit issue reports that generate real-time, crowdsourced knowledge about activity on their local transit system. +
+
@@ -15,10 +25,14 @@ - 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. -
+Rather than submit information into an administrative black box that other riders cannot view, Transit Talk enables users to openly view all reports made by fellow users on their local public transit system.
+
+