Finally was able to fix header
This commit is contained in:
parent
d9c915d830
commit
978ab24728
11 changed files with 138 additions and 156 deletions
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
5/5
|
|
||||||
VS Codium
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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);
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
5/5
|
|
||||||
Audacity
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
5/5
|
|
||||||
GIMP
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
|
@ -1,8 +1,3 @@
|
||||||
5/5
|
|
||||||
OBS Studio
|
|
||||||
|
|
||||||
4/5
|
|
||||||
ShareX
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
1/5
|
|
||||||
postmarketOS
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -27,11 +27,11 @@
|
||||||
<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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue