FTR

- More CSS and template work for the product and listing pages
sk5 · Jun 3, 2019 · 670fa21 · 670fa21
1 parent 98151cc
commit 670fa21
Show file tree

Hide file tree

Showing 17 changed files with 442 additions and 289 deletions.
diff --git a/.vs/config/applicationhost.config b/.vs/config/applicationhost.config
@@ -192,6 +192,14 @@
                     <binding protocol="http" bindingInformation="*:49800:localhost" />
                 </bindings>
             </site>
+            <site name="fortherun(4)" id="6">
+                <application path="/" applicationPool="Clr4IntegratedAppPool">
+                    <virtualDirectory path="/" physicalPath="C:\Users\shawn\source\repos\fortherun" />
+                </application>
+                <bindings>
+                    <binding protocol="http" bindingInformation="*:50217:localhost" />
+                </bindings>
+            </site>
             <siteDefaults>
                 <logFile logFormat="W3C" directory="%IIS_USER_HOME%\Logs" />
                 <traceFailedRequestsLogging directory="%IIS_USER_HOME%\TraceLogFiles" enabled="true" maxLogFileSizeKB="1024" />

diff --git a/.vs/fortherun/v15/.suo b/.vs/fortherun/v15/.suo
diff --git a/BC-Home.html b/BC-Home.html
@@ -47,3 +47,29 @@ <h3 class="feature__item--name">{{ product.name }}</h3> <!-- product-list-item-n
 {% endif %}
 {% endget %}
 {% endif %}
+<div class="callouts">
+    <div class="callout__about">
+        <p class="callout__about--text">
+            every order<br />
+            <strong>gives back</strong><br />
+            to runners
+        </p>
+        <a class="button large" href="about.html">Learn how</a>
+    </div>
+    <div class="callout__social">
+        <a href="https://www.instagram.com/forthe.run/" target="_blank" class="ig__brand">
+            <span class="ig__brand--logo">
+                <svg width="36" height="36" xmlns="http://www.w3.org/2000/svg">
+                    <g fill-rule="evenodd">
+                        <path d="M18 0c-4.889 0-5.501.02-7.421.108C8.663.196 7.354.5 6.209.945a8.823 8.823 0 0 0-3.188 2.076A8.83 8.83 0 0 0 .945 6.209C.5 7.354.195 8.663.108 10.58.021 12.499 0 13.11 0 18s.02 5.501.108 7.421c.088 1.916.392 3.225.837 4.37a8.823 8.823 0 0 0 2.076 3.188c1 1 2.005 1.616 3.188 2.076 1.145.445 2.454.75 4.37.837 1.92.087 2.532.108 7.421.108s5.501-.02 7.421-.108c1.916-.088 3.225-.392 4.37-.837a8.824 8.824 0 0 0 3.188-2.076c1-1 1.616-2.005 2.076-3.188.445-1.145.75-2.454.837-4.37.087-1.92.108-2.532.108-7.421s-.02-5.501-.108-7.421c-.088-1.916-.392-3.225-.837-4.37a8.824 8.824 0 0 0-2.076-3.188A8.83 8.83 0 0 0 29.791.945C28.646.5 27.337.195 25.42.108 23.501.021 22.89 0 18 0zm0 3.243c4.806 0 5.376.019 7.274.105 1.755.08 2.708.373 3.342.62.84.326 1.44.717 2.07 1.346.63.63 1.02 1.23 1.346 2.07.247.634.54 1.587.62 3.342.086 1.898.105 2.468.105 7.274s-.019 5.376-.105 7.274c-.08 1.755-.373 2.708-.62 3.342a5.576 5.576 0 0 1-1.346 2.07c-.63.63-1.23 1.02-2.07 1.346-.634.247-1.587.54-3.342.62-1.898.086-2.467.105-7.274.105s-5.376-.019-7.274-.105c-1.755-.08-2.708-.373-3.342-.62a5.576 5.576 0 0 1-2.07-1.346 5.577 5.577 0 0 1-1.346-2.07c-.247-.634-.54-1.587-.62-3.342-.086-1.898-.105-2.468-.105-7.274s.019-5.376.105-7.274c.08-1.755.373-2.708.62-3.342.326-.84.717-1.44 1.346-2.07.63-.63 1.23-1.02 2.07-1.346.634-.247 1.587-.54 3.342-.62 1.898-.086 2.468-.105 7.274-.105z" />
+                        <path d="M18 24.006a6.006 6.006 0 1 1 0-12.012 6.006 6.006 0 0 1 0 12.012zm0-15.258a9.252 9.252 0 1 0 0 18.504 9.252 9.252 0 0 0 0-18.504zm11.944-.168a2.187 2.187 0 1 1-4.374 0 2.187 2.187 0 0 1 4.374 0" />
+                    </g>
+                </svg>
+            </span>
+            <span class="ig__brand--text">
+                <span class="ig__brand--name">forthe.run</span>
+                say hello on instagram
+            </span>
+        </a>
+    </div>
+</div>
diff --git a/BC-Layout.html b/BC-Layout.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
     <link href="{{ theme | theme_css_url }}" media="screen" rel="stylesheet" type="text/css">
     <!--<link href="https://forthe.run/assets/css/styles.css" media="screen" rel="stylesheet" type="text/css" />-->
