From 83acf3e641c9b0cc3922fbf7389c342e722133ba Mon Sep 17 00:00:00 2001 From: Mark Moser Date: Sat, 19 Aug 2017 13:17:39 -0500 Subject: [PATCH] hero updates and general layout work --- site/assets/scss/components/_hero.scss | 55 +++++++++++++- site/assets/scss/elements/_layout.scss | 27 ++++++- site/assets/scss/elements/_typography.scss | 6 +- site/assets/scss/settings/_colors.scss | 3 + site/pages/index.hbs | 86 ++++++++++++++-------- site/pages/styleguide.hbs | 7 +- site/partials/hero.hbs | 3 +- site/partials/nav-foot.hbs | 1 + 8 files changed, 148 insertions(+), 40 deletions(-) diff --git a/site/assets/scss/components/_hero.scss b/site/assets/scss/components/_hero.scss index 5bee8a4..1f12909 100644 --- a/site/assets/scss/components/_hero.scss +++ b/site/assets/scss/components/_hero.scss @@ -1,9 +1,62 @@ .hero { + display: flex; position: relative; - margin: 0; + align-content: center; + align-items: center; + justify-content: center; + margin: 0 0 ($gutter * 2); background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 0; height: 250px; + + h1 { + flex: 1 1 auto; + background-color: rgba($blue, 0.75); + padding: $gutter; + width: auto; + text-align: center; + color: $copy-light; + } + + .blue { + background-color: rgba($blue, 0.75); + } + + .dark-blue { + background-color: rgba($dark-blue, 0.75); + } + + .yellow { + background-color: rgba($yellow, 0.75); + color: $copy-dark; + } + + .orange { + background-color: rgba($orange, 0.75); + } + + .red { + background-color: rgba($red, 0.75); + } +} + +@media screen and (min-width: 426px) { + .hero { + h1 { + flex: 0 0 auto; + width: 425px; + } + } +} + +@media screen and (min-width: 768px) { + .hero { + h1 { + width: calc(100% * 0.809); + max-width: 860px; + text-align: inherit; + } + } } diff --git a/site/assets/scss/elements/_layout.scss b/site/assets/scss/elements/_layout.scss index 29d8bc3..64d01d7 100644 --- a/site/assets/scss/elements/_layout.scss +++ b/site/assets/scss/elements/_layout.scss @@ -1,5 +1,30 @@ +body { + min-width: 300px; +} + header, -main, footer { + margin: 0; padding: 0; } + +main { + margin: 0 $gutter; + padding: 0; +} + +@media screen and (min-width: 426px) { + footer, + main { + margin: 0 auto; + width: 425px; + } +} + +@media screen and (min-width: 768px) { + footer, + main { + width: calc(100% * 0.809); + max-width: 860px; + } +} diff --git a/site/assets/scss/elements/_typography.scss b/site/assets/scss/elements/_typography.scss index e441d1d..54dc332 100644 --- a/site/assets/scss/elements/_typography.scss +++ b/site/assets/scss/elements/_typography.scss @@ -2,14 +2,13 @@ html, body { @include font-default; background-color: $light; - color: $black; + color: $copy-dark; } .h1, h1 { @include font-roboto; margin: 0 0 ($gutter / 2); - background-color: $light-grey; padding: 8px 0; width: 100%; font-size: 40px; @@ -71,7 +70,8 @@ a { &:hover, &:active { - text-decoration: underline; + background-color: $white; + text-decoration: none; color: $dark-blue; } } diff --git a/site/assets/scss/settings/_colors.scss b/site/assets/scss/settings/_colors.scss index 5c440a9..87a7890 100644 --- a/site/assets/scss/settings/_colors.scss +++ b/site/assets/scss/settings/_colors.scss @@ -9,3 +9,6 @@ $orange: rgba(233, 114, 76, 1); $red: rgba(197, 40, 61, 1); $blue: rgba(37, 95, 133, 1); $dark-blue: rgba(24, 48, 89, 1); + +$copy-light: $white; +$copy-dark: $black; diff --git a/site/pages/index.hbs b/site/pages/index.hbs index ad69ddb..67367a0 100644 --- a/site/pages/index.hbs +++ b/site/pages/index.hbs @@ -1,40 +1,62 @@ --- - hero: stock/lake.png + heading: + img: stock/lake.png + copy: I build web things + theme: blue --- -

I build web things.

+
+

I'm Mark Moser

-

- A well-seasoned web developer with an affinity for clean code, - workflow optimization, and ruby. I have experiences ranging from - HTML prototyping through designing and executing API architectures. -

+

+ A well-seasoned web developer with an affinity for clean code, workflow + optimization, and ruby. I have experiences ranging from HTML prototyping + through designing and executing complex API architectures. +

-

- I highly value quality craftsmanship and want to do great work, - with people who also do great work. I love to explore and learn - about my world. I enjoy being challenged. I take pleasure in - providing creative solutions to specific needs, always keeping - the bigger picture in mind. -

+

+ I highly value quality craftsmanship and want to do great work, + with people who also do great work. I love to explore and learn + about my world. I enjoy being challenged. I take pleasure in + providing creative solutions to specific needs, always keeping + the bigger picture in mind. +

+
-

Proficiency's

+
+

General Proficiency's

-

- Well versed in many web development tool chains, my strengths - include Ruby, JavaScript, SCSS, SQL, and PHP. -

+
+

+ Well versed in many web development tool chains, my strengths + include Ruby, JavaScript, SCSS, SQL, and PHP. +

-
    -
  • 5/5 HTML Prototyping
    • -
  • 5/5 Ruby on Rails
    • -
  • 4/5 Linux Server Administration
    • -
  • 4/5 Front-End Dev Tool chains
    • -
  • 4/5 PHP Development
    • -
  • 4/5 Information Architecture
    • -
  • 3/5 UX Consulting
    • -
  • 5/5 CSS (and SCSS)
    • -
  • 4/5 JavaScript
    • -
  • 5/5 SQL
    • -
  • 5/5 Ruby
    • -
+
+
    +
  • Ruby
    • +
  • JavaScript
    • +
  • CSS
    • +
  • SQL
    • +
  • PHP
    • +
+
+
+
+ +
+

Back-end Proficiency's

+ +
diff --git a/site/pages/styleguide.hbs b/site/pages/styleguide.hbs index 0b5ef68..a66a486 100644 --- a/site/pages/styleguide.hbs +++ b/site/pages/styleguide.hbs @@ -1,6 +1,9 @@ --- - title: site style guide - hero: stock/star_nasa.jpg + title: Style guide + heading: + img: stock/star_nasa.jpg + copy: Style guide + theme: orange ---

Looking at styling for an h1

diff --git a/site/partials/hero.hbs b/site/partials/hero.hbs index 717936d..1e238bb 100644 --- a/site/partials/hero.hbs +++ b/site/partials/hero.hbs @@ -1,2 +1,3 @@ -
+
+

{{heading.copy}}

diff --git a/site/partials/nav-foot.hbs b/site/partials/nav-foot.hbs index 2557abd..c3a9e65 100644 --- a/site/partials/nav-foot.hbs +++ b/site/partials/nav-foot.hbs @@ -1,5 +1,6 @@