192 lines
3.0 KiB
CSS
192 lines
3.0 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
text-decoration: none;
|
|
appearance: none;
|
|
}
|
|
|
|
header {
|
|
position: fixed;
|
|
|
|
background-color: #201E1F;
|
|
|
|
width: 22vw;
|
|
height: 100vh;
|
|
|
|
top: 0;
|
|
|
|
-webkit-box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4),
|
|
17px 26px 15px 0px rgba(0, 0, 0, 0);
|
|
box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4),
|
|
17px 26px 15px 0px rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
header b {
|
|
font-weight: bold;
|
|
}
|
|
|
|
header a {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
header .menu-list {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.header-main {
|
|
margin: 0.666em;
|
|
border-radius: 3px 0.666em 0.666em 3px;
|
|
font-size: 1.802rem;
|
|
background: #a22430;
|
|
padding: 6px 12px;
|
|
width: 100%;
|
|
color: #f6f4f6;
|
|
-webkit-box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4),
|
|
17px 26px 15px 0px rgba(0, 0, 0, 0);
|
|
box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4),
|
|
17px 26px 15px 0px rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.header-main * {
|
|
color: #f6f4f6;
|
|
}
|
|
|
|
.header-main img {
|
|
height: 1em;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.menu-link {
|
|
color: #f6f4f6;
|
|
}
|
|
|
|
.menu-link:hover,
|
|
.menu-link:focus {
|
|
color: #c8bcc8;
|
|
transition: 500ms ease-in-out;
|
|
}
|
|
|
|
.menu-selected,
|
|
.menu-selected > a {
|
|
color: #fff;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.content-wrapper,
|
|
#template-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 22vw;
|
|
padding: 1.802rem 11vw;
|
|
margin-right: auto;
|
|
}
|
|
#template-wrapper:first-of-type {
|
|
padding-top: 1rem;
|
|
}
|
|
#template-wrapper:last-of-type {
|
|
padding-bottom: 1rem;
|
|
}
|
|
.template-unit {
|
|
padding-top: 1rem;
|
|
border-top: 2px solid #221e2233;
|
|
}
|
|
.template-unit h3 {
|
|
margin-top: 0 !important;
|
|
}
|
|
.template-unit:nth-of-type(n + 2) {
|
|
margin-top: 2rem !important;
|
|
}
|
|
.template-unit ul :last-child {
|
|
margin-bottom: unset;
|
|
}
|
|
.template-unit ul + p {
|
|
margin-top: 1rem;
|
|
}
|
|
.template-unit img {
|
|
display: block;
|
|
max-width: 800px;
|
|
max-height: 400px;
|
|
width: auto;
|
|
height: auto;
|
|
margin-top: 5px;
|
|
}
|
|
.allposts_header + ul :last-child {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.subtitle {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.content-wrapper h1,
|
|
.content-wrapper h2,
|
|
.content-wrapper h3,
|
|
.content-wrapper h4,
|
|
.content-wrapper h5,
|
|
.content-wrapper h6,
|
|
.content-wrapper label {
|
|
font-family: "open_sansbold";
|
|
font-weight: bold;
|
|
}
|
|
|
|
pre,
|
|
blockquote {
|
|
color: #666666;
|
|
margin: 0;
|
|
padding-left: 3em;
|
|
border-left: 0.5em #eee solid;
|
|
}
|
|
|
|
pre {
|
|
font-family: monospace;
|
|
margin-bottom: 1rem;
|
|
white-space: pre;
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
s:after {
|
|
font-size: 0.66em;
|
|
content: '\2713';
|
|
background: #3f3b3b;
|
|
padding: 0 4px;
|
|
border-radius: 3px;
|
|
margin-left: 4px;
|
|
color: limegreen;
|
|
}
|
|
|
|
footer {
|
|
padding: 1rem;
|
|
background-color: #201E1F;
|
|
color: #e9eaed;
|
|
margin-left: 22vw;
|
|
}
|
|
|
|
footer a {
|
|
font-family: "open_sansbold";
|
|
font-weight: bold;
|
|
color: #e9eaed;
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
header {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
background-color: #201E1F;
|
|
|
|
width: 100vw;
|
|
height: max-content;
|
|
padding-bottom: 1rem;
|
|
}
|
|
.header-main {
|
|
margin: 0;
|
|
}
|
|
.content-wrapper,
|
|
#template-wrapper {
|
|
margin-left: 0;
|
|
padding: 1rem 2rem;
|
|
}
|
|
footer {
|
|
margin-left: 0;
|
|
}
|
|
}
|