diff --git a/css/style.css b/css/style.css index e287ae3..c2e7cb8 100644 --- a/css/style.css +++ b/css/style.css @@ -18,6 +18,11 @@ body { bottom: 0; background-color: #001; font-family: 'Montserrat', sans-serif; + --topmenu-bg: rgba(81, 75, 144, 0.4); + --popups-rgb: 34; + --popups-alpha: 0.8; + --hint-alpha: 0.4; + --popups-bg: rgba(var(--popups-rgb), var(--popups-rgb), var(--popups-rgb), var(--popups-alpha)); } img.logo { @@ -32,7 +37,7 @@ img.logo { margin: 10px; border-radius: 5px; position: fixed; - background-color: #514b9066; + background-color: var(--topmenu-bg); z-index: 998; } .top-menu { @@ -57,12 +62,11 @@ img.logo { .context-menu-like { margin: 0; padding: 0; - /*display: none;*/ opacity: 0; pointer-events: none; position: absolute; border-radius: 5px; - background-color: #222222d4; + background-color: var(--popups-bg); } .context-menu-like ul { margin: 0; @@ -142,6 +146,38 @@ span.minecraft-text { font-weight: 500; } +.hint { + position: absolute; + pointer-events: none; + top: 40%; + left: 35%; + margin: 0; + padding: 0; + background-color: rgba(var(--popups-rgb),var(--popups-rgb),var(--popups-rgb),var(--hint-alpha)); + backdrop-filter: blur(4px); + border-radius: 5px; + opacity: 0; + transition: opacity 0.4s ease-out 0s; + z-index: 1000; +} +.hint > span { + margin: 0; + padding: 5px; + color: #fff; + font-family: 'Montserrat', sans-serif; + font-size: 1.7em; +} + +#stars { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; +} .space-obj { position: fixed; text-align: center; @@ -150,8 +186,7 @@ span.minecraft-text { z-index: 997; } .space-obj > img { - /* 360 degrees in 20 minutes (instead of 23 hours) */ - animation: rotate 1200s linear 0s infinite normal; + animation: rotate 480s linear 0s infinite normal; /* unselectable */ -webkit-touch-callout: none; diff --git a/img/earth.gif b/img/earth.gif new file mode 100644 index 0000000..c954167 Binary files /dev/null and b/img/earth.gif differ diff --git a/img/moon.gif b/img/moon.gif new file mode 100644 index 0000000..4633f93 Binary files /dev/null and b/img/moon.gif differ diff --git a/img/sun.gif b/img/sun.gif new file mode 100644 index 0000000..e13458d Binary files /dev/null and b/img/sun.gif differ diff --git a/img/sun.xcf b/img/sun.xcf new file mode 100644 index 0000000..beb5793 Binary files /dev/null and b/img/sun.xcf differ diff --git a/index.html b/index.html index 210f498..a07b4b1 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - +