diff --git a/assets/_animations.scss b/assets/_animations.scss new file mode 100644 index 0000000..64da9a2 --- /dev/null +++ b/assets/_animations.scss @@ -0,0 +1,9 @@ +@keyframes rainbow { + 0% { color: #ff0000; } + 16.66% { color: #ff8000; } + 33.33% { color: #ffff00; } + 50% { color: #00ff00; } + 66.66% { color: #0000ff; } + 83.33% { color: #8000ff; } + 100% { color: #ff0000; } +} diff --git a/assets/_breakpoints.scss b/assets/_breakpoints.scss new file mode 100644 index 0000000..df72db0 --- /dev/null +++ b/assets/_breakpoints.scss @@ -0,0 +1,2 @@ +$large: 1000px; +$small: 800px; diff --git a/assets/_colors.scss b/assets/_colors.scss new file mode 100644 index 0000000..bf0558c --- /dev/null +++ b/assets/_colors.scss @@ -0,0 +1,4 @@ +$color-background: #10161c; +$color-burger: #ddd; +$color-link: #fb923c; +$color-text: #c0cfe0; diff --git a/assets/style.css b/assets/style.css deleted file mode 100644 index 0a565b2..0000000 --- a/assets/style.css +++ /dev/null @@ -1,32 +0,0 @@ -h1 { - width: 100%; - text-align: center; - font-size: 96px; - line-height: 1; - margin: calc(50vh - 48px) 0 calc(50vh - 48px) 0; - color: #ff0000; - animation: rainbow 3s linear 0s infinite; -} - -footer { - text-align: center; -} - -a, a:link, a:visited { - color: #444; - text-decoration: none; -} - -a:hover { - color: #888; -} - -@keyframes rainbow { - 0% { color: #ff0000; } - 16.66% { color: #ff8000; } - 33.33% { color: #ffff00; } - 50% { color: #00ff00; } - 66.66% { color: #0000ff; } - 83.33% { color: #8000ff; } - 100% { color: #ff0000; } -} diff --git a/assets/style.scss b/assets/style.scss new file mode 100644 index 0000000..c3e2b2d --- /dev/null +++ b/assets/style.scss @@ -0,0 +1,133 @@ +@import 'animations'; +@import 'breakpoints'; +@import 'colors'; + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + background: $color-background; + color: $color-text; + display: flex; + flex-direction: column; + font-family: "Noto Sans", sans-serif; + margin: 0 auto; + max-width: $large; + min-height: 100vh; + + & > main { + flex-grow: 1; + } +} + +header { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-top: 1rem; + padding: 0 1rem; + + & > .header-title { + font-weight: bold; + } + + & > .nav-burger { + margin-right: 0.5rem; + } +} + +main { + padding: 1rem; +} + +nav { + display: flex; + flex-direction: column; + + &.nav-toggleable { + flex-basis: 100%; + max-height: 0; + overflow-y: hidden; + transition: max-height 0.5s; + + .nav-toggle:checked ~ & { + max-height: calc(var(--num-elements) * 2em); + } + } + + a, span { + line-height: 1.5em; + margin: 0.5em 0 0 0; + } + + @media screen and (min-width: $small) { + flex-direction: row; + + &.nav-toggleable { + flex-basis: auto; + max-height: max-content; + } + + a, span { + margin: 0 0 0 1.2em; + } + } +} + +a { + color: $color-link; + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + +.hello-world { + animation: rainbow 3s linear 0s infinite; + font-family: "Noto Sans Mono", monospace; + font-size: 96px; + line-height: 1.15; + text-align: center; +} + +.nav-burger { + cursor: pointer; + display: flex; + flex-direction: column; + height: 1rem; + justify-content: space-between; + width: 1.2rem; + + div { + background: $color-burger; + height: 2px; + transition: background 0.5s, transform 0.5s; + } + + .nav-toggle:checked ~ & div { + background: transparent; + + &:first-child { + background: $color-burger; + transform: translateY(0.5rem) translateY(-1px) rotate(45deg) scaleX(141%); + } + + &:last-child { + background: $color-burger; + transform: translateY(-0.5rem) translateY(1px) rotate(-45deg) scaleX(141%); + } + } + + @media screen and (min-width: $small) { + display: none; + } +} + +.nav-toggle { + display: none; +} diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..70c188f --- /dev/null +++ b/content/_index.md @@ -0,0 +1,3 @@ +--- +title: '' +--- diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index d15a02c..8d04934 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,17 +1,31 @@ - +
-