vagabond/ttrpg-compendium
vagabond/ttrpg-compendium
1
0
Fork 0
Code Pull requests Activity Actions
ttrpg-compendium/assets/journal.css

111 lines
2.1 KiB
CSS
Raw Normal View History

Implement Journals 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.
2024-03-04 05:56:10 +00:00
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;
}
}
Copy permalink