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
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;
|
|
}
|
|
}
|