This commit is contained in:
2018-05-28 17:18:31 +02:00
parent 904f9df742
commit 36fa2f24b1
11 changed files with 197 additions and 7 deletions
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -1 +1 @@
*{box-sizing:border-box}body,html{font-size:1rem;height:100%;margin:0;padding:0}li,ol,ul{margin:0;padding:0;list-style:none}a{text-decoration:none;color:#000}blockquote,em,h1,h2,h3,li,ol,p,ul{margin:0}@font-face{font-family:Montserrat-Regular;src:url(../fonts/Montserrat/webfonts/Montserrat-Regular.eot);src:url(../fonts/Montserrat/webfonts/Montserrat-Regular.eot?#iefix) format('embedded-opentype'),url(../fonts/Montserrat/webfonts/Montserrat-Regular.woff) format('woff'),url(../fonts/Montserrat/webfonts/Montserrat-Regular.ttf) format('truetype'),url(../fonts/Montserrat/webfonts/Montserrat-Regular.svg#Montserrat-Regular) format('svg')}@font-face{font-family:Montserrat-Light;src:url(../fonts/Montserrat/webfonts/Montserrat-Light.eot);src:url(../fonts/Montserrat/webfonts/Montserrat-Light.eot?#iefix) format('embedded-opentype'),url(../fonts/Montserrat/webfonts/Montserrat-Light.woff) format('woff'),url(../fonts/Montserrat/webfonts/Montserrat-Light.ttf) format('truetype'),url(../fonts/Montserrat/webfonts/Montserrat-Light.svg#Montserrat-Light) format('svg')}body #header a{font-family:Montserrat-Regular;font-size:2.268rem;color:#fff}body #header .language-selector li:nth-child(-n+2)::after{font-size:2.268rem;content:'-';color:#fff}#header{position:fixed;z-index:999}#header .language-selector{position:fixed;left:50%;display:-ms-flexbox;display:flex;width:100px;margin-left:-100px}#header .language-selector li{display:-ms-flexbox;display:flex}#header .language-selector li:nth-child(-n+2)::after{position:relative;display:block;margin:0 10px}#header .navigation li{position:fixed;text-align:center}#header .navigation li:first-child{display:none}#header .navigation li:nth-child(2){bottom:0;width:50%}#header .navigation li:nth-child(3){top:0;width:50%}#header .navigation li:nth-child(4){right:0;bottom:0;width:50%}#header .navigation li:nth-child(5){top:50%;right:-50%;width:100%;margin-right:22px;transform:rotate(90deg)}#header .navigation li:nth-child(6){top:50%;left:-50%;width:100%;margin-left:22px;transform:rotate(-90deg)}#header .navigation li:nth-child(7){top:0;right:0;width:50%}#header .navigation li a{position:relative;margin:auto}
*{box-sizing:border-box}body,html{font-size:1rem;height:100%;margin:0;padding:0}li,ol,ul{margin:0;padding:0;list-style:none}a{text-decoration:none;color:#000}blockquote,em,h1,h2,h3,li,ol,p,ul{margin:0}@font-face{font-family:Montserrat-Regular;src:url(../fonts/Montserrat/webfonts/Montserrat-Regular.eot);src:url(../fonts/Montserrat/webfonts/Montserrat-Regular.eot?#iefix) format('embedded-opentype'),url(../fonts/Montserrat/webfonts/Montserrat-Regular.woff) format('woff'),url(../fonts/Montserrat/webfonts/Montserrat-Regular.ttf) format('truetype'),url(../fonts/Montserrat/webfonts/Montserrat-Regular.svg#Montserrat-Regular) format('svg')}@font-face{font-family:Montserrat-Light;src:url(../fonts/Montserrat/webfonts/Montserrat-Light.eot);src:url(../fonts/Montserrat/webfonts/Montserrat-Light.eot?#iefix) format('embedded-opentype'),url(../fonts/Montserrat/webfonts/Montserrat-Light.woff) format('woff'),url(../fonts/Montserrat/webfonts/Montserrat-Light.ttf) format('truetype'),url(../fonts/Montserrat/webfonts/Montserrat-Light.svg#Montserrat-Light) format('svg')}@font-face{font-family:Montserrat-Thin;src:url(../fonts/Montserrat/webfonts/Montserrat-Thin.eot);src:url(../fonts/Montserrat/webfonts/Montserrat-Thin.eot?#iefix) format('embedded-opentype'),url(../fonts/Montserrat/webfonts/Montserrat-Thin.woff) format('woff'),url(../fonts/Montserrat/webfonts/Montserrat-Thin.ttf) format('truetype'),url(../fonts/Montserrat/webfonts/Montserrat-Thin.svg#Montserrat-Thin) format('svg')}body #header a{font-family:Montserrat-Regular;font-size:2.268rem;color:#fff}body #header .language-selector li:nth-child(-n+2)::after{font-size:2.268rem;content:'-';color:#fff}body #start #home h1{font-family:Montserrat-Thin;font-size:33vw}#header{position:fixed;z-index:999}#header .language-selector{position:fixed;left:50%;display:-ms-flexbox;display:flex;width:100px;margin-left:-100px}#header .language-selector li{display:-ms-flexbox;display:flex}#header .language-selector li:nth-child(-n+2)::after{position:relative;display:block;margin:0 10px}#header .navigation li{position:fixed;text-align:center}#header .navigation li:first-child{display:none}#header .navigation li:nth-child(2){bottom:0;width:50%}#header .navigation li:nth-child(3){top:0;width:50%}#header .navigation li:nth-child(4){right:0;bottom:0;width:50%}#header .navigation li:nth-child(5){top:50%;right:-50%;width:100%;margin-right:22px;transform:rotate(90deg)}#header .navigation li:nth-child(6){top:50%;left:-50%;width:100%;margin-left:22px;transform:rotate(-90deg)}#header .navigation li:nth-child(7){top:0;right:0;width:50%}#header .navigation li a{position:relative;margin:auto}
@@ -65,6 +65,35 @@ $category: "sans-serif";
}
}
$Thin: "Montserrat-Thin";
$family: "Montserrat/webfonts";
$file-Thin: "Montserrat-Thin";
$category: "sans-serif";
@mixin Montserrat-Thin($Thin, $file-Thin, $family, $category:"") {
$filepath: "../fonts/" + $family + "/" + $file-Thin;
@font-face {
font-family: "#{$Thin}";
src: url($filepath + ".eot");
src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
url($filepath + ".woff") format('woff'),
url($filepath + ".ttf") format('truetype'),
url($filepath + ".svg#" + $Thin + "") format('svg');
}
%#{$Thin} {
font: {
@if $category != "" {
family: "#{$Thin}", #{$category};
}
@else {
family: "#{$Thin}";
weight: normal;
}
}
}
}
// font-size
$font16: 1rem;
$font18: 1.134rem;
@@ -1,5 +1,6 @@
@include Montserrat-Regular($Regular, $file-regular, $family, $category);//1
@include Montserrat-light($light, $file-light, $family, $category);//1
@include Montserrat-Thin($Thin, $file-Thin, $family, $category);//1
body{
#header{
@@ -20,4 +21,12 @@ body{
}
}
}
#start{
#home{
h1{
font-family: $Thin;
font-size: 33vw;
}
}
}
}
@@ -17,7 +17,6 @@
}
}
}
}
.navigation{
li{
@@ -0,0 +1,10 @@
#start{
// & > div{
// width: 100%;
// height: 100vh;
// img{
// width: 100%;
// }
// }
}