From a67623f7aeddc542663c175c7d53b7e4b090e1ef Mon Sep 17 00:00:00 2001 From: SilicoFlare <100959814+SilicoFlare@users.noreply.github.com> Date: Sun, 2 Apr 2023 14:40:20 +0530 Subject: [PATCH] added phone nav --- index.html | 21 +++++++++---- silicoflare.css | 79 +++++++++++++++++++++++++++++++++++++++++++++---- silicoflare.js | 15 +++++++++- 3 files changed, 104 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index ecf90fb..fe24bf8 100644 --- a/index.html +++ b/index.html @@ -14,20 +14,31 @@
dark_mode
Dark Mode -
+
SilicoFlare
Home
-
Updates
+
About Me
Creations
Contact
-






+ +
+
SilicoFlare
+
☰
+ +
+ +
The name is Flare...
SilicoFlare



- Welcome to my world! You would already have seen a significance difference in the looks of my homepage. Yes! I am redesigning it with all the skills I'm learning. Only the homepage is changed, but I'll be changing other pages too! Since other pages are under construction, they have been temporarily removed from my website, so I'm sorry for any inconveniences!

- Also, mobile users will face inconveniences... + Welcome to my world! You would already have seen a significance difference in the looks of my homepage. Yes! I am redesigning it with all the skills I'm learning. Only the homepage is changed, but I'll be changing other pages too! Since other pages are under construction, they have been temporarily removed from my website, so I'm sorry for any inconveniences!
\ No newline at end of file diff --git a/silicoflare.css b/silicoflare.css index 68bf844..6e760f6 100644 --- a/silicoflare.css +++ b/silicoflare.css @@ -59,23 +59,70 @@ header { align-items: center; } +.phone { + display: none; + font-family: SilicoHand; + padding: 1.95vw 26vw 1.95vw 1.95vw; + font-size: 5vw; + color: white; +} + +.heading-ph { + font-family: SilicoHand; + padding: 0.5vw; + font-size: 5vw; + color: white; +} + +.ham { + font-size: 5vw; + font-weight: bolder; + position: fixed; + right: 0.5%; + top: -0.5%; + padding: 1.5%; + display: inline; +} + +#ph-links { + display: none; + margin-top: 2vw; + background-color: rgb(40, 40, 40); + width: 100%; + position: fixed; + left: 0%; + padding: 1.5vw; + transition: all 0.2s linear; +} + +.menu-ph { + padding: 1vw; + font-size: 3vw; + margin-right: 3vw; + transition: all 0.2s linear; +} + +.menu-ph:hover { + background-color: #f0f; +} + .heading { font-family: SilicoHand; display: inline-block; - padding: 30px 400px 30px 30px; - font-size: 50px; + padding: 1.95vw 26vw 1.95vw 1.95vw; + font-size: 3.25vw; color: white; } .menu { font-family: SilicoHand; - padding: 20px; + padding: 1.3vw; margin: 5px; - font-size: 20px; + font-size: 1.3vw; color: white; display: inline; float: right; - min-width: 150px; + min-width: 9.76vw; transition: background-color 0.2s ease-in-out; text-align: center; } @@ -88,6 +135,19 @@ header { background-color: #f0f; } +#overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(15, 15, 15, 0.7); + width: 100%; + height: 100%; + z-index: 900; +} + .bigtext { font-size: 7vw; text-align: center; @@ -104,6 +164,7 @@ header { } body { + padding-top: 10vw; transition: background-color 0.2s ease-in-out; transition: color 0.5s ease-in-out; } @@ -117,6 +178,14 @@ main { main { font-size: 17.5px; } + + .pc { + display: none; + } + + .phone { + display: block; + } } .centred { diff --git a/silicoflare.js b/silicoflare.js index e29afe6..e3a366a 100644 --- a/silicoflare.js +++ b/silicoflare.js @@ -1,4 +1,5 @@ var current = "dark"; +var isActive = false; function changeMode() { if (current == 'dark') { @@ -17,7 +18,6 @@ function changeMode() { } } - function hoverIn() { document.getElementById("modeSel").style.backgroundColor = "rgba(53, 53, 53, 1)"; document.getElementById("mode").style.opacity = 1; @@ -28,4 +28,17 @@ function hoverOut() { document.getElementById("modeSel").style.backgroundColor = "rgba(53, 53, 53, 0.5)"; document.getElementById("mode").style.opacity = 0.5; document.querySelector(".tooltip").style.display = "none"; +} + +function hamburger() { + if (!isActive) { + document.getElementById("ph-links").style.display = "block"; + document.getElementById("overlay").style.display = "block"; + isActive = true; + } + else { + document.getElementById("ph-links").style.display = "none"; + document.getElementById("overlay").style.display = "none"; + isActive = false; + } } \ No newline at end of file