You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

588 lines
7.9 KiB
CSS

:root {
--fg-col: #FFFFFF;
/*--main-col: #d2738a;*/
--main-col:#b4a999;
--grey-col: #CCCCCC;
--bg-col: #1f1710;
--ver: calc(95vh - 50px);
--ver-btm: 10vh;
--ver-upr: 18px;
--shade: linear-gradient(to top, rgba(31,23,16,1), rgba(31,23,16,0.8), rgba(31,23,16,0));
}
body {
background-repeat: no-repeat;
background-color: var(--bg-col);
background-size: cover;
background-attachment: fixed;
background-position: bottom left;
word-break: break-word;
display: grid;
grid-template-columns: min-content auto;
gap: 20px;
}
ul {
list-style: none;
margin: 4px 0;
}
li {
margin: 4px 0;
}
img {
padding: 2px;
border: 3px double var(--main-col);
}
table {
padding: 2px;
margin: 20px 0 20px 0;
border: 1px solid var(--main-col);
}
th {
color: var(--fg-col);
font-weight: bold;
}
tr:nth-child(odd) {
background-color: #150f0a;
}
tr:nth-child(even) {
background-color: #392a1d;
}
input[type="submit" i] {
background: unset;
border: 3px double var(--main-col);
margin-left: 10px;
color: var(--main-col);
font-size: 1.5em;
}
.aside, .article, .section, .mobilemenu, .banner {
opacity: 0.9;
transition: 0.3s;
}
.banner {
border: none;
width: 240px;
max-width: 100%;
}
.banner:hover {
opacity: 1;
}
.bannerother, .bannergrave {
border: none;
height: 60px;
width: 240px;
max-width: 100%;
}
.bannergrave {
filter: grayscale(1);
transition: 0.3s;
}
.bannergrave:hover {
filter: grayscale(0);
}
.bannerlarge {
border: none;
max-width: 100%;
}
.imgnoborder {
max-width: 100%;
border: none;
}
.aside, .article, .section, .mobilemenu {
background: var(--bg-col);
padding: 10px;
border: 1px solid var(--main-col);
box-shadow: 3px 3px 2px var(--main-col);
}
.aside:hover, .article:hover, .section:hover, .mobilemenu:hover {
opacity: 1;
box-shadow: 6px 6px 4px var(--main-col);
}
.aside {
width: 250px;
margin: 2px;
max-height: var(--ver);
align-self: start;
overflow-x: hidden;
position: sticky;
top: calc(2px + 8px);
}
.aside > ul {
padding-inline-start: 20px;
}
.aside > ul > ul {
padding-inline-start: 25px;
}
.asideitem {
list-style-image: url("../images/list.gif");
list-style-position: inside;
font-size: 1.2em;
}
.asidesubitem {
list-style-image: url("../images/listsmall.gif");
list-style-position: inside;
font-size: 1em;
}
.openaside {
display: none;
position: fixed !important;
height: 1.5em;
padding: 6px 0 0 0 !important;
width: 100%;
top: 0;
left: 0;
right: 0;
background: var(--bg-col);
border-bottom: 3px double var(--main-col) !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
text-align: center;
box-shadow: none !important;
z-index: 1;
}
.openaside a {
font-size: 1.2em;
letter-spacing: 8px;
margin-top: 4px;
}
.bottom {
height: var(--ver-btm);
width: 100%;
bottom: 0;
left: 0;
position: fixed;
background-image: var(--shade);
display: table;
}
.bottomcell {
display: table-cell;
vertical-align: bottom;
text-align: center;
opacity: 0.7;
transition: 0.3s;
}
.bottomcell:hover {
opacity: 1;
}
.cell {
width: 45%;
text-align: center;
}
.cell > p {
height: 24px;
margin: 16px 0 0 0;
}
.cell > h3 {
height: 48px;
margin: 16px 0 0 0;
}
.mobilemenu {
width: 250px;
overflow-x: hidden;
padding-right: 25px;
margin-bottom: 80px;
}
.mobilemenu > ul {
text-align: left;
position: relative;
right: 9px;
}
.mobilemenu > ul > ul > p {
left: 25% !important;
}
.content {
margin-bottom: var(--ver-btm);
margin-top: 2px;
margin-bottom: 0;
width: fit-content;
}
.article {
margin: 2px 20px 0 20px;
padding: 25px !important;
margin-top: 30px;
margin-bottom: 55px;
}
.article-headerless {
margin: 0 20px 55px 0 !important;
}
.section {
max-height: 50vh;
overflow: hidden;
position: relative;
}
.section1 {
margin: 20px 20px 20px 80px;
}
.section2 {
margin: 20px 80px 20px 20px;
}
.section3 {
margin: 20px 60px 20px 60px;
}
.homesection {
margin-bottom: 60px;
width: 540px;
text-align: center;
max-height: unset;
}
.homemessage, .homesubmessage {
font-style: italic;
}
.homemessage {
font-size: 2em;
}
.homesubmessage {
font-size: 1.2em;
}
.homesmallimg {
display: none;
}
.upperdirs {
width: 80%;
height: var(--ver-upr);
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.numlist {
display: table;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.seemore {
position: absolute;
bottom: 0;
width: calc(100% - 20px);
height: 60px;
background-image: var(--shade);
}
.seedate {
float: left;
margin-top: 40px;
}
.articledate {
float: left;
margin-top: 5px;
}
.seemorelink {
float: right;
margin-top: 40px;
}
.greyed {
color: var(--grey-col);
}
.archivereturn {
margin: 20px 60px 20px 60px;
display: table;
}
.search {
width: 25vw;
min-width: 300px;
}
.titlecol {
width: 65%;
}
.datecol {
width: 35%;
}
.nothinghere {
width: 50vw;
height: 10vh;
margin: 20px 10vw 0 10vw;
text-align: center;
}
.nothinghere > .notgood {
letter-spacing: 2px;
animation: notgood 4s ease-in-out infinite;
animation-play-state: running;
}
.nothingreturn {
position: absolute;
bottom: 0;
right: 0;
font-size: 1.2em;
padding: 6px;
}
.extlink {
background: url("../images/ext.gif") no-repeat;
background-position: right;
padding-right: 13px;
}
.leftimg, .rightimg, .centerimg {
filter: grayscale(1);
transition: 0.2s;
}
.leftimg:hover, .rightimg:hover, .centerimg:hover {
filter: none;
}
.leftimg, .rightimg {
max-width: 50%;
max-height: 25em;
display: block;
margin: 10px;
}
.leftimg {
float: left;
}
.rightimg {
float: right;
}
.centerimg {
max-width: 70%;
max-height: 30em;
display: block;
margin: 10px auto;
}
.quote {
display: inline-block;
margin: 5px;
color: var(--grey-col);
}
.quote:before {
content: "「";
color: var(--main-col);
letter-spacing: 10px;
}
.quote:after {
content: "」";
color: var(--main-col);
letter-spacing: 10px;
}
.scrollingcontentbtm {
margin-bottom: var(--ver-btm);
display: inline-block;
}
.blogbox {
position: relative;
right: 11px;
border: 1px solid var(--main-col);
margin-left: 20px;
margin-bottom: 10px;
}
.asidehometext {
font-size: 1.2em;
position: relative;
display: none;
text-align: center;
}
.asidebottomimage {
height: 30px;
max-width: 30px;
margin: 0 3px;
transition: 0.5s;
}
.asidebottomimage:hover {
box-shadow: var(--main-col) 1px 4px 5px;
}
.archivespan {
margin: 30px;
}
.codeblock {
font-family: 'pxplus_ibm_vga9regular', monospace;
border: 1px solid var(--main-col);
background-color: #1b1b1d;
color: #ffcccc;
font-size: 0.9em;
padding: 10px;
white-space: pre-wrap;
margin: 10px;
overflow-wrap: break-word;
word-break: break-all;
}
.largefont {
font-size: 2em;
}
.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.arrow {
border: none;
padding: 2px 0 0 0;
}
.datetext {
text-align: center;
font-weight: bold;
}
.webring-panel {
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.webring-text {
margin: 6px;
}
.webring-table {
margin-top: 0;
margin-bottom: 0;
}
@keyframes notgood {
0% {
letter-spacing: 2px;
}
50% {
letter-spacing: 4px;
}
100% {
letter-spacing: 2px;
}
}
@media (max-width: 900px) {
.aside > .asidehomeimage {
display: none;
}
.aside > .asidehometext {
display: block;
}
.aside {
width: 200px;
}
.content {
}
}
@media (max-height: 580px) {
.aside > .asidehomeimage {
display: none;
}
.aside > .asidehometext {
display: block;
}
}
@media (max-width: 850px) {
.homesection {
width: 220px;
}
.homelargeimg {
display: none;
}
.homesmallimg {
display: block;
}
}
@media (max-width: 660px) {
.aside {
display: none;
}
body { grid-template-columns: auto }
.openaside {
display: block;
}
body {
margin: 3em 8px 8px 8px;
}
.content {
margin-left: unset;
}
}
@media (max-width: 600px) {
.seedate {
display: none;
}
.seemorelink {
float: left;
}
.bottomcell > p {
font-size: 0.7em;
}
}