Copied a lot of stuff from my template repo
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user