-    <link href="https://fonts.googleapis.com/css?family=Raleway:400,500,700,900|Frank+Ruhl+Libre:400,700|Titillium+Web:700,900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Raleway:400,500,700,900|Frank+Ruhl+Libre:400,700|Titillium+Web:700,900&display=swap|Rubik:900&display=swap" rel="stylesheet">
     {{ head_content }}
 </head>
 
@@ -36,6 +36,7 @@
                 <nav class="navigation">
                     <div class="header__title">
                         <a class="header__link" href="/">
+                            <!--
                             <svg class="ftr__logo" id="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
                                 <g id="For">
                                     <path class="ftr__logo--f" id="F" d="M4.9 1.5c0-.3.3-.6.6-.6h14.1c.4 0 .6.3.6.6v3.7c0 .3-.3.6-.6.6h-9.5v4.9H18c.3 0 .6.3.6.6V15c0 .3-.3.6-.6.6h-7.8v8.3c0 .3-.3.6-.6.6h-4c-.4 0-.6-.3-.6-.6V1.5z" />
@@ -50,6 +51,18 @@
                                     <path class="ftr__logo--n" id="N" d="M47.3 47.6c0-.3.3-.6.6-.6h.9l13.6 13.1V48c0-.3.3-.6.6-.6h4.1c.3 0 .6.3.6.6v23c0 .3-.3.6-.6.6h-.5c-.1 0-.4-.1-.4-.2L52.7 57.9v12.7c0 .3-.3.6-.6.6H48c-.3 0-.6-.3-.6-.6l-.1-23z" />
                                 </g>
                             </svg>
