mobile changes

static/assets/styles.css

@@ -23,7 +23,7 @@ body {
 	display: flex;
 	background-color: white;
 	width: fit-content;
-	padding: 10px;
+	height: 100px;
 	padding-left: 20px;
 	padding-right: 20px;
 	align-items: center;
@@ -46,7 +46,7 @@ body {
 	width: 100%;
 	height: 100px;
 	gap: 0px;
-	margin-bottom: 10px;
+	/* margin-bottom: 10px; */
 	/* position: fixed; */
 	z-index: 100;
 }
@@ -59,7 +59,8 @@ body {
 	font-size: 25px;
 	width: 100%;
 	background-color: black;
-	padding:20px;
+	height: 100px;
+	padding-left: 20px;
 	align-items: center;
 }
 
@@ -91,7 +92,7 @@ body {
 
 .content {
 	width: 100%;
-	position: fixed;
+	/* position: fixed; */
 }
 
 .content-cont {
@@ -99,7 +100,7 @@ body {
 	overflow-x: hidden;
 	height: calc(100vh - 100px);
 	margin-left: 40px;
-	margin-top: 100px;
+	/* margin-top: 100px; */
 	/* margin-top: 100px; */
 	/* margin-bottom: 100px; */
 	/* margin-right: 40px; */
@@ -267,10 +268,13 @@ body {
 
 
 .section-group {
+	
+}
+
+.section-object {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
-	padding-bottom: 200px;
 	align-items: center;
 }
 
@@ -313,7 +317,7 @@ body {
 .section-title {
 	display: flex;
 	margin-bottom: 40px;
-	padding-top: 160px;
+	padding-top: 80px;
 	align-items: center;
 }
 
@@ -382,6 +386,7 @@ hr {
 
 
 
+
 /* Keyframes for the spin animation */
 @keyframes spin {
 	0% { transform: rotate(0deg); } /* Initial rotation */
@@ -405,3 +410,95 @@ hr {
        transform: rotate(0deg) scaleX(100%);
     }
   }
+
+  /* Mobile */
+  @media screen and (max-width: 1024px){
+    .nav-cont {
+		flex-direction: column;
+	}
+
+	.nav-element-cont {
+		overflow-x: scroll;
+		overflow-y: hidden;
+		width: auto;
+        padding-left: 20px;
+	}
+
+	.nav-element-cont::-webkit-scrollbar {
+		display: none;
+		
+	}
+
+	.header-title {
+		width: 100%;
+	}
+
+	.section-cont {
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.section {
+		width: 100%;
+		overflow-x: scroll;
+		height: calc(50vh - 50px);
+	}
+
+	.section-title {
+		padding-top: 40px;
+	}
+
+	.section-group {
+		padding-bottom: 0px;
+		height: 50vh;
+		overflow-x: scroll;
+		display: flex;
+		flex-direction: row;
+		overflow-y: hidden;
+	}
+
+	.section-object {
+		padding-bottom: 0px;
+		min-width: 100vw;
+	}
+
+	.article-cont {
+		width: 100%;
+	}
+
+	.content-cont {
+		padding-right: 40px;
+	}
+
+	.event-cont {
+		width: 100%;
+	}
+
+	.opp-cont {
+		width: 100%;
+	}
+
+	.content-cont img {
+		height: auto;
+		width: 100%;
+	}
+
+	.content-cont h1 {
+		font-size: 40px;
+	}
+
+	.content-cont h2 {
+		font-size: 20px;
+	}
+
+	.article-cont p {
+		font-size: 15px;
+	}
+
+	@media screen and (max-width: 640px){
+		.content-cont {
+			padding-right: 10px;
+			margin-left: 20px;
+		}
+	}
+}

templates/publications.html

@@ -6,9 +6,11 @@
 		<a class='section-header' href='/archive/newsletters'><div class='section-title'><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 2.2px; font-size: 25px; font-style: normal; object-fit: contain; font-family: monospace;  color: black; width: 100%;">NEWSLETTERS<br><!--<img src="https://i-love-everything.com/buttons/img/34.gif" style="max-height: 32px;">--></div></div></a>
 		<div class='section-group'>
 			{% for key, values in newsletters.items() %}
-				<div class='section-element'><a href="/newsletter{{ url_for('page_content', title=values.title) }}">↘ {{ values.title }}</a></div>
-				<div class='section-date'>{{ values.date }}</div>
-				<div class='section-img'><a href="/newsletter{{ url_for('page_content', title=values.title) }}"><img src="{{ values.source}}"></a></div>
+				<div class='section-object'>
+					<div class='section-element'><a href="/newsletter{{ url_for('page_content', title=values.title) }}">↘ {{ values.title }}</a></div>
+					<div class='section-date'>{{ values.date }}</div>
+					<div class='section-img'><a href="/newsletter{{ url_for('page_content', title=values.title) }}"><img src="{{ values.source}}"></a></div>
+				</div>
 			{% endfor %}
 			</div>
 	</div>
@@ -16,9 +18,11 @@
 		<a class='section-header' href='/archive/projects'><div class='section-title'><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 3.3px; font-size: 25px; font-style: normal; object-fit: contain; font-family: monospace; color: black; border: 0px solid black; width: 100%;">PROJECTS<!--<img src="https://i-love-everything.com/buttons/img/26.gif" style="max-height: 32px;">--></div></div></a>
 		<div class='section-group'>
 			{% for key, values in projects.items() %}
+			<div class='section-object'>
 				<div class='section-element'><a href="{{ url_for('page_content', title=values.title) }}">↘ {{ values.title }}</a></div>
 				<div class='section-date'>{{ values.date }}</div>
 				<div class='section-img'><a href="{{ url_for('page_content', title=values.title) }}"><img src="{{ values.source }}"></a></div>
+			</div>
 			{% endfor %}
 			</div>
 	</div>