Icons, colors, homepage design
This commit is contained in:
parent
072b28e618
commit
a01850cab0
GPG key ID:
0A26CD5B3345D6E3
6 changed files with 90 additions and 5 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -13,5 +13,5 @@
|
|||
|
||||
# NodeJS
|
||||
node_modules/
|
||||
public/
|
||||
public/assets/
|
||||
.parcel-cache/
|
||||
|
|
|
|||
19
assets/icon.less
Normal file
19
assets/icon.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
26
assets/theme.less
Normal file
26
assets/theme.less
Normal file
|
|
@ -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);
|
||||
}
|
||||
BIN
public/tabler.231017.woff2
Normal file
BIN
public/tabler.231017.woff2
Normal file
Binary file not shown.
|
|
@ -4,20 +4,24 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PrivacyHex</title>
|
||||
<link rel="stylesheet" href={{ GetAsset "theme.css" }}>
|
||||
<link rel="stylesheet" href={{ GetAsset "index.css" }}>
|
||||
<link rel="stylesheet" href={{ GetAsset "icon.css" }}>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="logo">
|
||||
<span class="logo-text">Privacy</span>
|
||||
<span class="logo-hex icon"></span>
|
||||
</div>
|
||||
<form action="/goto" method="get">
|
||||
<label>
|
||||
<input type="text" name="q" placeholder="Search query or URL">
|
||||
</label>
|
||||
<label>
|
||||
<input type="clear">
|
||||
<label class="input-clear">
|
||||
<input type="reset">
|
||||
</label>
|
||||
<label>
|
||||
<label class="input-submit">
|
||||
<input type="submit">
|
||||
</label>
|
||||
</form>
|
||||
|
|
|
|||
Reference in a new issue