Skip to content

Pav-Osmolski/startpage

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ELDEN RING multi-theme browser startpage

Live Preview

Please feel free to fork and make your own changes!

List of changes:

  • Converted to CSS Flex
  • Fully responsive layout
  • WCAG accessibility
  • Support for multiple bookmarks containers
  • Added search functionality
  • Tabbed navigation for links containers using slick carousel
  • Asynchronous JavaScript loader
  • Both JS and CSS files can be instantiated based on element classes in DOM
  • Added fade-in on page load
  • Fixed HTML validation issues
  • Re-organised images into their own folder
  • Alternate theme styles are included in style.css under /* Themes */ with examples shown below
  • Edit index.html to change the <html> element class for an alternative theme, or be creative and add your own
  • Image is set via the --image-path variable
  • Fonts: Ubuntu and Bebas Neue
  • Colour scheme: ELDEN RING, mostly dictated by the --hue-rotate variable
  • ELDEN RING gif: Here

Optional add-ons:

These add-ons will only load when required, based on whether the relevant element class is detected in the DOM. You can configure the JavaScript add-on list within async-loader.js.

  • slick carousel <div class="links slick-start">
  • jQuery Ripples <body class="fade-in ripples">
  • Date/Time <h1 id="#Date">
  • Animating stars <body class="fade-in stars">
  • Search <body class="fade-in search">
  • jQuery <body class="fade-in jquery">

Features:

Search functionality <body class="fade-in search">. The default is set to Google. You can change the search engine by modifying action="https://www.google.com/search"

search functionality

Tabbed containers <div class="links slick-start slick-single-arrow">

tabbed navigation

Privacy blur/unblur on hover <ul class="blur">

privacy blur

How to install:

  1. Clone this repo to a location on your hard disk, e.g. C:/StartPages/
  2. Set your browser homepage to file:///C:/StartPages/startpage/index.html
  3. Customise to your delight

Currently implemented theme classes:

ELDEN RING Press Start <html lang="en" class="default eldenring-start">

startpage elden ring

ELDEN RING Lady Ranni <html lang="en" class="default eldenring-ranni"> and if you're feeling adventurous <body class="fade-in ripples">

startpage ranni the witch

ELDEN RING Pot Boy <html lang="en" class="default eldenring-potboy">

startpage potboy

ELDEN RING Ranni's Dark Moon <html lang="en" class="default eldenring-ranni-dark-moon"> and for some extra magic <body class="fade-in stars">

startpage potboy

Vapor by nwvh <html lang="en" class="default vapor">

startpage vapor

Languages

  • JavaScript 80.4%
  • CSS 14.3%
  • HTML 5.3%