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

fixed the header problem

Browse source
This commit is contained in:
Sage The DM 2024-06-24 17:53:58 +02:00
parent 24810c5c40
commit 2055990ba9
2 changed files with 19 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
list.css
View file

@ -21,7 +21,7 @@ body {
/* Header styles */ /* Header styles */
header { header {
background-color: #2c3e50; background-color: #2c3e50;
padding: 15px 0; padding: 10px 0; /* Smaller padding */
width: 100%; width: 100%;
position: fixed; position: fixed;
top: 0; top: 0;
@ -34,14 +34,14 @@ header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 1400px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding: 0 20px;
} }
.project-name { .project-name {
color: #ffffff; color: #ffffff;
font-size: 1.8em; font-size: 1.5em; /* Smaller font size */
font-weight: bold; font-weight: bold;
} }
@ -49,7 +49,7 @@ header {
background: none; background: none;
border: none; border: none;
color: #ffffff; color: #ffffff;
font-size: 1.8em; font-size: 1.5em; /* Smaller font size */
cursor: pointer; cursor: pointer;
display: none; display: none;
} }
@ -64,13 +64,13 @@ header {
} }
header li { header li {
margin: 15px; margin: 10px; /* Smaller margin */
} }
header a { header a {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
padding: 10px; padding: 8px; /* Smaller padding */
border-radius: 5px; border-radius: 5px;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
@ -81,7 +81,7 @@ header a:hover {
/* Article styles */ /* Article styles */
article { article {
margin-top: 8em; margin-top: 6em; /* Adjusted top margin */
margin-bottom: 50px; margin-bottom: 50px;
padding: 20px; padding: 20px;
width: 90%; width: 90%;
@ -166,9 +166,10 @@ nav {
} }
/* Mobile Styles */ /* Mobile Styles */
@media (max-width: 1400px) { @media (max-width: 4000px) {
.burger-menu { .burger-menu {
display: block; display: block;
padding: 0;
} }
.menu { .menu {
@ -176,7 +177,7 @@ nav {
flex-direction: column; flex-direction: column;
background-color: #2c3e50; background-color: #2c3e50;
position: absolute; position: absolute;
top: 100%; /* Adjusted position */ top: 100%;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 999; z-index: 999;
@ -189,7 +190,7 @@ nav {
} }
header { header {
padding: 10px 0; padding: 0; /* Further reduce the padding */
height: auto; height: auto;
} }
@ -197,7 +198,7 @@ nav {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 10px; padding: 0 20px 0 20px;
} }
.project-name { .project-name {
@ -222,6 +223,7 @@ nav {
} }
} }
/* Additional styles for article */
article ul { article ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;

11
styles.css
View file

@ -34,7 +34,7 @@ header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 1400px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding: 0 20px;
} }
@ -166,9 +166,10 @@ nav {
} }
/* Mobile Styles */ /* Mobile Styles */
@media (max-width: 1400px) { @media (max-width: 4000px) {
.burger-menu { .burger-menu {
display: block; display: block;
padding: 0;
} }
.menu { .menu {
@ -176,7 +177,7 @@ nav {
flex-direction: column; flex-direction: column;
background-color: #2c3e50; background-color: #2c3e50;
position: absolute; position: absolute;
top: 100%; /* Adjusted position */ top: 100%;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 999; z-index: 999;
@ -189,7 +190,7 @@ nav {
} }
header { header {
padding: 10px 0; padding: 0; /* Further reduce the padding */
height: auto; height: auto;
} }
@ -197,7 +198,7 @@ nav {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 10px; padding: 0 20px 0 20px;
} }
.project-name { .project-name {