mirror of
https://github.com/RetroDECK/RetroDECK-Website.git
synced 2024-11-21 22:45:39 +00:00
164 lines
3.3 KiB
CSS
164 lines
3.3 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;
|
|
--gradient-1: linear-gradient(45deg, var(--rd-purple) 30%, var(--rd-blue));
|
|
--gradient-2: linear-gradient(45deg, var(--rd-blue) 30%, var(--rd-purple));
|
|
--pixel-font: "Upheaval TT", monospace;
|
|
--body-font: "Exo", serif;
|
|
--transition-speed: 0.1s;
|
|
}
|
|
|
|
|
|
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 .nav-link:hover, nav .nav-link.show {
|
|
/* background: var(--rd-purple);
|
|
border: white solid 1px;
|
|
border-radius: 5px;
|
|
margin: -1px; */
|
|
color: white;
|
|
}
|
|
|
|
nav .dropdown-menu.show {
|
|
background: var(--rd-purple);
|
|
border: white solid 1px;
|
|
font-size: large;
|
|
}
|
|
|
|
nav a.dropdown-item:hover {
|
|
background: var(--rd-blue);
|
|
color: white;
|
|
}
|
|
|
|
nav a.dropdown-item:hover svg {
|
|
fill: white;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/* Features Styles */
|
|
|
|
#features {
|
|
background: #000;
|
|
border-top: var(--rd-purple) 5px solid;
|
|
border-bottom: var(--rd-purple) 5px solid;
|
|
}
|
|
|
|
#feature-card-row, #screenshot-row {
|
|
flex-wrap: nowrap;
|
|
scrollbar-width: none;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.screenshot {
|
|
scale: 80%;
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--rd-blue);
|
|
border: white 2px solid;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
scale: 80%;
|
|
}
|
|
|
|
.feature-card#active-feature-card, .screenshot#active-screenshot {
|
|
scale: 100%;
|
|
transition: 0.25s;
|
|
}
|
|
|
|
.feature-card#empty-feature, .screenshot#empty-screenshot {
|
|
visibility: hidden;
|
|
}
|
|
.feature-card h3 {
|
|
color: white;
|
|
font-family: var(--pixel-font);
|
|
text-shadow: 2px 2px var(--rd-purple);
|
|
}
|
|
|
|
.feature-card p {
|
|
/* font-size: larger; */
|
|
font-family: var(--body-font);
|
|
}
|
|
|
|
/* 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);
|
|
transition: var(--transition-speed);
|
|
}
|
|
|
|
.jumbotron .btn:hover svg {
|
|
fill: white;
|
|
transition: var(--transition-speed);
|
|
} |