silicoflare/silicoflare-website
1
0
Fork 0
mirror of https://github.com/silicoflare/silicoflare-website.git synced 2026-05-26 20:17:58 +05:30
Code Issues Packages Projects Releases Wiki Activity

added phone nav

Browse Source
This commit is contained in:
SilicoFlare
2023-04-02 14:40:20 +05:30
committed by GitHub
parent 7a3f6e43de
commit a67623f7ae
3 changed files with 104 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
index.html
View File

@@ -14,20 +14,31 @@
<body> <body>
<div id="modeSel" onclick="changeMode()" onmouseenter="hoverIn()" onmouseleave="hoverOut()"><img id="mode" src="data/dark.png" alt="dark_mode" onmouseenter="hoverIn()" onmouseleave="hoverOut()"></div> <div id="modeSel" onclick="changeMode()" onmouseenter="hoverIn()" onmouseleave="hoverOut()"><img id="mode" src="data/dark.png" alt="dark_mode" onmouseenter="hoverIn()" onmouseleave="hoverOut()"></div>
<span class="tooltip">Dark Mode</span> <span class="tooltip">Dark Mode</span>
<header> <header class="pc">
<div class="heading">SilicoFlare</div> <div class="heading">SilicoFlare</div>
<div class="menu selected">Home</div> <div class="menu selected">Home</div>
<div class="menu">Updates</div> <div class="menu">About Me</div>
<div class="menu">Creations</div> <div class="menu">Creations</div>
<div class="menu">Contact</div> <div class="menu">Contact</div>
</header> </header>
<br><br><br><br><br><br><br>
<header class="phone">
<div class="heading-ph">SilicoFlare</div>
<div class="ham" onclick="hamburger()">☰</div>
<div id="ph-links">
<div class="menu-ph selected">Home</div>
<div class="menu-ph">About Me</div>
<div class="menu-ph">Creations</div>
<div class="menu-ph">Contact</div>
</div>
</header>
<div id="overlay"> </div>
<div class="bigtext">The name is Flare...</div> <div class="bigtext">The name is Flare...</div>
<div class="bigtext"><span class="si">Silico</span><span class="f">Flare</span></div> <div class="bigtext"><span class="si">Silico</span><span class="f">Flare</span></div>
<br><br><br> <br><br><br>
<main class="centred"> <main class="centred">
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!<br><br> 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...
</main> </main>
</body> </body>
</html> </html>

79
silicoflare.css
View File

@@ -59,23 +59,70 @@ header {
align-items: center; 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 { .heading {
font-family: SilicoHand; font-family: SilicoHand;
display: inline-block; display: inline-block;
padding: 30px 400px 30px 30px; padding: 1.95vw 26vw 1.95vw 1.95vw;
font-size: 50px; font-size: 3.25vw;
color: white; color: white;
} }
.menu { .menu {
font-family: SilicoHand; font-family: SilicoHand;
padding: 20px; padding: 1.3vw;
margin: 5px; margin: 5px;
font-size: 20px; font-size: 1.3vw;
color: white; color: white;
display: inline; display: inline;
float: right; float: right;
min-width: 150px; min-width: 9.76vw;
transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out;
text-align: center; text-align: center;
} }
@@ -88,6 +135,19 @@ header {
background-color: #f0f; 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 { .bigtext {
font-size: 7vw; font-size: 7vw;
text-align: center; text-align: center;
@@ -104,6 +164,7 @@ header {
} }
body { body {
padding-top: 10vw;
transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out;
transition: color 0.5s ease-in-out; transition: color 0.5s ease-in-out;
} }
@@ -117,6 +178,14 @@ main {
main { main {
font-size: 17.5px; font-size: 17.5px;
} }
.pc {
display: none;
}
.phone {
display: block;
}
} }
.centred { .centred {

15
silicoflare.js
View File

@@ -1,4 +1,5 @@
var current = "dark"; var current = "dark";
var isActive = false;
function changeMode() { function changeMode() {
if (current == 'dark') { if (current == 'dark') {
@@ -17,7 +18,6 @@ function changeMode() {
} }
} }
function hoverIn() { function hoverIn() {
document.getElementById("modeSel").style.backgroundColor = "rgba(53, 53, 53, 1)"; document.getElementById("modeSel").style.backgroundColor = "rgba(53, 53, 53, 1)";
document.getElementById("mode").style.opacity = 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("modeSel").style.backgroundColor = "rgba(53, 53, 53, 0.5)";
document.getElementById("mode").style.opacity = 0.5; document.getElementById("mode").style.opacity = 0.5;
document.querySelector(".tooltip").style.display = "none"; 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;
}
} }