Move header to bottom of popup

esse-dev · Apr 4, 2021 · 5fec059 · 5fec059
1 parent 1937616
commit 5fec059
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 28 deletions.
diff --git a/src/popup/popup.css b/src/popup/popup.css
@@ -298,32 +298,35 @@ section {
 }
 
 /****************************************
- * data-story header
+ * data-story footer
  ****************************************/
 
-header {
+footer {
 	background-color: black;
+	bottom: 0;
+	position: absolute;
+	width: 100%;
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
 	text-align: center;
-	border-bottom: 5px solid black;
+	border-top: 5px solid black;
 }
-header object {
+footer object {
 	vertical-align: baseline;
-	height:18px;
+	height: 18px;
 	vertical-align: -20%;
 	margin-right: 5px;
 }
-header object {
+footer object {
 	pointer-events: none;
 }
-header a {
+footer a {
 	border-left: 1px dashed #E6E3D4;
 	padding: 5px;
 	cursor: pointer;
 	color: #E6E3D2;
 }
-header a:hover {
+footer a:hover {
 	color: #F2A8C3;
 }
 

diff --git a/src/popup/popup.html b/src/popup/popup.html
@@ -26,26 +26,6 @@ <h3>We're looking for feedback!</h3>
 
 	<!-- DATA VIS AREA -->
 	<section id="data-story">
-		<header>
-			<a id="goto-intro" style="border-left: none;">
-				<object
-					type="image/svg+xml"
-					data="../../assets/icons/icon.svg">
-				</object>Tutorial
-			</a>
-			<a href="https://akitaproject.site/">
-				<object
-					type="image/svg+xml"
-					data="../../assets/friends_of_akita.svg">
-				</object>Project
-			</a>
-			<a id="goto-survey">
-				<object
-					type="image/svg+xml"
-					data="../../assets/speech_bubble.svg">
-				</object>Feedback
-			</a>
-		</header>
 		<div style="padding: 15px;">
 			<h1 style="font-size: 25px; margin-top: 5px;">Your Top Monetized Sites</h1>
 			<div id="circle-container"></div>
@@ -68,6 +48,26 @@ <h1 class="tooltip">These monetized sites could use ♥️</h1>
 				<a href="https://coil.com/creator/how-to-monetize" class="tooltip" style="background: #C47233;">Monetize your own website or creative content with Coil</a>
 			</div>
 		</div>
+		<footer>
+			<a id="goto-intro" style="border-left: none;">
+				<object
+					type="image/svg+xml"
+					data="../../assets/icons/icon.svg">
+				</object>Tutorial
+			</a>
+			<a href="https://akitaproject.site/">
+				<object
+					type="image/svg+xml"
+					data="../../assets/friends_of_akita.svg">
+				</object>Project
+			</a>
+			<a id="goto-survey">
+				<object
+					type="image/svg+xml"
+					data="../../assets/speech_bubble.svg">
+				</object>Feedback
+			</a>
+		</footer>
 	</section>
 
 	<div style="height: 100px; width: 100%; background: #F96060;"></div>