autonomic-cooperative/autonomic.zone
Archived
5
0
Fork 0
Code Issues 15 Pull Requests 2 Releases Activity

remove czmj stuff, strip it down to a basic splash page

Browse Source
This commit is contained in:
czmj
2017-08-31 14:46:01 +01:00
parent e1b07e7f15
commit c0fe44e453
29 changed files with 95 additions and 767 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
scss/components/header.scss
View File

@ -1,98 +0,0 @@
.header {
position: relative;
margin-bottom: gutter(6);
background: $brand-color-a;
color: $brand-white;
z-index: $z-mid;
@include breakpoint($sm) {
border: 0;
}
}
.header__inner {
padding: 40px 0;
overflow: auto;
overflow-x: hidden;
@include breakpoint($md) {
display: flex;
flex-wrap: wrap;
padding: 80px 0;
}
}
.header__content {
width: 100%;
@include breakpoint($md) {
@include span(8);
@include last();
}
}
.header__title {
@extend .h1;
margin-bottom: 5px;
}
.header__subtitle {
@extend .h2;
color: mix($brand-color-a, $brand-color-f);
margin-bottom: 25px;
}
.header__promo {
@include hex__outer;
display: none;
@include breakpoint($md) {
display: block;
@include span(4);
margin-bottom: gutter(8);
}
}
.header__promo__inner {
@include hex__middle;
}
.header__promo__media {
@include hex__inner;
}
.header__social {
display: flex;
justify-content: flex-end;
align-items: stretch;
margin-top: 10vh;
}
.header__social__item {
margin: 0;
}
.header__social__link {
font-size: 150%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
padding: 10px;
background: tint($brand-color-a, 50%);
color: mix($brand-color-a, $brand-color-f, 80%);
.header__social__item:nth-child(5n) & {
background: tint($brand-color-a, 30%);
}
.header__social__item:nth-child(even) & {
background: tint($brand-color-a, 40%);
}
&:hover {
background: tint($brand-color-a, 25%);
.header__social__item:nth-child(even) &,
.header__social__item:nth-child(5n) & {
background: tint($brand-color-a, 25%);
}
}
}

66
scss/components/navigation.scss
View File

@ -1,66 +0,0 @@
.navigation {
display: none;
@include breakpoint($sm) {
position: relative;
display: block;
width: 100%;
background: $brand-color-f;
color: $brand-white;
font-size: $font-size-small;
font-weight: $font-weight-bold;
letter-spacing: 1px;
line-height: 1.4;
z-index: $z-mid;
&::after {
position: absolute;
content: '';
top: 100%;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 45px 0 45px;
border-color: $brand-color-f transparent transparent transparent;
transform: translateX(-50%);
}
}
}
.navigation--fixed {
position: fixed;
top: 0;
z-index: $z-high;
}
.navigation__level-0 {
display: flex;
align-items: center;
justify-content: center;
}
.navigation__item {
margin: 0;
flex-basis: 15%;
text-align: center;
}
.navigation__item--left {
margin-right: 20px;
}
.navigation__item--right {
margin-left: 20px;
}
.navigation__link {
display: block;
padding: 15px;
text-transform: uppercase;
&:hover,
&:focus {
color: $brand-color-a;
}
}

101
scss/components/promo.scss
View File

@ -1,101 +0,0 @@
.promo {
@include hex__outer;
color: $brand-white;
margin-bottom: 25%;
@include breakpoint($sm) {
width: 33.333%;
margin-left: 0;
margin-bottom: 0;
&:nth-of-type(5n-4) {
margin-left: 16.666%;
}
}
.hex-grid--offset & {
@include breakpoint($md) {
&:first-of-type {
margin-left: 25%;
}
&:nth-of-type(5n-4) {
margin: 0;
}
&:nth-of-type(7n-3) {
margin-left: 16.66667%;
}
}
}
}
.promo__inner {
@include hex__middle;
}
.promo__content {
@include hex__inner;
&:hover,
&:focus,
.promo--closed & {
.promo__title,
.promo__body {
transform: translate3d(0,0,0);
}
}
}
.promo__title,
.promo__body {
width: 100%;
padding: 5%;
box-sizing: border-box;
background-color: fade-out($brand-color-e, 0.1);
font-weight: 300;
transition: transform .2s ease-in-out, opacity .3s ease-in-out;
}
.promo__title {
margin-bottom: 0;
bottom: 55%;
padding-top: 50%;
@include breakpoint($sm) {
transform: translate3d(0,-100%,0);
}
&::after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
width: 10%;
text-align: center;
border-bottom: 1px solid #fff;
}
}
.promo__body {
top: 45%;
padding-bottom: 50%;
@include breakpoint($sm) {
transform: translate3d(0,100%,0);
}
}
.promo__media {
mix-blend-mode: overlay;
}
@each $index, $color in $brand-colors {
.promo--theme-#{$index} {
.promo__content {
background-color: fade-out($color, 0.7);
}
.promo__title,
.promo__body {
background-color: fade-out(shade($color, 15%), 0.2);
}
}
}

47
scss/components/section.scss
View File

@ -1,47 +0,0 @@
.section {
position: relative;
width: 100%;
}
.section__title {
@extend .h3;
}
.section--style-a {
float: left;
margin-top: 50px;
&:first-child {
margin-top: 0;
}
.section__block--a {
margin-bottom: 50px;
}
@include breakpoint($md) {
width: 100%;
margin-bottom: 5%;
+ .section--style-a {
margin-top: -11.5%
}
.section__block--a {
@include span(3);
padding-top: 7vw;
margin-bottom: 0;
}
.section__block--b {
@include span(9);
@include last()
}
}
@include breakpoint($xl) {
.section__block--a {
padding-top: 100px;
}
}
}

6
scss/style.scss
View File

@ -9,10 +9,4 @@
@import 'utilities/icons';
@import 'utilities/layout_utilities';
@import 'utilities/color_utilities';
@import 'utilities/monitor_mq';
@import 'utilities/hex';
@import 'components/header';
@import 'components/navigation';
@import 'components/promo';
@import 'components/section';

17
scss/utilities/_color_utilities.scss
View File

@ -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);

10
scss/utilities/_fonts.scss
View File

@ -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');
}

30
scss/utilities/_global.scss
View File

@ -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;
}

61
scss/utilities/_hex.scss
View File

@ -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;
}
}

44
scss/utilities/_layout_utilities.scss
View File

@ -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();
}

27
scss/utilities/_monitor_mq.scss
View File

@ -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;
}
}

62
scss/utilities/_typography.scss
View File

@ -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;
}

27
scss/utilities/_variables.scss
View File

@ -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;