diff --git a/src/images/hexagon-awards.svg b/src/images/hexagon-awards.svg new file mode 100644 index 0000000..b06952a --- /dev/null +++ b/src/images/hexagon-awards.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/hexagon-conf.svg b/src/images/hexagon-conf.svg new file mode 100644 index 0000000..3199fc0 --- /dev/null +++ b/src/images/hexagon-conf.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/hexagon-svef.svg b/src/images/hexagon-svef.svg new file mode 100644 index 0000000..f2f2a2a --- /dev/null +++ b/src/images/hexagon-svef.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/hexagon.svg b/src/images/hexagon.svg new file mode 100644 index 0000000..76d1b13 --- /dev/null +++ b/src/images/hexagon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index 357a838..4342128 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,3 +1,3 @@ import './modules/analytics' -setTimeout(() => document.querySelector('html').classList.remove('loading'), 500) +setTimeout(() => document.querySelector('html').classList.remove('loading'), 750) diff --git a/src/styles/_config.scss b/src/styles/_config.scss index 8fa065f..8189f96 100644 --- a/src/styles/_config.scss +++ b/src/styles/_config.scss @@ -1,21 +1,23 @@ -// Footer -$footer-height: 80px; - // Font $font-size: 18px; -// SVEF vefverdlaun colors -$color-orange: #E7792B; -$color-green: #56A3A6; +// SVEF colors +$color-svef: #E7792B; +$color-awards: #2B7E99; +$color-conf: #A63F5B; $color-gray: #4A4A4A; $color-gray-light: #EBEBEA; +$color-gray-dark: #1a1a1e; // Sizes $spacing: 20px; $page-max-width: 1280px; $page-min-width: 320px; +$footer-height: 50px; +$header-height: 100px; + // Text direction & floats $text-direction: ltr; $default-float: left; diff --git a/src/styles/components/footer/_index.scss b/src/styles/components/footer/_index.scss index aceb65d..f461f1f 100644 --- a/src/styles/components/footer/_index.scss +++ b/src/styles/components/footer/_index.scss @@ -1,30 +1,93 @@ footer { - position: fixed; + overflow: hidden; + position: relative; left: 0; right: 0; bottom: 0; z-index: 100; margin: auto; - padding: $spacing; - // width: $page-max-width; + padding: $spacing/2 0; + width: 100%; + max-width: $page-max-width; + min-width: $page-min-width; height: $footer-height; text-align: center; - background: $color-gray; - transition: transform 500ms ease 750ms; transform: translate3d(0,0,0); + background: $color-gray-light; + + @include respond-to(medium) { + position: fixed; + background: transparent; + } + + &:after { + position: absolute; + top: 0%; right: 0%; + z-index: 0; + + content: ''; + + display: block; + width: 200%; + height: 100%; + + background: $color-gray; + + transition: transform 1500ms ease 750ms; + transform-origin: top right; + transform: rotate(-1deg); + } + .loading & { transform: translate3d(0,100%,0); + + &:after { + transform: rotate(-5deg); + } + } + + > grid { + position: relative; + top: 50%; + z-index: 1; + + text-align: right; + + opacity: 1; + transform: translate3d(0,-50%,0); + transition: opacity 500ms, transform 750ms; + transition-delay: 1s; + + .loading & { + opacity: 0; + transform: translate3d(100%,-50%,0); + } + } + + .title { + display: block; + text-align: right; } - .svg-logo-svef { - margin: auto; - width: auto; - height: $footer-height - ($spacing*2); + html[site='svef'] & { + &:after { + background: $color-svef; + } + } + html[site='awards'] & { + &:after { + background: $color-awards; + } + } + html[site='conf'] & { + &:after { + background: $color-conf; + } } } diff --git a/src/styles/components/header/_index.scss b/src/styles/components/header/_index.scss index eb6fd0e..034c523 100644 --- a/src/styles/components/header/_index.scss +++ b/src/styles/components/header/_index.scss @@ -6,18 +6,22 @@ header { display: block; margin: 0 auto $spacing; padding: 0; - height: 100px; + + @include respond-to(medium) { + height: $header-height; + } &:after { content: ''; position: absolute; - right: 0; bottom: 0; + right: 0; bottom: -4px; + z-index: 1; display: block; - width: calc(100% - #{$spacing*2}); + width: 100%; height: 4px; - background: $color-orange; + background: $color-svef; transition: transform 250ms ease 750ms; transform: translate3d(0,0,0); @@ -25,24 +29,69 @@ header { .loading & { transform: translate3d(100%,0,0); } + + @include respond-to(medium) { + bottom: 0; + width: calc(100% - #{$spacing*2}); + } } - nav { + .logo svg { position: absolute; - left: $spacing*2; + top: 0; + right: 0; + z-index: 3; + + margin: auto; + width: 110px; + + animation-duration: 1.25s; + animation-iteration-count: 1; + animation-fill-mode: forwards; + animation-delay: 250ms; + + @include respond-to(large) { + width: 190px; + } + + .logo-graphic { + opacity: 1; + transition: opacity 750ms ease 750ms; + + stroke: transparent; + fill: transparent; + + .loading & { + opacity: 0; + } + } + } + + nav { + position: relative; + left: 0; right: 0; - bottom: 4px; + bottom: 0; + z-index: 2; + + padding-right: 110px; opacity: 1; transition: opacity 500ms ease 500ms; + @include respond-to(medium) { + position: absolute; + left: $spacing*2; + bottom: 4px; + } + a { position: relative; - margin: 0 $spacing; + margin: 0 0 0 $spacing/2; padding: 0; - display: inline-block; + display: block; line-height: 40px; font-size: 20px; @@ -57,24 +106,48 @@ header { content: ''; position: absolute; + top: 0; left: 0; - right: 0; bottom: 0; display: block; - width: auto; - height: 4px; + width: 0px; + height: auto; - background: $color-orange; + background: $color-gray; - transform: translate3d(0,100%,0); - transition: transform 150ms; + transform: translate3d(-10px,0,0); + transition: transform 150ms, width 150ms; } &.active, &:hover { &:after { - transform: translate3d(0,0,0); + width: 4px; + } + } + + + @include respond-to(medium) { + display: inline-block; + margin: 0 $spacing; + + &:after { + top: auto; + right: 0; + + width: auto; + height: 4px; + + transform: translate3d(0,100%,0); + } + + &.active, + &:hover { + &:after { + width: auto; + transform: translate3d(0,0,0); + } } } } @@ -88,4 +161,173 @@ header { } } } + + html[site] & { + nav a:after, + &:after { + background: $color-gray; + } + + .logo svg { + animation-name: loadingdefault; + + .logo-graphic.logo-svef { + fill: $color-gray; + } + } + } + html[site='svef'] & { + nav a:after, + &:after { + background: $color-svef; + } + + .logo svg { + animation-name: loadingsvef; + + .logo-graphic.logo-svef { + fill: $color-svef; + } + } + } + html[site='awards'] & { + nav a:after, + &:after { + background: $color-awards; + } + + .logo svg { + animation-name: loadingawards; + + .logo-graphic.logo-awards { + fill: $color-awards; + } + } + } + html[site='conf'] & { + nav a:after, + &:after { + background: $color-conf; + } + + .logo svg { + animation-name: loadingconf; + + .logo-graphic.logo-conf { + fill: $color-conf; + } + } + } +} + + +@keyframes loadingdefault { + 0% { + transform: rotate(-180deg); + stroke: transparent; + stroke-width: 1px; + fill: transparent; + } + 33% { + transform: rotate(-120deg); + stroke: $color-svef; + stroke-width: 2px; + fill: transparent; + } + 66% { + transform: rotate(-60deg); + stroke: $color-awards; + stroke-width: 3px; + fill: transparent; + } + 100% { + transform: rotate(0deg); + stroke: $color-gray; + stroke-width: 4px; + fill: $color-gray-light; + } +} + + +@keyframes loadingsvef { + 0% { + transform: rotate(-180deg); + stroke: transparent; + stroke-width: 1px; + fill: transparent; + } + 33% { + transform: rotate(-120deg); + stroke: $color-awards; + stroke-width: 2px; + fill: transparent; + } + 66% { + transform: rotate(-60deg); + stroke: $color-conf; + stroke-width: 3px; + fill: transparent; + } + 100% { + transform: rotate(0deg); + stroke: $color-svef; + stroke-width: 4px; + fill: $color-gray-light; + } +} + + +@keyframes loadingawards { + 0% { + transform: rotate(-180deg); + stroke: transparent; + stroke-width: 1px; + fill: transparent; + } + 33% { + transform: rotate(-120deg); + stroke: $color-svef; + stroke-width: 2px; + fill: transparent; + } + 66% { + transform: rotate(-60deg); + stroke: $color-conf; + stroke-width: 3px; + fill: transparent; + } + 100% { + transform: rotate(0deg); + stroke: $color-awards; + stroke-width: 4px; + fill: $color-gray-light; + } +} + + +@keyframes loadingconf { + 0% { + transform: rotate(-180deg); + stroke: transparent; + stroke-width: 1px; + fill: transparent; + } + 33% { + transform: rotate(-120deg); + stroke: $color-svef; + stroke-width: 2px; + fill: transparent; + } + 66% { + transform: rotate(-60deg); + stroke: $color-awards; + stroke-width: 3px; + fill: transparent; + } + 100% { + transform: rotate(0deg); + stroke: $color-conf; + stroke-width: 4px; + fill: $color-gray-light; + } } diff --git a/src/styles/components/loading/_index.scss b/src/styles/components/loading/_index.scss deleted file mode 100644 index 5e41d1e..0000000 --- a/src/styles/components/loading/_index.scss +++ /dev/null @@ -1,23 +0,0 @@ - -loading { - display: block; - - .svg-logo-svef { - position: absolute; - top: 0; left: 0; right: 0; bottom: 0; - z-index: 0; - - margin: auto; - width: 80%; - max-width: 800px; - - opacity: 0; - transform: translate3d(0,40vh,0) scale(0.2); - transition: opacity 500ms, transform 750ms; - - .loading & { - opacity: 1; - transform: translate3d(0,0,0) scale(1); - } - } -} diff --git a/src/styles/components/main/_index.scss b/src/styles/components/main/_index.scss index d392b04..f56dcb5 100644 --- a/src/styles/components/main/_index.scss +++ b/src/styles/components/main/_index.scss @@ -9,22 +9,30 @@ main { padding: 0 0 ($footer-height + $spacing); max-width: $page-max-width; + min-width: $page-min-width; min-height: 100vh; color: $color-gray; - > grid { - max-width: $page-max-width - ($spacing*4); + > .inner{ position: relative; z-index: 1; - text-align: left; + padding: 0; + + @include respond-to(medium) { + padding: 0 $spacing*2; + } opacity: 1; transform: translate3d(0,0,0); transition: opacity 500ms, transform 750ms; transition-delay: 1s; + grid { + text-align: left; + } + .loading & { opacity: 0; transform: translate3d(0,20px,0); @@ -40,7 +48,7 @@ main { background: $color-gray-light; - transition: transform 500ms ease 250ms; + transition: transform 416ms ease 416ms; transform: rotateY(0deg); .loading & { diff --git a/src/styles/components/vectors/_hexagon.scss b/src/styles/components/vectors/_hexagon.scss new file mode 100644 index 0000000..fe00f72 --- /dev/null +++ b/src/styles/components/vectors/_hexagon.scss @@ -0,0 +1,9 @@ + +.svg-hexagon { + width: 190px; + height: auto; + + fill: transparent; + stroke: transparent; + stroke-width: 2px; +} diff --git a/src/styles/components/vectors/_index.scss b/src/styles/components/vectors/_index.scss index 5f4a979..2abb30d 100644 --- a/src/styles/components/vectors/_index.scss +++ b/src/styles/components/vectors/_index.scss @@ -1,2 +1,3 @@ +@import "hexagon"; @import "logo-svef"; diff --git a/src/styles/components/vectors/_logo-svef.scss b/src/styles/components/vectors/_logo-svef.scss index f3ceedb..f50e6d3 100644 --- a/src/styles/components/vectors/_logo-svef.scss +++ b/src/styles/components/vectors/_logo-svef.scss @@ -4,9 +4,9 @@ height: auto; .svef { - fill: $color-orange; + fill: $color-svef; } .samtok-vefidnadarins { - fill: $color-orange; + fill: $color-svef; } } diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 6b23099..ff41687 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -5,7 +5,6 @@ @import "components/footer/index"; @import "components/header/index"; @import "components/html/index"; -@import "components/loading/index"; @import "components/main/index"; @import "components/typography/index"; @import "components/vectors/index"; diff --git a/src/templates/index.pug b/src/templates/index.pug index 136aa1c..7c17a1d 100644 --- a/src/templates/index.pug +++ b/src/templates/index.pug @@ -1,9 +1,9 @@ extends /templates/shared/_layout block content - grid + .inner: grid column.medium-8 - p.text-large Samtök vefiðnaðarins eru grasrótarsamtök þeirra er starfa að vefmálum á Íslandi. Samtökin hafa það að markmiði að miðla þekkingu og efla fagleg vinnubrögð í greininni. + p.text-large Samtök vefiðnaðarins eru fagsamtök þeirra er starfa að vefmálum á Íslandi. Samtökin hafa það að markmiði að miðla þekkingu og efla fagleg vinnubrögð í greininni. hr diff --git a/src/templates/shared/_footer.pug b/src/templates/shared/_footer.pug index b64f97e..5ebdb09 100644 --- a/src/templates/shared/_footer.pug +++ b/src/templates/shared/_footer.pug @@ -1,2 +1,3 @@ footer - include ../../images/svef-logo.svg + grid: column.medium-6 + span.title Samtök Vefiðnaðarins diff --git a/src/templates/shared/_head.pug b/src/templates/shared/_head.pug index 54fa345..3c4c99c 100644 --- a/src/templates/shared/_head.pug +++ b/src/templates/shared/_head.pug @@ -3,7 +3,7 @@ head meta(charset='utf-8') - meta(name='viewport', content='width=768px, initial-scale=1') + meta(name='viewport', content='width=768, initial-scale=1') title=title diff --git a/src/templates/shared/_header.pug b/src/templates/shared/_header.pug index c543c29..92a36d5 100644 --- a/src/templates/shared/_header.pug +++ b/src/templates/shared/_header.pug @@ -1,2 +1,4 @@ header include _nav + .logo + include /images/hexagon.svg diff --git a/src/templates/shared/_layout.pug b/src/templates/shared/_layout.pug index b2f5dca..fc94944 100644 --- a/src/templates/shared/_layout.pug +++ b/src/templates/shared/_layout.pug @@ -1,12 +1,9 @@ doctype html -html.loading +html.loading(site='svef') include _head body - loading - include ../../images/svef-logo.svg - main block header include _header