diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..496ee2c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..bc09f7d --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + + + Startpage Title + + + + + + +
+
+ + +
+ +
+
+ +
+
+
+
+
+
+

Category One

+
+
  • Google
    • +
    +
    +
    +

    Category Two

    +
  • Steam
    • +
    +
    +
    +
    +

    Category Three

    +
    +
  • GMail
    • +
    +
    +
    +
    + + diff --git a/src/backgrounds/bg1.jpg b/src/backgrounds/bg1.jpg new file mode 100644 index 0000000..b5e33bd Binary files /dev/null and b/src/backgrounds/bg1.jpg differ diff --git a/src/backgrounds/bgs.json b/src/backgrounds/bgs.json new file mode 100644 index 0000000..aac1da3 --- /dev/null +++ b/src/backgrounds/bgs.json @@ -0,0 +1,3 @@ +[ + "src/backgrounds/bg1.jpg" +] \ No newline at end of file diff --git a/src/fonts/iosevka_ttf/iosevka-bold.ttf b/src/fonts/iosevka_ttf/iosevka-bold.ttf new file mode 100644 index 0000000..b4e3dda Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-bold.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-bolditalic.ttf b/src/fonts/iosevka_ttf/iosevka-bolditalic.ttf new file mode 100644 index 0000000..a459aa3 Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-bolditalic.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-boldoblique.ttf b/src/fonts/iosevka_ttf/iosevka-boldoblique.ttf new file mode 100644 index 0000000..3572bb1 Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-boldoblique.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-extrabold.ttf b/src/fonts/iosevka_ttf/iosevka-extrabold.ttf new file mode 100644 index 0000000..28a2c48 Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-extrabold.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-extrabolditalic.ttf b/src/fonts/iosevka_ttf/iosevka-extrabolditalic.ttf new file mode 100644 index 0000000..f19849a Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-extrabolditalic.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-extraboldoblique.ttf b/src/fonts/iosevka_ttf/iosevka-extraboldoblique.ttf new file mode 100644 index 0000000..f33d3ad Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-extraboldoblique.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-extralight.ttf b/src/fonts/iosevka_ttf/iosevka-extralight.ttf new file mode 100644 index 0000000..39d3d3b Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-extralight.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-extralightitalic.ttf b/src/fonts/iosevka_ttf/iosevka-extralightitalic.ttf new file mode 100644 index 0000000..6d09d09 Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-extralightitalic.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-extralightoblique.ttf b/src/fonts/iosevka_ttf/iosevka-extralightoblique.ttf new file mode 100644 index 0000000..69c398f Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-extralightoblique.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-heavy.ttf b/src/fonts/iosevka_ttf/iosevka-heavy.ttf new file mode 100644 index 0000000..788b611 Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-heavy.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-heavyitalic.ttf b/src/fonts/iosevka_ttf/iosevka-heavyitalic.ttf new file mode 100644 index 0000000..1b1aaef Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-heavyitalic.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-heavyoblique.ttf b/src/fonts/iosevka_ttf/iosevka-heavyoblique.ttf new file mode 100644 index 0000000..ef19daf Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-heavyoblique.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-italic.ttf b/src/fonts/iosevka_ttf/iosevka-italic.ttf new file mode 100644 index 0000000..f21ea73 Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-italic.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-light.ttf b/src/fonts/iosevka_ttf/iosevka-light.ttf new file mode 100644 index 0000000..6d65d7e Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-light.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-lightitalic.ttf b/src/fonts/iosevka_ttf/iosevka-lightitalic.ttf new file mode 100644 index 0000000..00293fa Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-lightitalic.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-lightoblique.ttf b/src/fonts/iosevka_ttf/iosevka-lightoblique.ttf new file mode 100644 index 0000000..9901a8b Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-lightoblique.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-medium.ttf b/src/fonts/iosevka_ttf/iosevka-medium.ttf new file mode 100644 index 0000000..fecc788 Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-medium.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-mediumitalic.ttf b/src/fonts/iosevka_ttf/iosevka-mediumitalic.ttf new file mode 100644 index 0000000..f282fb4 Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-mediumitalic.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-mediumoblique.ttf b/src/fonts/iosevka_ttf/iosevka-mediumoblique.ttf new file mode 100644 index 0000000..476121e Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-mediumoblique.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-oblique.ttf b/src/fonts/iosevka_ttf/iosevka-oblique.ttf new file mode 100644 index 0000000..5482a33 Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-oblique.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-regular.ttf b/src/fonts/iosevka_ttf/iosevka-regular.ttf new file mode 100644 index 0000000..fe8f88a Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-regular.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-semibold.ttf b/src/fonts/iosevka_ttf/iosevka-semibold.ttf new file mode 100644 index 0000000..e31eb5e Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-semibold.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-semibolditalic.ttf b/src/fonts/iosevka_ttf/iosevka-semibolditalic.ttf new file mode 100644 index 0000000..01c62b9 Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-semibolditalic.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-semiboldoblique.ttf b/src/fonts/iosevka_ttf/iosevka-semiboldoblique.ttf new file mode 100644 index 0000000..73f6bba Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-semiboldoblique.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-thin.ttf b/src/fonts/iosevka_ttf/iosevka-thin.ttf new file mode 100644 index 0000000..d04d02a Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-thin.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-thinitalic.ttf b/src/fonts/iosevka_ttf/iosevka-thinitalic.ttf new file mode 100644 index 0000000..4f93353 Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-thinitalic.ttf differ diff --git a/src/fonts/iosevka_ttf/iosevka-thinoblique.ttf b/src/fonts/iosevka_ttf/iosevka-thinoblique.ttf new file mode 100644 index 0000000..66517bc Binary files /dev/null and b/src/fonts/iosevka_ttf/iosevka-thinoblique.ttf differ diff --git a/src/icons/fox.svg b/src/icons/fox.svg new file mode 100644 index 0000000..72b2545 --- /dev/null +++ b/src/icons/fox.svg @@ -0,0 +1,55 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/icons/google.svg b/src/icons/google.svg new file mode 100644 index 0000000..1ec73e6 --- /dev/null +++ b/src/icons/google.svg @@ -0,0 +1,100 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/src/icons/search.svg b/src/icons/search.svg new file mode 100644 index 0000000..52206e5 --- /dev/null +++ b/src/icons/search.svg @@ -0,0 +1,89 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/src/script/randbg.js b/src/script/randbg.js new file mode 100644 index 0000000..29aebcc --- /dev/null +++ b/src/script/randbg.js @@ -0,0 +1,9 @@ +document.addEventListener("DOMContentLoaded", () => { + fetch('idle-bgs/bgs.json') + .then(response => response.json()) + .then(images => { + const randomImage = images[Math.floor(Math.random() * images.length)]; + document.body.style.backgroundImage = `url(${randomImage})`; + }) + .catch(error => console.error('Error fetching image list:', error)); +}); diff --git a/src/style/main.css b/src/style/main.css new file mode 100644 index 0000000..5051e60 --- /dev/null +++ b/src/style/main.css @@ -0,0 +1,211 @@ +@font-face { + font-family: iosevka-light; + src: url('./fonts/iosevka_ttf/iosevka-light.ttf'); +} + +html{ + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-content: center; + align-items: center; + height: 100%; + width: 100%; + margin: 0; + padding: 0; + background:#1b1b1b; + } + +body { + /* background: #263238; */ + background-image: url('./bg.jpg'); + background-size: cover; + background-position: center; + color: #ffa31a; + height: 100%; + width: 100%; + margin: 0; + padding: 0; +} + +.container { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + justify-content: center; +} + +.head { + display: flex; + flex-direction: column; +} + +.category { + display: flex; + flex-direction: column; + width: 20%; + font-family: iosevka-light; +} + +.title { + font-size: 20px; + text-align: center; + background-color: #292929; + color: #ffa31a; + border-radius: 3px; + box-shadow: 0px 4px 5px #171D20; + align-items: center; + padding-top: 10px; + padding-bottom: 10px; + margin-bottom: 0px; + border: #ffa31a 1px; + border-style: solid; +} + +.bookmark { + display: flex; + justify-content: space-evenly; +} + +.bookmarks { + display: flex; + flex-direction: column; + border: #191C1E; + border-radius: 3px; + box-shadow: 0px 4px 5px #171D20; + align-items: center; + padding-top: 20px; + padding-bottom: 20px; + background: rgba(41, 41, 41, .6); + margin-top: 0px; +} + +.logo { + align-self: center; + padding: 15px; +} + +.icon { + align-self: center; + justify-content: center; + margin: 15px; +} + + +.input_box { + border: none; + outline: none; + background: none; + padding-right: 15px; + padding-left: 15px; + width: 100%; + color: #ffa31a; + font-size: 22px; + border-radius: 0px 0px 0px 0px; + height: 70px; + text-align: center; +} + +.button { + background: none; + border: none; + transition-duration: 0.6s; + position: fixed; + padding-left: 11px; + padding-right: 12px; + height: 70px; + opacity: 60%; +} + +.engine { + background: none; + padding-left: 12px; + padding-right: 11px; + border: none; + transition-duration: 0.6s; + position: relative; + opacity: 60%; +} + +form { + margin: 0px; + padding: 0px; +} + +.search_box { + display: flex; + background: rgba(41, 41, 41, .6); + width: 600px; + padding: 0px; + margin-bottom: 40px; + border-radius: 3px 3px 3px 3px; + box-shadow: 0px 4px 5px #171D20; + align-self: center; + height: 70px; +} + +.engine:hover { + filter: saturate(150%) brightness(120%) !important; + opacity: 100%; +} + +.button:hover { + filter: saturate(150%) brightness(120%) !important; + opacity: 100%; +} + +li { + font-size: 16px; + list-style-type: none; + padding: 5px +} + +a:link { + text-decoration: none; + color: #F8BE4D; +} + +a:visited { + color: #F8BE4D; +} + +a:hover { + color: #B5CCE8; +} + +#credit { + position: fixed; + right: 0; + bottom: 0; + font-family: iosevka-light; +} + +#gSearch { + width: 100%; +} + + + +@media screen and (max-width: 600px) { + .container { + display: block; + } + .bookmark { + flex-direction: column; + } + .category { + width: 90%; + align-self: center; + } + .search_box { + width: 90%; + } + .input_box { + width: 100%; + padding: 0px; + } + .engine { + padding: 0px 5px; + } +} \ No newline at end of file