/NewerTab

My newer tab page

Primary LanguageJavaScriptMIT LicenseMIT

NewerTab

It's my new tab page, but it isn't held together with duct tape!

Features

You can customize most settings by right clicking them. Some features may require you to edit JSON, but I'm going to fix that soon.

  • Pretty interface
  • Customizable everything! (backgrounds, icons, themes)
  • Dark theme!
  • Backgrounds support (gradients, images, top posts of subreddits, most recent posts of tumblr blogs)
  • Backgrounds credit (author and link to page)
  • Nice selection of default images.
  • Search bar with date

To-do

  • Custom CSS
  • Background Wizard (make new JSON Background objects)
  • More polish, maybe animations?
  • More empty space in the ignore.js file. Ignore the ignore.js file. There's nothing in it. (Will add items, fix map 2, remove existential crisis)
  • Migrate NewerTab CSS to SCSS, for easier maintaining.

Known Issues

  • Dark Reader completely breaks page. Disable for my github.io site anyway, it already has a dark theme.

Custom CSS Samples

Google Chrome-style search bar (rounded edges)

:root input#searchbox {
	padding: .5rem 1rem;
	border-radius: 1rem;
}

No solid highlight color for search bar

:root input#searchbox:focus,
:root input#searchbox.contextopen {
	color: var(--text-color);
	background-color: transparent;
	--highlight-foreground-color: var(--alt-color);
	--highlight-background-color: var(--text-color);
}

Neat border for search bar

:root input#searchbox {
	border: 1px solid transparent;	
}
:root input#searchbox:focus,
:root input#searchbox.contextopen {
	border-color: var(--text-color);
}

Sharper corners on everything

:root {
	--border-radius: 0;
}

Kid's budget Android tablet UI

html:root {
	--border-radius: 50%;
}

Please don't actually use this last one.

Credits