styling and typo

sass/style0002.sass

@@ -25,6 +25,9 @@ a
 	position: relative
 	margin: 0 auto
 	padding: 0 1rem
+
+	@media screen and (max-width: $mobile)
+		padding: 0 0.5rem
 
 nav
 	width: 100vw
@@ -58,6 +61,22 @@ nav
 		a
 			text-decoration: none
 
+	@media screen and (max-width: $mobile)
+		font-size: 0.9rem
+		div.inner
+			padding: 0.5rem
+
+			display: flex
+			align-items: center
+
+
+			.logo
+				padding-right: 0.5rem
+				padding-right: 0.25rem
+
+			div
+				padding: 0 0.25rem
+
 h1.section-heading
 	font-size: 4rem
 	text-align: center
@@ -153,8 +172,12 @@ section
 				padding: 2rem
 				overflow-x: scroll
 
-				@media screen and (max-width: $small)
-					width: 100%
+				// @media screen and (max-width: $small)
+				// 	width: 100%
+
+				@media screen and (max-width: $mobile)
+					// width: 100%
+					font-size: 0.9rem
 
 			img
 				width: 100%
@@ -166,6 +189,9 @@ section
 				&.top
 					align-items: flex-start
 
+				@media screen and (max-width: $small)
+					overflow-x: scroll
+
 			table
 				margin-top: 4rem
 				border: none
@@ -259,7 +285,7 @@ div.person
 				max-height: 600px
 				width: auto
 
-		@media screen and (max-width: $small)
+		@media screen and (max-width: $small) and (min-width: $mobile)
 			margin-top: 4rem
 			display: block
 			width: 100%
@@ -268,6 +294,7 @@ div.person
 				font-size: 3rem
 
 			img
+				display: block
 				max-height: 600px
 				width: auto
 				margin: 0 auto
@@ -282,14 +309,21 @@ div.person
 				gap: 1rem
 
 		@media screen and (max-width: $mobile)
+			margin-top: 4rem
+			display: block
+			width: 100%
+
 			img
+				display: block
 				width: 100%
-				height: auto
 
 			#img-container
 				display: block
 				widht: 100%
 
+			h1
+				font-size: 3rem
+
 
 footer
 	padding: 5rem 0
@@ -352,22 +386,24 @@ div.post
 	margin: 0 auto
 
 
+.no-mobile
+	@media screen and (max-width: $mobile)
+		display: none
+
+
 #cta
 	position: fixed
 	right: 0
 	z-index: 100
 	background-color: #333
 	color: white
-	// font-family: helvetica, arial, sans
 	padding: 1.5rem 2rem
-	// margin: 1rem
 	transition: background-color 0.3s ease
+	top: 0
 
-	@media screen and (max-width: $small)
-		bottom: 0
-
-	@media screen and (min-width: $small)
-		top: 0
+	@media screen and (max-width: $mobile)
+		background-color: crimson
+		padding: 1rem 1rem
 
 	&:hover
 		background-color: crimson
@@ -504,6 +540,7 @@ table
 
 	@media screen and (max-width: $small)
 		width: 100%
+		font-size: 0.9rem
 
 
 #signup

templates/index.html

@@ -18,16 +18,14 @@
 
 
 
-
-<!-- <section id="title" class="full-width" style="background-image: url(img/main/plover-3.webp);"> -->
 <section id="title" class="full-width">
     <div id="title-inner">
       <div class="col-1">
         <div id="img-container">
           <img
             src="/img/main/plover-7.webp"
           />
-          <p style="font-size: 0.8rem"><span class="crimson">The Egyption Plover</span>: Rhymes with "over". An African waterbird that maintains a (dubious) symbiotic relationship with crocodies, feeding on decaying meet lodged between their teeth.</p>
+          <p class="no-mobile" style="font-size: 0.8rem"><span class="crimson">The Egyptian Plover</span>: Rhymes with "over". An African waterbird that maintains a (dubious) symbiotic relationship with crocodies, feeding on decaying meet lodged between their teeth.</p>
         </div>
       </div>
       <div class="col-2">
@@ -363,7 +361,6 @@ <h2>Principal ML Engineer</h2>
       Michael has 14 years of research and engineering experience. He has built production models for healthcare, agronomy, finance, and law; and has conducted research in the areas of high-energy physics, differential geometry, plasma physics, and high-performance computing.
       </p>
     </div>
-    </div>
   </div>
 </section>