near/computersandblues.lodestone
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add tabs & help section

Browse source
This commit is contained in:
arne 2025-11-22 13:15:03 +01:00
commit 661f6f4f51
2 changed files with 94 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

64
public/index.html
View file

@ -28,26 +28,23 @@
h1, h2, h3 {
font-family: serif;
margin: 0;
margin: 16px 0;
}
h1 {
font-size: 36px;
line-height: 48px;
margin-bottom: 12px;
}
h2 {
font-size: 24px;
line-height: 30px;
margin-bottom: 6px;
}
h3 {
clear: both;
font-size: 20px;
line-height: 24px;
margin-bottom: 6px;
}
img,
@ -80,6 +77,33 @@
clear: both;
}
nav.tabs .tab-list {
display: flex;
justify-content: end;
list-style-type: none;
margin: 0 0 12px 0;
padding: 0;
}
nav.tabs .tab-list .tab {
margin-left: 12px;
}
nav.tabs .tab-list .tab:first-child {
margin-left: 0;
}
nav.tabs .tab-list .tab a {
padding: 12px;
color: #444;
display: inline-block;
text-decoration: none;
}
nav.tabs .tab-list .tab.active a {
border-bottom: 3px solid #f5e6ab;
}
input,
button {
margin: 6px 0;
@ -106,7 +130,8 @@
margin: 6px 0;
}
section.posts .controls {
section.posts header.controls {
margin-top: -16px;
padding: 0 0 36px;
display: grid;
grid-template:
@ -115,11 +140,11 @@
"c";
}
section.posts .controls .search-form input {
section.posts header.controls .search-form input {
width: 80%;
}
section.posts .controls .loading-indicator {
section.posts header.controls .loading-indicator {
width: 20px;
height: 20px;
vertical-align: middle;
@ -127,7 +152,7 @@
overflow: visible;
}
section.posts .controls .loading-indicator .arc {
section.posts header.controls .loading-indicator .arc {
/* svg */
fill: transparent;
stroke-width: 20;
@ -144,49 +169,50 @@
}
}
section.posts .controls .buttons {
section.posts header.controls .buttons {
display: flex;
justify-content: end;
flex-wrap: wrap;
}
section.posts .controls .post-info {
section.posts header.controls .post-info {
grid-area: b;
}
section.posts .controls .search-form {
section.posts header.controls .search-form {
grid-area: c;
}
section.posts .controls .buttons {
section.posts header.controls .buttons {
grid-area: a;
}
@media screen and (min-width: 640px) {
section.posts .controls {
section.posts header.controls {
grid-template:
"a a"
"b c";
}
section.posts .controls .post-info {
section.posts header.controls .post-info {
grid-area: a;
}
section.posts .controls .search-form {
section.posts header.controls .search-form {
grid-area: b;
}
section.posts .controls .search-form input {
section.posts header.controls .search-form input {
width: auto;
}
section.posts .controls .buttons {
section.posts header.controls .buttons {
grid-area: c;
}
}
section.posts .controls .control-button {
/* used for both header and post controls */
padding: 6px;
margin: 6px 0 6px 12px;
background: #f5e6ab;
@ -261,6 +287,10 @@
}
}
section.help ul {
line-height: 1.8;
}
code {
font-family: monospace;
padding: .16rem .24rem;