gnusocial.rocks/assets/css/blog.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;
}
}