The UI component of the AiteStory project.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

216 lines
2.8 KiB

body {
padding: 0;
margin: 0;
font-size: 1.25em;
}
#content-wrapper {
position: absolute;
left: 0;
top: 0;
right: 0;
min-height: 100%;
}
/* Main Body */
main {
position: absolute;
top: 0;
left: 18ch;
right: 0;
min-height: 100%;
padding: 0;
margin: 0;
}
/* Page Body */
article {
text-align: left;
padding: 1ch 1em;
font-size: 1em;
line-height: 1.25em;
width: 75ch;
max-width: 95%;
min-height: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
article.narrow {
width: 50ch;
}
article h1 {
text-align: center;
margin-top: 1em;
margin-bottom: 0.5em;
font-size: 1.75em;
}
article h2 {
margin-top: 1em;
margin-bottom: 0;
}
article h2:nth-child(1), article h2:first-child {
margin-top: 0;
}
article h3, article h4, article h5, article h6 {
margin-top: 0.25em;
margin-bottom: 0;
}
article blockquote {
margin: 0;
padding: 0.5em 1ch;
border: 0.5px solid;
margin-bottom: 1em;
}
article blockquote p:last-of-type {
margin-bottom: 0;
}
article p {
margin-top: 0;
}
/* Front Page */
.page-list {
width: 100%;
border-spacing: 0px;
margin-top: 0.75em;
}
.page-list .spacer {
background: none;
outline: none;
}
.page-list .spacer td {
height: 0.5em;
}
.pl-icon {
text-align: center;
font-size: 2em;
width: 1.5ch;
padding: 0 0.5ch;
outline: 0.5px solid;
}
.pl-content {
padding: 0.25em 0.5em;
padding-top: 0.5em;
text-align: left;
}
.plc-meta {
padding: 0;
margin: 0;
font-size: 0.75em;
}
.plc-meta div {
display: inline-block;
margin-right: 1ch;
}
/* Side Menu */
nav {
position: fixed;
left: 0;
top: 0;
width: 18ch;
height: 100%;
padding: 0;
margin: 0;
overflow-y: auto;
}
nav h1 {
text-align: center;
}
nav a {
display: block;
cursor: pointer;
}
nav ul {
display: block;
padding: 0;
margin: 0;
margin-bottom: 0.5em;
}
nav li {
list-style: none;
padding: 0.1em;
padding-left: 1ch;
font-size: 0.9em;
}
nav .mg-icon {
display: inline-block;
text-align: center;
width: 1ch;
padding: 0em 0.5ch;
}
nav .mg-label {
display: inline-block;
padding: 0 0.5ch;
}
nav .page-property {
text-align: center;
margin-bottom: 1em;
}
/* Mobile weirdness with rgba */
@media screen and (max-width: 900px) {
nav, main {
position: static;
display: block;
margin: auto;
border: none;
width: 100%;
}
nav h1 {
display: none;
}
nav ul {
width: 20ch;
max-width: 95%;
margin: 0.5em auto;
}
main {
min-height: 100%;
position: static;
}
article {
min-height: 100%;
position: static;
}
article h1 {
font-size: 1.333em;
}
}