Merge pull request 'Header should be fixed' (#4) from sageTheDm/foss_alternatives:main into pages
Reviewed-on: https://codeberg.org/Patrick_Pluto/foss_alternatives/pulls/4
This commit is contained in:
commit
3066c57680
2 changed files with 19 additions and 16 deletions
24
list.css
24
list.css
|
@ -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
11
styles.css
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue