2 files changed, 16 insertions, 85 deletions
diff --git a/public/index.html b/public/index.html
index 406122e..4ea10e9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,8 @@
 	<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
 	<script src="index.js" defer type="module"></script>
 -->
-	<link rel="stylesheet" href="/style.css">
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
 	<script src="/main.js" defer></script>
 </head>
 <body>
@@ -17,6 +18,15 @@
 		<div id="slideshow" style="display:none">
 		-->
 		<div id="slideshow">
+			<div id="slideshow-top-controls">
+				<div id="slideshow-share">
+					<button id="share"><svg alt="Share"><use xlink:href="#share"></use></svg></button>
+					<button id="download"><svg alt="Download"><use xlink:href="#download"></use></svg></button>
+					<!--
+					<button id="hide"><svg alt="Don't Show This Image"><use xlink:href="#skip_next"></use></svg></button>
+					-->
+				</div>
+			</div>
 			<div id="slideshow-carousel">
 				<div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/tulip.jpg"      /></div>
 				<div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/grapes.jpg"     /></div>
@@ -24,6 +34,11 @@
 				<div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/wolf.jpg"       /></div>
 				<div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/shore.jpg"      /></div>
 			</div>
+			<div id="slideshow-bottom-controls">
+				<button id="prevSlide"><svg alt="Previous Slide"><use xlink:href="#skip_previous"></use></svg></button>
+				<button id="playPause"><svg alt="Pause"><use xlink:href="#pause"></use></svg></button>
+				<button id="nextSlide"><svg alt="Next Slide"><use xlink:href="#skip_next"></use></svg></button>
+			</div>
 		</div>
 		<div id="albums" style="display:none">
 		</div>
@@ -32,11 +47,6 @@
 	</main>
 	<footer>
 		<div id="bottom-container">
-			<div id="controls">
-				<button id="prevSlide"><svg alt="Previous Slide"><use xlink:href="#skip_previous"></use></svg></button>
-				<button id="playPause"><svg alt="Pause"><use xlink:href="#pause"></use></svg></button>
-				<button id="nextSlide"><svg alt="Next Slide"><use xlink:href="#skip_next"></use></svg></button>
-			</div>
 			<div id="menu">
 				<a href="/slideshow"><svg alt="Slideshow"><use xlink:href="#slideshow"></use></svg></a>
 				<a href="/albums">   <svg alt="Album Picker"><use xlink:href="#photo_album"></use></svg></a>
diff --git a/public/style.css b/public/style.css
deleted file mode 100644
index f8c26e2..0000000
--- a/public/style.css
+++ /dev/null
@@ -1,79 +0,0 @@
-body {
-	background: black;
-	color: white;
-}
-
-svg {
-	fill: white;
-}
-
-.carousel-cell {
-	height: 70vh;
-	width: 80vw;
-
-	margin: 10px;
-
-
-}
-
-.carousel-cell img {
-	vertical-align: middle;
-/*	border-radius: 10px; */
-	height: 100%;
-	max-width: 100%;
-	object-fit: contain;
-}
-
-
-@media (max-width: 768px) {
-	.carousel-cell {
-		height: 100vh;
-	}
-}
-
-
-footer {
-	position: fixed;
-	bottom: 0;
-	width: 100%;
-}
-
-#bottom-container {
-	max-width: 1024px;
-	margin: auto;
-}
-
-#controls, #menu {
-	display: flex;
-}
-#menu {
-	width: 100%;
-}
-
-#controls {
-	width: 80%;
-	margin: auto;
-	padding-bottom: 48px;
-}
-
-footer a, footer button {
-	width: 100%;
-}
-
-footer svg {
-	height: 48px;
-	width: 100%;
-
-}
-
-#controls button {
-	background: none;
-	border: none;
-	padding: 0;
-}
-
-#menu {
-	padding: 16px;
-	box-sizing: border-box;
-	border-top: 1px solid rgb(55, 65, 81);
-}