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

16
features.html
View file

@ -176,7 +176,7 @@
<!-- Right 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 -->
<div class="row" id="feature-media-container">
<div class="col">
@ -185,7 +185,7 @@
</div>
<!-- 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">
<h4 >Don't waste time on setup</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@ -198,7 +198,7 @@
</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 -->
<div class="row" id="feature-media-container">
<div class="col">
@ -207,7 +207,7 @@
</div>
<!-- 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">
<h4>Don't waste time on setup #2</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@ -220,7 +220,7 @@
</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 -->
<div class="row" id="feature-media-container">
<div class="col">
@ -229,7 +229,7 @@
</div>
<!-- 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">
<h4>Don't waste time on setup #3</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@ -242,7 +242,7 @@
</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 -->
<div class="row" id="feature-media-container">
<div class="col">
@ -251,7 +251,7 @@
</div>
<!-- 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">
<h4>Don't waste time on setup #4</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor