Navbar on small screens, hover over content (#63)

* Navbar on small screens, hover over content

* removed empty div in navbar

* Remove topnav-placeholder everywhere and extra whitespace

website/404.html

@@ -22,10 +22,10 @@
 
 		<!-- Page links -->
 		<div class="topnav-right">
-			<div class="topnav-placeholder"></div>
 			<a class="topnav-link" href="signin.html">Sign in</a>
 			<a class="topnav-link" href="projects.html">Projects</a>
-			<a class="topnav-link" href="https://www.facebook.com/groups/ufosc/events/?source=4&action_history=null&filter=calendar">
+			<a class="topnav-link"
+				href="https://www.facebook.com/groups/ufosc/events/?source=4&action_history=null&filter=calendar">
 				Events
 				<i class="fas fa-external-link-alt external-link" data-fa-transform="up-6"></i>
 			</a>

website/about.html

@@ -22,10 +22,10 @@
 
 		<!-- Page links -->
 		<div class="topnav-right">
-			<div class="topnav-placeholder"></div>
 			<a class="topnav-link" href="signin.html">Sign in</a>
 			<a class="topnav-link" href="projects.html">Projects</a>
-			<a class="topnav-link" href="https://www.facebook.com/groups/ufosc/events/?source=4&action_history=null&filter=calendar">
+			<a class="topnav-link"
+				href="https://www.facebook.com/groups/ufosc/events/?source=4&action_history=null&filter=calendar">
 				Events
 				<i class="fas fa-external-link-alt external-link" data-fa-transform="up-6"></i>
 			</a>
@@ -50,7 +50,8 @@
 		<div id="about" class="page-element">
 			<h1 class="title">About OSC</h1>
 			<p class="text">
-				OSC is the Open Source Club at the University of Florida. We are a community of makers, who want to solve problems
+				OSC is the Open Source Club at the University of Florida. We are a community of makers, who want to solve
+				problems
 				and improve our world using open source projects.
 				<br> <br>
 				The OSC is first and foremost, about working on open source projects. Student choose what they want to work on,
@@ -60,8 +61,10 @@ <h1 class="title">About OSC</h1>
 				We also preform technical talks on various open source topics. Anything from Linux to Typescript. Students are
 				encouraged to submit ideas or even volunteer to give a talk.
 				<br> <br>
-				Collaborating with other clubs is another one of our goals. We love to work with others on presentations, events,
-				or projects! If you are interested in working together email <a href="mailto:gator.osc@gmail.com">gator.osc@gmail.com</a>.
+				Collaborating with other clubs is another one of our goals. We love to work with others on presentations,
+				events,
+				or projects! If you are interested in working together email <a
+					href="mailto:gator.osc@gmail.com">gator.osc@gmail.com</a>.
 			</p>
 		</div>
 
@@ -73,9 +76,12 @@ <h1 class="title">Meetings</h1>
 				<ol class="text">
 					<li>Casual Coding Sessions are laid back meetings. You can work on projects, homework, or just hang out! They
 						happen twice weekly. It's a great time to find people with similar interest and create something cool.</li>
-					<li>General Body Meetings (GBMs) open up with a brief round of project updates. Following that, there is a tech
-						talk on an open source technology. This is great for anyone to come in and learn. They happen every other week.</li>
-					<li>Code Jams are a once a month workshop and hack sessions. Spend the morning of Saturday learning about an open
+					<li>General Body Meetings (GBMs) open up with a brief round of project updates. Following that, there is a
+						tech
+						talk on an open source technology. This is great for anyone to come in and learn. They happen every other
+						week.</li>
+					<li>Code Jams are a once a month workshop and hack sessions. Spend the morning of Saturday learning about an
+						open
 						source technology then in the afternoon work on existing open source projects or start you own!</li>
 				</ol>
 			</p>
@@ -87,21 +93,24 @@ <h2 class="subtitle">Getting Started</h2>
 			<div class="text">
 				After noticing a lack of general project focused clubs on campus, Matthew Booe (President) brought together Nick
 				Cioli (Vice President) and Nick Barnes (Treasure) and their enthusiasm for open source to create the club at the
-				start of Spring 2016. They found Professor Ira Hill to become their faculty adviser. It gathered enough sign-ups to
+				start of Spring 2016. They found Professor Ira Hill to become their faculty adviser. It gathered enough sign-ups
+				to
 				become an official student government organization.
 
 				During the first year of operation, there were about five active members. The focus was primarily on teaching
 				Git/Web Design and working on the club website and other basic projects.
 
-				In the middle of Fall 2016, the OSC became a Special Interest Group of the UF ACM chapter. The goal of this was to
+				In the middle of Fall 2016, the OSC became a Special Interest Group of the UF ACM chapter. The goal of this was
+				to
 				improve relations with the computer science community and find a source of funding.
 			</div>
 			<h2 class="subtitle">Growing Up</h2>
 			<div class="text">
 				There were two problems that became apparent over the previous year: 1. There wasn't a lot of time to work on
 				projects 2. Administrative duties make it really hard to work on other things.
 
-				As a result, in the Spring of 2017 Casual Coding Sessions were introduced as two regular weekly meetings and more
+				As a result, in the Spring of 2017 Casual Coding Sessions were introduced as two regular weekly meetings and
+				more
 				officer positions were added. This brought on Anthony Rossello (Secretary), Greg Fussell (External Relations
 				Chair), Will Owens (Social Chair), and Vaibhav Yenamandra (Project Lead).
 
@@ -110,7 +119,8 @@ <h2 class="subtitle">Growing Up</h2>
 				The end of Spring elections resulted in news officers Joe Komskis (External Relations Chair) and Josh Hew
 				(Secretary). A representative from Mozilla also reached out to learn more about the club.
 
-				Over the Summer of 2017 Matthew and Josh worked with Mozilla and eighteen other students to help put together the
+				Over the Summer of 2017 Matthew and Josh worked with Mozilla and eighteen other students to help put together
+				the
 				Mozilla Open Source Student Network.
 			</div>
 			<h2 class="subtitle">Staying Strong</h2>

website/index.html

@@ -22,7 +22,6 @@
 
 		<!-- Page links -->
 		<div class="topnav-right">
-			<div class="topnav-placeholder"></div>
 			<a class="topnav-link" href="signin.html">Sign in</a>
 			<a class="topnav-link" href="projects.html">Projects</a>
 			<a class="topnav-link" href="https://www.facebook.com/groups/ufosc/events/?source=4&action_history=null&filter=calendar">

website/projects.html

@@ -22,10 +22,10 @@
 
 		<!-- Page links -->
 		<div class="topnav-right">
-			<div class="topnav-placeholder"></div>
 			<a class="topnav-link" href="signin.html">Sign in</a>
 			<a class="topnav-link" href="projects.html">Projects</a>
-			<a class="topnav-link" href="https://www.facebook.com/groups/ufosc/events/?source=4&action_history=null&filter=calendar">
+			<a class="topnav-link"
+				href="https://www.facebook.com/groups/ufosc/events/?source=4&action_history=null&filter=calendar">
 				Events
 				<i class="fas fa-external-link-alt external-link" data-fa-transform="up-6"></i>
 			</a>
@@ -62,7 +62,8 @@ <h4 class="project-subtitle">The thing your on right now!</h4>
 
 			<div class="project-text text">
 				<p>
-					The website is built from scratch, using basic HTML, CSS, and JavaScript, to be a one-stop-shop for information
+					The website is built from scratch, using basic HTML, CSS, and JavaScript, to be a one-stop-shop for
+					information
 					about the Open Source Club. It's provides information about what the club is, the projects we work on, and
 					upcoming events.
 				</p>
@@ -129,7 +130,8 @@ <h4 class="project-subtitle">Open source teacher/professor interaction software<
 
 			<div class="project-text text">
 				<p>
-					Teacher/student interaction software designed to provide an open source alternative to existing solutions like Top
+					Teacher/student interaction software designed to provide an open source alternative to existing solutions like
+					Top
 					Hat. It is being built with Ruby on Rails.
 				</p>
 			</div>
@@ -162,9 +164,11 @@ <h4 class="project-subtitle">A simple UF themed Multi-User Dungeon</h4>
 
 			<div class="project-text text">
 				<p>
-					Multi-user dungeons, or "MUDs" are text-based role-playing games, that naturally evolved from the text-based rpg
+					Multi-user dungeons, or "MUDs" are text-based role-playing games, that naturally evolved from the text-based
+					rpg
 					and adventure games of the 1970s. This project aims to introduce a new generation—one that never experienced a
-					world without broadband internet—to this classic game genre. While this code can be adapted for any setting, we
+					world without broadband internet—to this classic game genre. While this code can be adapted for any setting,
+					we
 					intend to render our university in beautiful ASCII.
 				</p>
 			</div>
@@ -197,7 +201,8 @@ <h4 class="project-subtitle">Discord bots written in Python</h4>
 
 			<div class="project-text text">
 				<p>
-					A python3 Discord bot used to run the Open Source Club's Discord server. The bot is using the Discord.py rewrite.
+					A python3 Discord bot used to run the Open Source Club's Discord server. The bot is using the Discord.py
+					rewrite.
 				</p>
 			</div>
 
@@ -229,7 +234,8 @@ <h4 class="project-subtitle">A RESTful API for club information (events, project
 
 			<div class="project-text text">
 				<p>
-					A RESTful API for club information (events, projects, sign-ins, etc) that is used for the club website, bots, and
+					A RESTful API for club information (events, projects, sign-ins, etc) that is used for the club website, bots,
+					and
 					any future projects related to administration. Built using Rust, Rocket, PostgreSQL, and Diesel.
 				</p>
 			</div>

website/signin.html

@@ -22,10 +22,10 @@
 
 		<!-- Page links -->
 		<div class="topnav-right">
-			<div class="topnav-placeholder"></div>
 			<a class="topnav-link" href="signin.html">Sign in</a>
 			<a class="topnav-link" href="projects.html">Projects</a>
-			<a class="topnav-link" href="https://calendar.google.com/calendar/embed?src=toln76hk72u3v4vhu4hblu8s88%40group.calendar.google.com&ctz=America%2FNew_York">
+			<a class="topnav-link"
+				href="https://calendar.google.com/calendar/embed?src=toln76hk72u3v4vhu4hblu8s88%40group.calendar.google.com&ctz=America%2FNew_York">
 				Events
 				<i class="fas fa-external-link-alt external-link" data-fa-transform="up-6"></i>
 			</a>

website/styles/unified.css

@@ -186,7 +186,7 @@ body {
 	}
 
 	/* Effect all header links except the logo */
-	.topnav-link:not(:first-child) {
+	.topnav-right {
 		display: none;
 	}
 
@@ -196,10 +196,6 @@ body {
 		padding: 18px 16px;
 	}
 
-	/* Header on smaller devices when clicked */
-	.topnav.drop-down-menu {
-		position: relative;
-	}
 
 	/* Keep the menu icon on the right when clicked */
 	.topnav.drop-down-menu .topnav-menu-icon {
@@ -225,15 +221,17 @@ body {
 	}
 
 	/* Make the menu items be below the menu icon when clicked */
+	/* Hover the menu over content in a less obtrusive way */
 	.topnav.drop-down-menu > .topnav-right {
+		display: block;
+		position: absolute;
+		z-index: 10;
+		top: 59px;
+		right: 0;
+		background-color: var(--primary-color);
 		flex-direction: column;
 	}
 
-	/* Empty space between the top of the screen and the first menu item */
-	.topnav.drop-down-menu > .topnav-right > .topnav-placeholder {
-		height: 60px;
-	}
-
 }
 
 /* Footer CSS */