Skip to content

Commit

Permalink
Fixing styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@coffandro
coffandro committed Mar 8, 2024
1 parent af1bf62 commit 43f7648
Show file tree
Hide file tree
Showing 6 changed files with 153 additions and 119 deletions.
16 changes: 11 additions & 5 deletions CV.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,18 @@ <h2 class="en">Contact</h2>
<h2 class="da">Kontakt</h2>
<hr class="Seperator">
<br>
<p class="en"><b class="en">Phone number:</b></p>
<p class="da"><b class="da">Telefon number:</b></p>
<p>+45 81 71 03 02</p>
<li><a href="tel:81710302">
<span class="en"><b class="en">Phone number:</b></span>
<span class="da"><b class="da">Telefon number:</b></span>
<span>+45 81 71 03 02</span>
</a></li>
<br>
<br>
<li><a href="mailto:[email protected]">
<span><b>EMAIL:</b></span>
<span>[email protected]</span>
</a></li>
<br>
<p><b>EMAIL:</b></p>
<p>[email protected]</p>
</div>

<div class="CVGrid">
Expand Down
50 changes: 25 additions & 25 deletions css/mnavbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@
}

.topnav #Home {
text-align: center;
padding: 6px 10px 10px 10px;
margin: 0;
font-size: calc(var(--MFontSize) + 35px);
text-align: center;
padding: 6px 10px 10px 10px;
margin: 0;
font-size: calc(var(--MPFontSize) + 35px);
}

.topnav #Rose {
position: absolute;
left: 0;
padding: 10px 0 0 10px;
width: 95px;
position: absolute;
left: 0;
padding: 10px 0 0 10px;
width: 95px;
}

/* Style navigation menu links */
Expand All @@ -36,33 +36,33 @@
font-size: 45px
}
.topnav details {
font-size: 45px;
padding: 14px 16px;
border: 0;
border-radius: 0;
border-top: 3px;
border-style: solid;
margin: 0;
font-size: 45px;
padding: 14px 16px;
border: 0;
border-radius: 0;
border-top: 3px;
border-style: solid;
margin: 0;
}
.topnav #Art {
border: 0;
border-top: 3px;
border-style: solid;
border: 0;
border-top: 3px;
border-style: solid;
}

.topnav details summary i.arrow {
align-items: center;
transition: all 0.3s;
margin-right: 10px;
margin-left: auto;
align-items: center;
transition: all 0.3s;
margin-right: 10px;
margin-left: auto;
}
.topnav details[open] summary i {
transform: rotate(180deg);
transform: rotate(180deg);
}

/* Style the hamburger menu */
.topnav a.icon {
font-size: calc(var(--MFontSize) + 35px);
font-size: calc(var(--MPFontSize) + 35px);
border: 0;
border-left: 3px;
border-bottom: 3px;
Expand All @@ -78,7 +78,7 @@
top: 0;
}
.topnav a.icon.lang-modebtn {
right: calc(var(--MFontSize) + 55px);
right: calc(var(--MPFontSize) + 55px);
top: 0;
border-radius: 0 0 0 5px;
}
Expand Down
6 changes: 3 additions & 3 deletions css/navbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,11 @@ nav .dropdown-content i {
}

nav #LangButton {
width: calc(var(--FontSize) + 10px);
width: calc(var(--PFontSize) + 10px);
}

nav .LangImg {
width: var(--FontSize);
width: var(--PFontSize);
}