+                            -->
+                            <!---->
+                            <svg class="ftr__logo" id="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 21.6">
+                                <path class="ftr__logo--f" id="F" d="M2.9 2c0-.3.2-.5.5-.5h11.2c.3 0 .5.2.5.5v3c0 .3-.2.5-.5.5H7.1v3.9h6.2c.3 0 .5.2.5.5v3c0 .3-.2.5-.5.5H7.1V20c0 .3-.2.5-.5.5H3.4c-.3 0-.5-.2-.5-.5V2z" fill="#ffa357" />
+                                <path class="ftr__logo--heart" id="Heart" d="M25.8 1.2c5.4 0 9.8 4.4 9.8 9.8s-4.3 9.8-9.8 9.8S16 16.5 16 11s4.4-9.8 9.8-9.8zm0 15.2c3 0 5.4-2.4 5.4-5.4 0-3-2.4-5.5-5.4-5.5-3 0-5.4 2.5-5.4 5.5s2.4 5.4 5.4 5.4z" />
+                                <path class="ftr__logo--o" id="O" d="M25.8 14.4l2.5-2.5c.3-.3.5-.8.5-1.3 0-1-.8-1.8-1.8-1.8-.5 0-.9.2-1.3.5-.2-.3-.7-.5-1.2-.5-1 0-1.8.8-1.8 1.8 0 .5.2.9.5 1.3l2.6 2.5z" />
+                                <path class="ftr__logo--r" id="R" d="M37.8 2c0-.3.2-.5.5-.5h8.1c3.3 0 5.9 2.6 5.9 5.9 0 2.5-1.7 4.5-4 5.5l3.7 6.9c.2.4 0 .8-.5.8H48c-.2 0-.4-.1-.4-.2L44 13.1h-1.9V20c0 .3-.2.5-.5.5h-3.2c-.3 0-.5-.2-.5-.5V2zm8.3 7.6c1.1 0 2.1-1 2.1-2.2s-1-2.1-2.1-2.1h-4v4.2h4z" fill="#ff57e7" />
+                                <path class="ftr__logo--the" d="M88.7 5.4H55.3l6.1 6.1-6.1 6.1h33.3l-6.1-6.1 6.2-6.1zM68.5 9.5c0 .1-.1.2-.2.2h-1.2v4.6c0 .1-.1.2-.2.2h-1c-.1 0-.2-.1-.2-.2V9.7h-1.2c-.1 0-.2-.1-.2-.2v-.9c0-.1.1-.2.2-.2h3.9c.1 0 .2.1.2.2v.9zm6.2 4.8c0 .1-.1.2-.2.2h-1c-.1 0-.2-.1-.2-.2V12h-2.5v2.3c0 .1-.1.2-.2.2h-1c-.1 0-.2-.1-.2-.2V8.6c0-.1.1-.2.2-.2h1c.1 0 .2.1.2.2v2.2h2.5V8.6c0-.1.1-.2.2-.2h1c.1 0 .2.1.2.2v5.7zm5-4.8c0 .1-.1.2-.2.2h-2.4v1.1h2c.1 0 .2.1.2.2v.9c0 .1-.1.2-.2.2h-2v1.2h2.4c.1 0 .2.1.2.2v.9c0 .1-.1.2-.2.2h-3.6c-.1 0-.2-.1-.2-.2V8.6c0-.1.1-.2.2-.2h3.6c.1 0 .2.1.2.2v.9z" />
+                                <path class="ftr__logo--r1" id="R_1" class="ftr__logo--heart" id="O" d="M91.6 2c0-.3.2-.5.5-.5h8.1c3.3 0 5.9 2.6 5.9 5.9 0 2.5-1.7 4.5-4 5.5l3.7 6.9c.2.4 0 .8-.5.8h-3.6c-.2 0-.4-.1-.4-.2l-3.6-7.2h-1.9V20c0 .3-.2.5-.5.5h-3.2c-.3 0-.5-.2-.5-.5V2zm8.3 7.6c1.1 0 2.1-1 2.1-2.2 0-1.1-1-2.1-2.1-2.1h-4v4.2h4z" fill="#5aadff" />
+                                <path class="ftr__logo--u" id="U" d="M108.2 2c0-.3.2-.5.5-.5h3.3c.3 0 .5.2.5.5v11c0 1.9 1.4 3.4 3.3 3.4 2 0 3.4-1.5 3.4-3.4V2c0-.3.2-.5.5-.5h3.3c.3 0 .5.2.5.5v11.2c0 4.1-3.5 7.6-7.8 7.6s-7.7-3.4-7.7-7.6V2z" fill="#57ffc7" />
+                                <path class="ftr__logo--n" id="N" d="M125.9 1.7c0-.3.2-.5.5-.5h.7l10.8 10.4V2c0-.3.2-.5.5-.5h3.3c.3 0 .5.2.5.5v18.3c0 .3-.2.5-.5.5h-.4c-.1 0-.3-.1-.4-.1L130.2 9.9V20c0 .3-.2.5-.5.5h-3.2c-.3 0-.5-.2-.5-.5l-.1-18.3z" fill="#dbff57" />
+                            </svg>
                         </a>
                     </div>
                     <div class="navigation__left">
@@ -237,10 +250,13 @@ <h1 class="custom-page-header page-title has-dash">{{ page.name }}</h1>
                     {% endif %}
                     {% if store.website != blank %}
                     <a href="{{ store.website }}" class="button back-to-site">Back to site</a>
-                    {% endif %}
-                    <div class="badge">{{ bigcartel_credit }}</div>
+                    {% endif %}                    
                 </nav>
             </div>
+            <!-- -->
+            <div class="footer__credit">
+                <div class="credit__badge">{{ bigcartel_credit }}</div>
+            </div>
         </footer>
         <!---->
     </div>

