/** * 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. */ @import "/css/reset.css"; @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap'); /* FONTS */ header, h1, h2, h3, h4, h5 { font-family: "Cherry Cream Soda", cursive; /** * 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: "Open Sans", sans-serif; margin-bottom: .75rem; } /* 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(48rem, 90%); } /* universal background color */ body { background-color: #a6a6a6; } /* link colors */ a { color: #000000; } a:hover { color: #da5437; } /* HEADER */ header { font-family: "Silkscreen", sans-serif; /** * 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; } header img { width: 500px; max-width: 98%; } header nav { background-color: #ffffff; outline: 3px solid #000000; font-size: 20px; width: 98%; margin: auto; text-align: center; } /* FOOTER */ footer { color: #421a1a; 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 { margin-bottom: 2rem; } .comic h1 { text-align: center; margin: 1rem 0; } /* style comic page image: span the authorNotes content area */ #comicPage { margin: 0; /* compensate for the parent `.authorNotes` left/right padding (3px) so the comic content touches the inner edges */ width: calc(100% + 6px); margin-left: -3px; margin-right: -3px; box-sizing: border-box; } /* make images fill the comic area (touch left/right) */ #comicPage img { display: block; width: 100%; height: auto; margin-bottom: 1rem; } /* center headings inside the comic area with horizontal padding */ #comicPage h1 { text-align: center; padding-inline: 1rem; box-sizing: border-box; margin: 0.5rem 0; } /* style the text/comment block inside the comic area */ #textcomment { padding-inline: 1rem; text-align: center; margin: 0.75rem auto; box-sizing: border-box; max-width: 100%; } #textcomment p { font-family: "Courier Prime", monospace; font-weight: 550; font-style: normal; } /* style nav button images */ .comicNav { font-family: "Silkscreen", sans-serif; text-decoration: none; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; padding: 10px 0px; gap: 10px; } .comicNav img { width: 90px; } /* style author notes */ .authorNotes { background-color: #ffffff; outline: 3px solid #000000; margin: auto; padding: 3px; padding-top: 0px; width: var(--pg-width); font-size: 1.125rem; } .authorNotes h1, h6{ font-family: "Silkscreen", sans-serif; /** * Todo: Write why we use rem units and set them throughout the stylesheet * https://www.youtube.com/watch?v=N5wpD9Ov_To */ margin-bottom: 1rem; text-align: center; } .ramblings h1{ font-family: "Silkscreen", sans-serif; /** * Todo: Write why we use rem units and set them throughout the stylesheet * https://www.youtube.com/watch?v=N5wpD9Ov_To */ margin-top: 1rem; margin-bottom: 1rem; text-align: center; } .authorNotes h1 { font-size: 1.6rem; } #textcomment h2 { font-family: "Courier Prime", monospace; font-size: 2rem; font-weight: 700; } #textcomment a:visited { color: #f82cc5; } #textcomment a:link { color: #f82cc5; } #textcomment a:hover { color: #f158ff; } #remark42 { width: var(--pg-width); margin: 1rem auto; background-color: #ffffff; outline: 3px solid #000000; } /* SUBPAGES */ .subPage { width: var(--pg-width); max-width: 98%; background-color: #ffffff; outline: 3px solid #000000; margin: 1rem auto 0; padding: 0px 12px 12px; } .subPage:not(.archivePage) { text-align: center; } /* archive */ .chapter { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.25rem; } .chapter img { height: 4rem; } .chapter h3 { margin: 0; font-family: "Open Sans", sans-serif; font-weight: 700; } /* character page */ .characters { /** * For those unfamiliar with grid, check out this CSS Tricks article: * https://css-tricks.com/snippets/css/complete-guide-grid/ */ display: grid; grid-template-columns: 1fr 3fr; gap: 1rem; } .characters div { display: flex; flex-direction: column; align-items: center; justify-content: center; } .characters img { width: 100%; } /* message box */ ol, ul { width: max(24rem, 60%); margin-inline: auto; } li { font-family: "Open Sans", sans-serif; margin-bottom: .25rem; text-align: left; }