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
|
# NodeJS
|
||||||
node_modules/
|
node_modules/
|
||||||
public/
|
public/assets/
|
||||||
.parcel-cache/
|
.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 charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>PrivacyHex</title>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<span class="logo-text">Privacy</span>
|
<span class="logo-text">Privacy</span>
|
||||||
|
<span class="logo-hex icon"></span>
|
||||||
</div>
|
</div>
|
||||||
<form action="/goto" method="get">
|
<form action="/goto" method="get">
|
||||||
<label>
|
<label>
|
||||||
<input type="text" name="q" placeholder="Search query or URL">
|
<input type="text" name="q" placeholder="Search query or URL">
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label class="input-clear">
|
||||||
<input type="clear">
|
<input type="reset">
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label class="input-submit">
|
||||||
<input type="submit">
|
<input type="submit">
|
||||||
</label>
|
</label>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
||||||
Reference in a new issue