141 lines
1.6 KiB
CSS
141 lines
1.6 KiB
CSS
/*
|
|
* General
|
|
*/
|
|
|
|
body {
|
|
width: 100vw;
|
|
margin: 0;
|
|
}
|
|
|
|
/*
|
|
* Fonts
|
|
*/
|
|
|
|
@font-face {
|
|
font-family: Ubuntu;
|
|
src: url("../fonts/Ubuntu-R.ttf");
|
|
}
|
|
|
|
.ubuntu { font-family: Ubuntu;}
|
|
|
|
/*
|
|
* Spacing
|
|
*/
|
|
|
|
.pad10vw { padding-left: 10vw; padding-right: 10vw;}
|
|
.pad10vh { padding-top: 10vh !important; }
|
|
|
|
.marb1r { margin-bottom: 1rem;}
|
|
|
|
|
|
/*
|
|
* Colours
|
|
*/
|
|
|
|
.accent { color: #03A9F4; }
|
|
.primary { color: #727272; }
|
|
|
|
/*
|
|
* Links
|
|
*/
|
|
|
|
a:link, a:visited {
|
|
color : #03A9F4;
|
|
}
|
|
|
|
/*
|
|
* Header
|
|
*/
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
|
|
background-color: #fff;
|
|
}
|
|
|
|
header > hr {
|
|
clear: both;
|
|
}
|
|
|
|
header > nav {
|
|
float: left;
|
|
}
|
|
|
|
header > ul {
|
|
float: right;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
nav > ul {
|
|
list-style: none;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
header > nav a {
|
|
padding: 1rem 1rem;
|
|
font-size: 1.7rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
header ul > li {
|
|
display: inline-block;
|
|
}
|
|
|
|
header a {
|
|
text-decoration: none;
|
|
color :inherit;
|
|
}
|
|
|
|
/*
|
|
* Panels (general)
|
|
*/
|
|
|
|
.panel {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
|
|
.panel > section {
|
|
padding-top: 30vh;
|
|
}
|
|
|
|
.panel > section > h1 {
|
|
font-size: 5rem;
|
|
}
|
|
|
|
.panel > section > h2 {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.panel p {
|
|
font-size: 1.5rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/*
|
|
* Typed.js cursor
|
|
*/
|
|
|
|
.typed-cursor{
|
|
opacity: 1;
|
|
-webkit-animation: blink 0.7s infinite;
|
|
-moz-animation: blink 0.7s infinite;
|
|
animation: blink 0.7s infinite;
|
|
}
|
|
@keyframes blink{
|
|
0% { opacity:1; }
|
|
50% { opacity:0; }
|
|
100% { opacity:1; }
|
|
}
|
|
@-webkit-keyframes blink{
|
|
0% { opacity:1; }
|
|
50% { opacity:0; }
|
|
100% { opacity:1; }
|
|
}
|
|
@-moz-keyframes blink{
|
|
0% { opacity:1; }
|
|
50% { opacity:0; }
|
|
100% { opacity:1; }
|
|
}
|