:root { --bg: rgb(16, 16, 16); --fg: #CCCCCC; --blue: rgb(110, 194, 240); //--title: #ffe2e7; --title: rgb(240, 240, 240); } @font-face { font-family: "wrong font"; src: url("https://files.pad.ma/ttf/wrongfont.woff") format("woff"); } i { font-style: italic; } header, footer { max-width: 1000px; padding-top: 16px; margin: auto; } header { width: 100%; a { color: yellow; text-decoration: none; font-family: "wrong font"; font-size: 24px; letter-spacing: 1px; } display: flex; div { margin-top: auto; margin-bottom: auto; line-height: 1; } .burger { cursor: pointer; padding-right: 4px; @media(max-width:768px) { padding-left: 4px; } svg { width: 16px; height: 16px; } } } .index { .item { border-bottom: 1px solid blueviolet; padding-bottom: 4px; margin-bottom: 8px; a { text-decoration: none; color: var(--fg); h1 { color: var(--title); text-decoration: underline; font-size: 16px; } h2 { //border-bottom: 1px solid pink; font-size: 18px; font-weight: bold; } } h1 { margin: 0; padding: 0; } h1, .info, .comments { } .image { padding-top: 4px; width: 100%; img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } } .content { max-width: 1000px; margin: auto; } } .archive { text-align: center; padding-bottom: 32px; } &.archive { h2.week { text-align: center; padding-top: 16px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid blueviolet; } .item > a { display: flex; flex-direction: row-reverse; gap: 16px; .image, .info { width: 50%; } } .item { h2 { font-size: 16px; font-weight: initial; border-bottom: none; } .comments { text-align: right; padding-right: 4px; margin-top: -4px; padding-bottom: 4px; } } } } @media(max-width:768px) { .index { .item { a { h1, h2 { padding-left: 4px; padding-right: 4px; } } } } } nav.overlay { position: absolute; width: 100%; height: 100vh; top: 0; left: 0; right: 0; padding: 0; border: 0; max-width: 1000px; margin: auto; background: rgb(16, 16, 16); opacity: 0; z-index: 100; display: none; &.active { display: flex; flex-direction: column; opacity: 0.9; } .about { padding: 4px; padding-top: 8px; padding-bottom: 8px; flex-grow: 1; //white-space: pre-line; } .user { padding: 4px; padding-bottom: 8px; } } .now { background: lightyellow; color: black; padding: 8px; opacity: 0.8; } .login, .register { margin-top: 16px; margin-left: 24px; textarea, input { padding: 4px; margin-left: 0; margin-top: 4px; margin-bottom: 4px; margin-right: 4px; background: none; color: white; border: 1px solid green; } button { margin-top: 4px; background: black; color: white; border: solid 1px green; padding: 8px; } button:hover, button:active { border: solid 1px lightgreen; cursor: pointer; } }