112 lines
2.4 KiB
CSS
112 lines
2.4 KiB
CSS
/* @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0-1.0 */
|
|
/****************************************************************************
|
|
* BPS (Bill Paxton Soundboard)
|
|
*
|
|
* Copyright 2024 Eric Woodward
|
|
* Source released under CC0 Public Domain License v1.0
|
|
* https://www.itsericwoodward.com/licenses/cc0/
|
|
* http://creativecommons.org/publicdomain/zero/1.0/
|
|
****************************************************************************/
|
|
|
|
html {
|
|
color: #DDE6ED;
|
|
background-color: #161f2b;
|
|
font-size: 20px;
|
|
margin: .5rem;
|
|
}
|
|
|
|
a {
|
|
color: #abc1d3;
|
|
}
|
|
|
|
a:visited {
|
|
color: #799cb9;
|
|
}
|
|
|
|
code {
|
|
background-color: #444b55;
|
|
}
|
|
|
|
p {
|
|
text-align: justify;
|
|
}
|
|
|
|
.center { text-align: center; }
|
|
|
|
.circleWrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.downloadButton {
|
|
border: 1px dashed;
|
|
border-radius: .5rem;
|
|
display: inline-block;
|
|
font-size: .75rem;
|
|
margin: 1rem;
|
|
max-width: 8rem;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.figureButton {
|
|
cursor: pointer;
|
|
margin: 0.5rem;
|
|
max-width: 5.5rem;
|
|
}
|
|
|
|
.figureButton:hover {
|
|
filter: brightness(1.5);
|
|
}
|
|
|
|
.figureButton figcaption {
|
|
text-align: center;
|
|
}
|
|
|
|
.figureButton img { max-width: 100% }
|
|
|
|
/****************************************************************************
|
|
* Media Queries
|
|
****************************************************************************/
|
|
|
|
@media all and (min-width: 950px) {
|
|
|
|
/* circular layout derived from https://stackoverflow.com/a/12817454 */
|
|
|
|
.circleWrapper {
|
|
--d: 6.5em; /* image size */
|
|
--rel: .75; /* how much extra space we want between images, 1 = one image size */
|
|
--r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan)); /* circle radius */
|
|
--s: calc(2*var(--r) + var(--d)); /* container size */
|
|
height: var(--s);
|
|
margin: 1rem auto;
|
|
position: relative;
|
|
width: var(--s);
|
|
}
|
|
|
|
.figureButton {
|
|
--az: calc(var(--i)*1turn/var(--m));
|
|
height: var(--d);
|
|
left: 50%;
|
|
margin: calc(-.5*var(--d));
|
|
position: absolute;
|
|
top: 50%;
|
|
transform:
|
|
rotate(var(--az))
|
|
translate(var(--r))
|
|
rotate(calc(-1*var(--az)));
|
|
width: var(--d);
|
|
}
|
|
|
|
.downloadButton {
|
|
font-size: 1rem;
|
|
margin: 4rem 1rem 1rem;
|
|
}
|
|
|
|
}
|
|
|
|
/* @license-end */
|