Skip to content

Commit

Permalink
FTR
Browse files Browse the repository at this point in the history 
- Added more contact info
- Made styles for returns and exchanges
- Tweaked general content styles
- Adjusted the top and footer navigation
  • Loading branch information
Shawn King committed Jun 14, 2019
1 parent e250272 commit 513aaa2
Show file tree
Hide file tree
Showing 7 changed files with 214 additions and 121 deletions.
5 changes: 5 additions & 0 deletions BC-Contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,9 @@ <h2 class="content__sub-title">Thank you!</h2>
</form>
</div>
{% endif %}
<div class="content__additional--contact">
<h3 class="content__sub-title">Need to return or exchange something?</h3>
<p>View our Return & Exchange policy</p>
<p>Give us a call: 304-314-4667</p>
</div>
</div>
14 changes: 9 additions & 5 deletions BC-Layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,17 @@
<li{% if page.full_url contains '/products' or page.full_url contains '/product/' or page.full_url contains '/category/' or page.full_url contains '/artist/' %} class="navigation__list-item selected" {% else %} class="navigation__list-item" {% endif %}>
<a class="navigation__link" href="/products">{{ pages.products.name }}</a>
</li>
<!--
{% for page in pages.all limit:theme.nav_items %}
<li{% if page.full_url contains page.url %} class="navigation__list-item selected" {% else %} class="navigation__list-item" {% endif %}>
{{ page | link_to }}
</li>
{% endfor %}
<li{% if page.full_url contains '/contact' %} class="navigation__list-item selected" {% else %} class="navigation__list-item" {% endif %}>
<a class="navigation__link" href="/contact">Contact</a>
{% endfor %}-->
<li{% if page.full_url contains '/mission' or page.full_url contains '/mission/' %} class="navigation__list-item selected" {% else %} class="navigation__list-item" {% endif %}>
<a class="navigation__link" href="/mission">Mission</a>
</li>
<li{% if page.full_url contains '/contact' %} class="navigation__list-item selected" {% else %} class="navigation__list-item" {% endif %}>
<a class="navigation__link" href="/contact">Contact</a>
</li>
</ul>
</div>
Expand Down Expand Up @@ -227,11 +231,11 @@ <h1 class="custom-page-header page-title has-dash">{{ page.name }}</h1>
</a>
</li>
<li class="footer__navigation--list-item"><a class="footer__navigation--link" href="/products">{{ pages.products.name }}</a></li>
<li class="footer__navigation--list-item"><a class="footer__navigation--link" href="/contact">Contact</a></li>
<li class="footer__navigation--list-item"><a class="footer__navigation--link" href="/cart">Cart {% if cart.item_count > 0 %}<span class="footer__navigation--total">({{ cart.item_count }})</span>{% endif %}</a></li>
{% for page in pages.all %}
<li class="footer__navigation--list-item">{{ page | link_to }}</li>
{% endfor %}
<li class="footer__navigation--list-item"><a class="footer__navigation--link" href="/contact">Contact</a></li>
<li class="footer__navigation--list-item"><a class="footer__navigation--link" href="/cart">Cart {% if cart.item_count > 0 %}<span class="footer__navigation--total">({{ cart.item_count }})</span>{% endif %}</a></li>
{% if theme.show_search %}
<li class="">
<a class="open-search" href="#" title="Open search">Search</a>
Expand Down
117 changes: 91 additions & 26 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,72 @@ <h1 class="feature__title">

<!---->

<h2>What was For The Run created?</h2>
<p>This is an incredible community of people. If there is a way we can lift people up or bring more joy to fellow runners, we are in! Our aim is to be transparent with how we give back, so stay tuned!</p>
<p>As we continue to grow we will be sure to keep you updated about when and how we donate.</p>
<p>
We want to keep this simple!
At least 50% of every product we sell will give back.
</p>
<h2>Who or what will we give to?</h2>
<ul>
<li>Donate to charity runners</li>
<li>Donate to charity races</li>
<li>Buy race entries to giveaway</li>
<li>Buy gear to giveaway</li>
<li>Find any other ways we can help runners</li>
</ul>
<h2>Ways we plan to give back</h2>
<ul class="content__charity-breakdown">
<li class="charity--example">
<strong>4 shirts</strong>
<span> = </span>
Donation to a runner's charity
</li>
<li class="charity--example">
<strong>12 shirts</strong>
<span> = </span>
Pay for a half marathon race entry
</li>
<li class="charity--example">
<strong>24 shirts</strong>
<span> = </span>
Pay for a marathon race entry
</li>
<li class="charity--example">
<strong>Weekly causes</strong>
<span> = </span>
All proceeds for that week go to a cause
</li>
<li class="charity--example">
<strong>Merch for a cause</strong>
<span> = </span>
All proceeds from a product will go to a cause
</li>
</ul>
<p>Have ideas for how we can give back? Let us know!</p>
<a href="/contact" class="button large positive">Contact us</a>
<p>-<br><strong>For The Run</strong></p>

<!---->

We want to keep this simple! Every product we sell means we can give back to the running community.

WHO OR WHAT WILL WE GIVE TO?
Donate to charity runners
Donate to charity races
Buy race entries to giveaway
Buy gear to giveaway
Find any other ways we can help runners
HOW MUCH WILL WE GIVE?
At least 50% of the proceeds of every order will go back to runners.

This is an incredible community of people. If there is a way we can lift people up or bring more joy to fellow runners, we are in! Our aim is to be transparent with how we give back, so stay tuned!

