diff --git a/.gitignore b/.gitignore index 5f4bf13..92d5376 100644 --- a/.gitignore +++ b/.gitignore @@ -13,5 +13,5 @@ # NodeJS node_modules/ -public/ +public/assets/ .parcel-cache/ diff --git a/assets/icon.less b/assets/icon.less new file mode 100644 index 0000000..c0d1cab --- /dev/null +++ b/assets/icon.less @@ -0,0 +1,19 @@ +@font-face { + font-family: "tabler-icons"; + font-style: normal; + font-weight: 400; + src: url('/public/tabler.231017.woff2') format('woff2'); +} + +.icon { + font-family: "tabler-icons"; + font-style: normal; + font-weight: 400; + font-variant: normal; + text-transform: none; + text-decoration: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + speak: none; +} diff --git a/assets/index.less b/assets/index.less index 208d16d..401a5d6 100644 --- a/assets/index.less +++ b/assets/index.less @@ -1 +1,37 @@ -body {} +body { + margin: 0; + padding: 0; + height: 100vh; + background: var(--gradient); +} + +main { + height: 100%; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + gap: 0.5rem; +} + +.logo { + @size: 4rem; + + display: flex; + flex-direction: row; + align-items: center; + + .logo-text { + font-size: @size; + font-weight: 400; + font-family: "Ubuntu"; + text-transform: uppercase; + } + + .logo-hex { + font-size: @size; + user-select: none; + } +} diff --git a/assets/theme.less b/assets/theme.less new file mode 100644 index 0000000..704955f --- /dev/null +++ b/assets/theme.less @@ -0,0 +1,26 @@ +.theme-mixin(@light: bool) { + @bg: if(@light, #e8e8ff, #181822); + @fg: if(@light, #111111, #eeeeee); + @mult: if(@light, 0.75, 2.75); + + --bg: @bg; + --fg: @fg; + --color1: hsl(hue(@bg), saturation(@bg) * @mult, lightness(@bg) * @mult); + --color2: hsl(hue(@bg) + 40, saturation(@bg) * @mult, lightness(@bg) * @mult); + --gradient: linear-gradient(135deg, var(--color1) 0%, var(--bg) 25%, var(--bg) 75%, var(--color2) 100%); +} + +body { + .theme-mixin(true); + + @media (prefers-color-scheme: dark) { + .theme-mixin(false); + } + + &.dark { + .theme-mixin(false); + } + + background: var(--bg); + color: var(--fg); +} diff --git a/public/tabler.231017.woff2 b/public/tabler.231017.woff2 new file mode 100644 index 0000000..13bb274 Binary files /dev/null and b/public/tabler.231017.woff2 differ diff --git a/views/index.html b/views/index.html index 5a8c95b..f02dc4f 100644 --- a/views/index.html +++ b/views/index.html @@ -4,20 +4,24 @@ PrivacyHex + + +
-