365 lines
6.2 KiB
CSS
365 lines
6.2 KiB
CSS
/*These are the general colors and styles I want to use across my webpages for a consistent look*/
|
|
|
|
/*Needed for parallax to work correctly*/
|
|
body, html {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
/*HTML tags*/
|
|
body{
|
|
background-color: #161A25;
|
|
color: #8FC4E6;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
background-image: url("../img/background.png");
|
|
}
|
|
|
|
h1{
|
|
color: #FFBC42;
|
|
font-family: VT323, monospace;
|
|
font-size: 72px;
|
|
text-shadow: #B17300 3px 3px 7px;
|
|
text-align: center;
|
|
}
|
|
|
|
h2{
|
|
color: #FFBC42;
|
|
font-family: 'Bebas Neue', cursive;
|
|
font-size: 36px;
|
|
text-shadow: #B17300 3px 3px 7px;
|
|
text-align: center;
|
|
}
|
|
|
|
h3{
|
|
color: #FFBC42;
|
|
font-family: 'Bebas Neue', cursive;
|
|
font-size: 24px;
|
|
text-shadow: #B17300 3px 3px 7px;
|
|
}
|
|
|
|
p{
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
}
|
|
|
|
li{
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
}
|
|
|
|
hr{
|
|
width: 45%;
|
|
border-top: 5px double #88c0d0;
|
|
}
|
|
|
|
a{
|
|
font-family: VT323, monospace;
|
|
font-size: 24px;
|
|
}
|
|
|
|
a:link {
|
|
color: #78A1BB;
|
|
}
|
|
a:hover {
|
|
color: #B17300;
|
|
}
|
|
a:active {
|
|
color: #FFBC42;
|
|
}
|
|
a:visited {
|
|
color: #FFBC42;
|
|
}
|
|
|
|
/*fix D3 fonts*/
|
|
svg > svg > a {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 11px;
|
|
color: #FFBC42;
|
|
}
|
|
|
|
svg > svg > g > g > text {
|
|
color: steelblue;
|
|
font-size: 13px;
|
|
}
|
|
|
|
|
|
iframe[src*=youtube]
|
|
{
|
|
text-align: center;
|
|
display: block;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
max-width:90%;
|
|
}
|
|
|
|
[class^="icon-"], [class*=" icon-"] {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
svg {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
th, td {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
th {
|
|
color: #FFBC42;
|
|
background-color: #283044;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: #283044;
|
|
}
|
|
|
|
input[type=text] {
|
|
background-color: #283044;
|
|
color: #8FC4E6;
|
|
border: #283044;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
input[type=text]:focus {
|
|
background-color: #283044;
|
|
color: #8FC4E6;
|
|
border: 3px solid #FFBC42;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
select{
|
|
background-color: #283044;
|
|
color: #8FC4E6;
|
|
border: #283044;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
button {
|
|
background-color: #FFBC42;
|
|
color: #283044;
|
|
border: #283044;
|
|
border-radius: 5px;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 16px;
|
|
}
|
|
|
|
|
|
|
|
/*CSS Classes*/
|
|
.parallax {
|
|
position: relative;
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
.roundCorners {
|
|
border-radius: 25px;
|
|
}
|
|
|
|
.card {
|
|
background-color: RGBA(40, 48, 68, 0.6);
|
|
box-shadow: #FFBC42 3px 3px 10px;
|
|
}
|
|
|
|
.spacer {
|
|
min-height: 50px;
|
|
}
|
|
|
|
.bigIcon {
|
|
font-size: 256px;
|
|
color: #FFBC42;
|
|
text-align: center;
|
|
}
|
|
|
|
.youtube-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
|
|
}
|
|
|
|
.youtube-iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.overflow {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/*CSS IDs*/
|
|
#footer-spacer{
|
|
min-height: 85px;
|
|
}
|
|
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
#footer {
|
|
position: fixed;
|
|
height: 70px;
|
|
width: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #161A25;
|
|
color: #385B70;
|
|
text-align: right;
|
|
}
|
|
|
|
#footer-logo {
|
|
max-height: 50px;
|
|
}
|
|
|
|
#footer-text {
|
|
position: relative;
|
|
bottom: 20px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
#footer {
|
|
position: fixed;
|
|
height: 70px;
|
|
width: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #161A25;
|
|
color: #385B70;
|
|
text-align: right;
|
|
}
|
|
|
|
#footer-logo {
|
|
position: relative;
|
|
bottom: 35px;
|
|
max-height: 50px;
|
|
}
|
|
|
|
#footer-text {
|
|
position: relative;
|
|
bottom: 55px;
|
|
}
|
|
}
|
|
|
|
/*Web fonts*/
|
|
@font-face {
|
|
font-family: VT323;
|
|
src: url("../fonts/VT323-Regular.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Oswald;
|
|
src: url("../fonts/Oswald-Regular.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
src: url("../fonts/IBMPlexMono-Regular.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'IBM Plex Sans', sans-serif;
|
|
src: url("../fonts/IBMPlexSans-Regular.ttf");
|
|
}
|
|
|
|
/**Learned how to do this from this question on StackOverflow: https://stackoverflow.com/questions/15161674/responsive-design-rearrange-element-positions-with-css**/
|
|
@media only screen and (max-width: 768px){
|
|
.reverseOnMobile{
|
|
float: none;
|
|
display: table;
|
|
}
|
|
.firstOnMobile{
|
|
float: none;
|
|
display: table-header-group;
|
|
}
|
|
.lastOnMobile{
|
|
display: table-footer-group;
|
|
}
|
|
}
|
|
|
|
/**Animations**/
|
|
@keyframes titlePulse {
|
|
0% {text-shadow: #B17300 3px 3px 7px;}
|
|
75% {text-shadow: #B17300 3px 3px 7px;}
|
|
80% {text-shadow: lightsteelblue 3px 3px 7px;}
|
|
90% {text-shadow: steelblue 3px 3px 7px;}
|
|
100% {text-shadow: #B17300 3px 3px 7px;}
|
|
}
|
|
|
|
.titlePulse {
|
|
animation-name: titlePulse;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
@keyframes wobble {
|
|
0% {rotate: 0deg;}
|
|
33% {rotate: 15deg;}
|
|
66% {rotate: -15deg;}
|
|
100% {rotate: 0deg;}
|
|
}
|
|
|
|
.wobble {
|
|
animation-name: wobble;
|
|
animation-duration: 10s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
/**Grid system**/
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* For mobile phones: */
|
|
[class*="col-"] {
|
|
width: 100%;
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
/* For desktop: */
|
|
.col-1 {width: 8.33%;}
|
|
.col-2 {width: 16.66%;}
|
|
.col-3 {width: 25%;}
|
|
.col-4 {width: 33.33%;}
|
|
.col-5 {width: 41.66%;}
|
|
.col-6 {width: 50%;}
|
|
.col-7 {width: 58.33%;}
|
|
.col-8 {width: 66.66%;}
|
|
.col-9 {width: 75%;}
|
|
.col-10 {width: 83.33%;}
|
|
.col-11 {width: 91.66%;}
|
|
.col-12 {width: 100%;}
|
|
}
|
|
|
|
[class*="col-"] {
|
|
float: left;
|
|
padding: 15px;
|
|
border-radius: 20px;
|
|
/**border: 1px solid red;**/
|
|
}
|
|
|
|
.row::after {
|
|
content: "";
|
|
clear: both;
|
|
display: table;
|
|
}
|
|
|
|
/** Image - https://www.w3schools.com/css/css_rwd_grid.asp **/
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/** Overflow (for tables) - https://www.w3schools.com/howto/howto_css_table_responsive.asp **/
|
|
.overflow {
|
|
overflow-x:auto;
|
|
}
|