GitBlixt
teagles/VS-America.com

Saved: 2017-10-24 15:58

Torey Heinz committed Oct 25, 2017
commit 2c5f357bd3eca73b71e91b3d804b049f3eba3a8b
Showing 27 changed files with 133 additions and 28 deletions
app/views/pages/layouts/default.liquid +32 -17
@@ @@ -9,6 +9,15 @@ is_layout: true
<!doctype html>
<html class="no-js" lang="en">
<head>
+ <meta charset="utf-8">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="shortcut icon" href="{{ 'favicon.ico' | theme_image_url }}">
+ <title>{{ page.title }} | VS America</title>
+
+ {{ 'app.css' | stylesheet_tag }}
+ <script src="https://use.fontawesome.com/2c75e31fa5.js"></script>
+
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-107293990-2"></script>
<script>
@@ @@ -18,34 +27,40 @@ is_layout: true
gtag('config', 'UA-107293990-2');
</script>
-
- <meta charset="utf-8">
- <meta http-equiv="x-ua-compatible" content="ie=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>{{ page.title }} | VS America</title>
- {{ 'app.css' | stylesheet_tag }}
</head>
<body>
- <header class="row collapse">
- <div class="banner column medium-5 ">
+ <header class="row collapse" data-equalizer data-equalize-on-stack=false>
+ <div class="banner column large-5" data-equalizer-watch>
{{ 'banner.png' | theme_image_tag }}
</div>
- <div class="column medium-7 ">
+ <div class="menu-wrapper column large-7" data-equalizer-watch>
+ <p class="contact-info">
+ <i class="fa fa-phone fa-lg">&nbsp;</i><a href="tel:16169566800">(616) 956-6800</a>
+ &nbsp;
+ <i class="fa fa-envelope fa-lg">&nbsp;</i><a href="mailto:contact@vs-america.com">contact@vs-america.com</a>
+ </p>
{% comment %}{% nav 'site', active_class: 'is-active', id: 'top-menu' %}{% endcomment %}
- <nav id="top-menu"><ul class="menu">
- <li id="why-castings-link" class="link"><a href="/why-castings">Why Castings?</a></li>
- <li id="material-choices-link" class="link"><a href="/material-choices">Material Choices</a></li>
- <li id="manufacturers-link" class="link"><a href="/manufacturers">Manufacturers</a></li>
- <li id="stock-items-link" class="link"><a href="/stock-items">Stock Items</a></li>
- <li id="applications-link" class="link last"><a href="/applications">Applications</a></li></ul></nav>
+ <nav id="top-menu">
+ <ul class="menu">
+
+ <li class="link"><a href="/"><i class="fa fa-home fa-lg"></i>Home</a></li>
+ <li class="link"><a href="/why-castings">Why Castings?</a></li>
+ <li class="link"><a href="/history-of-vs-america">Company</a></li>
+ <li class="link last"><a href="#">Contact</a></li></ul></nav>
</div>
+
</header>
- <div class="row">
- <div class="medium-3 column">
+ <div id="main" class="row">
+ <div class="medium-3 column sidebar">
{% link_to site.index %}
{% nav 'site', depth: 2, active_class: 'is-active', id: 'sidebar-nav' %}
</div>
<div class="medium-9 column">
+ <ul class="breadcrumbs">
+ {% for item in page.breadcrumbs %}
+ <li>{% link_to item %}</li>
+ {% endfor %}
+ </ul>
<h1>{{ page.title }}</h1>
{% block 'main' %}
{% editable_text "content" %}Hola!{% endeditable_text %}
config/deploy.yml +6 -0
@@ @@ -3,3 +3,9 @@ production:
handle: vs-america
email: torey@teagles.io
api_key: 688697709bb800280ffd38d5484b1f8bf8b9212d
+
+ development:
+ host: http://cms.dev
+ handle: unsightly-sanctuary-9959
+ email: torey@teagles.io
+ api_key: d935dbe44cd303e463cd80f4a266acd03827bb0f
public/fonts/322AAE_11_0.eot +0 -0
public/fonts/322AAE_11_0.ttf +0 -0
public/fonts/322AAE_11_0.woff +0 -0
public/fonts/322AAE_11_0.woff2 +0 -0
public/fonts/322AAE_2_0.eot +0 -0
public/fonts/322AAE_2_0.ttf +0 -0
public/fonts/322AAE_2_0.woff +0 -0
public/fonts/322AAE_2_0.woff2 +0 -0
public/fonts/322AAE_5_0.eot +0 -0
public/fonts/322AAE_5_0.ttf +0 -0
public/fonts/322AAE_5_0.woff +0 -0
public/fonts/322AAE_5_0.woff2 +0 -0
public/fonts/322AAE_A_0.eot +0 -0
public/fonts/322AAE_A_0.ttf +0 -0
public/fonts/322AAE_A_0.woff +0 -0
public/fonts/322AAE_A_0.woff2 +0 -0
public/fonts/322AAE_E_0.eot +0 -0
public/fonts/322AAE_E_0.ttf +0 -0
public/fonts/322AAE_E_0.woff +0 -0
public/fonts/322AAE_E_0.woff2 +0 -0
public/images/body-bg.png +0 -0
public/images/favicon.ico +0 -0
public/javascripts/app.js +2 -0
@@ @@ -3,6 +3,8 @@ $(document).foundation();
$('nav#sidebar-nav > ul').addClass('vertical menu')
$('nav#sidebar-nav > ul ul').addClass('vertical nested menu')
+ $('nav#sidebar-subnav > ul').addClass('vertical menu')
+
$('nav#top-menu > ul').addClass('menu')
var menu = new Foundation.AccordionMenu($('nav#sidebar-nav > ul'), {submenuToggle: true});
public/stylesheets/_settings.scss +11 -11
@@ @@ -43,11 +43,11 @@
// 1. Global
// ---------
- $global-width: rem-calc(1200);
- $global-font-size: 100%;
+ $global-width: rem-calc(1000);
+ $global-font-size: 17px;
$global-lineheight: 1.5;
- $primary-color: #2199e8;
- $secondary-color: #777;
+ $primary-color: #1A245B;
+ $secondary-color: #494F9D;
$success-color: #3adb76;
$warning-color: #ffae00;
$alert-color: #ec5840;
@@ @@ -58,7 +58,7 @@ $black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
- $body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ $body-font-family: "Malva", sans-serif;
$body-antialiased: true;
$text-direction: ltr;
$global-margin: 1rem;
@@ @@ -94,7 +94,7 @@ $block-grid-max: 6;
// ------------------
$header-font-family: $body-font-family;
- $header-font-weight: $global-weight-normal;
+ $header-font-weight: $global-weight-bold;
$header-font-style: normal;
$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
$header-sizes: (
@@ @@ -107,15 +107,15 @@ $header-sizes: (
'h6': 16,
),
medium: (
- 'h1': 48,
- 'h2': 40,
- 'h3': 31,
- 'h4': 25,
+ 'h1': 40,
+ 'h2': 32,
+ 'h3': 24,
+ 'h4': 20,
'h5': 20,
'h6': 16,
),
);
- $header-color: inherit;
+ $header-color: $primary-color;
$header-lineheight: 1.4;
$header-margin-bottom: 0.5rem;
$header-text-rendering: optimizeLegibility;
public/stylesheets/app.scss +82 -0
@@ @@ -1,4 +1,28 @@
@charset 'utf-8';
+ @font-face {
+ font-family: 'Malva';
+ font-weight: 300;
+ src: image-url("/fonts/322AAE_11_0.eot");
+ src: image-url("/fonts/322AAE_11_0.eot?#iefix") format("embedded-opentype"), image-url("/fonts/322AAE_11_0.woff2") format("woff2"), image-url("/fonts/322AAE_11_0.woff") format("woff"), image-url("/fonts/322AAE_11_0.ttf") format("truetype");
+ }
+ @font-face {
+ font-family: 'Malva';
+ font-weight: 400;
+ src: image-url("/fonts/322AAE_5_0.eot");
+ src: image-url("/fonts/322AAE_5_0.eot?#iefix") format("embedded-opentype"), image-url("/fonts/322AAE_5_0.woff2") format("woff2"), image-url("/fonts/322AAE_5_0.woff") format("woff"), image-url("/fonts/322AAE_5_0.ttf") format("truetype");
+ }
+ @font-face {
+ font-family: 'Malva';
+ font-weight: 700;
+ src: image-url("/fonts/322AAE_E_0.eot");
+ src: image-url("/fonts/322AAE_E_0.eot?#iefix") format("embedded-opentype"), image-url("/fonts/322AAE_E_0.woff2") format("woff2"), image-url("/fonts/322AAE_E_0.woff") format("woff"), image-url("/fonts/322AAE_E_0.ttf") format("truetype");
+ }
+ @font-face {
+ font-family: 'Malva';
+ font-weight: 800;
+ src: image-url("/fonts/322AAE_A_0.eot");
+ src: image-url("/fonts/322AAE_A_0.eot?#iefix") format("embedded-opentype"), image-url("/fonts/322AAE_A_0.woff2") format("woff2"), image-url("/fonts/322AAE_A_0.woff") format("woff"), image-url("/fonts/322AAE_A_0.ttf") format("truetype");
+ }
@import 'settings';
@import 'foundation6/foundation';
@@ @@ -42,6 +66,11 @@
@include motion-ui-transitions;
@include motion-ui-animations;
+ body {
+ background: image-url('/images/body-bg.png') repeat;
+ // font-size: rem-calc(17)
+ }
+
header {
background-color: #ECEEEE;
@@ @@ -50,11 +79,64 @@ header {
// height: rem-calc(125);
}
}
+
+ .menu-wrapper {
+ position: relative;
+ p.contact-info {
+ margin-top: rem-calc(10);
+ padding-right: 1.0em;
+ text-align: right;
+ }
+ }
+
+ nav#top-menu {
+ position: absolute;
+ bottom: rem-calc(5);
+ right: 0;
+
+ .fa {
+ margin-top: rem-calc(-4);
+ }
+
+ a {
+ color: $black;
+ text-transform: uppercase;
+ }
+
+ a:hover {
+ color: #ff6100;
+ }
+ }
+ }
+
+ #main {
+ padding-top: rem-calc(5);
+ background: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+ }
+
+ .sidebar {
+ // box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+ box-shadow: 3px 1px 3px -2px rgba(0,0,0,0.12);
+ // border-right: 2px solid $primary-color;
+ }
+
+ h1, h2, h3 {
+ text-transform: uppercase;
+ }
+
+ ul.breadcrumbs {
+ margin-bottom: 0;
+ }
+
+ li > a:hover {
+ color: #ff6100;
}
li.is-active > a {
font-style: italic;
font-weight: bold;
+ // color: #ff6100;
// background-color: yellow;
}