mirror of
https://github.com/DarrylNixon/binhop
synced 2024-04-22 12:37:06 -07:00
109 lines
2.2 KiB
CSS
109 lines
2.2 KiB
CSS
body {
|
||
color: #fff;
|
||
}
|
||
.header {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
.logo {
|
||
margin-top: 50px;
|
||
margin-bottom: 30px;
|
||
width: 200px;
|
||
}
|
||
.button-center {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
button {
|
||
background-color: #3498db;
|
||
color: #fff;
|
||
border: none;
|
||
padding: 10px 20px;
|
||
font-size: 16px;
|
||
}
|
||
button:hover {
|
||
background-color: #2980b9;
|
||
}
|
||
pre {
|
||
white-space: pre-wrap;
|
||
}
|
||
#footer {
|
||
position: fixed;
|
||
bottom: 10px;
|
||
right: 10px;
|
||
background-color:#263745;
|
||
padding: .2em;
|
||
opacity: 0.4;
|
||
}
|
||
/* Yet unused, from https://iamkate.com/code/tree-views/ */
|
||
/* .tree{
|
||
--spacing : 1.5rem;
|
||
--radius : 10px;
|
||
}
|
||
.tree li{
|
||
display : block;
|
||
position : relative;
|
||
padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
|
||
}
|
||
.tree ul{
|
||
margin-left : calc(var(--radius) - var(--spacing));
|
||
padding-left : 0;
|
||
}
|
||
.tree ul li{
|
||
border-left : 2px solid #ddd;
|
||
}
|
||
.tree ul li:last-child{
|
||
border-color : transparent;
|
||
}
|
||
.tree ul li::before{
|
||
content : '';
|
||
display : block;
|
||
position : absolute;
|
||
top : calc(var(--spacing) / -2);
|
||
left : -2px;
|
||
width : calc(var(--spacing) + 2px);
|
||
height : calc(var(--spacing) + 1px);
|
||
border : solid #ddd;
|
||
border-width : 0 0 2px 2px;
|
||
}
|
||
.tree summary{
|
||
display : block;
|
||
cursor : pointer;
|
||
}
|
||
.tree summary::marker, .tree summary::-webkit-details-marker{
|
||
display : none;
|
||
}
|
||
.tree summary:focus{
|
||
outline : none;
|
||
}
|
||
.tree summary:focus-visible{
|
||
outline : 1px dotted #000;
|
||
}
|
||
.tree li::after, .tree summary::before{
|
||
content : '';
|
||
display : block;
|
||
position : absolute;
|
||
top : calc(var(--spacing) / 2 - var(--radius));
|
||
left : calc(var(--spacing) - var(--radius) - 1px);
|
||
width : calc(2 * var(--radius));
|
||
height : calc(2 * var(--radius));
|
||
border-radius : 50%;
|
||
background : #ddd;
|
||
}
|
||
.tree summary::before{
|
||
content : '+';
|
||
z-index : 1;
|
||
background : #696;
|
||
color : #fff;
|
||
line-height : calc(2 * var(--radius) - 2px);
|
||
text-align : center;
|
||
}
|
||
.tree details[open] > summary::before{
|
||
content : '−';
|
||
} */
|