Restyle page links from buttons to underlined
This commit is contained in:
parent
93f6a60444
commit
2c5f430dc6
2 changed files with 28 additions and 21 deletions
12
index.html
12
index.html
|
@ -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 => console.warn(`User name has changed to ${value}`))
|
user.listen('name', value => 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 => update(input.value)))
|
input.addEventListener("change", debounce(event => update(input.value)))
|
||||||
</code-block>
|
</code-block>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<a class="button" href="page/debounce.html">Read More</a>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue