Ned Zimmerman
8 years ago
15 changed files with 190 additions and 393 deletions
@ -1,7 +0,0 @@
|
||||
@function rem($pixels, $context: $base-font-size) { |
||||
@return #{$pixels / $context}rem; |
||||
} |
||||
|
||||
@function percent($target, $context) { |
||||
@return ($target / $context) * 100%; |
||||
} |
||||
@ -1,99 +0,0 @@
|
||||
html { |
||||
-webkit-font-smoothing: antialiased; |
||||
} |
||||
|
||||
* { |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
margin: 0; |
||||
font-family: $font-family-serif; |
||||
font-size: rem(18); |
||||
background: #fff; |
||||
} |
||||
|
||||
h1, |
||||
h2, |
||||
h3, |
||||
h4, |
||||
h5, |
||||
h6 { |
||||
font-family: $font-family-sans-serif; |
||||
} |
||||
|
||||
h1 { |
||||
font-size: rem(30); |
||||
font-weight: 600; |
||||
letter-spacing: rem(2); |
||||
line-height: (36/30); |
||||
margin: 0; |
||||
} |
||||
|
||||
h2 { |
||||
font-size: rem(30); |
||||
font-weight: 600; |
||||
color: var(--primary, $brand-primary); |
||||
letter-spacing: 2px; |
||||
line-height: (36/30); |
||||
text-transform: uppercase; |
||||
text-align: center; |
||||
margin: 0; |
||||
|
||||
&::before { |
||||
content: ""; |
||||
display: block; |
||||
margin: 0 auto 1em; |
||||
width: 46px; |
||||
height: 5px; |
||||
background: var(--accent, $brand-accent); |
||||
} |
||||
} |
||||
|
||||
:root { |
||||
--primary: $brand-primary; |
||||
--accent: $brand-accent; |
||||
--primary-fg: $white; |
||||
--accent-fg: $white; |
||||
--header-text: $black; |
||||
} |
||||
|
||||
a { |
||||
color: var(--primary, $brand-primary); |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.primary { |
||||
color: var(--brand-primary, $brand-primary); |
||||
} |
||||
|
||||
.bg-primary { |
||||
background-color: var(--brand-primary, $brand-primary); |
||||
} |
||||
|
||||
.b--primary { |
||||
border-color: var(--brand-primary, $brand-primary); |
||||
} |
||||
|
||||
.accent { |
||||
color: var(--brand-secondary, $brand-accent); |
||||
} |
||||
|
||||
.bg-accent { |
||||
background-color: var(--brand-secondary, $brand-accent); |
||||
} |
||||
|
||||
.b--accent { |
||||
border-color: var(--brand-secondary, $brand-accent); |
||||
} |
||||
|
||||
@media (min-width: $medium) { |
||||
h2 { |
||||
font-size: rem(48); |
||||
line-height: (56/48); |
||||
|
||||
&::before { |
||||
width: 74px; |
||||
} |
||||
} |
||||
} |
||||
@ -1,21 +0,0 @@
|
||||
/** Colors */ |
||||
$brand-primary: #b01109; |
||||
$brand-accent: #015d75; |
||||
$light-gray: #ececec; |
||||
$dark-grey: #444; |
||||
$black: #000; |
||||
$white: #fff; |
||||
|
||||
/** Box Model */ |
||||
$spacer: 2rem; |
||||
|
||||
/** Breakpoints */ |
||||
$small: 768px; |
||||
$medium: 960px; |
||||
$large: 1200px; |
||||
$extra-large: 1650px; |
||||
|
||||
/** Fonts */ |
||||
$font-family-sans-serif: 'Karla', sans-serif; |
||||
$font-family-serif: 'Spectral', serif; |
||||
$base-font-size: 16; |
||||
@ -1,53 +0,0 @@
|
||||
.button { |
||||
display: inline-block; |
||||
width: rem(250); |
||||
height: rem(60); |
||||
padding: rem(19); |
||||
border: 2px solid var(--primary, $brand-primary); |
||||
border-radius: 3px; |
||||
background: var(--primary, $brand-primary); |
||||
font-family: $font-family-sans-serif; |
||||
font-size: 1rem; |
||||
font-weight: 600; |
||||
color: var(--primary-fg, $white); |
||||
line-height: normal; |
||||
letter-spacing: rem(2); |
||||
text-align: center; |
||||
text-decoration: none; |
||||
text-transform: uppercase; |
||||
transition: all 0.5s; |
||||
vertical-align: middle; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
background: $white; |
||||
color: var(--primary, $brand-primary); |
||||
} |
||||
|
||||
&.button--small { |
||||
width: rem(150); |
||||
height: rem(40); |
||||
padding: rem(6.5); |
||||
} |
||||
|
||||
&.button--wide { |
||||
width: 19.0625rem; |
||||
} |
||||
|
||||
&.button--outline { |
||||
background: transparent; |
||||
color: var(--primary, $brand-primary); |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: var(--primary-fg, $white); |
||||
background: var(--primary, $brand-primary); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (min-width: $medium) { |
||||
.button { |
||||
width: 275px; |
||||
} |
||||
} |
||||
@ -1,2 +1,87 @@
|
||||
@import 'pages/front-page'; |
||||
@import 'pages/catalog'; |
||||
|
||||
.page { |
||||
.page-header { |
||||
h1 { |
||||
font-size: rem(30); |
||||
font-weight: 600; |
||||
color: var(--primary, $brand-primary); |
||||
letter-spacing: 2px; |
||||
line-height: (36/30); |
||||
text-transform: uppercase; |
||||
text-align: center; |
||||
margin: 0; |
||||
padding-top: 1rem; |
||||
|
||||
&::before { |
||||
content: ""; |
||||
display: block; |
||||
margin: 0 auto 1em; |
||||
width: 46px; |
||||
height: 5px; |
||||
background: var(--accent, $brand-accent); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.wrap { |
||||
padding: 0 rem(8); |
||||
} |
||||
|
||||
.content { |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding: 0 0.78125rem; |
||||
display: flex; |
||||
height: auto; |
||||
min-height: rem(445); |
||||
background-color: $white; |
||||
margin: rem(-400) auto 0; |
||||
box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09); |
||||
text-align: center; |
||||
|
||||
p { |
||||
font-size: rem(18); |
||||
line-height: (32/16); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (min-width: $medium) { |
||||
.page { |
||||
.wrap { |
||||
margin-top: rem(-366); |
||||
} |
||||
|
||||
.page-header h1 { |
||||
font-size: rem(48); |
||||
line-height: (56/48); |
||||
} |
||||
|
||||
.content { |
||||
width: rem(775); |
||||
min-height: rem(494); |
||||
margin: rem(-600) auto rem(119); |
||||
padding: 0 90px; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 4.0625rem; |
||||
} |
||||
|
||||
p { |
||||
font-size: rem(18); |
||||
line-height: (32/18); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (min-width: $large) { |
||||
.page { |
||||
.content { |
||||
width: rem(1115); |
||||
} |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue