1 files changed, 42 insertions, 79 deletions
diff --git a/resources/sass/style.scss b/resources/sass/style.scss
index 3cb4a93..cfcc60a 100644
--- a/resources/sass/style.scss
+++ b/resources/sass/style.scss
@@ -28,69 +28,6 @@ body {
 	max-width: 970px;
 }
 
-#sticky-nav {
-	padding-top: 1em;
-}
-
-#sticky-nav li > a {
-	display: inline-block;
-	text-wrap: nowrap;
-}
-
-@media (max-width: 1269px) {
-	/* Navigation in a sticky header */
-	#sticky-nav {
-		background: rgba(255, 255, 255, 0.9);
-		border-bottom: 1px solid #eee;
-		padding-bottom: 1em;
-		position: sticky;
-		top: 0;
-	}
-
-	/* Offset # links because of sticky header:
-	 * https://stackoverflow.com/a/64998338 */
-	:target:before {
-		content: '';
-		display: block;
-		height: 150px;
-		margin: -150px 0 0;
-	}
-}
-
-@media (min-width: 1270px) {
-	/* Navigation in a sticky sidebar. The sidebar is to the left of the
-	 * content, below the profile image, but sticks to the top of the page when
-	 * scrolling down. */
-	#sticky-nav {
-		display: table-cell;
-		/* 970px is width of .container; 180px is width of #sticky-nav. This
-		 * places the nav buttons to the left of the content. */
-		left: calc(50% - 970px/2 - 180px);
-		/* 216px is the height of the profile image. */
-		padding-top: calc(216px + 2em);
-		text-align: right;
-		width: 180px;
-	}
-
-	#sticky-nav ul.nav {
-		border-right: 1px solid #eee;
-		flex-direction: column; /* .flex-column, but only on large screens */
-		padding: 1em 1em 1em 0;
-		position: sticky;
-		top: 1em;
-	}
-
-	ul.nav li {
-		display: block;
-		float: none;
-	}
-
-	#content {
-		display: table-cell;
-		vertical-align: top;
-	}
-}
-
 .greyed-out {
 	color: #888;
 }
@@ -118,28 +55,54 @@ abbr {
 	border-width: 0 !important;
 }
 
-header > div {
-	@media (min-width: 500px) {
-		display: table-row;
+header {
+	margin: 1em 0;
 
-		img#profile {
-			margin: 1em 1em 1em 0;
-			max-width: 30vw;
-		}
+	> div {
+		@media (min-width: 1400px) {
+			height: 240px;
+			position: relative;
 
-		div#basicinfo {
-			margin-top: 1em;
+			img#profile {
+				height: 240px;
+				max-width: 30vw;
+				position: absolute;
+				right: calc(100% + 1em);
+			}
+
+			div#basicinfo {
+				bottom: 0;
+				position: absolute;
+				width: 100%;
+			}
 		}
-	}
 
-	@media (max-width: 499px) {
-		img#profile {
-			margin: 1em 0;
-			max-width: unset !important;
+		@media (max-width: 1399px) and (min-width: 500px) {
+			align-items: self-end;
+			display: flex;
+			height: 240px;
+
+			img#profile {
+				max-height: 240px;
+				margin-right: 1em;
+				max-width: 30vw;
+			}
+
+			div#basicinfo {
+				flex-grow: 1;
+			}
 		}
 
-		div#basicinfo {
-			clear: both;
+		@media (max-width: 499px) {
+			img#profile {
+				margin-bottom: 1em;
+				max-height: 240px;
+				max-width: 100%;
+			}
+
+			div#basicinfo {
+				clear: both;
+			}
 		}
 	}
 }