diff --git a/BC-Product.html b/BC-Product.html
@@ -8,6 +8,12 @@
 		{% assign product_status = 'Coming soon' %}
 {% endcase %}
 <div class="product__page">
+    <!-- Product Headings -->
+    <div class="product__page--headings">
+        {% if product_status != blank %}<span class="product-status">{{ product_status }}</span>{% endif %}
+        <h1 class="product--title has-dash">{{ product.name }}</h1>
+    </div>
+
     <!-- Product Images -->
     <div class="product__images{% if product.images.size > 1 %} product-images-slideshow{% endif %}">
         <ul class="product__slides slides">
@@ -19,7 +25,7 @@
             {% endfor %}
         </ul>
         <ul class="product__thumbnails">
-            {% for image in product.images %}            
+            {% for image in product.images %}
             <li class="product__thumbnail js--product-thumbnail">
                 <!-- 1. Add unique class names to onclick and the images above -->
                 <!-- 2. When clicking a unique thumbnail, show the corresponding image -->
@@ -33,30 +39,24 @@
     </div>
 
     <div class="product__info">
-        <!-- Product Headings -->
-        <div class="product__page--headings">
-            {% if product_status != blank %}<span class="product-status">{{ product_status }}</span>{% endif %}
-            <h1 class="product--title has-dash">{{ product.name }}</h1>
+        {% if product.description != blank %}
+        <div class="product--description">
+            {{ product.description | paragraphs }}
         </div>
+        {% endif %}
 
         <!-- Product Details -->
         <div class="product__details">
-            {% if product.description != blank %}
-            <div class="product--description">
-                {{ product.description | paragraphs }}
-            </div>
-            {% endif %}
-
             {% if product.status == 'active' %}
             {% if theme.show_inventory_bars %}
             <div class="product__inventory">
                 <div class="inventory__header">Availability</div>
                 <ul class="inventory__info">
-                    {% for option in product.options %}                    
+                    {% for option in product.options %}
                     <li class="inventory__box{% if option.quantity < 2 %} sold-out{% endif %}">
                         <!--{% if option.quantity < 2 %}
-                        <div>Only 1 left</div>
-                        {% endif %}-->
+                    <div>Only 1 left</div>
+                    {% endif %}-->
                         {% unless product.has_default_option %}<div class="inventory__name">{{ option.name }}</div>{% endunless %}
                         <!--<div class="bar">-->
                         <!-- style="width:{{ option.inventory }}%;" -->
@@ -76,12 +76,12 @@ <h1 class="product--title has-dash">{{ product.name }}</h1>
                 {% else %}
                 <div class="product__select">
                     <!--
-                        {% for category in product.categories %}
-                          {% if category.name == 'Shirts' %}
-                            <div>Your content</div>
-                          {% endif %}
-                        {% endfor %}
-                    -->
+                    {% for category in product.categories %}
+                      {% if category.name == 'Shirts' %}
+                        <div>Your content</div>
+                      {% endif %}
+                    {% endfor %}
+                -->
                     {% for category in categories.active %}
                     {% if category.name == 'Shirts' %}
                     <label class="product__select-label" for="option">Choose a shirt size and color</label>

diff --git a/assets/css/_components.button.scss b/assets/css/_components.button.scss
@@ -15,7 +15,7 @@ button {
     transition: background .2s ease;
     display: inline-block;
     padding: .5rem 1rem;
-    font-family: $thick-text;
+    font-family: $brand-text;
     font-size: 1rem;
     line-height: 1em;
     color: white;
@@ -29,7 +29,7 @@ button {
         padding: 1.25rem 2rem;
         font-size: 1.5rem;
         font-weight: 900;
-        letter-spacing: .0625rem;
+        //letter-spacing: .0625rem;
     }
     //
     &.negative {

diff --git a/assets/css/_components.callouts.scss b/assets/css/_components.callouts.scss
@@ -18,8 +18,20 @@
         grid-gap: 0;
     }
     //
-    margin-top: 2rem;
-    margin-bottom: 4rem;
+    position: relative;
+    //margin-top: 2rem;
+    padding-bottom: 4rem;
+    //
+    &:before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        top: 0;
+        right: -20vw;
+        bottom: 0;
+        left: -20vw;
+        background: #f9fafb;
+    }
 }
 //
 .callout {
@@ -28,7 +40,7 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        height: 16rem;
+        height: 12rem;
     }
     //
     &__about {
@@ -79,22 +91,11 @@
             }
         }
         //
