Copied a lot of stuff from my template repo

This commit is contained in:
Andre Beging
2020-02-11 22:55:29 +01:00
parent 94d14ed717
commit fe926d1898
43 changed files with 13609 additions and 3 deletions

View File

@@ -0,0 +1,184 @@
@import "_variables.scss";
@import "fontawesome/fontawesome.scss";
@import "_reset.scss";
@import "_navigation.scss";
@import "_style.scss";
@import "_footer.scss";
@import "_cards.scss";
@font-face {
font-family: "FiraSans";
src: url("../font/FiraSans-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "FiraSans";
src: url("../font/FiraSans-Light.ttf") format("truetype");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FiraSans";
src: url("../font/FiraSans-Medium.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: system-ui;
font-style: normal;
font-weight: 300;
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"),
local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"),
local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}
html {
height: 100%;
}
body {
background-color: #fff !important;
font-family: "FiraSans", system-ui, sans-serif;
position: absolute;
top: 80px;
width: 100%;
}
h2,h3 {
margin-top: 20px;
}
p {
margin-bottom: 15px;
}
#content {
padding: 50px;
width: 100%;
max-width: 1440px;
margin: auto;
@media screen and (max-width: $breakpoint-xs) {
padding: 20px;
}
padding-bottom: 300px;
}
.text-center {
text-align: center;
}
a.btn {
color: #000 !important;
border: 1px solid #ccc;
border-radius: 4px;
line-height: 1.42857143;
font-size: 1em;
padding: 6px 12px;
display: inline-block;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
user-select: none;
text-decoration: none;
&.btn-sm {
font-size: .8em;
}
&.btn-lg {
font-size: 1.5em;
}
&.btn-xl {
font-size: 2em;
}
&:hover {
color: #333 !important;
background-color: #e6e6e6;
border-color: #adadad;
}
&.btn-light {
color: #FFF !important;
&:hover {
color: #333 !important;
}
}
}
body.hero {
// background: rgba(0, 0, 0, 0)
// linear-gradient(to right, rgb(252, 70, 107), rgb(63, 94, 251)) repeat scroll
// 0% 0%;
background: linear-gradient(-45deg, #000, rgb(128, 0, 0), #000);
background-size: 400% 100%;
animation: bggradient 8s ease infinite;
background-repeat: no-repeat;
}
@keyframes bggradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#hero {
color: $hero-color;
display: flex;
font-weight: lighter;
height: calc(100vh - 80px);
align-items: center;
justify-content: center;
text-align: center;
h1 {
font-size: 7vw;
font-weight: normal;
}
h2 {
font-size: 4vw;
font-weight: lighter;
}
h3 {
font-size: 2vw;
font-weight: lighter;
}
a {
color: $hero-color;
}
hr {
color: $hero-color;
width: 20%;
opacity: 0.3;
}
@media only screen and (max-width: $breakpoint-xs) {
h2 {
font-size: 6vw;
}
h3 {
font-size: 4vw;
}
}
}