maj
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
.search-input, [data-grav-field="array"] input, [data-grav-field="array"] textarea {
|
||||
@extend .form-input;
|
||||
}
|
||||
|
||||
.button {
|
||||
@extend .btn;
|
||||
}
|
||||
@@ -1,11 +1,12 @@
|
||||
// Sticky Footer solution
|
||||
body.sticky-footer {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
#page-wrapper {
|
||||
flex: 1;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ form {
|
||||
span.required {
|
||||
color: $error-color;
|
||||
font-weight: 700;
|
||||
font-size: 150%;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.form-input[type=range] {
|
||||
|
||||
@@ -40,24 +40,34 @@ section.section {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
h1 {
|
||||
color: $header-text-dark;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: rgba($header-text-dark, 0.8);
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
&.hero-fullscreen {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
&.hero-large {
|
||||
height: 500px;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
&.hero-medium {
|
||||
height: 400px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
&.hero-small {
|
||||
height: 110px;
|
||||
min-height: 110px;
|
||||
}
|
||||
|
||||
&.hero-tiny {
|
||||
height: 8rem;
|
||||
min-height: 8rem;
|
||||
}
|
||||
|
||||
.header-fixed & {
|
||||
@@ -68,19 +78,24 @@ section.section {
|
||||
// background-attachment: fixed;
|
||||
//}
|
||||
|
||||
h1 {
|
||||
color: $header-text-dark;
|
||||
font-size: 4rem !important;
|
||||
@include breakpoint(md) {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: rgba($header-text-dark, 0.8);
|
||||
font-size: 2.5rem !important;
|
||||
@include breakpoint(sm) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
h1 + h2 {
|
||||
margin-top: -45px !important;
|
||||
}
|
||||
|
||||
&.text-light {
|
||||
h1 {
|
||||
@@ -92,7 +107,7 @@ section.section {
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 130%;
|
||||
font-size: .9rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
@@ -47,13 +47,18 @@
|
||||
.navbar-section {
|
||||
height: $header-height-large;
|
||||
@extend .default-animation;
|
||||
|
||||
@include breakpoint(md) {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.logo svg {
|
||||
width: 150px;
|
||||
display: inherit;
|
||||
|
||||
@extend .default-animation;
|
||||
.logo {
|
||||
svg, img {
|
||||
height: 42px;
|
||||
display: inherit;
|
||||
@extend .default-animation;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed Header solution
|
||||
@@ -73,8 +78,10 @@ body.header-fixed.header-animated {
|
||||
height: $header-height-small;
|
||||
}
|
||||
|
||||
.logo svg {
|
||||
width: 100px;
|
||||
.logo {
|
||||
svg, img {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
~ .mobile-menu .button_container {
|
||||
@@ -85,8 +92,4 @@ body.header-fixed.header-animated {
|
||||
|
||||
.login-status-wrapper {
|
||||
white-space: nowrap;
|
||||
|
||||
.icon {
|
||||
font-size: 120%;
|
||||
}
|
||||
}
|
||||
@@ -52,3 +52,26 @@
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
|
||||
@function strip-unit($value) {
|
||||
@return $value / ($value * 0 + 1);
|
||||
}
|
||||
|
||||
@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($min-font-size);
|
||||
$u4: unit($max-font-size);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
|
||||
& {
|
||||
font-size: $min-font-size;
|
||||
@media screen and (min-width: $min-vw) {
|
||||
font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
@media screen and (min-width: $max-vw) {
|
||||
font-size: $max-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
}
|
||||
|
||||
.mobile-logo {
|
||||
svg {
|
||||
max-width: 150px;
|
||||
margin-top: 1rem;
|
||||
svg, img {
|
||||
height: 42px;
|
||||
margin-top: .7rem;
|
||||
margin-left: 1.4rem;
|
||||
|
||||
path {
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
.button_container {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
top: 1.3rem;
|
||||
right: $horiz-padding;
|
||||
height: $mobile-button-height;
|
||||
width: $mobile-button-width;
|
||||
@@ -47,6 +47,8 @@
|
||||
z-index: 100;
|
||||
transition: opacity .25s ease, top 0.5s ease;
|
||||
|
||||
$bar-offset: $mobile-button-height / 3;
|
||||
|
||||
&:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
@@ -55,7 +57,7 @@
|
||||
position: fixed;
|
||||
|
||||
.top {
|
||||
transform: translateY(11px) translateX(0) rotate(45deg);
|
||||
transform: translateY($bar-offset) translateX(0) rotate(45deg);
|
||||
background: $mobile-color-active;
|
||||
}
|
||||
.middle {
|
||||
@@ -64,7 +66,7 @@
|
||||
}
|
||||
|
||||
.bottom {
|
||||
transform: translateY(-11px) translateX(0) rotate(-45deg);
|
||||
transform: translateY(-($bar-offset)) translateX(0) rotate(-45deg);
|
||||
background: $mobile-color-active;
|
||||
}
|
||||
}
|
||||
@@ -72,7 +74,7 @@
|
||||
span {
|
||||
background: $mobile-color-main;
|
||||
border: none;
|
||||
height: 5px;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -81,11 +83,11 @@
|
||||
cursor: pointer;
|
||||
|
||||
&:nth-of-type(2) {
|
||||
top: 11px;
|
||||
top: $bar-offset;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
top: 22px;
|
||||
top: $bar-offset * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
#modular-hero {
|
||||
.modular-hero {
|
||||
#to-start {
|
||||
bottom: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#modular-features {
|
||||
.modular-features {
|
||||
text-align: center;
|
||||
|
||||
&.offset-box {
|
||||
@@ -112,7 +112,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
#modular-text {
|
||||
.modular-text {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
|
||||
.columns.left {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,7 @@
|
||||
html {
|
||||
@include fluid-type($size-xs, $size-xl, $min-responsive-font-size, $html-font-size);
|
||||
}
|
||||
|
||||
// Header Overrides
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 2rem;
|
||||
@@ -26,9 +30,16 @@ h6, .h6 {
|
||||
.title-h1h2 {
|
||||
h1 {
|
||||
font-weight: 100;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.1;
|
||||
|
||||
strong, bold {
|
||||
font-weight: 400;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
h1 + h2 {
|
||||
line-height: 1.1;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -36,7 +47,6 @@ h6, .h6 {
|
||||
// Typography Hints
|
||||
.title-h1h2, .title-center {
|
||||
h1 + h2 {
|
||||
margin-top: -35px;
|
||||
margin-bottom: 50px;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -119,10 +129,29 @@ strong {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.icon {
|
||||
font-size: 120%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
margin-left: $unit-8;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: $unit-8;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc outside;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal outside;
|
||||
}
|
||||
|
||||
// Notices
|
||||
.notices {
|
||||
margin: 1.5rem 0;
|
||||
|
||||
@@ -3,6 +3,7 @@ $horiz-padding: 1rem;
|
||||
$vert-padding: 2rem 0 2rem;
|
||||
|
||||
// Fonts
|
||||
$min-responsive-font-size: 16px;
|
||||
$title-font-family: $base-font-family, $fallback-font-family !default;
|
||||
|
||||
// Header
|
||||
@@ -24,5 +25,5 @@ $dropmenu-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
|
||||
$mobile-color-main: $primary-color;
|
||||
$mobile-color-active: #FFF;
|
||||
$mobile-color-link: #FFF;
|
||||
$mobile-button-height: 27px;
|
||||
$mobile-button-width: 35px;
|
||||
$mobile-button-height: 24px;
|
||||
$mobile-button-width: 28px;
|
||||
Reference in New Issue
Block a user