diff --git a/_sass/main.scss b/_sass/main.scss index 547e3e8..dd3890c 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -30,20 +30,28 @@ body { .btn { height: 50px; - color: #FFFFFF; font-size: 24px; line-height: 28px; display: flex; align-items: center; text-align: center; - background-color: #464646; border-radius: 9px; margin: 0 auto; margin-left: auto; margin-right: auto; } + .btn:hover { - background-color: #888888; + box-shadow: 4px 0 4px rgba(0, 0, 0, 0.25), 0 4px 4px rgba(0, 0, 0, 0.25); +} +.btn-primary { + background-color: #464646; + color: #FFFFFF; +} + +.btn-secondary { + color: #464646; + border: 3px solid #464646; } a.button { @@ -53,12 +61,18 @@ a.button { .hero-banner { padding-top: 30px; padding-bottom: 30px; + margin-bottom: 6px; + border-bottom: 10px solid #1BA4E3; h1 { + font-size: 38px; + line-height: 46px; font-style: normal; font-weight: 500; - font-size: 48px; - line-height: 56px; text-align: center; + @media only screen and (min-width: 600px) { + font-size: 48px; + line-height: 56px; + } } h2 { font-style: normal; @@ -72,165 +86,252 @@ a.button { .page-content { @extend %content-width; } + .section-1 { - height: 387px; + display: flow-root; + @media only screen and (min-width: 600px) { + 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; - width: 280px; text-align: center; - transform: translate(190px, 120px); + width:100%; + @media only screen and (min-width: 600px){ + width:40%; + } + h1 { + @media only screen and (min-width: 600px) { + padding-top:80px; + } + } + img { + height: 300px; + } } + .center-btn { .btn-learn { width: 170px; margin-top: 60px; - padding: 0px 0px 0px 24px; + padding: 0 0 0 24px; } + margin: 0 auto; - width: 50%; + width: 20%; text-align: center; .img-container { height: 130px; + padding-top: 10px; + img { + margin-bottom: -53px; + height: 80px; + @media only screen and (min-width: 600px) { + height: 130px; + } + } } } + .homepage-p-right { display: inline-block; height: 100px; - width: 330px; + width: 40%; float: right; - margin: -100px 90px 0px 0px; + padding: 80px 0; + p { + width: 70%; + margin: auto; + } } + .homepage-p-center { display: inline-block; - height: 100px; - width: 560px; - margin: 70px 0px 0px 480px; - p {font-size: 20px;} + width: 60%; + margin: auto; + p { + font-size: 20px; + padding: 30px 0; + } } + .tool-p-right { display: inline-block; height: 100px; float: right; - width: 330px; - margin: 120px 160px 0px 0px + 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; + } } -} -.bkgd-1 { - background-image: url(/assets/images/mobile-partition-left.png); - @media (min-width: 501px) { - background-image: url(/assets/images/partition-left.png); - } - background-size: cover; - background-repeat: no-repeat; - width: 130%; - margin-left: -230px; - } .three-buttons { + border-top: 10px solid #493390; + text-align: center; .features-img { - height: 170px; - margin: -80px 0px 0px 120px; + height: 90px; + @media only screen and (min-width: 600px) { + 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: 280px; + width: 50%; float: right; text-align: center; - margin: 30px 100px 0px 0px; } + .center-text { - width: 51%; + width: 100%; text-align: center; margin: auto; font-size: 20px; - padding: 30px 0px 50px 0px; + + p { + width: 70%; + margin: auto; + } } + .p-left { display: inline-block; height: 100px; float: left; - width: 330px; - margin: 60px 0px 0px 60px; + width: 50%; + + p { + width: 60%; + margin: auto; + margin-top: 40px; + } } .btn-mission { width: 170px; margin-top: 30px; - padding: 0px 0px 0px 32px; + padding: 0 0 0 32px; + } + + .btn-div { + width: 100%; + .btn-github { + margin-top: 90px; + } } } + .section-3 { - height: 350px; + 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: 280px; + width: 50%; + padding-top: 60px; text-align: center; - transform: translate(140px, 80px); } + .p-left { display: inline-block; height: 100px; float: left; - width: 330px; - margin: 100px 0px 0px 130px; + width: 50%; + + p { + width: 60%; + margin: auto; + padding-top: 100px; + } } + .p-right { display: inline-block; height: 100px; float: right; - width: 330px; - margin: 100px 300px 0px 0px; + 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; - padding: 110px 310px 50px 0px; } .btn-team { width: 170px; margin-top: 30px; - padding: 0px 0px 0px 40px; + padding: 0 0 0 40; } } -.bkgd-2 { - background-image: url(/assets/images/mobile-partition-right.png); - @media (min-width: 501px) { - background-image: url(/assets/images/partition-right.png); - } - background-size: cover; - background-repeat: no-repeat; - width: 130%; - margin-right: -230px; -} .section-4 { + border-top: 10px solid #1BA4E3; height: 260px; text-align: center; - width: 440px; margin: auto; - .p-center { - width: 121%; text-align: center; margin: auto; - font-size: 27px; - padding: 50px 0px 100px 0px; + font-size: 20px; + padding: 50px 0 100px 0; } -} -.btn-github { - width: 240px; - margin-top: 30px; - padding: 0px 0px 0px 37px; + p { + width: 50%; + margin: auto; + padding-top: 30px; } +} *:focus { - outline: none; - box-shadow: 0px 0px 0px 3px $orange; + outline: none; + box-shadow: 0 0 0 3 $orange; } diff --git a/in-your-city.html b/in-your-city.html index 3f43afa..8493073 100644 --- a/in-your-city.html +++ b/in-your-city.html @@ -7,7 +7,7 @@

In Your City

-
+

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.

@@ -16,19 +16,19 @@

In Your City

- +
+ +

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.

-
- -
+ diff --git a/index.html b/index.html index c238166..033c95b 100644 --- a/index.html +++ b/index.html @@ -8,15 +8,14 @@

Your Stress Ball for Public Transit

-
+

Our Tool

- - + +
@@ -34,14 +33,14 @@

Our Tool

Our Mission

- +
-
+

Our Team

- +

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. @@ -50,7 +49,7 @@

Our Team

Application to Other Cities

- +

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 d5a2656..b52f9cd 100644 --- a/mission.html +++ b/mission.html @@ -9,11 +9,11 @@

Our Mission

Making Transit Better

-
+
- +
-
+

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.

@@ -23,18 +23,14 @@

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.

-
+
+

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.

- -
-
-
-
- +
diff --git a/team.html b/team.html index 3b471a1..fac508c 100644 --- a/team.html +++ b/team.html @@ -9,14 +9,12 @@

Our Team

-
+
- +

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.

-
- -
\ No newline at end of file +
\ No newline at end of file diff --git a/tool.html b/tool.html index 785165a..ec41f9a 100644 --- a/tool.html +++ b/tool.html @@ -9,9 +9,9 @@

Our Tool

Rider-Powered Transit Information

-
+
- +

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. @@ -23,13 +23,13 @@

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.

-
+
+
-

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.

- +

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.

- +