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

Restyle page links from buttons to underlined

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

37
page/style.css
View File

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