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…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Patrick
						Patrick