diff options
Diffstat (limited to 'site/themes/hugo-starter/static/css/style.css')
| -rw-r--r-- | site/themes/hugo-starter/static/css/style.css | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/site/themes/hugo-starter/static/css/style.css b/site/themes/hugo-starter/static/css/style.css new file mode 100644 index 0000000..f88f30b --- /dev/null +++ b/site/themes/hugo-starter/static/css/style.css @@ -0,0 +1,179 @@ +/* COLORS */ +@import url('themes/oxocarbon-light.css'); +@import url('themes/oxocarbon-dark.css'); + +#toggleTheme { + font-family: "kirsch"; + font-size: 2rem; + color: var(--fg); + border: none; + background: none; + cursor: pointer; + position: relative; + top: 2px; + margin: -4px; +} + +/* FONT */ + +@font-face { + font-family: "kirsch"; + src: + local("kirsch"), + url("https://cdn.jsdelivr.net/npm/kirsch@latest/out/kirsch.woff2") format("woff2"), + url("https://cdn.jsdelivr.net/npm/kirsch@latest/out/kirsch.ttf") format("truetype"); + font-display: block; +} + +/* LAYOUT */ + +body { + color: var(--fg); + background-color: transparent; + font-size: 175%; + line-height: 1.2; + max-width: 45rem; + padding: 1rem; + margin: 0 auto; + font-family: "kirsch"; + font-display: block; +} + +#main { + margin: 2% auto; + display: flex; + flex-direction: column; + justify-content: center; +} + +#content { + border-style: solid; + border-color: var(--fg); + background-color: var(--bg); + + padding: 3% 5%; + overflow: auto; +} + +/* NAVIGATION */ + +.navbar { + background-color: var(--bg); + border-style: dashed; + border-color: var(--fg); + + font-size: 110%; + + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 10px 20px; + box-sizing: border-box; + + margin-bottom: 2%; +} + +.logo { + flex-shrink: 0; + /* margin: 0 0%; */ +} + +.nav-links { + list-style-type: none; + display: flex; + gap: 20px; + flex-shrink: 0; + /* overflow-x: auto; */ + overflow: visible; + margin: 0; + padding: 0; +} + +.navbar a { + display: inline-block; + white-space: nowrap; + flex-shrink: 0; + + color: var(--fg); + font-weight: bold; + text-decoration: none; +} + +@media (max-width: 768px) { + .nav-links { + gap: 10px; + } +} + +@media (max-width: 480px) { + .nav-links a { + font-size: 14px; + } +} +.main-menu { + display: flex; + list-style: none; + margin: 0; + padding: 0; +} + +@media screen and (max-width: 48rem) { + .site-nav, + .main-menu { + flex-direction: column; + } + + .site-nav a { + padding: 0.5rem; + padding-left: 0; + } +} + +/* Canvas Background */ +#background { + position: fixed; + inset: 0; /* stretch full screen */ + z-index: -1; /* behind content */ + pointer-events: none; /* don’t block clicks */ + display: block; /* remove inline-gap issues */ + + background-color: var(--bg); +} + +/* SINGLES */ +#content * { + margin: 14px 0; +} + +#content h1 { + margin: 0; + text-align: center; +} + +#content ul { + list-style-type: square; +} + +#content li { + margin: 0; +} + +#content a { + color: var(--base0B); +} + +#content a:visited { + color: var(--base0E); +} + +#content footer { + margin-bottom: 0; + text-align: center; +} + +#content footer p { + margin-bottom: 0; +} |
