styling

promised-ai · May 19, 2024 · 8419cf1 · 8419cf1
1 parent 6fac036
commit 8419cf1
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 45 deletions.
diff --git a/sass/style0002.sass b/sass/style0002.sass
@@ -37,14 +37,10 @@ nav
 	top: 0
 
 	div.inner
-		padding: 1rem
-		// padding-top: 1.5rem
+		display: grid
+		grid-template-columns: 1fr 1fr
 		border-bottom: 1px solid #333
 
-		display: flex
-		align-items: center
-
-
 		.logo
 			padding-right: 1rem
 			opacity: 0.7
@@ -55,27 +51,25 @@ nav
 
 		div
 			font-family: "Playfair Display", serif
-			padding: 0 0.5rem
 			font-style: italic
 
 		a
 			text-decoration: none
 
-	@media screen and (max-width: $mobile)
-		font-size: 0.9rem
-		div.inner
-			padding: 0.5rem
-
+		#nav-left, #nav-right
 			display: flex
 			align-items: center
-
+			gap: 0
+
+		#nav-left
+			padding: 1rem
+			justify-content: left
 
-			.logo
-				padding-right: 0.5rem
-				padding-right: 0.25rem
+		#nav-right
+			justify-content: right
 
-			div
-				padding: 0 0.25rem
+	@media screen and (max-width: $mobile)
+		font-size: 0.8rem
 
 h1.section-heading
 	font-size: 4rem
@@ -115,8 +109,6 @@ section
 	align-items: center
 	border-bottom: 1px solid #bbb
 
-	@media screen and (max-width: $small)
-		display: block
 	h1
 		font-size: 2.3rem
 		font-weight: 400
@@ -140,6 +132,7 @@ section
 		padding-bottom: 5rem
 
 		@media screen and (max-width: $small)
+			display: block
 			padding-top: 3rem
 			padding-bottom: 3rem
 
@@ -172,19 +165,16 @@ section
 				padding: 2rem
 				overflow-x: scroll
 
-				// @media screen and (max-width: $small)
-				// 	width: 100%
-
 				@media screen and (max-width: $mobile)
-					// width: 100%
-					font-size: 0.9rem
+					font-size: 0.8rem
 
 			img
 				width: 100%
 
 			div.column
 				display: flex
 				align-items: center
+				justify-content: center
 
 				&.top
 					align-items: flex-start
@@ -205,6 +195,7 @@ section
 		div.two-thirds
 			grid-template-columns: 3fr 2fr
 
+
 		div.one-half
 			grid-template-columns: 1fr 1fr
 
@@ -215,6 +206,11 @@ section
 				width: 100%
 				filter: contrast(110%)
 
+			@media screen and (max-width: $small) and (min-width: $mobile)
+				max-width: 500px
+				display: block
+				margin: 0 auto
+
 
 div.flex
 	display: flex
@@ -392,18 +388,18 @@ div.post
 
 
 #cta
-	position: fixed
-	right: 0
-	z-index: 100
 	background-color: #333
 	color: white
-	padding: 1.5rem 2rem
 	transition: background-color 0.3s ease
-	top: 0
+	padding: 0rem 1rem
+	height: 100%
+	display: flex
+	align-items: center
+	font-size: 0.9rem
 
 	@media screen and (max-width: $mobile)
 		background-color: crimson
-		padding: 1rem 1rem
+		font-size: 0.8rem
 
 	&:hover
 		background-color: crimson
@@ -413,7 +409,6 @@ div.post
 		color: white
 		text-decoration: none
 		text-transform: uppercase
-		font-size: 0.9rem
 		font-weight: 200
 		letter-spacing: 0.1rem
 
@@ -578,4 +573,13 @@ button
 		color: black
 		background-color: #eee
 
+
+#thanks
+	div
+		display: block
+		margin: 0 auto	
 
+	img
+		max-height: 600px
+		max-width: 100%
+		width: auto
diff --git a/templates/base.html b/templates/base.html
@@ -39,20 +39,23 @@
 <body>
   <nav>
     <div class="inner">
-      <div class="logo">
-        <a href="{{ config.base_url }}">
-          <img id="bird" src="{{ config.base_url }}/img/bird.png" width="40px" />
-        </a>
+      <div id="nav-left">
+        <div class="logo">
+          <a href="{{ config.base_url }}">
+            <img id="bird" src="{{ config.base_url }}/img/bird.png" width="40px" />
+          </a>
+        </div>
+        <div class="logo" style="padding-right: 1rem"><a href="{{ config.base_url }}">Redpoll</a></div>
+        <div><a href="{{ config.base_url }}/blog">Posts</a></div>
+      </div>
+      <div id="nav-right">
+        {% if show_signup_form %}
+        <div id="cta"><a href="#signup">Partner with us</a></div>
+        {% endif %}
       </div>
-      <div class="logo" style="padding-right: 1rem"><a href="{{ config.base_url }}">Redpoll</a></div>
-      <div><a href="{{ config.base_url }}/blog">Posts</a></div>
-      <!-- <div><a href="#subscribe-form">Contact</a></div> -->
     </div>
   </nav>
 
-  {% if show_signup_form %}
-  <div id="cta"><a href="#signup">Partner with us</a></div>
-  {% endif %}
 
   <div id="main">
 
@@ -101,4 +104,4 @@ <h1>Become a partner</h1>
 
 </body>
 
-</html>
+</html>
diff --git a/templates/thanks.html b/templates/thanks.html
@@ -7,11 +7,11 @@
 
 {% block content %}
 
-<section>
+<section id="thanks">
   <div>
     <h1>Thanks!</h1>
     <p>We'll get back to you shortly.</p>
-    <img src="/img/main/plover-thanks-3.webp" height="600px"/>
+    <img src="/img/main/plover-thanks-3.webp"/>
   </div>
 </section>