mirror of
https://github.com/RetroDECK/RetroDECK-Website.git
synced 2024-11-28 17:45:38 +00:00
109 lines
2.2 KiB
CSS
109 lines
2.2 KiB
CSS
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
|
|
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
|
|
@font-face {
|
|
font-family: "Upheaval TT";
|
|
src: url("../assets/fonts/upheavtt.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: "Exo";
|
|
src: url("../assets/fonts/exo.otf");
|
|
}
|
|
|
|
|
|
/* CSS Variables */
|
|
:root {
|
|
--rd-purple: #946beb;
|
|
--rd-blue: #1a9fff;
|
|
--rd-black: #222;
|
|
--pixel-font: "Upheaval TT", monospace;
|
|
--body-font: "Exo", serif;
|
|
}
|
|
|
|
|
|
body {
|
|
background: var(--rd-black);
|
|
}
|
|
|
|
/* Nav and Footer Styles */
|
|
|
|
nav, footer {
|
|
background: var(--rd-blue);
|
|
font-family: var(--pixel-font);
|
|
}
|
|
|
|
nav {
|
|
border-bottom: var(--rd-purple) solid 5px;
|
|
font-size: x-large;
|
|
}
|
|
|
|
nav i.bi {
|
|
font-size: small;
|
|
}
|
|
|
|
.nav-link:hover, .nav-link.show {
|
|
background: var(--rd-purple);
|
|
border: white solid 1px;
|
|
border-radius: 5px;
|
|
margin: -1px;
|
|
}
|
|
|
|
.dropdown-menu.show {
|
|
background: var(--rd-purple);
|
|
/* background: linear-gradient(45deg, #1a9fff, #946beb); */
|
|
border: white solid 1px;
|
|
font-size: large;
|
|
}
|
|
|
|
a.dropdown-item:hover {
|
|
background: var(--rd-blue);
|
|
}
|
|
|
|
footer {
|
|
border-top: var(--rd-purple) solid 5px;
|
|
}
|
|
|
|
#pixel-font-switch:checked {
|
|
background-color: #946beb;
|
|
border-color: white;
|
|
}
|
|
#pixel-font-switch {
|
|
border-color: #946beb;
|
|
}
|
|
|
|
/* Jumbotron Styles */
|
|
.jumbotron {
|
|
background: linear-gradient(45deg, var(--rd-purple) 30%, var(--rd-blue));
|
|
border: white 2px solid;
|
|
}
|
|
|
|
.jumbotron h1,h2 {
|
|
font-family: var(--pixel-font);
|
|
text-shadow: 2px 2px var(--rd-purple);
|
|
color: white;
|
|
}
|
|
|
|
.jumbotron p {
|
|
font-family: var(--body-font);
|
|
font-size: larger;
|
|
}
|
|
|
|
.jumbotron .btn:hover svg {
|
|
fill: white;
|
|
}
|
|
|
|
/* Link Styles */
|
|
.jumbotron p a, footer a, a.btn {
|
|
color: var(--rd-purple);
|
|
background: var(--rd-black);
|
|
text-decoration: none;
|
|
padding: 5px;
|
|
border: white 1px solid;
|
|
border-radius: 5px;
|
|
font-family: var(--pixel-font);
|
|
}
|
|
|
|
.jumbotron p a:hover, footer a:hover, a.btn:hover {
|
|
color: white;
|
|
background: var(--rd-purple);
|
|
border-color: var(--rd-black);
|
|
} |