sageTheDm/foss_alternatives
1
0
Fork 0
forked from interstellar_development/foss_alternatives
Code Pull requests Activity

Finally was able to fix header

Browse source
This commit is contained in:
Sage The DM 2024-06-19 06:47:45 +02:00
parent d9c915d830
commit 978ab24728
11 changed files with 138 additions and 156 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
FOOS_ALT_WEBSITE/general_purpose/disk_cleaner.html
View file

@ -1,4 +1,3 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>

2
FOOS_ALT_WEBSITE/general_purpose/programming.html
View file

@ -1,5 +1,3 @@
5/5
VS Codium
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>

2
FOOS_ALT_WEBSITE/internet_tools/browsers.html
View file

@ -1,4 +1,4 @@
s<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">

245
FOOS_ALT_WEBSITE/list.css
View file

@ -21,9 +21,67 @@ body {
min-height: 100vh; 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 styles */
article { article {
margin-top: 100px; margin-top: 100px;
margin-bottom: 50px;
padding: 20px; padding: 20px;
width: 90%; width: 90%;
max-width: 800px; max-width: 800px;
@ -103,83 +161,6 @@ nav {
transform: scale(0.98); /* Slight scale down on click */ 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 */ /* Mobile Styles */
@media (max-width: 1000px) { @media (max-width: 1000px) {
.burger-menu { .burger-menu {
@ -233,59 +214,73 @@ ul.death {
} }
} }
article ul {
/* Header styles */ list-style-type: none;
header { padding: 0;
background-color: rgba(0, 0, 0, 0.7); width: 50%;
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; 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; color: white;
font-size: 1.5em; font-weight: bold;
text-shadow: red;
} }
.burger-menu { ul.fiveStar {
background: none; background: #01ab04;
border: none; }
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; color: white;
font-size: 1.5em; font-weight: bold;
cursor: pointer; text-shadow: red;
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);
} }

2
FOOS_ALT_WEBSITE/multimedia/audio_editors.html
View file

@ -1,5 +1,3 @@
5/5
Audacity
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>

2
FOOS_ALT_WEBSITE/multimedia/photo_editing.html
View file

@ -1,5 +1,3 @@
5/5
GIMP
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>

5
FOOS_ALT_WEBSITE/multimedia/recording.html
View file

@ -1,8 +1,3 @@
5/5
OBS Studio
4/5
ShareX
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>

2
FOOS_ALT_WEBSITE/operating_systems/mobile.html
View file

@ -1,5 +1,3 @@
1/5
postmarketOS
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>

2
FOOS_ALT_WEBSITE/social-media.html
View file

@ -31,7 +31,7 @@
<a class="folder-link" href="social_platforms/matrix_clients.html">Matrix Clients</a> <a class="folder-link" href="social_platforms/matrix_clients.html">Matrix Clients</a>
</li> </li>
<li class="folder-list-item"> <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>
<li class="folder-list-item"> <li class="folder-list-item">
<a class="folder-link" href="social_platforms/other_platforms.html">Other Platforms</a> <a class="folder-link" href="social_platforms/other_platforms.html">Other Platforms</a>

30
FOOS_ALT_WEBSITE/social_platforms/matrix_clients.html
View file

@ -8,30 +8,30 @@
</head> </head>
<body> <body>
<header> <header>
<div class="header-content"> <div class="header-content">
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <div class="project-name"><a href="../index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button> <button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu"> <ul class="menu">
<li><a href="../games.html">Games</a></li> <li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li> <li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li> <li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li> <li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li> <li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li> <li><a href="../social-media.html">Social media</a></li>
</ul> </ul>
</div> </div>
</header> </header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
<li>Element</li> <li>Element</li>
</ul> </ul>
<h1>4/5</h1> <h1>4/5</h1>
<ul class="fiveStar"> <ul class="fourStar">
<li>FluffyChat</li> <li>FluffyChat</li>
</ul> </ul>
<h1>3/5</h1> <h1>3/5</h1>
<ul class="fiveStar"> <ul class="threeStar">
<li>Cinny</li> <li>Cinny</li>
</ul> </ul>
</article> </article>

1
FOOS_ALT_WEBSITE/styles.css
View file

@ -80,6 +80,7 @@ header a:hover {
/* Article styles */ /* Article styles */
article { article {
margin-top: 100px; margin-top: 100px;
margin-bottom: 50px;
padding: 20px; padding: 20px;
width: 90%; width: 90%;
max-width: 800px; max-width: 800px;