Base working skeleton now needs link support
This commit is contained in:
232
main-site/themes/temper/static/css/style.css
Normal file
232
main-site/themes/temper/static/css/style.css
Normal file
@@ -0,0 +1,232 @@
|
||||
body {
|
||||
background-color: #212121;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #dcdcdc;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.bg-img {
|
||||
background-image: url("/img/bg.png");
|
||||
height: 100%;
|
||||
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fade-in-image {
|
||||
animation: fadeIn 3s;
|
||||
-webkit-animation: fadeIn 3s;
|
||||
-moz-animation: fadeIn 3s;
|
||||
-o-animation: fadeIn 3s;
|
||||
-ms-animation: fadeIn 3s;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% {opacity:0;}
|
||||
100% {opacity:1;}
|
||||
}
|
||||
|
||||
@-moz-keyframes fadeIn {
|
||||
0% {opacity:0;}
|
||||
100% {opacity:1;}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
0% {opacity:0;}
|
||||
100% {opacity:1;}
|
||||
}
|
||||
|
||||
@-o-keyframes fadeIn {
|
||||
0% {opacity:0;}
|
||||
100% {opacity:1;}
|
||||
}
|
||||
|
||||
@-ms-keyframes fadeIn {
|
||||
0% {opacity:0;}
|
||||
100% {opacity:1;}
|
||||
}
|
||||
|
||||
.fluid {
|
||||
width: 100%;
|
||||
max-height: 100vh;
|
||||
object-fit: cover;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.headline {
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.headline-title {
|
||||
font-size: 4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.one-liner {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.socials {
|
||||
display:inline;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.reveal-text {
|
||||
animation: slideIn 1.2s;
|
||||
animation-delay: 750ms;
|
||||
color: transparent;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
-webkit-animation: slideIn 1.2s;
|
||||
-webkit-animation-delay: 750ms;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
|
||||
-moz-animation: slideIn 1.2s;
|
||||
-moz-animation-delay: 750ms;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
|
||||
-o-animation: slideIn 1.2s;
|
||||
-o-animation-delay: 750ms;
|
||||
-o-animation-fill-mode: forwards;
|
||||
|
||||
-ms-animation: slideIn 1.2s;
|
||||
}
|
||||
@keyframes slideIn {
|
||||
0% {color: #dcdcdc; clip-path: inset(0 100% 0 0);}
|
||||
100% {color: #dcdcdc; clip-path: inset(0 0 0 0);}
|
||||
}
|
||||
|
||||
@-moz-keyframes slideIn {
|
||||
0% {color: #dcdcdc; clip-path: inset(0 100% 0 0);}
|
||||
100% {color: #dcdcdc; clip-path: inset(0 0 0 0);}
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideIn {
|
||||
0% {color: #dcdcdc; clip-path: inset(0 100% 0 0);}
|
||||
100% {color: #dcdcdc; clip-path: inset(0 0 0 0);}
|
||||
}
|
||||
|
||||
@-o-keyframes slideIn {
|
||||
0% {color: #dcdcdc; clip-path: inset(0 100% 0 0);}
|
||||
100% {color: #dcdcdc; clip-path: inset(0 0 0 0);}
|
||||
}
|
||||
|
||||
@-ms-keyframes slideIn {
|
||||
0% {color: #dcdcdc; clip-path: inset(0 100% 0 0);}
|
||||
100% {color: #dcdcdc; clip-path: inset(0 0 0 0);}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
color: #EAA221;
|
||||
font-weight: bold;
|
||||
padding-top: 1em;
|
||||
}
|
||||
.section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title-link { color: #EAA221; }
|
||||
.title-link { text-decoration-color: #EAA221; }
|
||||
|
||||
.card {
|
||||
padding: 1em;
|
||||
margin: 1em;
|
||||
min-width: 250px;
|
||||
}
|
||||
a { color:#dcdcdc; }
|
||||
a:hover { color: #EAA221; }
|
||||
|
||||
.card-img {
|
||||
width: auto;
|
||||
height: 150px;
|
||||
}
|
||||
.card {
|
||||
background-color: transparent;
|
||||
max-width: 45%;
|
||||
border:none;
|
||||
}
|
||||
|
||||
ul.timeline {
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
padding-top: 1em;
|
||||
}
|
||||
ul.timeline:before {
|
||||
content: ' ';
|
||||
background: #dcdcdc;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 29px;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
z-index: 400;
|
||||
}
|
||||
ul.timeline > li {
|
||||
margin: 20px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
ul.timeline > li:before {
|
||||
content: ' ';
|
||||
background: #212121;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #0fc;
|
||||
left: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 400;
|
||||
}
|
||||
|
||||
.bigger {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body { min-width: 100%; }
|
||||
p { font-size: x-large; }
|
||||
li { font-size: x-large; }
|
||||
h6 { font-size: x-large; }
|
||||
.media-float { float: none!important; }
|
||||
.container { max-width: 100%; }
|
||||
.card {
|
||||
max-width: 100%;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.headline { bottom: 0; }
|
||||
.headline-title { font-size: 1.5em; }
|
||||
.one-liner { font-size: 1em; }
|
||||
}
|
||||
|
||||
|
||||
@media only (max-width: 1024px) {
|
||||
p { font-size: xxx-large; }
|
||||
li { font-size: xxx-large; }
|
||||
h6 { font-size: xxx-large; }
|
||||
.media-float { float: none!important; }
|
||||
.section-header { font-size: 4rem; }
|
||||
.card-title { font-size: 5rem; }
|
||||
.card-subtitle { font-size: 2.75rem; }
|
||||
.card { max-width: 100%; }
|
||||
.bigger { font-size: 2.75rem; }
|
||||
.container { max-width: 90%; }
|
||||
}
|
||||
Reference in New Issue
Block a user