478 lines
7.1 KiB
CSS
478 lines
7.1 KiB
CSS
* {
|
|
box-sizing:border-box
|
|
}
|
|
|
|
body {
|
|
/*font-family: "FreePixel";
|
|
font-size:16px;*/
|
|
|
|
font-family: var(--font-family);
|
|
|
|
font-style: 13px/1.231;
|
|
font-size: var(--font-size);
|
|
|
|
color:var(--main-fg-color);
|
|
|
|
background-image: url(../global/fade.png);
|
|
background-repeat: repeat-x;
|
|
background-color: var(--main-bg-end-color);
|
|
background-position: left top;
|
|
|
|
margin:0;
|
|
padding-bottom:26px;
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
body:before{
|
|
animation-name: Static;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: steps(4);
|
|
opacity: 0.35;
|
|
pointer-events: none;
|
|
}
|
|
|
|
nav{
|
|
width:100%;
|
|
height:40px;
|
|
position:inherit;
|
|
top:0;
|
|
|
|
padding:0 20x;
|
|
z-index:1;
|
|
|
|
text-align: center;
|
|
display: block;
|
|
margin-left: 20px;
|
|
|
|
}
|
|
|
|
.nav{
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
min-height:32px;
|
|
background:none;
|
|
text-decoration:none;
|
|
cursor:pointer;
|
|
|
|
float:left;
|
|
clear:left;
|
|
text-align:center;
|
|
|
|
margin-right: 20px;
|
|
margin-top: 10px;
|
|
|
|
color: var(--main-fg-color);
|
|
|
|
font-size: var(--font-size);
|
|
|
|
}
|
|
|
|
.navSep {
|
|
width: 80%;
|
|
float:left;
|
|
margin-bottom: 20px;
|
|
background-color: var(--main-title-fg-color);
|
|
border-color: var(--main-title-fg-color);
|
|
}
|
|
|
|
main{
|
|
width:100%;
|
|
min-height:calc(100vh - 60px - 26px);
|
|
|
|
overflow-x:hidden;
|
|
padding:20px 20px;
|
|
|
|
|
|
}
|
|
|
|
main>.content,#footnote{
|
|
min-height: calc(80vh - 200px);
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
background: var(--main-color);
|
|
margin-bottom: 10px;
|
|
|
|
padding: 10px 10px 10px 10px;
|
|
|
|
.titlebar {
|
|
margin: -10px -10px 0 -10px;
|
|
background: var(--main-bg-color);
|
|
color: var(--main-title-fg-color);
|
|
padding: 5px 5px 5px 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
main>.fit,#footnote{
|
|
min-height: fit-content;
|
|
}
|
|
|
|
footer{
|
|
height:fit-content;
|
|
background-color: var(--main-color);
|
|
color: var(--main-fg-color);
|
|
display:flex;
|
|
padding:0 10px;
|
|
align-items:center;
|
|
overflow-x:hidden;
|
|
position:fixed;
|
|
|
|
font-family: "FreePixel";
|
|
|
|
bottom:0;
|
|
width:100%
|
|
}
|
|
|
|
#footnote{
|
|
margin-bottom: 20px;
|
|
height: max-content;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
|
|
padding: 10px 10px 10px 10px;
|
|
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
|
|
background-color: var(--main-color);
|
|
}
|
|
|
|
#gif{
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
align-items: center;
|
|
scale: 100%;
|
|
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content:center;
|
|
gap:10px;
|
|
|
|
margin-bottom: 40px;
|
|
|
|
}
|
|
|
|
@font-face {
|
|
font-family: FreePixel;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url("../src/FreePixel.ttf");
|
|
}
|
|
|
|
|
|
@media (max-width: 576px) {
|
|
.nav::before,.nav::after{
|
|
content: "/";
|
|
}
|
|
|
|
.navSep {
|
|
scale: 0%;
|
|
}
|
|
|
|
.selected-nav{
|
|
text-decoration-color: var(--main-fg-color);
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
nav{
|
|
position: inherit;
|
|
width: fit-content;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: flex;
|
|
}
|
|
|
|
.nav{
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 576px){
|
|
nav{
|
|
width:140px;
|
|
padding:20px 0px 0 0;
|
|
position:absolute;
|
|
height:auto;
|
|
flex-direction:column;
|
|
}
|
|
|
|
.nav{
|
|
width:80%;
|
|
margin:0 0 20px 0;
|
|
|
|
background-color: var(--main-color);
|
|
|
|
color:var(--main-fg-color);
|
|
text-decoration-color:#d4d4d4;
|
|
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
|
|
border-color: #000000;
|
|
}
|
|
|
|
main{
|
|
width:calc(576px - 80px);
|
|
max-width:100vw;
|
|
min-height:calc(100vh - 26px);
|
|
margin-left:130px
|
|
}
|
|
|
|
.selected-nav {
|
|
border-style: ridge;
|
|
background-color: var(--main-bg-color);
|
|
color: var(--main-title-fg-color);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px){
|
|
body{
|
|
padding-left:calc((100vw - 768px - 200px)*.5)
|
|
}
|
|
|
|
main{
|
|
width:calc(768px - 80px * 2)
|
|
}
|
|
|
|
footer{
|
|
margin-left:calc((100vw - 768px - 200px)*-.5)
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px){
|
|
body{
|
|
padding-left:calc((100vw - 992px - 50px)*.5)
|
|
}
|
|
main{
|
|
width:calc(992px - 80px * 2)
|
|
}
|
|
footer{
|
|
margin-left:calc((100vw - 992px - 200px)*-.5)
|
|
}
|
|
}
|
|
|
|
div.button-container{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content:center;
|
|
gap:20px;
|
|
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
div.contact-text{
|
|
margin-left:calc(130px + 20px)
|
|
}
|
|
|
|
.license-img{
|
|
height:31px;
|
|
width:88px;
|
|
}
|
|
|
|
.smaltext{
|
|
font-size: xx-small;
|
|
text-align:center
|
|
}
|
|
|
|
.image-rounded{
|
|
border-radius:50%;
|
|
}
|
|
|
|
.text-center{
|
|
text-align:center;
|
|
display: block;
|
|
}
|
|
|
|
.margin-list{
|
|
li {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
dl dt{
|
|
float:left;
|
|
clear:left;
|
|
text-align:right;
|
|
width:130px;
|
|
font-weight:700
|
|
}
|
|
|
|
dl dd{
|
|
margin-left:calc(130px + 20px)
|
|
}
|
|
|
|
.inline-icon{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content:left;
|
|
gap:10px;
|
|
|
|
}
|
|
|
|
.section-header{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center
|
|
}
|
|
|
|
.post-footer{
|
|
display:flex;
|
|
justify-content:right;
|
|
align-items:center
|
|
}
|
|
|
|
.post-footer>p{
|
|
margin:0 5%
|
|
}
|
|
|
|
p.info{
|
|
font-size:.8rem;
|
|
margin-top:5px
|
|
}
|
|
|
|
span {
|
|
display: block ruby;
|
|
font-size: small;
|
|
}
|
|
|
|
.info {
|
|
background-color: red;
|
|
color: var(--main-bg-color);
|
|
}
|
|
|
|
p.info span{
|
|
display:block;
|
|
margin-right:20px;
|
|
}
|
|
|
|
p.info span i{
|
|
margin-right:.5em
|
|
}
|
|
|
|
@media (min-width: 768px){
|
|
p.info span{
|
|
display:inline
|
|
}
|
|
}
|
|
h1,h2,h3,h4,h5,h6{
|
|
margin:20px 0
|
|
}
|
|
|
|
h1+p.info,h2+p.info,h3+p.info,h4+p.info,h5+p.info,h6+p.info{
|
|
margin-top:-15px;
|
|
margin-bottom:20px
|
|
}
|
|
code,pre{
|
|
font-size:.875em;
|
|
font-family: "FreePixel";
|
|
font-feature-settings:"calt" 1;
|
|
font-variant-ligatures:normal;
|
|
border-color:var(--main-fg-color);
|
|
border-style:solid;
|
|
border-radius:3px;
|
|
background-color: var(--main-bg-end-color-color);
|
|
color: var(--main-fg-color);
|
|
}
|
|
|
|
code{
|
|
border-width:1px 0
|
|
}
|
|
|
|
pre{
|
|
border-width:1px;
|
|
overflow-x:auto;
|
|
padding:4px 2px
|
|
}
|
|
|
|
.nobr {
|
|
white-space: nowrap;
|
|
white-space-collapse: nowrap;
|
|
}
|
|
|
|
pre>code{
|
|
border-width:0
|
|
}
|
|
|
|
h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{
|
|
border-width:0
|
|
}
|
|
|
|
form{
|
|
margin:10px
|
|
}
|
|
|
|
.form-group{
|
|
padding:5px 0
|
|
}
|
|
|
|
.form-group>label{
|
|
display:block;
|
|
font-size:14px
|
|
}
|
|
|
|
.form-group>.error{
|
|
color:red;
|
|
font-size:14px
|
|
}
|
|
|
|
input{
|
|
width:100%;
|
|
padding-top:2px
|
|
}
|
|
|
|
.right-div{
|
|
width: fit-content;
|
|
text-align: left;
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
|
|
h2{
|
|
text-align: right;
|
|
}
|
|
a.right-div{
|
|
text-align: right;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.postlist {
|
|
margin-top: 20px;
|
|
|
|
a {
|
|
font-size: 15px;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 20px;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
.prefSpan{
|
|
display: block;
|
|
}
|
|
|
|
a {
|
|
color: #0066cc;
|
|
}
|
|
|
|
.buttonToggle {
|
|
width: fit-content;
|
|
}
|
|
|
|
.styleSelector {
|
|
float:right;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|