1st commit
This commit is contained in:
parent
4b04cbcb0b
commit
3ca2cc2121
2
LICENSE
2
LICENSE
|
|
@ -1,4 +1,4 @@
|
|||
MIT License Copyright (c) <year> <copyright holders>
|
||||
MIT License Copyright (c) 2020 FollieHiyuki
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
|
|
|||
21
README.md
21
README.md
|
|
@ -1,3 +1,20 @@
|
|||
# Startpage
|
||||
# A minimal startpage
|
||||
|
||||
My startpage for Firefox
|
||||
> Old commits can be seen on [my old Github repo](https://github.com/FollieHiyuki/Startpage)
|
||||
|
||||
### :clipboard: To-do list :clipboard:
|
||||
|
||||
- [ ] Make the page responsive
|
||||
|
||||
### :star2: Credits :star2:
|
||||
|
||||
Fonts used:
|
||||
|
||||
- [FiraCode Nerd Font](https://github.com/ryanoasis/nerd-fonts) (for the glyphs)
|
||||
- [Sarasa Gothic](https://github.com/be5invis/Sarasa-Gothic) (Japanese supported)
|
||||
|
||||
The Firefox CSS is taken from [here](https://github.com/evanswa0606/firefox-simpletheme) with some minor changes.
|
||||
|
||||
### :camera: And it looks like this:
|
||||
|
||||
~[screenshot](./images/screenshot.png)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
:root {
|
||||
--uc-urlbar-bg-color: #2e3440;
|
||||
--uc-show-new-tab-button: none;
|
||||
--uc-show-tab-separators: none;
|
||||
--uc-tab-separators-color: none;
|
||||
--uc-tab-separators-width: none;
|
||||
}
|
||||
#titlebar {
|
||||
-moz-box-ordinal-group: 2 !important;
|
||||
}
|
||||
.titlebar-buttonbox-container {
|
||||
display: none !important;
|
||||
}
|
||||
#TabsToolbar {
|
||||
min-height: 28px !important;
|
||||
}
|
||||
.tabbrowser-tab:not([pinned]) {
|
||||
max-width: 100vw !important;
|
||||
}
|
||||
.tabbrowser-tab:not([fadein]),
|
||||
/* #page-action-buttons, */
|
||||
.titlebar-spacer,
|
||||
.tab-line,
|
||||
#tracking-protection-icon-container {
|
||||
display: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
/* #identity-box { */
|
||||
/* visibility: collapse !important; */
|
||||
/* } */
|
||||
#urlbar-background,
|
||||
.titlebar-buttonbox-container,
|
||||
#nav-bar,
|
||||
.tabbrowser-tab:not([selected]) .tab-background {
|
||||
background: none !important;
|
||||
background-color: var(--uc-urlbar-bg-color) !important;
|
||||
border: none !important;
|
||||
}
|
||||
#urlbar[breakout][breakout-extend] {
|
||||
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
|
||||
height: var(--urlbar-height) !important;
|
||||
padding-block: 0 !important;
|
||||
padding-inline: 0 !important;
|
||||
}
|
||||
|
||||
#urlbar[breakout][breakout-extend] > #urlbar-background {
|
||||
animation-name: none !important;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
#urlbar-background {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
#nav-bar,
|
||||
.titlebar-buttonbox-container {
|
||||
border-bottom: 1px solid rgb(229, 233, 240);
|
||||
}
|
||||
#tabs-newtab-button {
|
||||
display: var(--uc-show-new-tab-button) !important;
|
||||
}
|
||||
.tabbrowser-tab::after {
|
||||
border-left: var(--uc-tab-separators-width) solid var(--uc-tab-separators-color) !important;
|
||||
display: var(--uc-show-tab-separators) !important;
|
||||
}
|
||||
.tab-background[selected="true"] {
|
||||
background-color: #4c566a !important;
|
||||
}
|
||||
.tabbrowser-tab[first-visible-tab][last-visible-tab] {
|
||||
background-color: var(--uc-bar-bg-color) !important;
|
||||
}
|
||||
.tab-close-button.close-icon {
|
||||
display: none !important;
|
||||
}
|
||||
.tabbrowser-tab:hover .tab-close-button.close-icon {
|
||||
display: block !important;
|
||||
}
|
||||
#urlbar-input {
|
||||
text-align: center !important;
|
||||
}
|
||||
#urlbar-input:focus {
|
||||
text-align: left !important;
|
||||
}
|
||||
#PersonalToolbar {
|
||||
background-color: #2e3440 !important;
|
||||
padding: 3px 0 !important;
|
||||
}
|
||||
#PersonalToolbar toolbarbutton.bookmark-item {
|
||||
padding: 6px !important;
|
||||
background-color: #2e3440 !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
#PersonalToolbar toolbarbutton.bookmark-item:hover,
|
||||
#PersonalToolbar toolbarbutton.bookmark-item[open="true"] {
|
||||
background: #4c566a !important;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>~</title>
|
||||
<link rel="icon" href="./images/penguin.png" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="cardtitle">
|
||||
<img class="rose1" src="./images/rose.png" alt="rose" />
|
||||
<h1 class="title">
|
||||
おかえりなさい
|
||||
</h1>
|
||||
<img class="rose2" src="./images/rose.png" alt="rose" />
|
||||
</div>
|
||||
|
||||
<div class="searchbox">
|
||||
<form action="https://duckduckgo.com/" method="GET" autocomplete="off">
|
||||
<label></label>
|
||||
<input type="search" name="q" placeholder="Duck something..." />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="bookmarks">
|
||||
<div class="card">
|
||||
<h1 class="group"> Linux/BSD </h1>
|
||||
<div>
|
||||
<li><a href="https://wiki.archlinux.org/"> Arch</a></li>
|
||||
<li><a href="https://artixlinux.org/"> Artix</a></li>
|
||||
<li><a href="https://wiki.alpinelinux.org/wiki/Main_Page"> Alpine</a></li>
|
||||
<li><a href="https://docs.voidlinux.org/"> Void</a></li>
|
||||
<li><a href="https://nixos.org/manual/nix/stable/"> Nix</a></li>
|
||||
<li><a href="https://nixos.org/manual/nixos/stable/"> NixOS</a></li>
|
||||
<li><a href="https://wiki.gentoo.org/wiki/Handbook:Main_Page"> Gentoo</a></li>
|
||||
<li><a href="https://www.debian.org/doc/manuals/debian-reference/"> Debian</a></li>
|
||||
<li><a href="https://docs.fedoraproject.org/en-US/docs/"> Fedora</a></li>
|
||||
<li><a href="https://www.freebsd.org/doc/en_US.ISO8859-1/books/handbook/"> FreeBSD</a></li>
|
||||
<li><a href="https://www.openbsd.org/faq/index.html">廬 OpenBSD</a></li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-left: 40px;">
|
||||
<h1 class="group"> Coding </h1>
|
||||
<div>
|
||||
<li><a href="https://reactjs.org/docs/getting-started.html">ﰆ React</a></li>
|
||||
<li><a href="https://nodejs.org/en/docs/"> Nodejs</a></li>
|
||||
<li><a href="https://www.electronjs.org/docs"> Electron</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/Web"> MDN</a></li>
|
||||
<li><a href="https://en.cppreference.com/w/"> C++</a></li>
|
||||
<li><a href="https://doc.qt.io/"> Qt</a></li>
|
||||
<li><a href="https://projecteuler.net/archives"> Euler</a></li>
|
||||
<li><a href="https://leetcode.com/problemset/all/"> LeetCode</a></li>
|
||||
<li><a
|
||||
href="https://github.com/EbookFoundation/free-programming-books/blob/master/free-programming-books.md#c-1">
|
||||
Books</a></li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-left: 40px;">
|
||||
<h1 class="group">⚡ Stuff ⚡</h1>
|
||||
<div>
|
||||
<li><a href="https://github.com/FollieHiyuki"> Github</a></li>
|
||||
<li><a href="https://gitlab.com/FollieHiyuki"> GitLab</a></li>
|
||||
<li><a href="https://git.disroot.org/FollieHiyuki"> Gitea</a></li>
|
||||
<li><a href="https://www.openstreetmap.org/">﫴 Map</a></li>
|
||||
<li><a href="https://www.deepl.com/translator">韛 DeepL</a></li>
|
||||
<li><a href="https://iqdb.org/"> Images</a></li>
|
||||
<li><a href="https://www.reddit.com/r/Animewallpaper/"> Reddit</a></li>
|
||||
<li><a href="https://odysee.com/"> Odysee</a></li>
|
||||
<li><a href="https://www.phoronix.com/scan.php?page=home"> Phoronix</a></li>
|
||||
<li><a href="https://news.ycombinator.com/news"> HackerNews</a></li>
|
||||
<li><a href="https://www.protondb.com/"> ProtonDB</a></li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div style="color: #81a1c1;">Made by @FollieHiyuki with<span style="color: #e06c75;"> </span></div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
@font-face {
|
||||
font-family: "Sarasa";
|
||||
src: url("./fonts/sarasa-fixed-j-regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "FiraCode";
|
||||
src: url("./fonts/FiraCode-Regular-NerdFont-Complete.ttf");
|
||||
}
|
||||
|
||||
:root {
|
||||
--black: #1b2229;
|
||||
--red: #e06c75;
|
||||
--yellow: #ebcb8b;
|
||||
|
||||
--fg: #81a1c1;
|
||||
--bg: #3b4252;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #2e3440;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.rose1 {
|
||||
float: left;
|
||||
margin-top: 12px;
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
.rose2 {
|
||||
float: right;
|
||||
margin-top: 12px;
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: "Sarasa";
|
||||
font-size: 56px;
|
||||
font-weight: bold;
|
||||
color: var(--red);
|
||||
display: inline;
|
||||
text-shadow: 4px 4px 6px var(--black);
|
||||
}
|
||||
|
||||
.cardtitle {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.searchbox {
|
||||
background-color: var(--bg);
|
||||
border-radius: 8px;
|
||||
box-shadow: 8px 8px 5px var(--black);
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form label {
|
||||
font-family: "FiraCode";
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
color: var(--red);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
form input[type="search"] {
|
||||
font-family: "Sarasa";
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--fg);
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
form:focus-within input::placeholder {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bookmarks {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--bg);
|
||||
width: 240px;
|
||||
height: 420px;
|
||||
box-shadow: 8px 8px 5px var(--black);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.group {
|
||||
color: var(--red);
|
||||
font-family: "FiraCode";
|
||||
font-size: 24px;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
text-shadow: 2px 2px 4px var(--black);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: "FiraCode";
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
text-decoration: none;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
font-family: "FiraCode";
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
Reference in New Issue