/** * CSS is how you can add style to your website, such as colors, fonts, and * positioning of your HTML content. Much of what's here is self-explanitory, * but I'll give context to some of the less well-known parameters/functions. */ /** * @import lets you break up your CSS into multiple files; I use it here to * seperate the reset settings from the rest of the styles and to import the comments styles. */ @import "/css/reset.css"; @import "/css/comments.css"; /* FONTS */ header, h1, h2, h3, h4, h5 { font-family: "IM Fell English", serif; font-weight: 400; font-style: normal; /** * Todo: Write why we use rem units and set them throughout the stylesheet * https://www.youtube.com/watch?v=N5wpD9Ov_To */ margin-bottom: 1rem; } p { font-family: "Lato", sans-serif; margin-bottom: .75rem; } /* This is to offset some weird height stuff with eleventy img */ img { height: auto; } /* GLOBAL */ /** * :root targets the root element of the document; in practice, it targets the * `` tag, just with a higher specificity than calling it directly. It's * most commonly used for defining custom variables, which you can see below! * (https://developer.mozilla.org/en-US/docs/Web/CSS/:root) */ :root { /** * Custom variables allow us to set repeating values in one place. In this * case, we're defining the maximum width of our pages. * (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) * * Also, check out the `min()` property: it picks whatever is the smallest of * the two given properties as the width! For more details on it and similar * properties, check out Kevin Powell's video: https://youtu.be/U9VF-4euyRo */ --pg-width: min(64rem, 90%); /* page width for double/spread pages that are one page */ --double-pg-width: min(84rem, 100%); /** * The following is variables that set colours for things on the site. * If you just want to swap some colours, likely this is all you have to touch. **/ /* universal background color */ --bg-color: #f1ece4; /* the colour of links */ --link-color: #222; /* link colours when hovered over */ --link-color-hover: #da5437; --text-color: #222; /** * I recommend not changing this, UNLESS you are getting rid of the paper tear effect * If you DON'T want the paper tear effect remove from PAPER TEAR BEGIN to PAPER TEAR END * Roughly lines 149-172 of this file, although that might move a bit as things get added. **/ --content-bg: #fff; } body { background-color: var(--bg-color); } /* link colors */ a { color: var(--link-color); } a:hover { color: var(--link-color-hover); } /* HEADER */ header { /** * For those unfamiliar with flexbox, check out this CSS Tricks article: * https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */ display: flex; flex-direction: column; align-items: center; width: var(--pg-width); margin: 2rem auto 0 auto; } header img { max-height: 180px; max-width: 100%; height: auto; width: auto; } header nav { font-size: 20px; width: 98%; margin-top: 1rem; text-align: center; border: solid #4f4f47; border-width: 1px 0; padding: 10px; } /* FOOTER */ footer { color: var(--text-color); margin-top: 2rem; margin-bottom: 1rem; display: flex; flex-direction: column; align-items: center; width: 100%; font-size: 12px; } footer p { margin: auto; } /* COMIC */ .comic h1 { text-align: center; margin: 1rem 0; } /* style comic page image */ #comicPage { margin: 3rem auto 0 auto; width: var(--pg-width); padding: 20px; } .double-page #comicPage { width: var(--double-pg-width); } #comicPage img { display: block; margin: 0 auto; max-width: 100%; max-height: 60vh; width: auto; height: auto; } /* Don't remove this bit though */ .paperDiv { background: var(--content-bg); position: relative; width: var(--pg-width); } /* PAPER TEAR BEGIN - start removing here if you don't want the paper effect */ .paperDiv::before, .paperDiv::after { content: ""; position: absolute; height: 20px; width: 100%; left: 0; background: url(/img/papertear.svg) bottom; background-size: var(--pg-width); } .paperDiv::before { transform: scaleY(-1); bottom: 100%; } .paperDiv::after { top: 100%; } /* PAPER TEAR END - stop removing here */ .stripMeta { text-align: center; font-size: 0.95rem; color: #4f4f47; margin: 2rem 0 0; } /* style nav button images */ .comicNav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; padding: 20px 0px; gap: 10px; } .comicNav img { width: 56px; } /* style author notes */ .authorNotes { margin: auto; width: var(--pg-width); font-size: 1.125rem; padding: 1% 3% 3%; } .authorNotes h1 { margin-bottom: 0; } .authorNotes-date { color: #4f4f47; font-size: 0.9rem; margin-top: -5px; margin-bottom: 1rem; } /* SUBPAGES */ .subPage { width: var(--pg-width); max-width: 98%; margin: 3rem auto 0; padding: 1rem 3rem 2rem; } /* character page */ .character, .chapter-container { /** * For those unfamiliar with grid, check out this CSS Tricks article: * https://css-tricks.com/snippets/css/complete-guide-grid/ * * This is also being applied to the archive layout */ display: grid; grid-template-columns: 20% 60%; gap: 1rem; margin: 1rem auto 2rem; } .character h2 { margin-bottom: 0; } .character h2 { margin-bottom: 0; } .character picture, .character img { width: 100%; max-width: 150px; } /* archive */ .archive-select { width: min(400px, 98%); } .chapter { display: flex; gap: 1rem; margin-bottom: 0.25rem; } .chapter h3 { margin: 0; font-family: "Lato", sans-serif; } .chapter-img { width: min(200px, 98%); } .chapter-container { grid-template-columns: 20% 60%; } /** * MOBILE STYLES * This basically says to apply these changes if the window screen is 700px or smaller * **/ @media screen and (max-width: 700px) { .subPage { padding: 1rem 1rem 2rem; } #comicPage { padding: 20px 0; } .character, .chapter-container { grid-template-columns: 100%; gap: 0rem; } :root { --pg-width: min(100%); } }