Skip to content

Oct 2019 redesign #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Oct 2019 redesign #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
db525b6
redesigned div borders
shrubin2 Oct 16, 2019
8b59d5d
refactored section 1
shrubin2 Oct 16, 2019
d58da98
did homepage
shrubin2 Oct 17, 2019
f1aecbb
working on tool page
shrubin2 Oct 17, 2019
29f83c3
done with tools
shrubin2 Oct 17, 2019
742dc0e
done with mission
shrubin2 Oct 17, 2019
4bead0c
done with team
shrubin2 Oct 17, 2019
41ae310
working on in-your-city
shrubin2 Oct 17, 2019
bc5569b
in-your-city
shrubin2 Oct 17, 2019
2c07136
Merge branch 'master' into oct-2019-redesign
shrubin2 Oct 29, 2019
fafdb78
fuck you travis
shrubin2 Oct 30, 2019
bfb7985
Ran stylelint --fix
shrubin2 Nov 6, 2019
4779a88
fixed html lint
shrubin2 Nov 6, 2019
5faecb4
fixd all the style lint bs
shrubin2 Nov 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
270 changes: 260 additions & 10 deletions _sass/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand All @@ -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;
Expand All @@ -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;
}
}
42 changes: 21 additions & 21 deletions in-your-city.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,27 @@
<h1>In Your City</h1>
<img src="/assets/images/logo.png" alt="TransitTalk Logo" class="logo-med">
</div>

<div class="bkgd-1 simple-cols -vertical -standard">
<p class="hero-p">
<strong>Transit Talk</strong> is a Ruby on Rails web app based on a data standard called GTFS, which makes storing transit station and route information quite simple.
</p>

<p class="hero-p">
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.
</p>
</div>

<div class="simple-cols -vertical -standard">
<a href="https://github.com/TransitTalk/Transit-Talk" class="btn">Visit our Github</a>
<p class="hero-p">
You don’t need to know what much about GTFS to create a version of <strong>Transit Talk</strong> 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!
<div class="section-1">
<div class="homepage-p-center">
<p>
<b>Transit Talk</b> is a Ruby on Rails web app based on a data standard called GTFS, which makes storing transit station and route information quite simple.
<br><br>
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.
</p>
</div>
</div>


<div class="bkgd-2 simple-cols -standard">
<p class="hero-p">
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.
</p>
<div class="section-2">
<div class="btn-div">
<button type="button" class="btn btn-secondary btn-github">Visit our Github</button>
</div>
<div class="center-text">
<p>You don’t need to know what much about GTFS to create a version of <b>Transit Talk</b> 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! </p>
</div>
</div>
<div class="section-3">
<div class="center-text">
<p>
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.
</p>
</div>
</div>
Loading