@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+JP:wght@700&family=Lora&display=swap"); $break-small: 500px; $break-large: 840px; :root { --background: #fff; --text: #000; --accent: #4f33e8; --highlight: #f6f6f6; --tone: #989898; --dim: rgb(203, 203, 203); --link-text: #4f33e8; } @media (prefers-color-scheme: dark) { :root { --background: #231a37; --text: #d9d5e1; --accent: #7033e8; --highlight: #140d25; --tone: #989898; --dim: rgb(90, 83, 101); --link-text: #af93ff; } } html, body { box-sizing: border-box; } html { font-size: 100%; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; } body { width: 900px; margin: 0 auto; padding: 0 20px; background: var(--background); color: var(--text); @media screen and (max-width: $break-large) { width: auto; margin: 0; } } a { word-break: break-word; } a:hover, a:active, a:link, a:visited { color: var(--text); text-decoration: none; } h1, h2, h3, h4, p { margin: 0; padding: 0; line-height: 1.333em; } hr { display: block; width: 100%; height: 1px; background-color: var(--highlight); border: 0; margin: 40px 0; } // Header header.header { display: flex; flex-wrap: wrap; margin: 70px 0 70px; flex-direction: row; justify-content: center; align-items: center; @media screen and (max-width: $break-small) { margin-top: 30px; margin-bottom: 60px; } .logo { @media (prefers-color-scheme: dark) { filter: invert(1); } @media screen and (max-width: $break-small) { padding-left: 5px; } } .menu { display: flex; flex-direction: column; list-style: none; text-transform: lowercase; font-weight: bold; border-left: 1px solid var(--tone); padding: 0; margin: 0 0 0 30px; padding: 0 0 0 30px; .menu__item { margin: 2px 0; } } } // Pagination .page-nav { display: flex; justify-content: center; .page-prev, .page-number, .page-next { font-size: 1.2rem; padding: 20px; } } @import "./post";