- articles are entire things that can be distributed separately. With assistance from Every Layout and smol.css */ /* TEMPLATE This is the expected document structure:

*/ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } html { font-size: calc(15px + 0.390625vw); } body { text-rendering: optimizeSpeed; overflow-x: hidden; display: flex; justify-content: center; margin: 0; } main { display: grid; place-content: center; padding-top: 3rem; padding-bottom: 3rem } main > article:first-of-type { margin-bottom:100vh } /* gaps between each blog post, but NOT at the beginning or end of the blog column - that is set by the main{padding} if you want these to be different. */ main > * + * { margin-block-start:3rem; display: flex; flex-direction:column; justify-content: flex-start; } /* style every box inside the main column*/ main > * { max-width: 55ch; /*for more of a blog, try 70ch */ padding: 1.5rem clamp(0.5rem, calc(15px + 1.56vw), 3rem); box-sizing: content-box; margin-left: 3vw; margin-right: 3vw; } /* main >* options: - we are combining Every Layout's solution woth smolcss . it's unclear if this is redundant - the original vw was 1.5625vw, but narrower is what tumblr does - clamp(A,B,C) - A = minimum possible padding C = maximum possible padding B = aim for this padding - margin-left and margin-right are there to stop the boxes touching the sides of the screen when you shrink the window */ /* inside an article, put space BETWEEN sections - but not at the start and end of the sections */ section + section { margin-block-start:1.5rem; display: flex; flex-direction:column; justify-content: flex-start; } /* set space at the beginning and end of the group of sections. */ section:first-of-type { margin-block-start: 0.5rem; margin-left: 1.5rem; margin-right: 1.5rem; } section:last-of-type { margin-block-end: 1.5rem; } /* ? p { width:inherit; }*/ /* ADD STYLES BELOW THIS POINT */ /* Some arbitrary styling to show the layout off: */ /* main > * { background-color: #fff; border: 2px solid #000; } */ body { font-family: "Crimson Pro", serif; text-align: center; background-image: url(https://fencraft.leprd.space/lychee/public/uploads/medium/cef43a797fd4fed890c469a48d232786.jpg); background-size: cover; background-attachment: fixed; background-position:center; } /* apparently bg the wrong size on my phone due to the disappearing URL bar*/ /* LAYOUT */ /* TIMELINE AND POSTS */ main > *, aside { background-color: #fff; border: 2px solid #000; display: flex; flex-direction: column; justify-content: center; } /* QUOTES */ blockquote::after { content: ""; display: block; margin: 0 auto; width: 50%; padding-top:1em; border-bottom: 5px double black; } /* use the * + * owl for between sections, maybe?*/ /* TEXT STYLES */ h1 { font-size: 2rem; letter-spacing:4px; font-weight:600; } h2 { font-weight:500; } h3 { font-family: 'Benne', serif; } h4 { font-size: 1.2rem; } blockquote { font-size: 1rem; font-style: italic; margin: 0.2rem } a { color:var(--accent-color); } summary { color: var(--accent-color); padding: 3px; border-bottom: var(--accent-color) dotted 3px; width: fit-content; margin-left: auto; margin-right: auto; cursor: pointer; } /* Nice paragraphs in articles */ /*article Ps are now used elsewhere */ /* article p:first-of-type:first-letter { float: left; font: 700 3em/0.65 'Uncial Antiqua', serif; padding: 0.15em 0.15em 0 0; text-transform: uppercase; color:#c70039; }*/ /* article p{ text-indent:2em; line-height:1.5; text-align:left; }*/ article p:first-of-type { text-indent: 0; } /* Nice lists */ /* old lists - looked bad on changelog ul { margin: 2em 0 2em 0; } li { text-align: left; You can change this, but centered lists can look kind of weird. margin: 0.25em 2em 0 2em; text-indent:1em; } */ /* looks good on changelog: */ ul { margin: 2em; } li { line-height: 1.5; text-align: left; padding-bottom: 0.5em } ::marker { content: '⬩ '; font-size: 1.2em; } /* Nice quotes */ q { font-style:italic; } q::before { content:'‘'; } q::after { content:'’'; } /* FROM FEN IN FIVE */ #in-five ul li { text-align: center; padding-bottom: 2em; line-height: 1.5; } #in-five ul li::after { content: ''; } #in-five ul { padding: 0; margin: 0; } #in-five ::marker { content: ''; font-size: 1.2em; } section + section{ content: ""; display: block; margin: 0 auto; width: 80%; padding-top: 1em; padding-bottom: 1em; border-top: 5px double black; } dd { margin-bottom: 0.8em; } /* ===== Scrollbar CSS ===== */ /* Firefox */ * { scrollbar-width: auto; scrollbar-color: #baaad2 #4e4e71; } /* Chrome, Edge, and Safari */ *::-webkit-scrollbar { width: 16px; } *::-webkit-scrollbar-track { background: #4e4e71; } *::-webkit-scrollbar-thumb { background-color: #baaad2; border-radius: 10px; border: 3px solid #ffffff; } /* https://codepen.io/101Computing/pen/PbjXoP */ @-webkit-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } .page { animation-name: fade; animation-duration: 10s; animation-fill-mode: forwards; }