-        &--link {
+        .button {
             position: relative;
             z-index: 1;
             margin-right: 4rem;
-            padding: 1rem 1.5rem;
-            height: 4rem;
-            font-family: $brand-text;
-            font-size: 1.25rem;
-            line-height: 2rem;
-            text-align: right;
-            text-transform: uppercase;
-            text-decoration: none;
-            color: white;
-            background: darken($blue, 20%);
-            border-radius: 2rem;
-            box-shadow: 0 0 0 .0625rem lighten($blue, 15%);
+            background: darken($blue, 10%);
         }
     }
     //

diff --git a/assets/css/_components.cart.scss b/assets/css/_components.cart.scss
@@ -21,8 +21,8 @@
         //
         position: relative;
         //margin-bottom: 2rem;
-        padding-top: 4rem;
-        padding-bottom: 4rem;
+        padding-top: 3rem;
+        padding-bottom: 3rem;
         min-height: 60vh;
         //background: $fafafa;
         //

diff --git a/assets/css/_components.custom-page.scss b/assets/css/_components.custom-page.scss
@@ -6,8 +6,8 @@
     &-page {
         position: relative;
         //margin-bottom: 2rem;
-        padding-top: 4rem;
-        padding-bottom: 4rem;
+        padding-top: 3rem;
+        padding-bottom: 3rem;
         //
         &:before {
             content: "";

diff --git a/assets/css/_components.footer.scss b/assets/css/_components.footer.scss
@@ -39,15 +39,16 @@
             list-style: none;
         }
         //
-        &--link {
+        &--link,
+        a {
             transition: box-shadow .3s ease;
             display: inline-block;
             margin-right: .5rem;
             margin-left: .5rem;
             padding: .5rem 0;
             font-family: $brand-text;
-            font-size: 1.125rem;
-            font-weight: 500;
+            font-size: 1rem;
+            font-weight: 900;
             text-transform: uppercase;
             text-decoration: none;
             color: $white;
@@ -68,3 +69,43 @@
         }
     }
 }
+//
+//
+//
+.footer__credit {
+    // 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 / span 3;
+        grid-row: 2;
+    }
+    //
+    position: relative;
+    margin: 0 auto;
+    padding: .25rem 0;
+    width: 80vw;
+    background: darken($black, 20%);
+    //
+    &:before,
+    &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 20vw;
+        background: darken($black, 20%);
+    }
+    //
+    &:before {
+        right: 100%;
+    }
+    //
+    &:after {
+        left: 100%;
+    }
+}
+//
+.credit__badge a {
+    font-size: .75rem;
+    color: $white;
+}
diff --git a/assets/css/_components.header.scss b/assets/css/_components.header.scss
@@ -85,8 +85,8 @@
         align-items: center;
         margin-top: 0;
         margin-bottom: 0;
-        padding-top: 4rem;
-        padding-bottom: 4rem;
+        padding-top: 3rem;
+        padding-bottom: 3rem;
         //height: 30vh;
         //text-align: center;
         //margin: 0;
@@ -96,8 +96,8 @@
     //
     &__link {
         //display: inline-block;
-        width: 9.375rem;
-        height: 9.375rem;
+        width: 20rem;
+        //height: 9.375rem;
         //box-shadow: -1rem 0 0 $white, -1.0625rem 0 0 $orange, -1.1875rem 0 0 $white, -1.25rem 0 0 $red, -1.375rem 0 0 $white, -1.4375rem  0 0 $purple;
     }
 }
diff --git a/assets/css/_components.navigation.scss b/assets/css/_components.navigation.scss
@@ -59,8 +59,8 @@
         margin-left: .5rem;
         padding: .5rem 0;
         font-family: $brand-text;
-        font-size: 1.125rem;
-        font-weight: 500;
+        font-size: 1rem;
+        font-weight: 900;
         text-transform: uppercase;
         text-decoration: none;
         color: $black;