nav .dropdown:hover .dropdown-content {
Expand Down Expand Up @@ -117,7 +117,7 @@ nav #About-Content {
height: 52px;
width: 52px;
color: var(--main-color);
font-size: var(--FontSize);
font-size: var(--PFontSize);
transition: all .1s ease-out;
}
.nav-btn:hover {
Expand Down
6 changes: 3 additions & 3 deletions css/stylesheet.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ h3 {
box-sizing: border-box;
}
.grid i {
font-size: 500%;
font-size: var(--PFontSize);
}
.art img {
width: 100%;
Expand Down Expand Up @@ -164,7 +164,7 @@ button {
}
.mobile a, .mobile p{
padding: 5px;
font-size: var(--MFontSize);
font-size: var(--MPFontSize);
}
.mobile h1, .mobile h2{
padding: 2px;
Expand Down Expand Up @@ -219,7 +219,7 @@ details:hover {

details>summary i.icon {
align-items: center;
font-size: calc(var(--FontSize) * 3.5);
font-size: calc(var(--PFontSize) * 3.5);
transition: all 0.3s;
margin-right: 10px;
margin-left: auto;
Expand Down
145 changes: 81 additions & 64 deletions mobile-navbar.html
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,105 @@
<nav class="topnav">
<a href="/" id="Home"><img id="Rose" src="/Images/Rose.svg"><br></a>
<div id="myLinks">
<details id="Coding">
<summary>
<i class="fa fa-code navIcon"></i>
<b>Coding</b>
<i class="fa fa-caret-down arrow"></i>
</summary>
<a href="https://github.com/coffandro/coffandro.github.io">This websites source <i class="fa-brands fa-github"></i></a>
<a href="https://github.com/coffandro">Github <i class="fa-brands fa-github"></i></a>
</details>
<details id="Projects">
<summary>
<i class="fa fa-box navIcon"></i>
<b>Projects</b>
<i class="fa fa-caret-down arrow"></i>
</summary>
<a href="/Gallery/gallery">Gallery <i class="fa-solid fa-image"></i></a>
<a href="/games">Games I've made <i class="fa-solid fa-gamepad"></i></a>
<a href="https://fallout4london.com/">Fallout: London Level Designer <i class="fa-solid fa-gamepad"></i></a>
</details>
<a id="Art" href="/art"><i class="fa fa-image navIcon"></i><b>Art</b></a>
<details id="About">
<summary>
<i class="fa fa-address-card navIcon"></i>
<b>About</b>
<i class="fa fa-caret-down arrow"></i>
</summary>
<a href="/about">About Me <i class="fa fa-address-card"></i></a>
<a href="/wishList">Wish List <i class="fa-solid fa-list"></i></a>
<a href="/about#Socials">Socials <i class="fa-solid fa-handshake"></i></a>
<a href="CV.html">My CV <i class="fa-solid fa-file"></i></a>
</details>

</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" id="Hamburger" class="icon" onclick="Menu()">
<i class="fa-solid fa-bars"></i>
</a>
<a href="/" id="Home"><img id="Rose" src="/Images/Rose.svg"><br></a>
<div id="myLinks">
<details id="Coding">
<summary>
<i class="fa fa-code navIcon"></i>
<b>
<span class="en">Coding</span>
<span class="da">Kodning</span>
</b>
<i class="fa fa-caret-down arrow"></i>
</summary>
<a class="en" href="https://github.com/coffandro/coffandro.github.io">This websites source <i class="fa-brands fa-github"></i></a>
<a class="da" href="https://github.com/coffandro/coffandro.github.io">Denne hjemmeside's kode <i class="fa-brands fa-github"></i></a>
<a href="https://github.com/coffandro">Github <i class="fa-brands fa-github"></i></a>
</details>
<details id="Projects">
<summary>
<i class="fa fa-box navIcon"></i>
<b>
<span class="en">Projects</span>
<span class="da">Projekter</span>
</b>
<i class="fa fa-caret-down arrow"></i>
</summary>
<a class="en" href="/Gallery/gallery">Gallery <i class="fa-solid fa-image"></i></a>
<a class="en" href="/games">Games <i class="fa-solid fa-gamepad"></i></a>
<a class="da" href="/Gallery/gallery">Galleri <i class="fa-solid fa-image"></i></a>
<a class="da" href="/games">Spil <i class="fa-solid fa-gamepad"></i></a>
<a href="https://fallout4london.com/">Fallout: London Level Designer <i class="fa-solid fa-gamepad"></i></a>
</details>
<a class="en" id="Art" href="/art"><i class="fa fa-image navIcon"></i><b>Art</b></a>
<a class="da" id="Art" href="/art"><i class="fa fa-image navIcon"></i><b>Kunst</b></a>
<details id="About">
<summary>
<i class="fa fa-address-card navIcon"></i>
<b>
<span class="en">About Me</span>
<span class="da">Om mig</span>
</b>
<i class="fa fa-caret-down arrow"></i>
</summary>
<a class="en" href="/about">About Me <i class="fa-solid fa-address-card"></i></a>
<a class="en" href="/wishList">Wish List <i class="fa-solid fa-list"></i></a>
<a class="en" href="/about#Socials">Socials <i class="fa-solid fa-handshake"></i></a>
<a class="en" href="CV.html">My CV <i class="fa-solid fa-file"></i></a>
<a class="da" href="/about">Om mig <i class="fa-solid fa-address-card"></i></a>
<a class="da" href="/wishList">Ønske liste <i class="fa-solid fa-list"></i></a>
<a class="da" href="/about#Socials">Sociale <i class="fa-solid fa-handshake"></i></a>
<a class="da" href="CV.html">Mit CV <i class="fa-solid fa-file"></i></a>
</details>

<!-- Language switch button -->
<a class="lang-modebtn icon" onclick="Langswitch()">
<i class="fa-solid fa-globe"></i>
</a>
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" id="Hamburger" class="icon" onclick="Menu()">
<i class="fa-solid fa-bars"></i>
</a>

<!-- Language switch button -->
<a class="lang-modebtn icon" onclick="Langswitch()">
<i class="fa-solid fa-globe"></i>
</a>
</nav>

<script>
/* Toggle between showing and hiding the navigation menu links when the user clicks on the
hamburger menu / bar icon */
function Menu() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}

// Select the theme preference from localStorage
const currentLanguage = localStorage.getItem("Language");

// If the current Language in localStorage is "Danish"...
if (currentLanguage == "Danish") {
document.body.classList.add("Lang-DA");
document.body.classList.add("Lang-DA");
}
else {
document.body.classList.add("Lang-EN");
document.body.classList.add("Lang-EN");
}

// The Language switch function
function Langswitch() {
// Toggle the .Lang-XX classes on each click
document.body.classList.toggle("Lang-DA");
document.body.classList.toggle("Lang-EN");
// Toggle the .Lang-XX classes on each click
document.body.classList.toggle("Lang-DA");
document.body.classList.toggle("Lang-EN");

let Language = "English";
if (document.body.classList.contains("Lang-DA")) {
Language = "Danish";

let Language = "English";
if (document.body.classList.contains("Lang-DA")) {
Language = "Danish";

}
else {
Language = "English";
}
// Then save the choice in localStorage
localStorage.setItem("Language", Language);
}
else {
Language = "English";
}
// Then save the choice in localStorage
localStorage.setItem("Language", Language);
};
</script>
Loading

0 comments on commit 43f7648

Please sign in to comment.