Set up startpage
This commit is contained in:
parent
602e6a4d6b
commit
bda6b363a1
22 changed files with 488 additions and 48 deletions
3
startpage/.gitignore
vendored
Normal file
3
startpage/.gitignore
vendored
Normal file
|
@ -0,0 +1,3 @@
|
|||
# Link in generate colors file for testing
|
||||
# ln -s ~/.startpage/colors.css .
|
||||
colors.css
|
66
startpage/anilist.svg
Normal file
66
startpage/anilist.svg
Normal file
|
@ -0,0 +1,66 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
preserveAspectRatio="xMidYMid"
|
||||
width="135.955"
|
||||
height="102.559"
|
||||
viewBox="0 0 135.955 102.559"
|
||||
version="1.1"
|
||||
id="svg78"
|
||||
sodipodi:docname="anilist.svg"
|
||||
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview80"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:zoom="2.4215116"
|
||||
inkscape:cx="38.612245"
|
||||
inkscape:cy="-22.506603"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1048"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="32"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg78" />
|
||||
<defs
|
||||
id="defs70">
|
||||
<style
|
||||
id="style68">
|
||||
.cls-1 {
|
||||
fill: #02a9ff;
|
||||
}
|
||||
|
||||
.cls-1, .cls-2 {
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #fefefe;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g
|
||||
id="g76"
|
||||
transform="translate(-18.331,-34.792)">
|
||||
<path
|
||||
d="M 111.322,111.157 V 41.029 c 0,-4.019 -2.217,-6.237 -6.236,-6.237 H 91.365 c -4.019,0 -6.237,2.218 -6.237,6.237 0,0 0,15.308 0,33.304 0,0.938 9.037,5.293 9.273,6.214 6.885,26.902 1.496,48.433 -5.031,49.438 10.672,0.528 11.846,5.659 3.897,2.153 1.216,-14.354 5.961,-14.326 19.602,-0.528 0.117,0.119 2.797,5.741 2.964,5.741 15.337,0 32.217,0 32.217,0 4.019,0 6.236,-2.217 6.236,-6.236 v -13.721 c 0,-4.019 -2.217,-6.237 -6.236,-6.237 z"
|
||||
class="cls-1"
|
||||
id="path72" />
|
||||
<path
|
||||
d="M 54.365,34.792 18.331,137.351 h 27.996 l 6.098,-17.74 h 30.49 l 5.96,17.74 h 27.857 L 80.836,34.792 Z m 4.435,62.09 8.731,-28.412 9.563,28.412 z"
|
||||
class="cls-2"
|
||||
id="path74" />
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 2.1 KiB |
29
startpage/default.nix
Normal file
29
startpage/default.nix
Normal file
|
@ -0,0 +1,29 @@
|
|||
{ pkgs, lib, ... }:
|
||||
|
||||
let
|
||||
colors = import ../colors;
|
||||
startpageDir = import ./dir.nix;
|
||||
out = "${startpageDir}.tmp/";
|
||||
in
|
||||
{
|
||||
home.file = {
|
||||
"${out}index.html".source = ./index.html;
|
||||
"${out}colors.css".text = ":root {\n" + (colors.css lib) + "\n}";
|
||||
"${out}style.css".source = ./style.css;
|
||||
"${out}anilist.svg".source = ./anilist.svg;
|
||||
"${out}envelope-regular.svg".source = ./envelope-regular.svg;
|
||||
"${out}git.svg".source = ./git.svg;
|
||||
"${out}jellyfin.svg".source = ./jellyfin.svg;
|
||||
"${out}nyaa.webp".source = ./nyaa.webp;
|
||||
};
|
||||
# Make files not symlinks, this causes issues displaying in Firefox
|
||||
home.activation.startpage = lib.hm.dag.entryAfter["writeBoundary"] ''
|
||||
mkdir -p ${startpageDir}
|
||||
mv ${out}* ${startpageDir}
|
||||
rmdir ${out}
|
||||
cd ${startpageDir}
|
||||
for file in `find -type l`; do
|
||||
cp --remove-destination `readlink $file` $file
|
||||
done
|
||||
'';
|
||||
}
|
1
startpage/dir.nix
Normal file
1
startpage/dir.nix
Normal file
|
@ -0,0 +1 @@
|
|||
".startpage"
|
1
startpage/envelope-regular.svg
Normal file
1
startpage/envelope-regular.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"/></svg>
|
After Width: | Height: | Size: 567 B |
41
startpage/git.svg
Normal file
41
startpage/git.svg
Normal file
|
@ -0,0 +1,41 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="2500"
|
||||
height="2500"
|
||||
viewBox="0 0 256 256"
|
||||
preserveAspectRatio="xMinYMin meet"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
sodipodi:docname="git.svg"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
id="namedview6"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.3484"
|
||||
inkscape:cx="1250"
|
||||
inkscape:cy="1252.8703"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1080"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg4" />
|
||||
<path
|
||||
d="M251.172 116.594L139.4 4.828c-6.433-6.437-16.873-6.437-23.314 0l-23.21 23.21 29.443 29.443c6.842-2.312 14.688-.761 20.142 4.693 5.48 5.489 7.02 13.402 4.652 20.266l28.375 28.376c6.865-2.365 14.786-.835 20.269 4.657 7.663 7.66 7.663 20.075 0 27.74-7.665 7.666-20.08 7.666-27.749 0-5.764-5.77-7.188-14.235-4.27-21.336l-26.462-26.462-.003 69.637a19.82 19.82 0 0 1 5.188 3.71c7.663 7.66 7.663 20.076 0 27.747-7.665 7.662-20.086 7.662-27.74 0-7.663-7.671-7.663-20.086 0-27.746a19.654 19.654 0 0 1 6.421-4.281V94.196a19.378 19.378 0 0 1-6.421-4.281c-5.806-5.798-7.202-14.317-4.227-21.446L81.47 39.442l-76.64 76.635c-6.44 6.443-6.44 16.884 0 23.322l111.774 111.768c6.435 6.438 16.873 6.438 23.316 0l111.251-111.249c6.438-6.44 6.438-16.887 0-23.324"
|
||||
fill="#DE4C36"
|
||||
id="path2"
|
||||
style="fill:#ffffff" />
|
||||
</svg>
|
After Width: | Height: | Size: 1.9 KiB |
34
startpage/index.html
Normal file
34
startpage/index.html
Normal file
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="colors.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no; shrink-to-fit=no;">
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<div id="cards">
|
||||
<a class="blue" href="https://anilist.co" title="AniList"><img src="anilist.svg" alt="AniList"></a>
|
||||
<a class="blue" href="http://elnuhub:8096" title="Jellyfin"><img src="jellyfin.svg" alt="Jellyfin"></a>
|
||||
<a class="blue" href="https:/nyaa.si" title="Nyaa"><img src="nyaa.webp" alt="Nyaa"></a>
|
||||
<a class="yellow" href="https://git.elnu.com" title="Git"><img src="git.svg" alt="Git"></a>
|
||||
<a class="aqua" href="https://mail.proton.me/u/0/inbox" title="ProtonMail"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"/></svg></a>
|
||||
<a class="green" href="http://elnuhub" title="Nextcloud"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32v96V384c0 35.3 28.7 64 64 64H256V384H64V160H256V96H64V32zM288 192c0 17.7 14.3 32 32 32H544c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32H445.3c-8.5 0-16.6-3.4-22.6-9.4L409.4 9.4c-6-6-14.1-9.4-22.6-9.4H320c-17.7 0-32 14.3-32 32V192zm0 288c0 17.7 14.3 32 32 32H544c17.7 0 32-14.3 32-32V352c0-17.7-14.3-32-32-32H445.3c-8.5 0-16.6-3.4-22.6-9.4l-13.3-13.3c-6-6-14.1-9.4-22.6-9.4H320c-17.7 0-32 14.3-32 32V480z"/></svg></a>
|
||||
<a class="red" href="https://youtube.com" title="YouTube"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg></a>
|
||||
<a class="orange" href="https://reddit.com" title="Reddit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M440.3 203.5c-15 0-28.2 6.2-37.9 15.9-35.7-24.7-83.8-40.6-137.1-42.3L293 52.3l88.2 19.8c0 21.6 17.6 39.2 39.2 39.2 22 0 39.7-18.1 39.7-39.7s-17.6-39.7-39.7-39.7c-15.4 0-28.7 9.3-35.3 22l-97.4-21.6c-4.9-1.3-9.7 2.2-11 7.1L246.3 177c-52.9 2.2-100.5 18.1-136.3 42.8-9.7-10.1-23.4-16.3-38.4-16.3-55.6 0-73.8 74.6-22.9 100.1-1.8 7.9-2.6 16.3-2.6 24.7 0 83.8 94.4 151.7 210.3 151.7 116.4 0 210.8-67.9 210.8-151.7 0-8.4-.9-17.2-3.1-25.1 49.9-25.6 31.5-99.7-23.8-99.7zM129.4 308.9c0-22 17.6-39.7 39.7-39.7 21.6 0 39.2 17.6 39.2 39.7 0 21.6-17.6 39.2-39.2 39.2-22 .1-39.7-17.6-39.7-39.2zm214.3 93.5c-36.4 36.4-139.1 36.4-175.5 0-4-3.5-4-9.7 0-13.7 3.5-3.5 9.7-3.5 13.2 0 27.8 28.5 120 29 149 0 3.5-3.5 9.7-3.5 13.2 0 4.1 4 4.1 10.2.1 13.7zm-.8-54.2c-21.6 0-39.2-17.6-39.2-39.2 0-22 17.6-39.7 39.2-39.7 22 0 39.7 17.6 39.7 39.7-.1 21.5-17.7 39.2-39.7 39.2z"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// Override tabing logic to stay in #cards
|
||||
const cardContainer = document.getElementById("cards");
|
||||
const cards = Array.from(cardContainer.children);
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.keyCode == 9) {
|
||||
const index = (cards.indexOf(document.activeElement) + (e.shiftKey ? -1 : 1) + cards.length) % cards.length;
|
||||
cards[index].focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
89
startpage/jellyfin.svg
Normal file
89
startpage/jellyfin.svg
Normal file
|
@ -0,0 +1,89 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
|
||||
<svg
|
||||
aria-label="Jellyfin"
|
||||
role="img"
|
||||
viewBox="0 0 399.85056 399.83783"
|
||||
version="1.1"
|
||||
id="svg120"
|
||||
sodipodi:docname="jellyfin.svg"
|
||||
width="399.85056"
|
||||
height="399.83783"
|
||||
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview122"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.5744287"
|
||||
inkscape:cx="462.19836"
|
||||
inkscape:cy="181.04945"
|
||||
inkscape:window-width="1600"
|
||||
inkscape:window-height="868"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="32"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg120" />
|
||||
<defs
|
||||
id="defs110">
|
||||
<path
|
||||
d="m 190.56,329.07 c 8.63,17.3 122.4,17.12 130.93,0 8.52,-17.1 -47.9,-119.78 -65.46,-119.8 -17.57,0 -74.1,102.5 -65.47,119.8 z"
|
||||
id="A" />
|
||||
<linearGradient
|
||||
id="B"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="126.15"
|
||||
y1="219.32001"
|
||||
x2="457.67999"
|
||||
y2="410.73001">
|
||||
<stop
|
||||
offset="0%"
|
||||
stop-color="#aa5cc3"
|
||||
id="stop104" />
|
||||
<stop
|
||||
offset="100%"
|
||||
stop-color="#00a4dc"
|
||||
id="stop106" />
|
||||
</linearGradient>
|
||||
<path
|
||||
d="m 58.75,417.03 c 25.97,52.15 368.86,51.55 394.55,0 C 478.99,365.48 308.93,56.08 256.03,56.08 203.11,56.08 32.78,364.88 58.75,417.03 Z m 68.04,-45.25 c -17.02,-34.17 94.6,-236.5 129.26,-236.5 34.67,0 146.1,202.7 129.26,236.5 -16.83,33.8 -241.5,34.17 -258.52,0 z"
|
||||
id="C" />
|
||||
</defs>
|
||||
<use
|
||||
xlink:href="#A"
|
||||
fill="url(#B)"
|
||||
id="use112"
|
||||
style="fill:#ffffff;fill-opacity:1"
|
||||
transform="translate(-56.074305,-56.08)" />
|
||||
<use
|
||||
xlink:href="#A"
|
||||
fill-opacity="0"
|
||||
stroke="#000000"
|
||||
stroke-opacity="0"
|
||||
id="use114"
|
||||
transform="translate(-56.074305,-56.08)" />
|
||||
<use
|
||||
xlink:href="#C"
|
||||
fill="url(#B)"
|
||||
id="use116"
|
||||
style="fill:#ffffff;fill-opacity:1"
|
||||
transform="translate(-56.074305,-56.08)" />
|
||||
<use
|
||||
xlink:href="#C"
|
||||
fill-opacity="0"
|
||||
stroke="#000000"
|
||||
stroke-opacity="0"
|
||||
id="use118"
|
||||
transform="translate(-56.074305,-56.08)" />
|
||||
</svg>
|
After Width: | Height: | Size: 2.6 KiB |
BIN
startpage/nyaa.webp
Normal file
BIN
startpage/nyaa.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.7 KiB |
115
startpage/style.css
Normal file
115
startpage/style.css
Normal file
|
@ -0,0 +1,115 @@
|
|||
:root {
|
||||
--red: #e67e80;
|
||||
--red-bg: #4c3743;
|
||||
--orange: #e69875;
|
||||
--orange-bg: #493b40;
|
||||
--yellow: #dbbc7f;
|
||||
--yellow-bg: #45443c;
|
||||
--green: #a7c080;
|
||||
--green-bg: #3c4841;
|
||||
--aqua: #83c092;
|
||||
--aqua-bg: var(--green-bg);
|
||||
--blue: #7fbbb3;
|
||||
--blue-bg: #384b55;
|
||||
}
|
||||
|
||||
.red {
|
||||
--highlight: var(--red-bg);
|
||||
--outline: var(--red);
|
||||
}
|
||||
|
||||
.orange {
|
||||
--highlight: var(--orange-bg);
|
||||
--outline: var(--orange);
|
||||
}
|
||||
|
||||
.yellow {
|
||||
--highlight: var(--yellow-bg);
|
||||
--outline: var(--yellow);
|
||||
}
|
||||
|
||||
.green {
|
||||
--highlight: var(--green-bg);
|
||||
--outline: var(--green);
|
||||
}
|
||||
|
||||
.aqua {
|
||||
--highlight: var(--aqua-bg);
|
||||
--outline: var(--aqua);
|
||||
}
|
||||
|
||||
.blue {
|
||||
--highlight: var(--blue-bg);
|
||||
--outline: var(--blue);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg1);
|
||||
color: var(--fg0);
|
||||
font-size: 1.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 40em;
|
||||
max-height: 100vh;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
#cards {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
grid-auto-rows: 1fr;
|
||||
}
|
||||
|
||||
#cards::before {
|
||||
content: '';
|
||||
width: 0;
|
||||
padding-bottom: 100%;
|
||||
grid-row: 1 / 1;
|
||||
grid-column: 1 / 1;
|
||||
}
|
||||
|
||||
#cards > *:first-child{
|
||||
grid-row: 1 / 1;
|
||||
grid-column: 1 / 1;
|
||||
}
|
||||
|
||||
#cards > * {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(var(--bg2), var(--bg2), var(--highlight, var(--bg2)));
|
||||
font-size: 2em;
|
||||
outline: 1px solid var(--outline, var(--bg0));
|
||||
border-radius: 2px;
|
||||
transition: 0.25s transform;
|
||||
}
|
||||
|
||||
#cards > * > * {
|
||||
color: white;
|
||||
display: inline;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
#cards > :hover, #cards > :focus {
|
||||
outline-width: 2px;
|
||||
outline-color: var(--outline);
|
||||
}
|
||||
|
||||
#cards > :focus {
|
||||
background: var(--highlight);
|
||||
transform: translateY(-0.25rem);
|
||||
}
|
||||
|
||||
#cards > :hover *, #cards > :focus * {
|
||||
font-size: 1.0625em;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue