*/ article { & .description { font-size: var(--tag-text-size); margin-top: 8px; text-align: center; } } /* MARK: */ body { background-color: var(--mono100); color: var(--mono0); font-family: var(--document-font); text-align: center; @media(prefers-color-scheme: dark) { background-color: var(--mono0); color: var(--mono100); } } /* MARK:

*/ blockquote { background-color: var(--orange); border-radius: var(--card-radius); color: var(--mono0); margin-bottom: var(--element-spacing); padding: 4px 8px; & a { color: var(--dark-pink); } & p { color: inherit; font-style: inherit; margin-bottom: 0; & strong { font-weight: bolder; } } } /* MARK: */ code { background-color: var(--mono0); color: var(--mono100); border-radius: var(--card-radius); font-style: normal; padding: 0.25em; @media(prefers-color-scheme: dark) { background-color: var(--pure-black); } ::selection { color: var(--mono100); @media (prefers-color-scheme: dark) { color: var(--mono0); } } } /* MARK: */ div { font-family: var(--secondary-font); } /* MARK: */ footer { background-color: var(--light-green); padding-top: 16px; padding-bottom: 16px; & p { color: var(--mono0); font-family: var(--monospace-font); font-size: 1em; } } /* MARK: */ h1, h2, h3, h4, h5, h6 { font-family: var(--primary-font); } h1 { border-radius: 20px; font-size: 4em; margin-bottom: calc(var(--element-spacing) * 2); text-align: center; } h2 { background-color: var(--light-pink); border-radius: var(--card-radius); margin: calc(var(--element-spacing) * 1.5) 0; padding: 0.5em; } h3 { margin: var(--element-spacing) 0; padding: 0.5em 0; } h4 { margin: calc(var(--element-spacing) * 0.75) 0; } h5 { margin: calc(var(--element-spacing) * 0.5) 0; } h6 { margin: calc(var(--element-spacing) * 0.25) 0; } /* MARK: */ header { background-color: var(--dark-yellow); & a { text-decoration: none; } & p { color: var(--mono0); } & .description { font-size: var(--reading-text-size); font-weight: bold; margin: 0 auto 8px; } & .site-name { color: var(--mono0); font-family: var(--primary-font); font-size: 2em; font-weight: bold; } & .wip { text-align: center; } & .wrapper { padding-bottom: 30px; padding-top: 30px; } } /* MARK: */ nav { --nav-primary: var(--light-blue); --nav-secondary: var(--dark-blue); --nav-text: var(--mono100); margin-top: 20px; @media(prefers-color-scheme: dark) { --nav-primary: var(--dark-blue); --nav-secondary: var(--light-blue); --nav-text: var(--mono100); } & li { background-color: var(--nav-primary); border-radius: 8px; display: inline-block; line-height: var(--tag-text-size); margin: 4px 7px; padding: 0 4px; &.selected { background-color: var(--nav-secondary); padding: 4px 10px; margin: 0 4px; & a { color: var(--nav-text); font-weight: bolder; } } &:hover { background-color: var(--nav-secondary); & a { color: var(--nav-text); } } & a { color: var(--nav-secondary); font-family: var(--primary-font); } } } /* MARK: */ p { color: var(--mono0); font-family: var(--secondary-font); font-size: var(--reading-text-size); margin-bottom: 10px; @media(prefers-color-scheme: dark) { color: var(--mono100) } } /* MARK: */ li { font-size: var(--reading-text-size); margin-left: 24px; text-decoration: none; & li { font-size: 1em; } } /* MARK: , */ ol, ul { margin-bottom: var(--element-spacing); &.post { --item-bg: var(--light-blue); @media(prefers-color-scheme: dark) { --item-bg: var(--dark-blue); } h1 { margin-bottom: 8px; font-size: 1.5em; text-align: left; } p { margin-bottom: 0; } .tag-list { display: inline-block; } & > li { display: block; padding: 20px; border-radius: 20px; background-color: var(--item-bg); margin-bottom: 20px; &:last-child { margin-bottom: 0; } & .description { font-size: var(--reading-text-size); } } } &.tag { margin-bottom: 10px; } } /* MARK: */ time { font-family: var(--monospace-font); &:before { content: "📅 "; } } /* MARK: .card */ .card { background: linear-gradient(to bottom,var(--light-blue),var(--dark-blue)); } /* MARK: .content */ .content { margin-bottom: 40px; > li { margin-left: 32px; } } /* MARK: .description */ .description { font-family: var(--secondary-font); font-style: italic; margin-top: 4px; } /* MARK: .post */ .post { font-family: var(--secondary-font); } /* MARK: .tag */ .tag { display: inline-block; background-color: var(--light-yellow); color: var(--dark-blue); padding: 4px 6px; border-radius: 8px; margin-right: 5px; margin-bottom: 5px; & a { text-decoration: none; } } /* MARK: .tag-browser */ /* MARK: .wip */ .wip { font-family: var(--monospace-font); &::before { prefix: "🚧 "; } } /* MARK: .wrapper */ .wrapper { max-width: 900px; margin-left: auto; margin-right: auto; padding: 40px; text-align: left; @media(max-width: 600px) { padding: 40px 20px; } }