Browse Source
* Books & blocks. * Fix catalog. * Update Tachyons. * Clean up contact form. * Update header. * Some header and footer improvements. * Add pages (closes #18).pull/25/head
Ned Zimmerman
7 years ago
committed by
GitHub
25 changed files with 370 additions and 551 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,83 +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(16); |
|
||||||
font-weight: normal; |
|
||||||
line-height: (30/16); |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.ml-auto { |
|
||||||
margin-left: auto; |
|
||||||
} |
|
||||||
|
|
||||||
.mr-auto { |
|
||||||
margin-right: auto; |
|
||||||
} |
|
||||||
|
|
||||||
: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); |
|
||||||
} |
|
||||||
@ -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: $white; |
|
||||||
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,98 +1,97 @@ |
|||||||
/** Search form */ |
.form { |
||||||
// TODO: .search-form {} |
width: rem(354); |
||||||
// TODO: .search-form label {} |
|
||||||
// TODO: .search-form .search-field {} |
|
||||||
// TODO: .search-form .search-submit {} |
|
||||||
|
|
||||||
::placeholder { |
|
||||||
color: $black; |
|
||||||
} |
|
||||||
|
|
||||||
.contact { |
|
||||||
background: #f6f6f6; |
|
||||||
padding: rem(65) 0 rem(120); |
|
||||||
|
|
||||||
h3 { |
::placeholder { |
||||||
color: var(--primary, $brand-primary); |
color: $black; |
||||||
|
|
||||||
&::before { |
|
||||||
content: ''; |
|
||||||
display: block; |
|
||||||
margin: 0 auto 1rem; |
|
||||||
width: rem(46); |
|
||||||
height: rem(5); |
|
||||||
background: var(--accent, $brand-accent); |
|
||||||
} |
|
||||||
} |
} |
||||||
|
|
||||||
p { |
&__notice { |
||||||
|
margin-bottom: 2rem; |
||||||
font-size: 0.875rem; |
font-size: 0.875rem; |
||||||
font-weight: 600; |
font-weight: 600; |
||||||
font-family: $font-family-sans-serif; |
font-family: $font-family-sans-serif; |
||||||
|
|
||||||
&:last-child { |
&--error { |
||||||
margin-top: rem(47); |
color: $dark-red; |
||||||
} |
} |
||||||
} |
|
||||||
|
|
||||||
.success { |
|
||||||
color: $dark-green; |
|
||||||
} |
|
||||||
|
|
||||||
.error { |
&--success { |
||||||
color: $dark-red; |
color: $dark-green; |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
form { |
&__row { |
||||||
width: 22.125rem; |
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: 100%; |
||||||
|
|
||||||
.error > input[type="text"], |
&--error > input[type="text"], |
||||||
.error > input[type="email"], |
&--error > input[type="email"], |
||||||
.error > textarea { |
&--error > textarea { |
||||||
border-bottom: solid 2px $dark-red; |
border-bottom: solid 2px $dark-red; |
||||||
} |
} |
||||||
|
|
||||||
.error > ::placeholder { |
&--error > ::placeholder { |
||||||
color: $dark-red; |
color: $dark-red; |
||||||
} |
} |
||||||
} |
|
||||||
|
|
||||||
label { |
&:last-child { |
||||||
margin-bottom: 1rem; |
margin-top: rem(48); |
||||||
|
} |
||||||
} |
} |
||||||
|
} |
||||||
|
|
||||||
label, |
label { |
||||||
input[type="text"], |
margin-bottom: 1rem; |
||||||
input[type="email"], |
} |
||||||
textarea { |
|
||||||
font-size: 0.875rem; |
|
||||||
font-weight: 600; |
|
||||||
font-family: $font-family-sans-serif; |
|
||||||
background: transparent; |
|
||||||
} |
|
||||||
|
|
||||||
.button { |
input[type="text"], |
||||||
background: transparent; |
input[type="email"], |
||||||
|
input[type="tel"], |
||||||
|
textarea { |
||||||
|
flex-grow: 1; |
||||||
|
border-top: 0; |
||||||
|
border-right: 0; |
||||||
|
border-left: 0; |
||||||
|
border-bottom: solid 2px $black; |
||||||
|
padding: 0 0 1em; |
||||||
|
font-size: 0.875rem; |
||||||
|
font-weight: 600; |
||||||
|
font-family: $font-family-sans-serif; |
||||||
|
background: transparent; |
||||||
|
-webkit-appearance: none; |
||||||
|
-moz-appearance: none; |
||||||
|
|
||||||
|
&:focus { |
||||||
|
outline: none; |
||||||
|
border-bottom: solid 2px var(--accent, $brand-accent); |
||||||
} |
} |
||||||
|
} |
||||||
|
|
||||||
textarea { |
textarea { |
||||||
height: 7.5em; // TODO |
height: 7.5em; |
||||||
resize: none; |
resize: none; |
||||||
} |
} |
||||||
|
|
||||||
input[type="text"], |
input[type="submit"] { |
||||||
input[type="email"], |
cursor: pointer; |
||||||
textarea { |
} |
||||||
flex-grow: 1; |
|
||||||
border-top: 0; |
// Contact form |
||||||
border-right: 0; |
|
||||||
border-left: 0; |
.contact { |
||||||
border-bottom: solid 2px $black; |
display: flex; |
||||||
padding: 0 0 1em; |
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
&:focus { |
align-items: center; |
||||||
outline: none; |
width: 100%; |
||||||
border-bottom: solid 2px var(--accent, $brand-accent); |
padding: rem(65) 0 rem(120); |
||||||
} |
background: #f6f6f6; |
||||||
|
|
||||||
|
h2 { |
||||||
|
font-size: rem(24); |
||||||
|
margin-bottom: rem(40); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,2 +1,87 @@ |
|||||||
@import 'pages/front-page'; |
@import 'pages/front-page'; |
||||||
@import 'pages/catalog'; |
@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); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|||||||
@ -1,22 +1,22 @@ |
|||||||
<section class="contact flex flex-column justify-center items-center w-100" id="contact"> |
<section class="contact" id="contact"> |
||||||
<h3 class="tc ttu">{{ $contact_form_title }}</h3> |
<h2>{{ $contact_form_title }}</h2> |
||||||
<form action="{{ network_home_url('/#contact') }}" method="post"> |
<form class="form" action="{{ network_home_url('/#contact') }}" method="post"> |
||||||
@if($contact_form_response) |
@if($contact_form_response) |
||||||
<p class="tl mb4 w-100 {{ $contact_form_response['status'] }}">{{ $contact_form_response['message'] }}</p> |
<p class="form__notice form__notice--{{ $contact_form_response['status'] }}">{{ $contact_form_response['message'] }}</p> |
||||||
@endif |
@endif |
||||||
<input type="hidden" name="submitted" value="1"> |
<input type="hidden" name="submitted" value="1"> |
||||||
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_name'){{ 'error' }}@endif"> |
<p class="form__row @if(@$contact_form_response['field'] === 'visitor_name'){{ 'form__row--error' }}@endif"> |
||||||
<label class="clip" for="visitor_name">{{ __('Your name*', 'aldine' ) }}</label> |
<label class="clip" for="visitor_name">{{ __('Your name*', 'aldine' ) }}</label> |
||||||
<input class="input-reset" type="text" placeholder="{{ __('Your name*', 'aldine' ) }}" name="visitor_name" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_name']) }}@endif"></p> |
<input type="text" placeholder="{{ __('Your name*', 'aldine' ) }}" name="visitor_name" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_name']) }}@endif"></p> |
||||||
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_email'){{ 'error' }}@endif"> |
<p class="form__row @if(@$contact_form_response['field'] === 'visitor_email'){{ 'form__row--error' }}@endif"> |
||||||
<label class="clip" for="visitor_email">{{ __('Your email*', 'aldine' ) }}</label> |
<label class="clip" for="visitor_email">{{ __('Your email*', 'aldine' ) }}</label> |
||||||
<input class="input-reset" type="email" placeholder="{{ __('Your email*', 'aldine' ) }}" name="visitor_email" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_email']) }}@endif"></p> |
<input type="email" placeholder="{{ __('Your email*', 'aldine' ) }}" name="visitor_email" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_email']) }}@endif"></p> |
||||||
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_institution'){{ 'error' }}@endif"> |
<p class="form__row @if(@$contact_form_response['field'] === 'visitor_institution'){{ 'form__row--error' }}@endif"> |
||||||
<label class="clip" for="visitor_institution">{{ __('Your institution*', 'aldine' ) }}</label> |
<label class="clip" for="visitor_institution">{{ __('Your institution*', 'aldine' ) }}</label> |
||||||
<input class="input-reset" type="text" placeholder="{{ __('Your institution*', 'aldine' ) }}" name="visitor_institution" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_institution']) }}@endif"></p> |
<input type="text" placeholder="{{ __('Your institution*', 'aldine' ) }}" name="visitor_institution" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_institution']) }}@endif"></p> |
||||||
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'message'){{ 'error' }}@endif"> |
<p class="form__row @if(@$contact_form_response['field'] === 'message'){{ 'form__row--error' }}@endif"> |
||||||
<label class="clip" for="message">{{ __('Your message here', 'aldine' ) }}</label> |
<label class="clip" for="message">{{ __('Your message here', 'aldine' ) }}</label> |
||||||
<textarea class="input-reset" type="text" placeholder="{{ __('Your message here', 'aldine' ) }}" name="message">@if($contact_form_response['status'] === 'error'){{ @esc_textarea($_POST['message']) }}@endif</textarea></p> |
<textarea type="text" placeholder="{{ __('Your message here', 'aldine' ) }}" name="message">@if($contact_form_response['status'] === 'error'){{ @esc_textarea($_POST['message']) }}@endif</textarea></p> |
||||||
<p class="tc"><input class="button-reset button button--small button--outline input-reset pointer" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p> |
<p class="form__row"><input class="button button--small button--outline" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p> |
||||||
</form> |
</form> |
||||||
</section> |
</section> |
||||||
|
|||||||
Loading…
Reference in new issue