remove czmj stuff, strip it down to a basic splash page
This commit is contained in:
czmj
@ -1,4 +1,4 @@
|
||||
@function dynamic-color($color, $lightness: 50, $dark-color: $text-color, $light-color: $brand-white) {
|
||||
@function dynamic-color($color, $lightness: 50, $dark-color: $brand-black, $light-color: $brand-white) {
|
||||
@if (lightness($color) > $lightness){
|
||||
@return $dark-color; // Lighter background, return dark color
|
||||
}
|
||||
@ -6,21 +6,6 @@
|
||||
@return $light-color; // Darker background, return light color
|
||||
}
|
||||
}
|
||||
@function paired-color($brand-color) {
|
||||
$return-color: dynamic-color($brand-color) !default;
|
||||
|
||||
@if ($brand-color == $brand-color-d){
|
||||
$return-color: $brand-color-a;
|
||||
}
|
||||
@if ($brand-color == $brand-color-e){
|
||||
$return-color: $brand-color-b;
|
||||
}
|
||||
@if ($brand-color == $brand-color-f){
|
||||
$return-color: $brand-color-c;
|
||||
}
|
||||
|
||||
@return $return-color;
|
||||
}
|
||||
|
||||
@function tint($color, $percentage) {
|
||||
@return mix(#fff, $color, $percentage);
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
@font-face {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: 'Larsseit';
|
||||
src:url('#{$directory-fonts}/Larsseit/Larsseit.eot?-gfwsty');
|
||||
src:url('#{$directory-fonts}/Larsseit/Larsseit.eot?#iefix-gfwsty') format('embedded-opentype'),
|
||||
url('#{$directory-fonts}/Larsseit/Larsseit.ttf?-gfwsty') format('truetype'),
|
||||
url('#{$directory-fonts}/Larsseit/Larsseit.woff?-gfwsty') format('woff'),
|
||||
url('#{$directory-fonts}/Larsseit/Larsseit.svg?-gfwsty#Larsseit') format('svg');
|
||||
}
|
||||
@ -12,8 +12,6 @@ html {
|
||||
|
||||
background: $background-color;
|
||||
|
||||
overflow-x: hidden;
|
||||
|
||||
font-size: 100%;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@ -26,14 +24,6 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.rtl {
|
||||
text-align: right;
|
||||
|
||||
svg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
color: $text-color;
|
||||
@ -44,16 +34,26 @@ body {
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.container {
|
||||
@include container;
|
||||
width: $max-width;
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@ -1,61 +0,0 @@
|
||||
.hex-grid {
|
||||
@include breakpoint($sm) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
padding-bottom: 6.6%
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hex__outer {
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
outline: 1px solid transparent;
|
||||
|
||||
&::after {
|
||||
content:'';
|
||||
display: block;
|
||||
padding-bottom: 86.602%; // = 100 / tan(60) * 1.5
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hex__middle {
|
||||
position: absolute;
|
||||
width: 92%;
|
||||
padding-bottom: 106.232%; // width / sin(60)
|
||||
margin: 0 1%;
|
||||
overflow: hidden;
|
||||
outline: 1px solid transparent;
|
||||
transform: rotate3d(0,0,1,-60deg) skewY(30deg);
|
||||
|
||||
> * {
|
||||
position: absolute;
|
||||
visibility: visible;
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
@mixin hex__inner {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
transform: skewY(-30deg) rotate3d(0,0,1,60deg);
|
||||
|
||||
img {
|
||||
left: -100%;
|
||||
right: -100%;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
max-width: 200%;
|
||||
margin: 0 auto;
|
||||
transform: rotate3d(0,0,0,0deg);
|
||||
}
|
||||
|
||||
> * {
|
||||
position: absolute;
|
||||
visibility: visible;
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
@ -1,29 +1,18 @@
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@mixin hidden-xs {
|
||||
@include breakpoint(max-width $breakpoint-sm-width) {
|
||||
@include breakpoint(max-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hidden-sm {
|
||||
@include breakpoint($breakpoint-sm-width $breakpoint-sm-width-max) {
|
||||
@include breakpoint($breakpoint-sm-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin hidden-md {
|
||||
@include breakpoint($breakpoint-md-width $breakpoint-md-width-max) {
|
||||
@include breakpoint($breakpoint-md-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -34,20 +23,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin with-rtl($padding-end: null) {
|
||||
@content;
|
||||
@mixin visually-hidden {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@if $padding-end != null {
|
||||
padding-right: $padding-end;
|
||||
}
|
||||
|
||||
.rtl & {
|
||||
@include with-layout(rtl) {
|
||||
@content;
|
||||
|
||||
@if $padding-end != null {
|
||||
padding-left: $padding-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
.visually-hidden {
|
||||
@include visually-hidden();
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
// for monitor-mq.js
|
||||
.monitor-mq {
|
||||
display: block;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: -9999em;
|
||||
left: -9999em;
|
||||
// smallest
|
||||
width: $sm;
|
||||
|
||||
@include breakpoint($md) {
|
||||
width: $md;
|
||||
}
|
||||
|
||||
@include breakpoint($lg) {
|
||||
width: $lg;
|
||||
}
|
||||
|
||||
@include breakpoint($xl) {
|
||||
width: $xl;
|
||||
}
|
||||
|
||||
@include breakpoint($xxl) {
|
||||
width: $xxl;
|
||||
}
|
||||
}
|
||||
@ -1,78 +1,64 @@
|
||||
p {
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
margin-bottom: $vr*3;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
&[href^=tel] {
|
||||
direction: ltr;
|
||||
unicode-bidi: embed;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: $vr*2;
|
||||
}
|
||||
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5 {
|
||||
.h5,
|
||||
.h6 {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-weight: $font-weight-regular;
|
||||
font-family: $font-family-heading;
|
||||
line-height: 1.2;
|
||||
margin-bottom: $vr*3;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 30px;
|
||||
font-size: calc(20px + 2vw);
|
||||
|
||||
font-size: $vr*6;
|
||||
font-size: calc(#{$vr*5} + 3.5vw);
|
||||
|
||||
@include breakpoint($xl) {
|
||||
font-size: 48px;
|
||||
font-size: $vr*15;
|
||||
}
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 22px;
|
||||
font-size: calc(18px + 0.7vw);
|
||||
font-size: $vr*5;
|
||||
font-size: calc(#{$vr*4} + 2.5vw);
|
||||
|
||||
@include breakpoint($xl) {
|
||||
font-size: 28px;
|
||||
font-size: $vr*11;
|
||||
}
|
||||
}
|
||||
.h3 {
|
||||
font-size: 18px;
|
||||
font-size: calc(16px + 0.6vw);
|
||||
font-size: $vr*4;
|
||||
font-size: calc(#{$vr*3} + 1.9vw);
|
||||
|
||||
@include breakpoint($xl) {
|
||||
font-size: 24px;
|
||||
font-size: $vr*8;
|
||||
}
|
||||
}
|
||||
.h4 {
|
||||
font-size: 16px;
|
||||
font-size: calc(16px + 0.5vw);
|
||||
font-size: $vr*3.5;
|
||||
font-size: calc(#{$vr*2} + 1.5vw);
|
||||
|
||||
@include breakpoint($lg) {
|
||||
font-size: 22px;
|
||||
@include breakpoint($xl) {
|
||||
font-size: $vr*6;
|
||||
}
|
||||
}
|
||||
|
||||
.h5 {
|
||||
font-size: 15px;
|
||||
font-size: calc(15px + 0.25vw);
|
||||
font-size: $vr*3;
|
||||
font-size: calc(#{$vr*2} + 0.75vw);
|
||||
|
||||
@include breakpoint($lg) {
|
||||
font-size: 18px;
|
||||
@include breakpoint($xl) {
|
||||
font-size: $vr*4;
|
||||
}
|
||||
}
|
||||
.h6 {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
@ -35,28 +35,19 @@ $retina-query: (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi);
|
||||
$max-width: $xl;
|
||||
|
||||
// Colors
|
||||
$brand-color-a: #0da8ad;
|
||||
$brand-color-b: #FFC56C;
|
||||
$brand-color-c: #003A6F;
|
||||
$brand-color-d: #FF5959;
|
||||
$brand-color-e: #814374;
|
||||
$brand-color-f: #323232;
|
||||
$brand-color-g: #777777;
|
||||
|
||||
$brand-colors: (
|
||||
a: $brand-color-a,
|
||||
b: $brand-color-b,
|
||||
c: $brand-color-c,
|
||||
d: $brand-color-d,
|
||||
e: $brand-color-e,
|
||||
f: $brand-color-f
|
||||
);
|
||||
$brand-color-a: #222222;
|
||||
$brand-color-b: #fefefe;
|
||||
|
||||
$brand-white: #FFF;
|
||||
$brand-black: #000;
|
||||
|
||||
$text-color: #333 !default;
|
||||
$background-color: #f9f9f9;
|
||||
$text-color: $brand-color-a !default;
|
||||
$background-color: $brand-color-b;
|
||||
|
||||
// Dimensions
|
||||
$vertical-rhythm: 5px;
|
||||
$vr: $vertical-rhythm;
|
||||
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: 'Didact Gothic', Helvetica, Arial, sans-serif;
|
||||
|
||||
Reference in New Issue
Block a user