darkwiiplayer/js
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Restyle page links from buttons to underlined

Browse source
This commit is contained in:
Talia 2022-06-22 15:04:12 +02:00
parent 93f6a60444
commit 2c5f430dc6
2 changed files with 28 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
index.html
View file

@ -16,6 +16,7 @@
<p>
Skooma lets you <strong>generate DOM nodes in JavaScript</strong>.
<a class="fancy" href="page/skooma.html">Read more</a>
</p>
<p>
@ -30,14 +31,13 @@
])
</code-block>
</p>
<a class="button" href="page/skooma.html">Read more</a>
</section>
<section>
<h2>Element</h2>
<p>
A helper function that adds many convenient features to classes for custom elements.
<a class="fancy" href="page/element.html">Read More</a>
</p>
<p>
@ -55,14 +55,13 @@
})
</code-block>
</p>
<a class="button" href="page/element.html">Read More</a>
</section>
<section>
<h2>Listener</h2>
<p>
Like a normal object, except you can register callbacks for property changes.
<a class="fancy" href="page/listener.html">Read More</a>
</p>
<p>
@ -74,14 +73,13 @@
user.listen('name', value =&gt; console.warn(`User name has changed to ${value}`))
</code-block>
</p>
<a class="button" href="page/listener.html">Read More</a>
</section>
<section>
<h2>Debounce</h2>
<p>
Debounces data like user input or events that can occur in a burst.
<a class="fancy" href="page/debounce.html">Read More</a>
</p>
<p>
@ -92,6 +90,4 @@
input.addEventListener("change", debounce(event =&gt; update(input.value)))
</code-block>
</p>
<a class="button" href="page/debounce.html">Read More</a>
</section>

37
page/style.css
View file

@ -62,31 +62,42 @@ hr {
margin: 1em 0;
}
.button {
a.fancy {
--color-primary: var(--color-hl);
--color-secondary: white;
--color-shadow: #0004;
display: inline-block;
transition: all .3s;
cursor: pointer;
border-radius: .3em;
border: var(--line-mid) var(--color-primary) solid;
padding: .2em .6em;
text-decoration: none;
color: var(--color-primary);
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: .0em .2em;
position: relative;
text-decoration: none;
transition: all .3s;
}
.button.important {
--color-primary: var(--color-hl);
--color-secondary: white;
a.fancy::before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: .1em;
background: var(--color-primary);
transition: all .3s;
z-index: -1;
}
.button:hover {
a.fancy:hover {
color: var(--color-secondary);
background-color: var(--color-primary);
text-shadow: .2em .3em .2em var(--color-shadow);
}
a.fancy:hover::before {
height: 100%;
border-radius: .2em;
}
pre>code {
display: block;
border-left: dashed var(--line-mid) var(--color-ac);