Emi/ELOS-License-Builder
1
0
Fork 1
Code Issues Pull requests Projects Releases Wiki Activity

Switched from using a checkbox to :target for Get Started

Browse source
This commit is contained in:
Emi Simpson 2022-02-06 14:20:15 -05:00
parent 3cbd7e5d0e
commit 6ed6a3a81c
Signed by: Emi
GPG key ID: 45E9C6E81BD86E7C
2 changed files with 7 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
site/index.html
View file

@ -35,12 +35,7 @@
<p><span class="hr"></span><span>Not Evil</span></p> <p><span class="hr"></span><span>Not Evil</span></p>
</h1> </h1>
</header> </header>
<input <div id="picker"><!--Marker--></div>
id="should-hide-intro"
type="checkbox"
style="display: none"
aria-hidden="true"
/>
<section id="intro"> <section id="intro">
<!--p> <!--p>
Since the penning of the GPL, Free and Open Source software has led the charge Since the penning of the GPL, Free and Open Source software has led the charge
@ -63,11 +58,11 @@
<label <label
for="should-hide-intro" for="should-hide-intro"
aria-role="button" > aria-role="button" >
<div class="cool-button"> <a class="cool-button" href="#picker">
<div aria-hidden="true" class = "bevel tr"></div> <div aria-hidden="true" class = "bevel tr"></div>
<div>Get Started</div> <div>Get Started</div>
<div aria-hidden="true" class = "bevel bl"></div> <div aria-hidden="true" class = "bevel bl"></div>
</div> </a>
</label> </label>
</section> </section>
<div id="elm-unpossessed"> <div id="elm-unpossessed">

6
site/styles.scss
View file

@ -72,11 +72,11 @@ header {
} }
} }
#should-hide-intro:checked + #intro { #picker:target + #intro {
display: none; display: none;
} }
#should-hide-intro:not(:checked) ~ #elm-area { #picker:not(:target) ~ #elm-area {
display: none; display: none;
} }
@ -85,6 +85,7 @@ header {
--bevel-size: 20px; --bevel-size: 20px;
color: var(--color-bg); color: var(--color-bg);
width: fit-content; width: fit-content;
display: block;
font-family: Resistance; font-family: Resistance;
font-size: 2.5rem; font-size: 2.5rem;
margin-left: auto; margin-left: auto;
@ -93,6 +94,7 @@ header {
background: none; background: none;
border: none; border: none;
padding: 0; padding: 0;
text-decoration: none;
& > div:nth-child(2) { & > div:nth-child(2) {
padding: 0 30px; padding: 0 30px;