mirror of
https://github.com/Galax028/startpage.git
synced 2024-11-21 22:53:08 +01:00
Added most core files
This commit is contained in:
Galax028
parent
26ebc905e6
commit
51e4ee43a1
80
config-formatted.json
Normal file
80
config-formatted.json
Normal file
@ -0,0 +1,80 @@
|
||||
{
|
||||
"username": "Galax",
|
||||
"font": {
|
||||
"name": "Jetbrains Mono",
|
||||
"type": "monospace",
|
||||
"link": "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700"
|
||||
},
|
||||
"logos": {
|
||||
"Chrome": "googlechrome",
|
||||
"IE": "internetexplorer",
|
||||
"Firefox": "firefoxbrowser",
|
||||
"Opera": "opera",
|
||||
"Microsoft Edge": "microsoftedge",
|
||||
"Safari": "safari"
|
||||
},
|
||||
"searchEngine": {
|
||||
"name": "DuckDuckGo",
|
||||
"queryString": "https://duckduckgo.com/?q=%query%"
|
||||
},
|
||||
"weather": {
|
||||
"unit": "metric",
|
||||
"apikey": "b82e6a4a483dc4e42e06c8ed8255e05b",
|
||||
"rainEffect": true
|
||||
},
|
||||
"clockFormat": "12",
|
||||
"colourSchemes": {
|
||||
"dark": {
|
||||
"background": "hsl(206,40%,10%)",
|
||||
"primary": "hsl(206,40%,8%)",
|
||||
"secondary": "hsl(196,18%,30%)",
|
||||
"secondaryAlternate": "hsl(196,18%,60%)"
|
||||
},
|
||||
"light": {
|
||||
"background": "hsl(48,87%,88%)",
|
||||
"primary": "hsl(40,38%,73%)",
|
||||
"secondary": "hsl(20,5%,22%)",
|
||||
"secondaryAlternate": "hsl(0,0%,16%)"
|
||||
}
|
||||
},
|
||||
"bookmarks": [
|
||||
{
|
||||
"name": "Social",
|
||||
"links": {
|
||||
"Reddit": "https://reddit.com",
|
||||
"Discord": "https://discord.com/channels/@me",
|
||||
"YouTube": "https://youtube.com",
|
||||
"Twitch": "https://twitch.tv"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Programming",
|
||||
"links": {
|
||||
"GitHub": "https://github.com",
|
||||
"StackOverflow": "https://stackoverflow.com",
|
||||
"PyPi": "https://pypi.org",
|
||||
"ReadTheDocs": "https://readthedocs.org",
|
||||
"r/programming": "https://reddit.com/r/programming"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "School",
|
||||
"links": {
|
||||
"Google Classroom": "https://classroom.google.com/u/2",
|
||||
"Google Drive": "https://drive.google.com/u/2",
|
||||
"Google Docs": "https://docs.google.com/u/2",
|
||||
"Google Slides": "https://docs.google.com/presentation/u/2",
|
||||
"Google Sheets": "https://docs.google.com/spreadsheets/u/2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Fun",
|
||||
"links": {
|
||||
"Anime": "https://kickassanime.ro",
|
||||
"Movies & Series": "https://stremiomovies.io",
|
||||
"Cookie Clicker": "https://orteil.dashnet.org/cookieclicker",
|
||||
"Music Playlist": "https://www.youtube.com/playlist?list=PLPXLdMzJaEGMT0274mqKipWJcye3_ioZe"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
1
config.json
Normal file
1
config.json
Normal file
@ -0,0 +1 @@
|
||||
{ "username": "Galax", "font": { "name": "Jetbrains Mono", "type": "monospace", "link": "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700" }, "logos": { "Chrome": "googlechrome", "IE": "internetexplorer", "Firefox": "firefoxbrowser", "Opera": "opera", "Microsoft Edge": "microsoftedge", "Safari": "safari" }, "searchEngine": { "name": "DuckDuckGo", "queryString": "https://duckduckgo.com/?q=%query%" }, "weather": { "unit": "metric", "apikey": "b82e6a4a483dc4e42e06c8ed8255e05b", "rainEffect": true }, "clockFormat": "12", "colourSchemes": { "dark": { "background": "hsl(206,40%,10%)", "primary": "hsl(206,40%,8%)", "secondary": "hsl(196,18%,30%)", "secondaryAlternate": "hsl(196,18%,60%)" }, "light": { "background": "hsl(48,87%,88%)", "primary": "hsl(40,38%,73%)", "secondary": "hsl(20,5%,22%)", "secondaryAlternate": "hsl(0,0%,16%)" } }, "bookmarks": [{ "name": "Social", "links": { "Reddit": "https://reddit.com", "Discord": "https://discord.com/channels/@me", "YouTube": "https://youtube.com", "Twitch": "https://twitch.tv" } }, { "name": "Programming", "links": { "GitHub": "https://github.com", "StackOverflow": "https://stackoverflow.com", "PyPi": "https://pypi.org", "ReadTheDocs": "https://readthedocs.org", "r/programming": "https://reddit.com/r/programming" } }, { "name": "School", "links": { "Google Classroom": "https://classroom.google.com/u/2", "Google Drive": "https://drive.google.com/u/2", "Google Docs": "https://docs.google.com/u/2", "Google Slides": "https://docs.google.com/presentation/u/2", "Google Sheets": "https://docs.google.com/spreadsheets/u/2" } }, { "name": "Fun", "links": { "Anime": "https://kickassanime.ro", "Movies & Series": "https://stremiomovies.io", "Cookie Clicker": "https://orteil.dashnet.org/cookieclicker", "Music Playlist": "https://www.youtube.com/playlist?list=PLPXLdMzJaEGMT0274mqKipWJcye3_ioZe" } }] }
|
||||
19
cors.py
Normal file
19
cors.py
Normal file
@ -0,0 +1,19 @@
|
||||
import requests
|
||||
from flask import Flask, jsonify
|
||||
|
||||
cors = Flask(__name__)
|
||||
|
||||
|
||||
@cors.get("/<string:query>")
|
||||
def deal_with_cors(query):
|
||||
return {"data": requests.get(f"https://ac.duckduckgo.com/ac/?q={query}&type=list").json()[1]}
|
||||
|
||||
|
||||
@cors.after_request
|
||||
def actually_deal_with_cors(res):
|
||||
res.headers["Access-Control-Allow-Origin"] = "*"
|
||||
return res
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
cors.run("localhost", 8080)
|
||||
139
main.js
Normal file
139
main.js
Normal file
@ -0,0 +1,139 @@
|
||||
$(() => {
|
||||
if (localStorage.getItem("config") === null) {
|
||||
localStorage.setItem("config", JSON.stringify({ "username": "Galax", "font": { "name": "Jetbrains Mono", "type": "monospace", "link": "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700" }, "logos": { "Chrome": "googlechrome", "IE": "internetexplorer", "Firefox": "firefoxbrowser", "Opera": "opera", "Microsoft Edge": "microsoftedge", "Safari": "safari" }, "searchEngine": { "name": "DuckDuckGo", "queryString": "https://duckduckgo.com/?q=%query%" }, "weather": { "unit": "metric", "apikey": "b82e6a4a483dc4e42e06c8ed8255e05b", "rainEffect": true }, "clockFormat": "12", "colourSchemes": { "dark": { "background": "hsl(206,40%,10%)", "primary": "hsl(206,40%,8%)", "secondary": "hsl(196,18%,30%)", "secondaryAlternate": "hsl(196,18%,60%)" }, "light": { "background": "hsl(48,87%,88%)", "primary": "hsl(40,38%,73%)", "secondary": "hsl(20,5%,22%)", "secondaryAlternate": "hsl(0,0%,16%)" } }, "bookmarks": [{ "name": "Social", "links": { "Reddit": "https://reddit.com", "Discord": "https://discord.com/channels/@me", "YouTube": "https://youtube.com", "Twitch": "https://twitch.tv" } }, { "name": "Programming", "links": { "GitHub": "https://github.com", "StackOverflow": "https://stackoverflow.com", "PyPi": "https://pypi.org", "ReadTheDocs": "https://readthedocs.org", "r/programming": "https://reddit.com/r/programming" } }, { "name": "School", "links": { "Google Classroom": "https://classroom.google.com/u/2", "Google Drive": "https://drive.google.com/u/2", "Google Docs": "https://docs.google.com/u/2", "Google Slides": "https://docs.google.com/presentation/u/2", "Google Sheets": "https://docs.google.com/spreadsheets/u/2" } }, { "name": "Fun", "links": { "Anime": "https://kickassanime.ro", "Movies & Series": "https://stremiomovies.io", "Cookie Clicker": "https://orteil.dashnet.org/cookieclicker", "Music Playlist": "https://www.youtube.com/playlist?list=PLPXLdMzJaEGMT0274mqKipWJcye3_ioZe" } }] }));
|
||||
}
|
||||
|
||||
let conf = JSON.parse(localStorage.config);
|
||||
|
||||
// Browser Logo & Name
|
||||
var browserName = bowser.parse(window.navigator.userAgent).browser.name;
|
||||
if (browserName.startsWith("Opera")) {
|
||||
browserName = "Opera";
|
||||
} else if (browserName === "Chromium") {
|
||||
browserName = "Chrome";
|
||||
} else if (browserName === "Internet Explorer") {
|
||||
browserName = "IE"
|
||||
}
|
||||
|
||||
$("#browser-name").text(browserName);
|
||||
if (browserName in conf.logos) {
|
||||
$("link[rel=\"shortcut icon\"]").attr("href", `https://simpleicons.org/icons/${conf.logos[browserName]}.svg`);
|
||||
$("#browser-logo").attr("src", `https://simpleicons.org/icons/${conf.logos[browserName]}.svg`);
|
||||
} else {
|
||||
$("link[rel=\"shortcut icon\"]").attr("href", "https://fonts.gstatic.com/s/i/materialiconsoutlined/public/v11/24px.svg");
|
||||
$("#browser-logo").attr("src", "https://fonts.gstatic.com/s/i/materialiconsoutlined/public/v11/24px.svg");
|
||||
}
|
||||
|
||||
$("#browser-logo").on("click", () => {
|
||||
$("#browser-logo").css("animation", "logo-spin 2s ease-in");
|
||||
setTimeout(() => { $("#browser-logo").css("animation", ""); }, 2000);
|
||||
});
|
||||
|
||||
// Clock
|
||||
function clock() {
|
||||
var date = new Date();
|
||||
var hours = date.getHours();
|
||||
var minutes = date.getMinutes();
|
||||
var seconds = date.getSeconds();
|
||||
|
||||
$("#clock").text(`${conf.clockFormat === "24" ? (hours >= 10 ? hours : "0" + hours) : "0" + (hours - 12)}:${minutes >= 10 ? minutes : "0" + minutes}:${seconds >= 10 ? seconds : "0" + seconds} ${conf.clockFormat === "24" ? "" : hours < 12 ? "AM" : "PM"}`);
|
||||
setTimeout(() => { clock() }, 1000);
|
||||
}
|
||||
|
||||
clock();
|
||||
$("#greeting").text(`Good ${new Date().getHours() < 12 ? "morning" : new Date().getHours() < 18 ? "afternoon" : "evening"}, ${conf.username}.`);
|
||||
|
||||
// Weather Detection
|
||||
/* if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition((pos) => {
|
||||
$.get(`https://api.openweathermap.org/data/2.5/onecall?lat=${pos.coords.latitude}&lon=${pos.coords.longitude}&units=${conf.weather.unit}&appid=${conf.weather.apikey}`, (res) => {
|
||||
let ress = res.current;
|
||||
let unit = conf.weather.unit === "metric" ? "C" : "F";
|
||||
$("#weather").text(res.message ? `--°${unit} - ${res.message}` : `${Math.floor(ress.temp)}°${unit} - ${ress.weather[0].description}`);
|
||||
|
||||
// Rain
|
||||
if (conf.weather.rainEffect) {
|
||||
if ($("#weather").text().includes("rain")) {
|
||||
$('.rain').empty();
|
||||
|
||||
var increment = 0;
|
||||
var drops = "";
|
||||
var backDrops = "";
|
||||
|
||||
while (increment < 100) {
|
||||
var randomHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1));
|
||||
var randomFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2));
|
||||
|
||||
increment += randomFiver;
|
||||
drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randomFiver + randomFiver - 1 + 100) + '%; animation-delay: 0.' + randomHundo + 's; animation-duration: 0.5' + randomHundo + 's;"><div class="stem" style="animation-delay: 0.' + randomHundo + 's; animation-duration: 0.5' + randomHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randomHundo + 's; animation-duration: 0.5' + randomHundo + 's;"></div></div>';
|
||||
backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randomFiver + randomFiver - 1 + 100) + '%; animation-delay: 0.' + randomHundo + 's; animation-duration: 0.5' + randomHundo + 's;"><div class="stem" style="animation-delay: 0.' + randomHundo + 's; animation-duration: 0.5' + randomHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randomHundo + 's; animation-duration: 0.5' + randomHundo + 's;"></div></div>';
|
||||
}
|
||||
|
||||
$('.rain.front-row').append(drops);
|
||||
$('.rain.back-row').append(backDrops);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
} */
|
||||
|
||||
// Search
|
||||
$("#search").on("keyup", (event) => {
|
||||
if (event.key === "Enter" && !event.ctrlKey) {
|
||||
if ($("#search").val().length === 0 || !$("#search").val().trim()) { } else {
|
||||
window.location.href = conf.searchEngine.queryString.replace("%query%", $("#search").val());
|
||||
}
|
||||
} else if (event.key === "Enter" && event.ctrlKey) {
|
||||
if ($("#search").val().length === 0 || !$("#search").val().trim()) { } else {
|
||||
window.open(conf.searchEngine.queryString.replace("%query%", $("#search").val()), "_blank");
|
||||
}
|
||||
} else if (event.key === " " && event.ctrlKey) {
|
||||
if ($("#search").val().length === 0 || !$("#search").val().trim()) { } else {
|
||||
$.get(`http://localhost:8080/${$("#search").val()}`, (res) => {
|
||||
$(".search-predictions > ul").remove();
|
||||
res = res.data.slice(0, 10);
|
||||
var predictions = "<ul>";
|
||||
res.forEach(el => {
|
||||
predictions += `<a href="${conf.searchEngine.queryString.replace("%query%", el)}"><li>${el}</li></a>`;
|
||||
});
|
||||
$(".search-predictions").append(`${predictions}</ul>`);
|
||||
$(".search-predictions").show();
|
||||
});
|
||||
}
|
||||
}
|
||||
$(".search-predictions > ul").remove();
|
||||
});
|
||||
|
||||
$("#search").on("focus", () => {
|
||||
if ($(".search-predictions").children().length > 0) {
|
||||
$(".search-predictions").show();
|
||||
}
|
||||
});
|
||||
$("#search").on("focusout", () => {
|
||||
if ($(".search-predictions").children().length > 0) {
|
||||
if ($(".search-predictions").is(":hover")) {
|
||||
setTimeout(() => { $(".search-predictions").hide() }, 500);
|
||||
} else {
|
||||
$(".search-predictions").hide();
|
||||
}
|
||||
} else {
|
||||
$(".search-predictions").hide();
|
||||
}
|
||||
});
|
||||
|
||||
// Bookmarks
|
||||
var bookmarks = "";
|
||||
conf.bookmarks.forEach(el => {
|
||||
bookmarks += `<div class="card"><h3 class="title">${el.name}</h3><ul>`;
|
||||
for (const link in el.links) {
|
||||
bookmarks += `<a href="${el.links[link]}"><li>${link}</li></a>`;
|
||||
}
|
||||
bookmarks += "</ul></div>";
|
||||
});
|
||||
$(".cards-container").append(bookmarks);
|
||||
|
||||
// Settings
|
||||
$(".settings").on("click", () => {
|
||||
// ! Too lazy to make a sidebar rn
|
||||
});
|
||||
});
|
||||
44
startpage.html
Normal file
44
startpage.html
Normal file
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="shortcut icon" type="image/x-icon">
|
||||
<title>New Tab</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="root">
|
||||
<div class="rain front-row"></div>
|
||||
<div class="rain back-row"></div>
|
||||
<div class="sidebar"></div>
|
||||
<div class="header">
|
||||
<img id="browser-logo" />
|
||||
<h1 id="browser-name"></h1>
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
<h5 id="clock">--:--:--</h5>
|
||||
<h5>•</h5>
|
||||
<h5 id="weather">--°C - loading weather...</h5>
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<input type="text" id="search" placeholder="Search with DuckDuckGo" autocomplete="off" autofocus />
|
||||
<div class="search-predictions"></div>
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
<h5 id="greeting">Hello, user.</h5>
|
||||
</div>
|
||||
<div class="cards-container"></div>
|
||||
<span class="material-icons-outlined settings">settings</span>
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/2.11.0/bundled.js" referrerpolicy="no-referrer"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="./main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
318
styles.css
Normal file
318
styles.css
Normal file
@ -0,0 +1,318 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700");
|
||||
@import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined");
|
||||
|
||||
/* META */
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Jetbrains Mono", monospace;
|
||||
color: var(--color-sec);
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-bg: hsl(206, 40%, 10%);
|
||||
--color-pri: hsl(206, 40%, 8%);
|
||||
--color-sec: hsl(196, 18%, 30%);
|
||||
--color-sec-alt: hsl(196, 18%, 60%);
|
||||
|
||||
--shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 1.25vw;
|
||||
background: var(--color-bg);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.material-icons-outlined {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* ROOT CONTAINER */
|
||||
|
||||
div.root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
div.root > * {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
/* HEADER CONTAINERS */
|
||||
|
||||
div.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--color-pri);
|
||||
padding: 1rem;
|
||||
border-radius: 0.2rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
div.header > * {
|
||||
margin-left: 0.3rem;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
div.header > img {
|
||||
height: 4em;
|
||||
width: 4em;
|
||||
filter: invert(30%) sepia(17%) saturate(530%) hue-rotate(149deg) brightness(97%) contrast(94%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.subtitle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.subtitle > * {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* CARD CONTAINERS */
|
||||
|
||||
div.cards-container {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
max-width: 70vw;
|
||||
}
|
||||
|
||||
div.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-pri);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
div.card > h3.title {
|
||||
background-color: var(--color-bg);
|
||||
text-align: center;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
div.card > ul > a > li {
|
||||
font-size: 0.8em;
|
||||
list-style-type: none;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
div.card > ul > a:hover > li {
|
||||
font-weight: 700;
|
||||
color: var(--color-sec-alt);
|
||||
}
|
||||
|
||||
/* SEARCH */
|
||||
|
||||
div.search-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
box-shadow: var(--shadow);
|
||||
background-color: var(--color-pri);
|
||||
font-size: 1em;
|
||||
padding: 1em;
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
input[type="text"]::placeholder {
|
||||
color: var(--color-sec);
|
||||
opacity: 0.5;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
div.search-predictions {
|
||||
display: none;
|
||||
position: absolute;
|
||||
border-radius: 0.2rem;
|
||||
background-color: var(--color-pri);
|
||||
box-shadow: var(--shadow);
|
||||
width: 50vw;
|
||||
max-height: 50vh;
|
||||
padding: 0.5rem;
|
||||
top: 50vh;
|
||||
color: var(--color-sec);
|
||||
}
|
||||
|
||||
div.search-predictions > ul > a > li {
|
||||
list-style: none;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
div.search-predictions > ul > a:hover > li {
|
||||
font-weight: 700;
|
||||
color: var(--color-sec-alt);
|
||||
}
|
||||
|
||||
/* OTHERS */
|
||||
|
||||
span.settings {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 2em;
|
||||
cursor: pointer;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
/* RAIN */
|
||||
|
||||
.rain {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.rain.back-row {
|
||||
z-index: -2;
|
||||
bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.drop {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
width: 15px;
|
||||
height: 120px;
|
||||
pointer-events: none;
|
||||
animation: drop 0.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes drop {
|
||||
0% {
|
||||
transform: translateY(0vh);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(100vh);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100vh);
|
||||
}
|
||||
}
|
||||
|
||||
.stem {
|
||||
width: 1px;
|
||||
height: 60%;
|
||||
margin-left: 7px;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
|
||||
animation: stem 0.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes stem {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
65% {
|
||||
opacity: 1;
|
||||
}
|
||||
75% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.splat {
|
||||
width: 15px;
|
||||
height: 10px;
|
||||
border-top: 2px dotted rgba(255, 255, 255, 0.5);
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
transform: scale(0);
|
||||
animation: splat 0.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes splat {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0);
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: scale(0);
|
||||
}
|
||||
90% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* KEYFRAMES */
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes settings-forward {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes settings-backward {
|
||||
from {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* MEDIA QUERIES */
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--color-bg: hsl(48, 87%, 88%);
|
||||
--color-pri: hsl(40, 38%, 73%);
|
||||
--color-sec: hsl(20, 5%, 22%);
|
||||
--color-sec-alt: hsl(0, 0%, 16%);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user