open-goverance/Events/_Templates/main.css

120 lines
1.7 KiB
CSS
Raw Permalink Normal View History

/* Basic stuff */
body {
max-width: 100ch;
margin: 0 auto;
padding: 8px;
line-height: 1.2;
}
/* To make sure the header text is always bigger than a normal h1*/
header h1 {
font-size: 300%;
}
/* get these to play nicely with teh max width */
header, main, footer, img{
max-width: 100ch;
}
a:link{
color:#5bf
}
a:visited{
color:#5bf
}
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #999;
padding: 0.5rem;
text-align: left;
}
li p {
margin-block-start: 0;
margin-block-end: 0;
}
p code {
background-color: rgba(173, 173, 173, 0.26);
border-radius: 0.3em;
padding: 4px 5px 6px;
}
pre {
max-width: 95vw;
display: block;
overflow: auto;
}
/* navbar */
.links ul, .breadcrumb ul {
list-style-type: none;
display: flex;
padding-left: 0;
}
/* sticky footer */
main {
min-height: calc(95vh - 150px);
}
footer {
min-height: 50px;
}
/* spoilers
using https://starbeamrainbowlabs.com/blog/article.php?article=posts%2F415-pure-css-spoiler.html
as a base then using it for on hover instead of target.
Seems to work well enough for mobile as well
*/
.md-spoiler {
background: #333333;
border-radius: 0.2em;
color: transparent;
}
/* hover is for desktop, active for mobile*/
.md-spoiler:hover, .md-spoiler:active {
background: transparent;
color: inherit;
}
/* every page gets a scrollbar to stop it shifting around */
html {
overflow-y: scroll;
}
label, input, select {
display: table-cell;
margin-bottom: 10px;
}
/* Make hidden great again */
[hidden] {
display: none !important;
}
/* Specific to handovers */
h1 {
color: #087581;
}
h2 {
color: white;
background: #087581;
}
/*h3 {*/
/* background: #B8F4FA;*/
/*}*/
#logo {
background: white;
float: right;
margin: 0 0 0 1px;
}