First release

2020-01-13 01:50:21 +13:00
parent 32e4f3d854
commit 6fd7cc501e
31 changed files with 2759 additions and 348 deletions
--- a/src/site/sass/main.sass
+++ b/src/site/sass/main.sass
@@ -0,0 +1,137 @@
+$layout-a-max: 820px
+$layout-b-min: 821px
+
+body
+	margin: 0
+	padding: 0
+	font-size: 18px
+
+.main-divider
+	display: block
+
+	@media screen and (min-width: $layout-b-min)
+		display: grid
+		grid-template-columns: 235px 1fr
+		min-height: 100vh
+
+.pfp
+	border-radius: 50%
+
+@mixin link-button
+	color: hsl(107, 100%, 21.8%)
+	background: hsl(87, 78.4%, 80%)
+	padding: 12px
+	border-radius: 10px
+	border: 1px solid hsl(106.9, 49.8%, 46.9%)
+	line-height: 1
+	text-decoration: none
+
+	&:hover
+		color: hsl(106.4, 100%, 12.9%)
+		background: hsl(102.1, 77.2%, 67.3%)
+		border-color: hsl(104, 51.4%, 43.5%)
+
+.profile-overview
+	text-align: center
+	z-index: 1
+	position: relative
+	contain: paint // </3 css
+	line-height: 1
+
+	@media screen and (max-width: $layout-a-max)
+		border-bottom: 1px solid #333
+		box-shadow: 0px -2px 4px 4px rgba(0, 0, 0, 0.4)
+		padding-bottom: 25px
+
+	@media screen and (min-width: $layout-b-min)
+		border-right: 1px solid #333
+		box-shadow: -2px 0px 4px 4px rgba(0, 0, 0, 0.4)
+
+	.profile-sticky
+		position: sticky
+		top: 0
+		bottom: 0
+		padding: 10px
+
+	.pfp
+		margin: 25px 0
+
+	.full-name
+		margin: 0 0 8px
+		font-size: 30px
+
+	.username
+		margin: 0
+		font-size: 20px
+		font-weight: normal
+
+	.profile-counter
+		line-height: 1.3
+
+		.count
+			font-weight: bold
+
+.timeline
+	--image-size: 260px
+	$image-size: var(--image-size)
+	$background: #fff4e8
+
+	@media screen and (max-width: $layout-a-max)
+		--image-size: 120px
+
+	background-color: $background
+	padding: 15px 15px 12vh
+
+	.page-number
+		color: #444
+		line-height: 1
+		max-width: 600px
+		margin: 0px auto
+		padding: 20px 0px // separate margin and padding for better page hash jump locations
+		text-align: center
+		position: relative
+
+		.number
+			position: relative
+			z-index: 1
+			padding: 10px
+			background-color: $background
+
+		&::before
+			position: absolute
+			display: block
+			content: ""
+			left: 0
+			right: 0
+			top: 50%
+			border-top: 1px solid
+
+	.next-page-container
+		margin: 20px 0px
+		display: flex
+		justify-content: center
+
+		.next-page
+			@include link-button
+			font-size: 18px
+
+	.timeline-inner
+		display: flex
+		justify-content: center
+		flex-wrap: wrap
+		margin: 0 auto
+
+		.image
+			$margin: 5px
+
+			background-color: rgba(40, 40, 40, 0.25)
+			margin: $margin
+			max-width: $image-size
+			max-height: $image-size
+			width: 100%
+			height: 100%
+
+			&:hover
+				$border-width: 3px
+				margin: $margin - $border-width
+				border: $border-width solid #111