Finally was able to fix header
This commit is contained in:
Sage The DM
parent
d9c915d830
commit
978ab24728
11 changed files with 138 additions and 156 deletions
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
5/5
|
||||
VS Codium
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
s<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
|
|
|||
|
|
@ -21,9 +21,67 @@ body {
|
|||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Header styles */
|
||||
header {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
text-decoration: none; /* Ensure no underline */
|
||||
}
|
||||
|
||||
.burger-menu {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
header li {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
header a {
|
||||
color: white;
|
||||
text-decoration: none; /* Ensure no underline */
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
header a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Article styles */
|
||||
article {
|
||||
margin-top: 100px;
|
||||
margin-bottom: 50px;
|
||||
padding: 20px;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
|
|
@ -103,83 +161,6 @@ nav {
|
|||
transform: scale(0.98); /* Slight scale down on click */
|
||||
}
|
||||
|
||||
/* Styles for the game lists */
|
||||
h2 {
|
||||
margin-top: 40px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
article ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ul.fully-free {
|
||||
border: 2px solid #4CAF50;
|
||||
}
|
||||
|
||||
ul.non-free-assets {
|
||||
border: 2px solid #FF5722;
|
||||
}
|
||||
|
||||
ul li {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
ul.fully-free li {
|
||||
background-color: #e8f5e9;
|
||||
}
|
||||
|
||||
ul.non-free-assets li {
|
||||
background-color: #ffebee;
|
||||
}
|
||||
|
||||
.fiveStar, .fourStar, .threeStar, .twoStar, .oneStar, .death{
|
||||
margin-bottom: 1em;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-shadow: red;
|
||||
}
|
||||
|
||||
ul.fiveStar {
|
||||
background: #01ab04;
|
||||
}
|
||||
|
||||
ul.fourStar {
|
||||
background: #59ff00;
|
||||
}
|
||||
|
||||
ul.threeStar {
|
||||
background: rgb(226, 226, 0);
|
||||
}
|
||||
|
||||
ul.twoStar {
|
||||
background: #ff9d00;
|
||||
}
|
||||
|
||||
ul.oneStar {
|
||||
background: #ff0000;
|
||||
}
|
||||
|
||||
ul.death {
|
||||
background: #920e0e;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-shadow: red;
|
||||
}
|
||||
|
||||
/* Mobile Styles */
|
||||
@media (max-width: 1000px) {
|
||||
.burger-menu {
|
||||
|
|
@ -233,59 +214,73 @@ ul.death {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/* Header styles */
|
||||
header {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
article ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
ul.fully-free {
|
||||
border: 2px solid #4CAF50;
|
||||
}
|
||||
|
||||
ul.non-free-assets {
|
||||
border: 2px solid #FF5722;
|
||||
}
|
||||
|
||||
article ul li {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
ul.fully-free li {
|
||||
background-color: #e8f5e9;
|
||||
}
|
||||
|
||||
ul.non-free-assets li {
|
||||
background-color: #ffebee;
|
||||
}
|
||||
|
||||
.fiveStar, .fourStar, .threeStar, .twoStar, .oneStar, .death{
|
||||
margin-bottom: 1em;
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
text-shadow: red;
|
||||
}
|
||||
|
||||
.burger-menu {
|
||||
background: none;
|
||||
border: none;
|
||||
ul.fiveStar {
|
||||
background: #01ab04;
|
||||
}
|
||||
|
||||
ul.fourStar {
|
||||
background: #59ff00;
|
||||
}
|
||||
|
||||
ul.threeStar {
|
||||
background: rgb(226, 226, 0);
|
||||
}
|
||||
|
||||
ul.twoStar {
|
||||
background: #ff9d00;
|
||||
}
|
||||
|
||||
ul.oneStar {
|
||||
background: #ff0000;
|
||||
}
|
||||
|
||||
ul.death {
|
||||
background: #920e0e;
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
header li {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
header a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
header a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
font-weight: bold;
|
||||
text-shadow: red;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
5/5
|
||||
Audacity
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
5/5
|
||||
GIMP
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,3 @@
|
|||
5/5
|
||||
OBS Studio
|
||||
|
||||
4/5
|
||||
ShareX
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
1/5
|
||||
postmarketOS
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<a class="folder-link" href="social_platforms/matrix_clients.html">Matrix Clients</a>
|
||||
</li>
|
||||
<li class="folder-list-item">
|
||||
<a class="folder-link" href="social_platforms/signal_clients.html">signal clients</a>
|
||||
<a class="folder-link" href="social_platforms/signal_clients.html">Signal Clients</a>
|
||||
</li>
|
||||
<li class="folder-list-item">
|
||||
<a class="folder-link" href="social_platforms/other_platforms.html">Other Platforms</a>
|
||||
|
|
|
|||
|
|
@ -8,30 +8,30 @@
|
|||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-content">
|
||||
<div class="project-name"><a href="../index.html">FOSS alternative</a></div>
|
||||
<button class="burger-menu" onclick="toggleMenu()">☰</button>
|
||||
<ul class="menu">
|
||||
<li><a href="../games.html">Games</a></li>
|
||||
<li><a href="../general.html">General</a></li>
|
||||
<li><a href="../tools.html">Tools</a></li>
|
||||
<li><a href="../media.html">Multimedia</a></li>
|
||||
<li><a href="../os.html">OS</a></li>
|
||||
<li><a href="../social-media.html">Social media</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="header-content">
|
||||
<div class="project-name"><a href="../index.html">FOSS alternative</a></div>
|
||||
<button class="burger-menu" onclick="toggleMenu()">☰</button>
|
||||
<ul class="menu">
|
||||
<li><a href="../games.html">Games</a></li>
|
||||
<li><a href="../general.html">General</a></li>
|
||||
<li><a href="../tools.html">Tools</a></li>
|
||||
<li><a href="../media.html">Multimedia</a></li>
|
||||
<li><a href="../os.html">OS</a></li>
|
||||
<li><a href="../social-media.html">Social media</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<article>
|
||||
<h1>5/5</h1>
|
||||
<ul class="fiveStar">
|
||||
<li>Element</li>
|
||||
</ul>
|
||||
<h1>4/5</h1>
|
||||
<ul class="fiveStar">
|
||||
<ul class="fourStar">
|
||||
<li>FluffyChat</li>
|
||||
</ul>
|
||||
<h1>3/5</h1>
|
||||
<ul class="fiveStar">
|
||||
<ul class="threeStar">
|
||||
<li>Cinny</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@ header a:hover {
|
|||
/* Article styles */
|
||||
article {
|
||||
margin-top: 100px;
|
||||
margin-bottom: 50px;
|
||||
padding: 20px;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue