Xargon/RetroDECK-Website
1
0
Fork 0
mirror of https://github.com/RetroDECK/RetroDECK-Website.git synced 2024-11-24 23:55:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add style for background gradient variations

Browse source 
- Add class for gradient-1 and gradient-2
This commit is contained in:
Adam Iannazzone 2024-10-29 08:48:29 -04:00
parent e43766bffb
commit 1c885c3d10
2 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
css/style.css
View file

@ -80,7 +80,6 @@ footer {
/* Jumbotron Styles */ /* Jumbotron Styles */
.jumbotron { .jumbotron {
background: linear-gradient(45deg, var(--rd-purple) 30%, var(--rd-blue));
border: white 2px solid; border: white 2px solid;
} }
@ -95,6 +94,15 @@ p {
font-size: larger; font-size: larger;
} }
.gradient-1 {
background: var(--gradient-1) !important;
}
.gradient-2 {
background: var(--gradient-2) !important;
}
/* Features Styles */ /* Features Styles */
#features { #features {
background: #000; background: #000;
@ -124,6 +132,10 @@ p {
font-family: var(--body-font); font-family: var(--body-font);
} }
#extra-features img {
max-height: 50px;
}
/* Alternating Color Styles */ /* Alternating Color Styles */
#features .row { #features .row {
padding-top: 30px; padding-top: 30px;

5
index.html
View file

@ -234,7 +234,7 @@
<!-- Jumbotron --> <!-- Jumbotron -->
<div class="container px-2"> <div class="container px-2">
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron"> <div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron gradient-1">
<div class="container-fluid align-items-center"> <div class="container-fluid align-items-center">
<!-- First section --> <!-- First section -->
<div class="row align-items-center"> <div class="row align-items-center">
@ -310,6 +310,7 @@
</div> </div>
<!-- End Jumbotron --> <!-- End Jumbotron -->
<!-- Features -->
<div class="container-fluid mb-4" id="features"> <div class="container-fluid mb-4" id="features">
<div class="row align-items-center mt-3 mb-3"> <div class="row align-items-center mt-3 mb-3">
<div class="col-12 col-lg-8 stack"> <div class="col-12 col-lg-8 stack">
@ -362,7 +363,7 @@
<!-- Donate Appeal --> <!-- Donate Appeal -->
<div class="container px-2"> <div class="container px-2">
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron"> <div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron gradient-2">
<div class="container-fluid py-2 align-items-center"> <div class="container-fluid py-2 align-items-center">
<!-- First section --> <!-- First section -->
<div class="row align-items-center"> <div class="row align-items-center">