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

Style updates to features

Browse source
This commit is contained in:
Adam Iannazzone 2024-04-23 14:31:47 -04:00
parent 2432ca864d
commit 8d3fca59e2
2 changed files with 31 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
css/style.css
View file

@ -1,6 +1,7 @@
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.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'); @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');
/* Global Styles */
body { body {
background-color: #222; background-color: #222;
@ -23,7 +24,7 @@ footer {
font-family: "Source Sans 3", sans-serif; font-family: "Source Sans 3", sans-serif;
} }
.jumbotron, .card-header { .jumbotron {
color: white; color: white;
border: 1px white solid; border: 1px white solid;
font-family: "Source Sans 3", sans-serif; font-family: "Source Sans 3", sans-serif;
@ -45,9 +46,15 @@ footer {
color: white; color: white;
} }
.card-header { #reduce-motion-switch:checked {
background: #946beb; background-color: #946beb;
border-color: white;
} }
#reduce-motion-switch {
border-color: #946beb;
}
/* Homepage Styles */
#screen-blank { #screen-blank {
position: absolute; position: absolute;
@ -56,7 +63,11 @@ footer {
left: 0; left: 0;
} }
/* Features Page */ /* Features Page Styles */
#feature-jumbotron {
background: #333;
}
.row.feature-list-item { .row.feature-list-item {
padding: 0.5rem; padding: 0.5rem;
@ -68,10 +79,14 @@ footer {
display: none; display: none;
} }
.feature-detail-container#active-feature-detail { #active-feature-detail {
display: inherit; display: inherit;
} }
#feature-jumbotron { .feature-list-item {
background: #333; border: 1px transparent solid;
}
#active-feature-item {
border: 1px white solid;
} }

18
features.html
View file

@ -176,7 +176,7 @@
<!-- Right Column --> <!-- Right Column -->
<div class="col-8" id="feature-detail-column"> <div class="col-8" id="feature-detail-column">
<div class="feature-detail-container rounded-3" id="active-feature-detail"> <div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="active-feature-detail">
<!-- Image/Video Container --> <!-- Image/Video Container -->
<div class="row" id="feature-media-container"> <div class="row" id="feature-media-container">
<div class="col"> <div class="col">
@ -185,9 +185,9 @@
</div> </div>
<!-- Feature Detail Container --> <!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1" id="feature-details-container"> <div class="row py-2 m-1 rounded-3 feature-text-container">
<div class="col"> <div class="col">
<h4>Don't waste time on setup</h4> <h4 >Don't waste time on setup</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
@ -198,7 +198,7 @@
</div> </div>
</div> </div>
<div class="feature-detail-container rounded-3" id=""> <div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="">
<!-- Image/Video Container --> <!-- Image/Video Container -->
<div class="row" id="feature-media-container"> <div class="row" id="feature-media-container">
<div class="col"> <div class="col">
@ -207,7 +207,7 @@
</div> </div>
<!-- Feature Detail Container --> <!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1" id="feature-details-container"> <div class="row rounded-3 py-2 m-1">
<div class="col"> <div class="col">
<h4>Don't waste time on setup #2</h4> <h4>Don't waste time on setup #2</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@ -220,7 +220,7 @@
</div> </div>
</div> </div>
<div class="feature-detail-container rounded-3" id=""> <div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="">
<!-- Image/Video Container --> <!-- Image/Video Container -->
<div class="row" id="feature-media-container"> <div class="row" id="feature-media-container">
<div class="col"> <div class="col">
@ -229,7 +229,7 @@
</div> </div>
<!-- Feature Detail Container --> <!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1" id="feature-details-container"> <div class="row rounded-3 py-2 m-1">
<div class="col"> <div class="col">
<h4>Don't waste time on setup #3</h4> <h4>Don't waste time on setup #3</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@ -242,7 +242,7 @@
</div> </div>
</div> </div>
<div class="feature-detail-container rounded-3" id=""> <div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="">
<!-- Image/Video Container --> <!-- Image/Video Container -->
<div class="row" id="feature-media-container"> <div class="row" id="feature-media-container">
<div class="col"> <div class="col">
@ -251,7 +251,7 @@
</div> </div>
<!-- Feature Detail Container --> <!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1" id="feature-details-container"> <div class="row rounded-3 py-2 m-1">
<div class="col"> <div class="col">
<h4>Don't waste time on setup #4</h4> <h4>Don't waste time on setup #4</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor