re add startpage

semanticdata · May 13, 2024 · c2a7846 · c2a7846
1 parent c8a3f71
commit c2a7846
Show file tree

Hide file tree

Showing 6 changed files with 295 additions and 0 deletions.
diff --git a/new-tab-startpage/24x24.svg b/new-tab-startpage/24x24.svg
diff --git a/new-tab-startpage/LICENSE b/new-tab-startpage/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Miguel Pimentel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/new-tab-startpage/README.md b/new-tab-startpage/README.md
@@ -0,0 +1,60 @@
+# 🆕 New Tab Startpage
+
+> ⚠ This is a work-in-progress. It is not ready for general use.
+
+<!-- ![Mozilla Add-on](https://img.shields.io/amo/v/newtab-notes@semanticdata) ![Add-on rating](https://img.shields.io/amo/rating/newtab-notes@semanticdata) ![Add-on downloads](https://img.shields.io/amo/dw/newtab-notes@semanticdata) ![Add-on users](https://img.shields.io/amo/users/newtab-notes@semanticdata) ![License](https://img.shields.io/github/license/semanticdata/firefox-new-tab-notes) -->
+
+Firefox extension that transforms the New Tab into a startpage.
+
+<!-- [![Get the Addon](https://raw.githubusercontent.com/semanticdata/text-revealer-firefox-extension/master/firefox.png)](https://addons.mozilla.org/en-US/firefox/addon/new-tab-note/) -->
+
+<!-- ## ✨ Features
+
+- Integrates Firefox Sync. Access your notes across browser instances.
+- Dark/Light themes and toggle.
+- Autosaves your content after every keystroke.
+- Uses [Bulma](https://bulma.io/) for styling.
+- Uses [Fira Code](https://github.com/tonsky/FiraCode) as default font.
+- Search bar (better-new-tab)
+- Groups auto order (better-new-tab)
+
+-->
+
+<!-- ## 🖼 Screenshots
+
+![screenshot light theme](screenshot.png) _Light mode_
+
+![screenshot dark theme](screenshot-dark.png) _Dark mode_ -->
+
+<!-- ## Roadmap / Contributions
+
+See <https://github.com/semanticdata/new-tab-bookmarks/issues> -->
+
+<!-- ## Local Development
+
+Firefox
+
+1. Go to `about:debugging` in address bar
+2. Click _Load Temporary Add-on_ button on top right
+3. Open any file at root directory of this extension's source
+
+Chrome
+
+1. Go to `chrome://extensions/` in address bar
+2. Tick _Developer mode_ toggle at top right
+3. Click _Load Unpacked_
+4. Choose the directory of this extenson's source code -->
+
+<!--
+## Changes from Upstream
+
+- Placeholder
+-->
+
+## 💜 Acknowledgments
+
+This extension is based on [Better New Tab](https://github.com/M4hbod/Better-New-Tab/).
+
+## © License
+
+Source code in this repository is available under the [MIT License](LICENSE).
diff --git a/new-tab-startpage/index.html b/new-tab-startpage/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>semanticdata@github > newtab</title>
+  <link rel="icon" type="image/x-icon" href="24x24.svg" />
+  <link rel="stylesheet" href="style.css" />
+  <script>
+    function setFocusToTextBox() {
+      document.getElementById("input").focus();
+    }
+  </script>
+</head>
+
+<body onload="setFocusToTextBox()">
+  <p><span>semanticdata@github &gt; </span>newtab</p>
+
+  <nav>
+    <ul>
+      <li>general</li>
+      <li><a href="https://google.com">> google</a></li>
+      <li><a href="https://youtube.com">> youtube</a></li>
+      <li><a href="https://app.fastmail.com">> fastmail</a></li>
+    </ul>
+
+    <ul>
+      <li>social media</li>
+      <li><a href="https://twitter.com/">> twitter</a></li>
+      <li><a href="https://instagram.com">> instagram</a></li>
+      <li><a href="https://web.telegram.org">> telegram</a></li>
+      <li><a href="https://web.whatsapp.com/">> whatsapp</a></li>
+    </ul>
+
+    <ul>
+      <li>developer</li>
+      <li><a href="https://github.com">> github</a></li>
+      <li>
+        <a href="https://github.com/semanticdata?tab=repositories">> repositories</a>
+      </li>
+
+      <li><a href="https://codepen.io/your-work">> codepen</a></li>
+    </ul>
+  </nav>
+
+  <form action="http://www.google.com/search">
+    <p>
+      <span>semanticdata@github &gt; </span>
+      <input type="text" name="q" size="60" id="input" autocomplete="off" spellcheck="false" />
+    </p>
+  </form>
+</body>
+
+</html>
diff --git a/new-tab-startpage/manifest.json b/new-tab-startpage/manifest.json
@@ -0,0 +1,18 @@
+{
+  "manifest_version": 2,
+  "name": "New Tab Startpage",
+  "version": "0.0.1",
+  "description": "",
+  "icons": {
+    "24": "24x24.svg"
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "newtab-startpage@semanticdata",
+      "strict_min_version": "100.0"
+    }
+  },
+  "chrome_url_overrides": {
+    "newtab": "index.html"
+  }
+}
diff --git a/new-tab-startpage/style.css b/new-tab-startpage/style.css
@@ -0,0 +1,138 @@
+/* @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); */
+
+:root {
+  --main-bg-color: #1e1e2e;
+  --box-bg-color: #1a1b27;
+  --box-shadow-color: #161620;
+  --text-color: #a6abca;
+  --command-color: #676b87;
+
+  --first-child-color: #d15975;
+  --second-child-color: #9b75c7;
+  --third-child-color: #547741;
+  --fourth-child-color: #5f88d3;
+  --fifth-child-color: #e1844f;
+
+  --column-count: 3;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  align-items: center;
+  background-color: var(--main-bg-color);
+  display: flex;
+  font: 22px/1 "Inconsolata", monospace;
+  height: 100%;
+  justify-content: center;
+}
+
+body {
+  background-color: var(--box-bg-color);
+  box-shadow: 1px 1px 6px var(--box-shadow-color);
+  color: var(--text-color);
+  min-height: 12rem;
+  min-width: 50vw;
+  width: 35rem;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  border: 4px solid rgb(47, 65, 65);
+  display: flex;
+  flex-direction: column;
+}
+
+input,
+input:hover,
+input:focus,
+input:active {
+  background: transparent;
+  border: 0;
+  border-style: none;
+  border-color: transparent;
+  outline: none;
+  outline-offset: 0;
+  box-shadow: none;
+  caret-color: transparent;
+  font: 22px/1 "Inconsolata", monospace;
+  color: var(--text-color);
+  height: 1rem;
+  cursor: default !important;
+}
+
+p {
+  margin: 0;
+}
+
+p span {
+  color: var(--command-color);
+  max-width: 20%;
+}
+
+#input {
+  display: inline-flex;
+  max-width: 60%;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:focus,
+a:hover {
+  font-weight: bold;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 0 1rem;
+  padding-block: 1rem;
+}
+
+ul:nth-child(5n + 1) li:first-child {
+  color: var(--first-child-color);
+  margin-block-end: 0.5rem;
+}
+
+ul:nth-child(5n + 2) li:first-child {
+  color: var(--second-child-color);
+  margin-block-end: 0.5rem;
+}
+
+ul:nth-child(5n + 3) li:first-child {
+  color: var(--third-child-color);
+  margin-block-end: 0.5rem;
+}
+
+ul:nth-child(5n + 4) li:first-child {
+  color: var(--fourth-child-color);
+  margin-block-end: 0.5rem;
+}
+
+ul:nth-child(5n + 5) li:first-child {
+  color: var(--fifth-child-color);
+  margin-block-end: 0.5rem;
+}
+
+li:first-child {
+  font-weight: bold;
+}
+
+li:last-child {
+  margin-block-end: 0.5rem;
+}
+
+@media (max-width: 600px) {
+  nav {
+    flex-direction: column;
+  }
+}