From 157ba749c00422169e127149913d4f330e816f29 Mon Sep 17 00:00:00 2001 From: Nihaal Sharma Date: Sun, 4 Jun 2023 15:37:29 +0100 Subject: [PATCH] VERY GOOD VERY NICE Bar changes: + each item takes up the same amnt of space + hover: item grows, others shrink + hover: text size increases + if a link, bg color + text color inverts + if not link, bg color is sligtly darker/ligher + if not link clicked, message shows + neon443 is font-size 30 html changes: + removed ids for barItems, unnesccesary + spaced out baritem code to make more readable css changes: + added notlink toast js changes: + added not link toast --- index.html | 13 ++++----- script.js | 12 ++++++++- style.css | 77 +++++++++++++++++++++++++++++++++++++++++++++--------- 3 files changed, 82 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 7de4677..18c6713 100644 --- a/index.html +++ b/index.html @@ -5,20 +5,21 @@ neon443 - +
-

neon443

- - -

Text

- +

neon443

+
dont click
+
Github
+

Text

+
Contact
+
Not a link!

My Projects
├─ eaglercraft152 - Minecraft 1.5.2
diff --git a/script.js b/script.js index db42934..24fe0a3 100644 --- a/script.js +++ b/script.js @@ -1,3 +1,13 @@ function showAlert() { - alert("Hey! this is under development. i told u not to click."); + alert("Hey! this is under development. i told u not to click."); +} + +function notLink() { + var notLinkToast = document.getElementById("notLinkToast"); + notLinkToast.className = "show"; + setTimeout( + function() { + x.className = x.className.replace("show", ""); + } + , 3000); } \ No newline at end of file diff --git a/style.css b/style.css index b1a8fc0..b2111dc 100644 --- a/style.css +++ b/style.css @@ -48,7 +48,14 @@ .contentPush{ height: 65px; } - +.notLink { + position: fixed; + top: 47.5px; + width: 100%; + border-radius: 0% 0% 15% 15%; + text-align: center; + font-size: 0px; +} /* Bar styling*/ .bar { width: 100%; @@ -75,16 +82,24 @@ display: block; color: #222; text-decoration: none; - font-size: 16px; - padding: 12px; + font-size: 20px; + padding: 9.20px 12px; } .barItem h1 { - + font-size: 30px; + padding-top: 2.5px; + padding-bottom: 2.5px; } .barItem:hover { flex: 1.5; background-color: #eee; } + .barItem *:hover { + font-size: 30px; + font-weight: 600; + padding-top: 2.5px; + padding-bottom: 2.5px; + } .barItem a:hover { background-color: #111; color: #eee; @@ -98,16 +113,52 @@ -moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25); } - .bar:has(a:hover) .barItem { + html:has(.barItem a:hover) .notLink { + font-size: 16px; } - @keyframes wiggleRainbow{ - 0% {background-color:red;} - 25% {background-color:yellow;} - 50% {background-color:blue;} - 75% {background-color:green;} - 100% {background-color:red;} - } -/* Bar styling*/ + /* not Link toast*/ + #notLinkToast { + visibility: hidden; + min-width: 250px; + margin-left: -125px; + background-color: #333; + color: #fff; + text-align: center; + border-radius: 2px; + padding: 16px; + position: fixed; + z-index: 1; + left: 50%; + top: 30px; + font-size: 17px; + } + + #notLinkToast.show { + visibility: visible; + -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; + animation: fadein 0.5s, fadeout 0.5s 2.5s; + } + @-webkit-keyframes fadein { + from {top: 0; opacity: 0;} + to {top: 30px; opacity: 1;} + } + + @keyframes fadein { + from {top: 0; opacity: 0;} + to {top: 30px; opacity: 1;} + } + + @-webkit-keyframes fadeout { + from {top: 30px; opacity: 1;} + to {top: 0; opacity: 0;} + } + + @keyframes fadeout { + from {top: 30px; opacity: 1;} + to {top: 0; opacity: 0;} + } + /* not Link toast */ +/* Bar styling */ @media (prefers-color-scheme: dark) { body {