FlaskWebProject/FlaskWebProject/static/style.css

@@ -61,6 +61,7 @@ body {
 	font-size: 15px;
 	z-index: -2;
 	position: relative;
+	margin-top: 60px;
 	/* box-shadow: 0px -5px 10px 2px rgba(0, 0, 0, 0.347); */
 }
 
@@ -130,7 +131,7 @@ header button {
 
 	padding: 2.3rem 1rem;
 	height: 1.5rem;
-	position: sticky;
+	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
@@ -182,7 +183,7 @@ header button {
 	align-items: center;
 	text-decoration: none;
 	border-radius: var(--border-radius);
-	padding: 10px 20px;
+	padding: 10px;
 	height: 100%;
 	transition: 100ms ease;
 	position: relative;
@@ -293,21 +294,30 @@ header button {
 	cursor: pointer;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1090px) {
+	/* .base-header .navbar:not(:has(.show))
+	{
+		margin-bottom: 400px;
+	} */
 	.nav-links {
-		display: none;
-		flex-direction: column;
-		background-color: var(--barca-blue);
 		position: absolute;
-		top: 2.5rem;
+		flex-direction: column;
-		right: 0rem;
+		top: 57px;
+		right: 40px;
 		padding: 0rem;
 		gap: 0;
-		width: 200px;
+		height: auto;
+		backdrop-filter: blur(4px);
+		width: 20%;
+		justify-content: center;
+		box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.105);
 	}
 
 	.nav-links li {
 		width: 100%;
+		margin: 0;
+		display: flex;
+		justify-content: center;
 	}
 
 	.nav-links li a,
@@ -320,16 +330,50 @@ header button {
 		border-radius: 0;
 		/* brak zaokrągleń w mobilnym menu */
 	}
+	.nav-links li button
+	{
+		background-color: none;
+		width: 45px;
+		border-radius: 50%;
+	}
+	.nav-links li button::before,.nav-links li button::after
+	{
+		background-color: none
+		;
+	}
+	.nav-links li button:hover
+	{
+		transform: none;
+	}
 
 	.nav-links.show {
-		display: flex;
+		display: none;
 	}
 
 	.hamburger {
 		display: block;
 	}
 }
-
+@media (max-width: 1000px)
+{
+	.header-content
+	{
+		flex-direction: column;
+	}
+	.header-content .profile-image
+	{
+		display: flex;
+		justify-content: center;
+		width: 100%;
+	}
+	.header-content .profile-image img{
+		width: 100%;
+	}
+	.about-section-image
+	{
+		display: none;
+	}
+}
 
 
 
@@ -608,11 +652,12 @@ body.poland-mode .hamburger {
 }
 
 @media (max-width: 768px) {
-	body.poland-mode .nav-links {
+	/* body.poland-mode .nav-links {
 		background-color: var(--polska-red);
 		/*Ale oczopląs*/
+	} */
 }
-}
+
 
 body.poland-mode .section-stats {
 	background: linear-gradient(to bottom, #bd4148, #dc1414);

FlaskWebProject/FlaskWebProject/templates/base.html

@@ -27,9 +27,6 @@
                 <li><a href="/representation">Reprezentacja</a></li>
                 <li><a href="/trophies">Trofea</a></li>
                 <li><a href="/compare">Porównaj</a></li>
-                
-
-
                 <li><button id="theme-toggle" onclick="toggleTheme()"></button></li>
             </ul>
             <div class="hamburger">☰</div>