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 */ |
||||
// TODO: .search-form {} |
||||
// 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); |
||||
.form { |
||||
width: rem(354); |
||||
|
||||
h3 { |
||||
color: var(--primary, $brand-primary); |
||||
|
||||
&::before { |
||||
content: ''; |
||||
display: block; |
||||
margin: 0 auto 1rem; |
||||
width: rem(46); |
||||
height: rem(5); |
||||
background: var(--accent, $brand-accent); |
||||
} |
||||
::placeholder { |
||||
color: $black; |
||||
} |
||||
|
||||
p { |
||||
&__notice { |
||||
margin-bottom: 2rem; |
||||
font-size: 0.875rem; |
||||
font-weight: 600; |
||||
font-family: $font-family-sans-serif; |
||||
|
||||
&:last-child { |
||||
margin-top: rem(47); |
||||
&--error { |
||||
color: $dark-red; |
||||
} |
||||
} |
||||
|
||||
.success { |
||||
color: $dark-green; |
||||
} |
||||
|
||||
.error { |
||||
color: $dark-red; |
||||
&--success { |
||||
color: $dark-green; |
||||
} |
||||
} |
||||
|
||||
form { |
||||
width: 22.125rem; |
||||
&__row { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 100%; |
||||
|
||||
.error > input[type="text"], |
||||
.error > input[type="email"], |
||||
.error > textarea { |
||||
&--error > input[type="text"], |
||||
&--error > input[type="email"], |
||||
&--error > textarea { |
||||
border-bottom: solid 2px $dark-red; |
||||
} |
||||
|
||||
.error > ::placeholder { |
||||
&--error > ::placeholder { |
||||
color: $dark-red; |
||||
} |
||||
} |
||||
|
||||
label { |
||||
margin-bottom: 1rem; |
||||
&:last-child { |
||||
margin-top: rem(48); |
||||
} |
||||
} |
||||
} |
||||
|
||||
label, |
||||
input[type="text"], |
||||
input[type="email"], |
||||
textarea { |
||||
font-size: 0.875rem; |
||||
font-weight: 600; |
||||
font-family: $font-family-sans-serif; |
||||
background: transparent; |
||||
} |
||||
label { |
||||
margin-bottom: 1rem; |
||||
} |
||||
|
||||
.button { |
||||
background: transparent; |
||||
input[type="text"], |
||||
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 { |
||||
height: 7.5em; // TODO |
||||
resize: none; |
||||
} |
||||
textarea { |
||||
height: 7.5em; |
||||
resize: none; |
||||
} |
||||
|
||||
input[type="text"], |
||||
input[type="email"], |
||||
textarea { |
||||
flex-grow: 1; |
||||
border-top: 0; |
||||
border-right: 0; |
||||
border-left: 0; |
||||
border-bottom: solid 2px $black; |
||||
padding: 0 0 1em; |
||||
|
||||
&:focus { |
||||
outline: none; |
||||
border-bottom: solid 2px var(--accent, $brand-accent); |
||||
} |
||||
input[type="submit"] { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
// Contact form |
||||
|
||||
.contact { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 100%; |
||||
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/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"> |
||||
<h3 class="tc ttu">{{ $contact_form_title }}</h3> |
||||
<form action="{{ network_home_url('/#contact') }}" method="post"> |
||||
<section class="contact" id="contact"> |
||||
<h2>{{ $contact_form_title }}</h2> |
||||
<form class="form" action="{{ network_home_url('/#contact') }}" method="post"> |
||||
@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 |
||||
<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> |
||||
<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> |
||||
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_email'){{ 'error' }}@endif"> |
||||
<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="form__row @if(@$contact_form_response['field'] === 'visitor_email'){{ 'form__row--error' }}@endif"> |
||||
<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> |
||||
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_institution'){{ 'error' }}@endif"> |
||||
<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="form__row @if(@$contact_form_response['field'] === 'visitor_institution'){{ 'form__row--error' }}@endif"> |
||||
<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> |
||||
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'message'){{ 'error' }}@endif"> |
||||
<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="form__row @if(@$contact_form_response['field'] === 'message'){{ 'form__row--error' }}@endif"> |
||||
<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> |
||||
<p class="tc"><input class="button-reset button button--small button--outline input-reset pointer" type="submit" value="{{ __('Send', 'aldine' ) }}" /></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="form__row"><input class="button button--small button--outline" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p> |
||||
</form> |
||||
</section> |
||||
|
||||
Loading…
Reference in new issue