Bill Niblock
4dbf2aeb3e
Some checks failed
/ jekyll (push) Failing after 11s
Jekyll will follow directory structures, using it as the URL path when building a site. This significant change adds configuration, styles, and layouts for journals. Journals will be stored in the `/journals` directory, and then within a directory for the character. For each character's journals, configuration must be established in the `_config.yml` file. Each character journal directory then can be treated similar to a Jekyll project: the `_posts` directory can be leveraged for posts. The base character journal directory has an index page, which by default shows a small top section, then the most recent post. Since these character journals don't adhere to the actual calendar, permalinks have been reduced to the post title alone. Note: this means every post in the character journal must be named different. Not certain if every post on the site must be named different. There are a number of steps still left: - Build site index page. Include cards for each character that has a journal, for each adventure, and for any additional miscellaneous things captured on the site. - Implement the adventure section, similar to journals. Any configured adventures will exist in the `/adventures` directory, and then within a specific directory. - Actually write stuff.
110 lines
2.1 KiB
CSS
110 lines
2.1 KiB
CSS
html {
|
|
background-color: black;
|
|
}
|
|
|
|
/* Layout */
|
|
body {
|
|
display: flex;
|
|
margin: 0 auto; max-width: 1620px;
|
|
background-color: antiquewhite;
|
|
}
|
|
.menu-toggle {
|
|
display: none;
|
|
}
|
|
menu {
|
|
height: 100vh; width: 20%; max-width: 350px; min-width: 250px;
|
|
position: sticky; top: 0; left: 0;
|
|
padding: 0; margin: 0; z-index:5;
|
|
outline:none;
|
|
background-color: antiquewhite;
|
|
overflow-y: scroll;
|
|
}
|
|
menu .meta_buttons {
|
|
margin: 0; padding: 0 10%;
|
|
}
|
|
menu figure {
|
|
margin: 2vh 0 0 0; padding: 0 10%;
|
|
}
|
|
figure img {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
menu nav {
|
|
margin: 0 0 2vh 0; padding: 0 10%;
|
|
}
|
|
menu nav ul {
|
|
list-style: none;
|
|
}
|
|
main {
|
|
position:relative;
|
|
height:100vh; width: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
main article {
|
|
margin: 3vh auto; padding: 0; max-width: 90%;
|
|
}
|
|
.main-filter {
|
|
display: none;
|
|
}
|
|
/* Typography */
|
|
html {
|
|
font-family: sans-serif;
|
|
}
|
|
a,a:visited,a:link,a:focus {
|
|
text-decoration: none;
|
|
color: purple;
|
|
transition: color 0.5s;
|
|
}
|
|
a:hover {
|
|
color: darkorchid;
|
|
transition: color 0.5s;
|
|
text-decoration: underline;
|
|
}
|
|
figcaption {
|
|
font-size: 1.5rem;
|
|
}
|
|
article h1 {}
|
|
article h2 {}
|
|
article h3 {}
|
|
article h4 {}
|
|
article h5 {}
|
|
|
|
/* Responsive */
|
|
@media only screen and (max-width: 900px) {
|
|
body {
|
|
overflow-y: hidden;
|
|
}
|
|
.menu-toggle {
|
|
display: block;
|
|
position: fixed;
|
|
bottom: 3vh; right: 1vw;
|
|
height: 3vh; padding: 0 1vw;
|
|
z-index: 10;
|
|
background-color: black; color: white;
|
|
text-align: center;
|
|
|
|
&:focus + menu,&:active + menu,&:target + menu {
|
|
top: 10vh;
|
|
transition: top 0.7s ease-in-out;
|
|
}
|
|
&:focus ~ .main-filter,&:active ~ .main-filter,&:target ~ .main-filter {
|
|
display: block;
|
|
transition: display 0.3s ease-in-out;
|
|
}
|
|
}
|
|
menu {
|
|
height: 90vh; width: 100vw; max-width: 100%; min-width: 100%;
|
|
position: absolute; top: 100vh; left: 0; right: 0;
|
|
padding: 0; margin: 0; z-index:5;
|
|
outline:none;
|
|
background-color: antiquewhite;
|
|
overflow-y: scroll;
|
|
transition: top 1s ease-in-out;
|
|
}
|
|
.main-filter {
|
|
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
|
background-color: black;
|
|
opacity: 0.5;
|
|
transition: display;
|
|
}
|
|
}
|