Skip to content
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

Reponsive features and fixes #36

Merged
merged 15 commits into from
Oct 8, 2018
Merged

Reponsive features and fixes #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
5931775
Add flex wrap to page section
robinmetral Sep 17, 2018
1192c35
List featured items in a column on smaller screens
robinmetral Sep 17, 2018
3d5c825
Use a media query to make site sections one column
robinmetral Sep 17, 2018
4b00adc
Add hamburger nav for mobile responsiveness
robinmetral Sep 17, 2018
c089d1e
Add media query to hide nav and show hamburger on smaller screens
robinmetral Sep 17, 2018
c660dc6
Revert "Add media query to hide nav and show hamburger on smaller scr…
robinmetral Sep 19, 2018
8d0a05e
Revert "Add hamburger nav for mobile responsiveness"
robinmetral Sep 19, 2018
982b310
Add horizontal scroll nav
robinmetral Sep 19, 2018
b2faf4f
Hide horizontal scrollbar in Edge
robinmetral Oct 4, 2018
21e3c0e
Fix nav scrolling
robinmetral Oct 4, 2018
9d29cc0
Comment on scrollbar disabling on Firefox
robinmetral Oct 4, 2018
b5a05a2
Reduce font size and move relevant vars to typography.styl
robinmetral Oct 5, 2018
1647fb4
Remove font size declaration from layouts
robinmetral Oct 5, 2018
c37ed2e
Change rem to % for responsive spacing without media queries
robinmetral Oct 5, 2018
14970e4
Fix video submission form display on mobile
robinmetral Oct 8, 2018
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
7 changes: 1 addition & 6 deletions header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,9 @@
<!-- nav -->
<nav class="nav" role="navigation">
<?php main_nav(); ?>
</nav>
<!-- /nav -->

<!-- calls to action -->
<nav class="calls-to-action">
<?php calls_to_action(); ?>
</nav>
<!-- /calls to action -->
<!-- /nav -->

</header>
<!-- /header -->
101 changes: 63 additions & 38 deletions stylus/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ html {
}
body {
font-family: "Montserrat", sans-serif;
font-size: 2rem;
font-size: 1.5rem;
line-height: 1.5;
}
.header {
font-size: 1.5rem;
}
.wt_banner-message h1 {
font-size: 6rem;
font-size: 4rem;
line-height: 1;
}
.wt_alert {
Expand Down Expand Up @@ -59,10 +59,10 @@ h2 {
color: #fff;
}
label {
font-size: 1.5rem;
font-size: $small-text-size;
}
label > span {
font-size: 2rem;
font-size: 1.5rem;
}
input[type=text],
input[type=email] {
Expand All @@ -77,7 +77,6 @@ input[type=email]:focus {
textarea {
border: 1px solid LightGrey;
border-radius: 0.5rem;
padding: 1rem;
margin-top: 1rem;
resize: none;
}
Expand All @@ -103,14 +102,35 @@ input[type=reset]:hover {
}
body {
padding-top: 5rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header {
display: flex;
width: 100%;
position: absolute;
top: 0;
display: flex;
}
.nav {
/*
* Horizontal scroll flexbox
* https://iamsteve.me/blog/entry/using-flexbox-for-horizontal-scrolling-navigation
*/
display: flex;
width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
.nav::-webkit-scrollbar {
display: none;
}
.nav > * {
flex: 0 0 auto;
}
.calls-to-action {
.nav ul:last-child {
margin-left: auto;
}
.logo {
Expand All @@ -134,7 +154,6 @@ body {
flex-direction: column;
visibility: hidden;
line-height: 0.8;
font-size: 1.6rem;
}
.menu-item-has-children:hover .sub-menu {
visibility: visible;
Expand All @@ -155,8 +174,8 @@ body.page-template-template-donate .header a {
}
.wt_banner > * {
flex: 1;
margin: 10rem;
max-width: 50%;
margin-left: 10%;
max-width: 50rem;
}
.wt_banner-message h1 {
color: #fff;
Expand Down Expand Up @@ -188,7 +207,7 @@ body.page-template-template-donate .header a {
ul.wt_featured-partners {
list-style-type: none;
width: 80vw;
margin: 5rem auto;
margin: 5% auto;
padding: 0;
display: flex;
justify-content: space-around;
Expand All @@ -200,26 +219,30 @@ ul.wt_featured-partners li {
}
.wt_page-section {
display: flex;
margin-bottom: 5rem;
margin-bottom: 5%;
}
.wt_section-image {
.wt_page-section > * {
flex: 1;
padding: 2rem;
margin: auto;
}
.wt_section-message {
flex: 1;
padding: 5rem;
}
section:nth-child(even) .wt_section-message {
order: -1;
}
@media only screen and (max-width: 800px) {
.wt_page-section {
flex-direction: column;
}
section:nth-child(even) .wt_section-message {
order: 1;
}
}
.wt_featured-items {
display: flex;
justify-content: space-between;
background-color: #4799fc;
padding: 5rem;
margin-bottom: 10rem;
padding: 5%;
margin-bottom: 10%;
}
.wt_featured-item {
margin: 2rem;
Expand All @@ -229,6 +252,11 @@ section:nth-child(even) .wt_section-message {
display: flex;
flex-direction: column;
}
@media only screen and (max-width: 800px) {
.wt_featured-items {
flex-direction: column;
}
}
.wt_featured-item > a {
height: 20rem;
}
Expand All @@ -244,37 +272,33 @@ section:nth-child(even) .wt_section-message {
}
.wt_page-intro {
max-width: 60rem;
margin: 10rem auto;
margin: 10% auto;
}
#wt_full-partners-list {
list-style-type: none;
margin: 0 10rem;
margin: 0 10%;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
column-gap: 10rem;
row-gap: 10rem;
grid-gap: 10%;
}
.wt_two-column-face-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
margin: 0 10rem;
column-gap: 10rem;
row-gap: 10rem;
margin: 0 10%;
grid-gap: 10%;
}
.wt_three-column-face-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
margin: 0 10rem;
column-gap: 10rem;
row-gap: 10rem;
margin: 0 10%;
grid-gap: 10%;
}
.wt_names-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
margin: 0 10rem;
column-gap: 10rem;
row-gap: 10rem;
margin: 0 10%;
grid-gap: 10%;
}
.wt_member {
display: flex;
Expand All @@ -284,24 +308,25 @@ section:nth-child(even) .wt_section-message {
margin: 1rem;
}
.wt_form-banner {
width: 100%;
max-width: 100%;
margin: 2rem;
min-height: 100vh;
margin-top: -5rem;
display: flex;
align-items: center;
}
.wt_form-banner > * {
flex: 1;
margin: 10rem;
max-width: 50%;
max-width: 100%;
}
.wt_form-banner-message h1 {
color: #fff;
text-align: left;
font-weight: bold;
}
.wt_form-banner-message .wt_cta {
margin: 2rem 0;
input[type=text],
input[type=email],
textarea {
max-width: 100%;
}
.footer {
background-color: #0d232f;
Expand Down
2 changes: 1 addition & 1 deletion stylus/require/global.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ input[type=text]:focus, input[type=email]:focus
textarea
border 1px solid LightGrey
border-radius 0.5rem
padding 1rem
// padding 1rem // causes the textarea to overflow
margin-top 1rem
resize none

Expand Down
Loading