Blasta/stylesheet/stylesheet.css

513 lines
7.2 KiB
CSS
Raw Permalink Normal View History

a {
color: #2c6825; /* #439639 */
font-family: system-ui;
text-decoration: none;
}
a:visited {
color: #bf420f; /* #d9541e */
}
a:hover {
text-decoration: underline;
}
.tags > a {
margin-right: 8px;
text-decoration: underline;
}
body {
background-color: #f5f5f5;
}
div, h1, h2, h3, h4, h5, p, span {
color: #000;
font-family: system-ui;
}
body, h1, h2, html,
#footer dd,
#footer dl,
#posts > dd,
#navigation dd,
dl#navigation,
#related-tags dd {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
dl, form, p, .details {
line-height: 150%;
margin: 8px;
margin-left: 8px;
}
input.submit {
margin-top: 1em;
}
h1 {
display: inline-block;
font-size: 150%;
font-weight: bolder;
margin:0;
padding:0 0 0 4px;
}
h2 {
background-color: #eee;
font-size: initial;
font-weight: normal;
padding: 0.5ex 0.5em 0.5pc 0.5em;
}
h3, h4, h5 {
margin: 1em;
margin-block-end: 1em;
margin-left: 8px;
}
#container {
display: flex;
flex-flow: column;
height: 100%;
}
#container #header.row {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
*/
}
#container #main.row {
flex: 1 1 auto;
}
#container #footer.row {
flex: 0 1 20px;
}
#about-blasta-feeds {
background-color: #ddffff;
border-left: 6px solid #d9541e;
padding: 0.01em 16px;
margin-bottom: 1em;
width: 80%;
}
#about-blasta-feeds > span,
#about-blasta-feeds > table {
font-size: 80%;
}
#header {
background-color: #ddd;
padding: 0.5ex 0 0.5pc 0.5em;
}
#header h1 {
margin-bottom: 0.5em;
}
#header dl {
float: right;
}
#header dd:last-child {
border-right: unset;
}
#profile-link {
color: unset;
}
#header dd {
border-right: 1px solid #444;
display: inline;
padding: 0 0.4em;
}
#posts > dd:first-child {
margin-block-start: 2.22em;
}
#posts > dd {
margin-block-start: 1.33em;
}
article > h4 {
display: inline;
}
/*
form > * {
line-height: 120%;
margin: 2px;
}
*/
#main {
display: flex;
/* justify-content: space-between; */
}
#related-tags {
background-color: #eee;
min-width: 200px;
padding: 0 0.5em 1em 1em;
height: 90vh;
width: 15%;
/* float: right; */
/* width: 200px; */
}
#related-tags dd {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#related-tags dd:hover {
overflow: unset;
overflow-wrap: break-word;
text-overflow: unset;
white-space: unset;
}
#content {
/* min-width: 85%; */
/* display: inline-block; */
flex-grow: 1;
}
/*
#posts {
line-height: 120%;
margin: 8px;
}
#posts h4 {
margin-bottom: 1px;
}
*/
form#editor tr > td:first-child {
text-align: right;
padding: 1em;
}
form#editor th {
text-align: right;
padding: 1em;
}
/*
form#editor th,
form#editor td {
vertical-align: top;
}
*/
form#editor #description,
form#editor #title,
form#editor #summary,
form#editor #tags,
form#editor #url {
width: 150%;
}
form#editor input[type="radio"]:checked:disabled + label {
/* font-weight: bold; */
text-decoration: underline;
}
/*
input[type="radio"]:disabled:not(:checked),
input[type="radio"]:disabled:not(:checked) + label {
display: none;
}
*/
pre {
white-space: pre-wrap;
}
p.summary {
white-space: break-spaces;
}
table.pattern > tr > td:first-child {
text-wrap: nowrap;
}
table.pattern,
table#software,
table.atom-over-xmpp {
margin: 8px;
}
table.pattern th,
table#software th {
padding-top: 22px;
text-align: left;
}
table.pattern td,
table#software td {
line-height: 120%;
overflow-wrap: anywhere;
padding: 8px;
vertical-align: text-top;
}
#bookmarklet:hover {
background: #fff9df;
}
#bookmarklet {
background: #eee;
border: 1px solid #bbb;
border-radius: 4px;
font-weight: bold;
filter: drop-shadow(1px 1px 1px black);
margin-left: 3px;
margin-right: 3px;
padding-left: 3px;
padding-right: 3px;
}
#bookmarklet a {
color: #0000ff;
text-decoration: none;
}
#subscribe {
/* font-size: 75%; */
padding-top: 1em;
/* text-align: center; */
}
#footer {
border-top: 1px solid #eee;
font-size: 80%;
margin-top: 3em;
/* text-align: center; end left start */
}
#tags-sized {
line-height: 2em;
margin: 1em;
text-align: justify;
}
.tag-degree-first {
font-size: 100%;
font-weight: 300;
margin: 1em;
}
.tag-degree-first:first-child {
margin: unset;
}
.tag-degree-second {
font-size: 125%;
font-weight: 400;
margin: 1.25em;
}
.tag-degree-second:first-child {
margin: unset;
}
.tag-degree-third {
font-size: 150%;
font-weight: 500;
margin: 1.5em;
}
.tag-degree-third:first-child {
margin: unset;
}
.tag-degree-fourth {
font-size: 175%;
font-weight: 600;
margin: 1.75em;
}
.tag-degree-fourth:first-child {
margin: unset;
}
.tag-degree-fifth {
font-size: 200%;
font-weight: 700;
margin: 2em;
}
.tag-degree-fifth:first-child {
margin: unset;
}
.instances-degree-first {
color: unset;
background: #cbecef;
}
.instances-degree-second {
color: unset;
background: #b6ffd6; /* #b6ffeb */
}
.instances-degree-third {
color: unset;
background: #ebefcb;
}
.instances-degree-fourth {
color: unset;
background: #f4fbb8;
}
.instances-degree-fifth {
color: unset;
background: #efd8cb;
}
.quote {
font-family: serif;
font-style: italic;
line-height: 2.5em;
margin-left: 1.5em;
width: 50%;
}
.warning {
color: #822493;
font-weight: bold;
}
.bottom {
font-size: 80%;
}
#navigate-top {
margin: 8px;
float: inline-end;
}
#navigate-bottom {
margin: 8px;
padding-top: 2em;
/* text-align: center; */
}
.inactive {
color: #818181;
}
#footer :first-child {
border-left: unset;
}
#footer dd {
display: inline;
border-left: 1px solid #444;
padding: 0 0.5em;
}
div#table {
display: flex;
}
.enlarge {
font-size: 24px;
}
#navigation dd:first-child {
display: none;
}
#header img {
height: 20px;
width: 20px;
}
#bookmarklet img {
height: 12px;
width: 12px;
}
#footer img {
height: 10px;
width: 10px;
}
#navigation img {
height: 18px;
width: 18px;
}
@media (max-width: 1150px) {
#header > h1 {
font-size: 100%;
}
#header img {
height: 16px;
width: 16px;
}
}
@media (max-width: 1000px) {
#related-tags,
#header > h1 {
display: none;
}
#header dl {
float: none;
}
#navigation {
text-align: center;
}
#navigation dd:first-child {
display: unset;
}
}
@media (max-width: 725px) {
#profile-link > b {
display: none;
}
#profile-link:before {
content: 'Home';
}
}
/* <hr class="strip"/>
.strip {
background: #c4e17f;
border-radius: 5px;
border-top: 0;
display: block;
height: 3px;
max-width: 220px;
background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: linear-gradient(to right, #fff 25%, #d9541e 25%, #439639 25%, #d3d2d2 25%);
background-image: linear-gradient(to right, #fff, #d9541e, #439639, #d3d2d2);
background-image: linear-gradient(to right, #439639, #439639 25%, #fff 25%, #fff 75%, #d9541e 75%, #d9541e);
background-image: linear-gradient(to right, #fff, #fff 25%, #d9541e 25%, #d9541e 50%, #439639 50%, #439639 75%, #d3d2d2 75%, #d3d2d2);
}
*/