As we continue to grow we will be sure to keep you updated about when and how we donate.

<!---->

<div class="content">
<header class="content__header">
<h2 class="content__title">
Expand Down Expand Up @@ -88,34 +154,33 @@ <h4>Breakdowns</h4>
</div>

<!--<footer class="module__footer">
I am the footer
</footer>-->

I am the footer
</footer>-->
<!-- -->
<!--<h2>What are we about?</h2>
<p>
Helping runners!
</p>-->
<!--<p>
Running is a passion sport. We love it. You love it.
</p>
<p>
Our proceeds will either go to helping runners meet their fundraising goals or towards races that are raising funds.
</p>-->
<!--<h3>
How we plan to help.
</h3>
<p>
We plan to create rad-tastic merch for this wonderful running community!
Like slapping stickers on things?
So do we!
Need some more shirts for before, during, or after your run?
Can we ever have enough? Is that really a question?
</p>
<p>
Stay tuned for what's to come!
</p>
<p>- For the run</p>-->
<p>
Helping runners!
</p>-->
<!--<p>
Running is a passion sport. We love it. You love it.
</p>
<p>
Our proceeds will either go to helping runners meet their fundraising goals or towards races that are raising funds.
</p>-->
<!--<h3>
How we plan to help.
</h3>
<p>
We plan to create rad-tastic merch for this wonderful running community!
Like slapping stickers on things?
So do we!
Need some more shirts for before, during, or after your run?
Can we ever have enough? Is that really a question?
</p>
<p>
Stay tuned for what's to come!
</p>
<p>- For the run</p>-->

</div>
</div>
Expand Down
98 changes: 51 additions & 47 deletions assets/css/_components.content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,86 +192,90 @@
//
//
//
&__additional--contact {
margin-left: 1rem;
padding: 2rem;
height: 20rem;
background: $white;
border-radius: .5rem;
box-shadow: 0 0 0 .0625rem rgba(black, .3);
//
h2,
h3,
h4 {
color: $blue;
}
}
//
//
//
&__charity-breakdown {
// CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties.
// These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties.
@supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto; // 25rem;
grid-gap: 2rem;
grid-gap: 1rem;
//
@media screen and (min-width: 46.875em) { // 750px
grid-template-columns: repeat(3, 1fr);
@media screen and (min-width: 62.5em) { // 1000px
grid-template-columns: repeat(2, 1fr);
}
}
//
margin: 0;
margin: 2rem 0 0 0;
padding: 0;
list-style: none;
}
}
//
.charity--example {
padding: 4rem 2rem;
.custom-page .charity--example {
padding: 2rem;
font-family: $brand-text;
font-size: 1.4125rem;
font-size: 1.25rem;
text-align: center;
color: white;
color: $black;
border-radius: .25rem;
//
&:nth-child(1) {
// CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties.
// These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties.
@supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) {
grid-column: 1;
grid-row: 1;
}
//
background: $purple;
background: linear-gradient(30deg, darken($purple, 10%) 0%, darken($purple, 30%) 100%);
background: $white;
//background: linear-gradient(30deg, darken($purple, 10%) 0%, darken($purple, 30%) 100%);
box-shadow: 0 0 0 .125rem $purple;
}
//
&:nth-child(2) {
// CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties.
// These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties.
@supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) {
grid-column: 1;
grid-row: 2;
//
@media screen and (min-width: 46.875em) { // 750px
grid-column: 2;
grid-row: 1;
}
}
//
background: $blue;
background: linear-gradient(30deg, darken($blue, 10%) 0%, darken($blue, 30%) 100%);
background: $white;
//background: linear-gradient(30deg, darken($purple, 10%) 0%, darken($purple, 30%) 100%);
box-shadow: 0 0 0 .125rem $blue;
}
//
&:nth-child(3) {
// CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties.
// These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties.
@supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) {
grid-column: 1;
grid-row: 3;
//
@media screen and (min-width: 46.875em) { // 750px
grid-column: 3;
grid-row: 1;
}
}
//
background: $green;
background: linear-gradient(30deg, darken($green, 10%) 0%, darken($green, 30%) 100%);
background: $white;
//background: linear-gradient(30deg, darken($purple, 10%) 0%, darken($purple, 30%) 100%);
box-shadow: 0 0 0 .125rem $green;
}
//
&:nth-child(4) {
background: $white;
//background: linear-gradient(30deg, darken($purple, 10%) 0%, darken($purple, 30%) 100%);
box-shadow: 0 0 0 .125rem $yellow;
}
//
&:nth-child(5) {
background: $white;
//background: linear-gradient(30deg, darken($purple, 10%) 0%, darken($purple, 30%) 100%);
box-shadow: 0 0 0 .125rem $orange;
}
//
strong {
font-size: 1.75rem;
font-weight: 900;
text-transform: uppercase;
}
//
span {
display: block;
padding-top: 1rem;
padding-bottom: 1rem;
padding-top: .5rem;
padding-bottom: .5rem;
}
}
8 changes: 8 additions & 0 deletions assets/css/_components.custom-page.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,14 @@
font-size: 1.25rem;
line-height: 125%;
color: $black;
//
@media screen and (min-width: 56.25em) { // 900px
padding-right: 20%;
}
//
@media screen and (min-width: 68.75em) { // 1100px
padding-right: 40%;
}
}
//
h2,
Expand Down
Loading

0 comments on commit 513aaa2

Please sign in to comment.