/** * Site header */ .site-header { border-bottom: 1px solid $grey-color-light; min-height: $spacing-unit * 1.865; // Positioning context for the mobile navigation icon position: relative; background-color: $background-color; } .page-link{ border :none; } .video-container { position: relative; button{ position: absolute; bottom: 10px; right:10px; background-color: #333; color:white; border:none; padding: 4px; &.large{ @include relative-font-size(3); padding: 15px; } } } video#demo{ position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); /*background: url(polina.jpg) no-repeat;*/ background-size: cover; } .site-title { @include relative-font-size(1.625); font-weight: 600; line-height: $base-line-height * $base-font-size * 2.25; letter-spacing: -1px; margin-bottom: 0; float: left; margin-left: 25px; text-transform: uppercase; &,&:visited { color: black;//$grey-color-dark; } .site-subtitle { font-weight: 300; text-transform: lowercase; font-variant: small-caps; } } .site-nav { float: right; line-height: $base-line-height * $base-font-size * 2.25; .nav-trigger { display: none; } .menu-icon { display: none; } .trigger{ display: inline; } .page-link { color: $text-color; line-height: $base-line-height; display: inline; border: none; // Gaps between nav items, but not on the last one &:not(:last-child) { margin-right: 20px; } } @include media-query($on-palm) { position: absolute; top: 9px; right: $spacing-unit / 2; background-color: $background-color; // border: 1px solid $grey-color-light; border-radius: 5px; text-align: right; label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; } .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; > svg { fill: $grey-color-dark; } } input ~ .trigger { clear: both; display: none; } input:checked ~ .trigger { display: block; padding-bottom: 5px; } .page-link { display: block; padding: 5px 10px; &:not(:last-child) { margin-right: 0; } margin-left: 20px; } } } /** * Site footer */ .site-footer { border-top: 1px solid $grey-color-light; padding: calc(#{$spacing-unit}/2) 0; background-color: $background-color; a { text-decoration: none; color: $grey-color-dark; &:hover{ color: $grey-color; } } } .footer-heading { @include relative-font-size(1.125); margin-bottom: $spacing-unit / 2; } .contact-list, .social-media-list { list-style: none; margin-left: 0; } .footer-col-wrapper { display: flex; @include relative-font-size(0.9375); color: $grey-color; margin-left: -$spacing-unit / 2; @extend %clearfix; p { margin: 0; } align-items: center; justify-content: center; } // .footer-col { // float: left; // padding-left: $spacing-unit / 2; // } // .footer-col-1 { flex: 1; } // // .footer-col-2 { // width: -webkit-calc(20% - (#{$spacing-unit} / 2)); // width: calc(20% - (#{$spacing-unit} / 2)); // } // .footer-col-3 { flex: 3; img{ margin-left: 15px; } } @include media-query($on-laptop) { .footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (#{$spacing-unit} / 2)); width: calc(50% - (#{$spacing-unit} / 2)); } .footer-col-3 { width: -webkit-calc(100% - (#{$spacing-unit} / 2)); width: calc(100% - (#{$spacing-unit} / 2)); } } @include media-query($on-palm) { .footer-col { float: none; width: -webkit-calc(100% - (#{$spacing-unit} / 2)); width: calc(100% - (#{$spacing-unit} / 2)); } } /** * Page content */ .page-content { padding: $spacing-unit 0; flex: 1; } .page-heading { @include relative-font-size(2); padding-left: 15px; } .post-list-heading { @include relative-font-size(1.75); } .post-list { margin-left: 0; list-style: none; > li { margin-bottom: $spacing-unit; } } .post-meta { font-size: $small-font-size; color: $grey-color; } .post-link { display: block; @include relative-font-size(1.5); } /** * Posts */ .post-header { margin-bottom: $spacing-unit; } .post-title { @include relative-font-size(2.625); letter-spacing: -1px; line-height: 1; @include media-query($on-laptop) { @include relative-font-size(2.25); } } .post-content { margin-bottom: $spacing-unit; h2 { @include relative-font-size(2); @include media-query($on-laptop) { @include relative-font-size(1.75); } } h3 { @include relative-font-size(1.625); @include media-query($on-laptop) { @include relative-font-size(1.375); } } h4 { @include relative-font-size(1.25); @include media-query($on-laptop) { @include relative-font-size(1.125); } } img{ margin :25px 0px; } } #contact-screen{ @include relative-font-size(2.0); text-align: center; position:fixed; color:white; background-color: black; top: 0px; left:0px; width: 100vw; height: 100vh; display: none; line-height: 200%; font-weight: 600; span.close{ position:fixed; top:5px; right: 10px; z-index: 200; cursor: pointer; color: white; @include relative-font-size(5.0); } span.logo{ display: inline-block; margin-right:5px; } .text-uppercase{ @include relative-font-size(2); } &.shown{ z-index: 100; display : flex; justify-content: center; align-items: center; } } #fullscreen-showreel{ &.hidden{display:none;} display: flex; position:fixed; justify-content: center; align-items: center; background-color: black; top:0; left:0; z-index: 100; width: 100%; height: 100vh; }