Change top navbar to be a sidebar (#12)

* Change nav to sidebar
* Minor UI Elements Formatting
* Minor cleanup and false promises

puzzle_editing/static/css/general.css

@@ -1,16 +1,17 @@
+
 :root {
 	--bg: #fff;
-	--nav-bg: #f8f8cc;
-	--nav-bg-hover: #ffe;
-	--nav-selected-border: #aa6;
-	--text-color: black;
+	--nav-bg: #f4f3f2;
+	--nav-bg-hover: #ededed;
+	--nav-selected-background: #e0dddd;
+	--text-color: #333333;
 	--deemphasized-color: #777;
 	--correct-color: #080;
 	--error-color: #900;
-	--secondary-bg: #f2f2f2;
-	--tertiary-bg: #e2e2e2;
-	--link-color: #00e;
-	--visited-color: #551a8b;
+	--secondary-bg: #fafafa;
+	--tertiary-bg: #ecebe9;
+	--link-color: #333333;
+	--visited-color: #333333;
 	--border-color: #aaa;
 	--active-shadow-color: #69f;
 
@@ -22,13 +23,15 @@
 
 	--by-author-color: #fee;
 	--testsolve-color: #efe;
+
+	--highlight-color: #F26D00;
 }
 
 [data-theme="dark"] {
 	--bg: #111;
 	--nav-bg: #081838;
 	--nav-bg-hover: #137;
-	--nav-selected-border: #08e;
+	--nav-selected-background: #08e;
 	--text-color: #ddd;
 	--deemphasized-color: #888;
 	--correct-color: #8e8;
@@ -49,7 +52,7 @@
 	--bg: #fff;
 	--nav-bg: #ffecab;
 	--nav-bg-hover: #ffd026;
-	--nav-selected-border: #faa819;
+	--nav-selected-background: #faa819;
 	--text-color: #000;
 	--deemphasized-color: #777;
 	--correct-color: #080;
@@ -67,7 +70,7 @@
 	--bg: #151515;
 	--nav-bg: #1c1c1c;
 	--nav-bg-hover: #245;
-	--nav-selected-border: #0d61ac;
+	--nav-selected-background: #0d61ac;
 	--text-color: #e8e8d3;
 	--deemphasized-color: #606060;
 	--correct-color: #65c254;
@@ -88,7 +91,7 @@
 	--bg: #002b36;
 	--nav-bg: #073642;
 	--nav-bg-hover: #002b36;
-	--nav-selected-border: #2aa198;
+	--nav-selected-background: #2aa198;
 	--text-color: #839496;
 	--deemphasized-color: #586375;
 	--correct-color: #859900;
@@ -111,7 +114,7 @@
 	--nav-deemphasized-color: #999;
 	--nav-bg: #700;
 	--nav-bg-hover: #900;
-	--nav-selected-border: #f99;
+	--nav-selected-background: #f99;
 	--text-color: #000;
 	--deemphasized-color: #777;
 	--correct-color: #080;
@@ -132,7 +135,7 @@
 
 /* general */
 body {
-	font-family: sans-serif;
+	font-family: 'Noto Sans', sans-serif;
 	margin: 0;
 	padding: 0;
 	color: var(--text-color);
@@ -144,44 +147,123 @@ a:link {
 a:visited {
 	color: var(--visited-color);
 }
+
 input[type="text"], input[type="password"], input[type="email"], textarea {
+	font-family: "Noto Sans";
 	background-color: var(--input-bg);
 	color: var(--text-color);
 	border: 1px solid var(--border-color);
 	border-radius: 3px;
-	padding: 2px;
+	padding: 5px;
 }
 
 input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
 	box-shadow: 0 0 2px var(--active-shadow-color);
 }
 
+input[type="submit"], button {
+	font-family: "Noto Sans";
+	color: var(--text-color);
+	background-color: #ccc;
+	padding: 3px 10px;
+	border-radius: 4px;
+	font-size: 16px;
+	border: none;
+	cursor: pointer;
+	margin: 5px 5px 5px 0;
+	transition: 0.2s all;
+}
+
+input[type="submit"]:hover, button:hover {
+	opacity: 0.6;
+}
+
 .small-md p:first-child { margin-top: 0; }
 .small-md p:last-child { margin-bottom: 0; }
 
 /* navigation */
+.content-container {
+	display: flex;
+}
+
 nav {
+	font-size: 14px;
 	background-color: var(--nav-bg);
 	color: var(--nav-color);
+	min-height: 100vh;
+	flex: 0 0 200px;
+	position: relative;
+}
+
+img.home {
+	width: 60px;
+	padding: 30px 24px 0;
+	transition: 0.2s all;
+}
+
+img.home:hover {
+	opacity: 0.8;
+	transform: scale(1.05);
 }
+
 nav a:link {
 	color: var(--nav-link-color);
 }
+
 nav a:visited {
 	color: var(--nav-visited-color);
 }
+
 .nav-links {
-	display: flex;
-	flex-direction: column;
-	position: relative;
 }
+
 .nav-links a {
-	padding: 0.75em;
+	opacity: 0.7;
+	padding: 8px 34px 10px;
+	text-decoration: none;
+	display: block;
+	transition: 0.2s all;
+	font-weight: 400;
+}
+
+.nav-links a.new, 
+.nav-links a.selected.new {
+	padding: 9px 25px 12px;
+	opacity: 1;
+	font-size: 15px;
+	line-height: 17px;
+	border-radius: 50px;
+	margin: 10px 20px;
+	color: var(--nav-bg);
+	background-color: var(--highlight-color);
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.nav-links a.new:hover {
+	background-color: var(--highlight-color);
+	opacity: 0.8;
+	transform: scale(1.03);
+}
+
+
+.nav-links a.new::before {
+	content: "+";
+	font-size: 24px;
+	position: relative;
+	left: -10px;
+	top: 2px;
 }
+
+.nav-links a:hover {
+	opacity: 1;
+	background-color: var(--nav-bg-hover);
+}
+
 .nav-links a.selected {
-	border-left: 0.375em solid var(--nav-selected-border);
-	padding-left: 0.375em;
+	opacity: 1;
+	background-color: var(--nav-selected-background)
 }
+
 .menu-button {
 	background-color: var(--nav-bg);
 	color: var(--nav-color);
@@ -198,6 +280,8 @@ nav a:visited {
 	border-width: 0;
 	background-color: var(--nav-bg-hover);
 }
+
+
 .nav-menu-collapsed .nav-links a:not(:first-child), .nav-menu-collapsed .nav-countdown, .nav-menu-collapsed .theme {
 	display: none;
 }
@@ -209,50 +293,51 @@ nav a:visited {
 		flex-direction: row;
 		flex-wrap: wrap;
 	}
-	.nav-links a.selected {
-		border-left-width: 0;
-		padding-left: 0.75em;
-		border-top: 0.375em solid var(--nav-selected-border);
-		padding-top: 0.375em;
-	}
 	.menu-button { display: none; }
 }
+
 .nav-links a:first-child {
 	font-weight: bold;
 }
-.nav-links a:hover {
-	background-color: var(--nav-bg-hover);
-}
+
 .nav-second {
-	display: flex;
-	flex-direction: column;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 200px;
 }
-.nav-second > div {
-	padding: 0.5em 0.75em;
+
+.nav-message {
+	padding: 0 20px 10px;
+	font-size: 13px;
 }
+
+.nav-message .tiny-note {
+	opacity: 0.6;
+}
+
 .nav-login {
-	text-align: right;
+	padding: 20px;
+	background-color: var(--nav-selected-background);
+}
+
+.nav-logged-in {
+	margin-bottom: 10px;
 }
+
 .countdown {
 	color: var(--nav-deemphasized-color);
 	font-size: 85%;
 }
+
 .countdown .time {
 	color: var(--nav-color);
 }
 
-@media screen and (min-width: 36em) {
-	.nav-second {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-	}
-}
-
 main {
-	padding: 0.75em;
+	padding: 30px;
 }
-h1 { font-size: 140%; }
+h1 { font-size: 180%; margin-top: 0; }
 h2 { font-size: 120%; font-weight: normal; }
 div.table-wrap {
 	max-width: 100%;
@@ -289,7 +374,7 @@ td.label-cell label {
 	font-size: 85%; opacity: 50%;
 }
 table.classic td {
-	padding: 0.5em;
+	padding:  10px 5px 10px 0;
 	border-top: 1px solid var(--border-color);
 	max-width: 30em;
 }
@@ -303,9 +388,6 @@ table.classic td {
 }
 
 /* puzzle */
-.puzzle-title {
-	padding: 0 0.5em;
-}
 .puzzle-inner {
 	padding: 0;
 	width: 100%;