add files

1 files changed, 855 insertions, 0 deletions

diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..42a44fa
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,855 @@
+:root {
+	--theme-main-background: #111;
+	--theme-lighter-background: #222;
+	--theme-lightest-background: #333;
+
+	--theme-main-text: #eee;
+	--theme-darker-text: #999;
+	--theme-transparent-border: rgba(128,128,128,.3);
+
+	--theme-yellow: #ff0;
+}
+
+/* minecraft font */
+@font-face {
+	font-family: Minecraft;
+	src: url(https://cdn.matdoes.dev/fonts/Minecraft.ttf);
+	font-display: swap;
+}
+
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic.woff2) format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-italic.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2) format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-italic-bold.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2) format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-bold.woff2) format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-bold.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+  
+
+
+
+body {
+	font-family: Twemoji, 'Atkinson Hyperlegible', sans-serif;
+	color: var(--theme-main-text);
+	background-color: var(--theme-main-background);
+	margin: 0;
+	overflow-x: hidden;
+}
+html {
+	scroll-behavior: smooth
+}
+
+/* content is uglier when its max width */
+main {
+	margin: 0 auto;
+	width: 80%;
+	padding: 1em;
+}
+
+.member-container {
+	position: relative
+}
+
+/* makes random height and stuff look less broken */
+* {
+	box-sizing: border-box;
+	vertical-align: baseline;
+}
+
+/* base styles for inputs */
+input[type=text], input[type=submit] {
+	-webkit-appearance: none;
+	background-color: transparent;
+	color: var(--theme-darker-text);
+	transition-duration: 250ms;
+	border: 1px solid var(--theme-transparent-border);
+	border-radius: 4px;
+	margin: 0;
+	height: 2em;
+	font-size: 1em;
+}
+
+/* base styles for text input boxes */
+input[type=text] {
+	text-align: left;
+	padding-left: .5em
+}
+/* Selecting a text box */
+input[type=text]:focus {
+	/* make the text lighter */
+	color: var(--theme-main-text)
+}
+
+
+/* base styles for buttons */
+input[type=submit] {
+	margin-left: .2em;
+	cursor: pointer;
+}
+/* Hovering over a button */
+input[type=submit]:hover {
+	/* make the text lighter */
+	color: var(--theme-main-text)
+}
+
+/* base styles for anchor tags */
+a {
+	color: #19f;
+	text-decoration: none;
+}
+
+
+h1 {
+	font-size: 2.5em;
+	overflow-wrap: anywhere
+}
+h2, h3 {
+	margin-top: 0;
+	margin-bottom: .2em
+}
+hr {
+	opacity: .2
+}
+button {
+	outline: none;
+	font-family: inherit
+}
+
+
+.enter-username-button, .view-profiles-button {
+	/* add a slight shadow on the form in the index page */
+	box-shadow: 0 0 1em #000;
+}
+.enter-username-button {
+	max-width: calc(90vw - 8em);
+}
+
+/* the main "SkyBlock stats" title */
+#main-title {
+	text-align: center;
+	font-size: calc(2em + 1vw);
+	margin-top: 0;
+	/*! top: 1em; */
+	/*! position: relative; */
+	padding-top: .5em;
+}
+
+/* the main "enter username" form */
+.user-form {
+	text-align: center;
+	font-size: 1.25rem;
+
+	/* center the forms */
+	margin: 0 auto;
+	width: max-content;
+}
+
+.username {
+	/* usernames have the minecraft font */
+	font-family: Minecraft, sans-serif;
+	/* rreduce the size of the text because the font is too big */
+	font-size: .8em;
+	overflow-wrap: anywhere
+}
+
+.emoji {
+	position: relative;
+	height: 1em;
+	vertical-align: text-bottom;
+	bottom: .1em
+}
+
+.username-rank-prefix {
+	font-family: Minecraft, sans-serif;
+	font-size: .8em;
+	overflow-wrap: anywhere
+}
+
+.profile-name {
+	margin-right: .5em
+}
+
+.profile-members {
+	color: var(--theme-main-text)
+}
+.profile-members .username {
+	margin-right: .35em;
+}
+
+.profile-list, .leaderboard-profile-list {
+	font-size: 1.5em;
+}
+
+.profile-list-item {
+	margin-bottom: .5em;
+	color: var(--theme-darker-text)
+}
+.profile-list-item-active {
+	color: #fff
+}
+.profile-list-item-online {
+	color: #0e0
+}
+
+.head {
+	user-select: none
+}
+
+.head2d {
+	/* pixelated rendering on 2d heads */
+	image-rendering: crisp-edges;
+	image-rendering: pixelated;
+	/* make the head centered correctly */
+	position: relative;
+	top: .1em;
+	/* same size as font */
+	height: 1em;
+	width: 1em;
+}
+
+.head3d {
+	/* make the head centered correctly */
+	position: relative;
+	top: .2em;
+	/* same size as font */
+	height: 1em;
+	width: 1em;
+}
+
+.userHead {
+	/* make the head not be touching the username */
+	margin-right: .2em;
+}
+
+/* add a collapsible svg arrow */
+.collapseArrow {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNMTcuNSA0Ljc1bC03LjUgNy41LTcuNS03LjVMMSA2LjI1bDkgOSA5LTl6IiBmaWxsPSIjYWFhIi8+IDwvc3ZnPg==);
+	width: 20px;
+	height: 20px;
+	display: inline-block;
+	margin-right: 1em;
+	/* transition-duration: 100ms */
+}
+
+.collapsePart:not(.collapsed) .collapseArrow {
+	transform: rotate(-180deg)
+}
+
+.sectionTitle {
+	display: inline-block;
+	margin: 0;
+	text-shadow: 0 0 .5em #000;
+}
+
+/* hide all elements preceding a collapsed section */
+.collapsePart.collapsed ~ * {
+	display: none
+}
+.collapsePart {
+	cursor: pointer
+}
+
+#categories section {
+	margin-bottom: .5em
+}
+
+h2.sectionTitle {
+	font-size: 1.5em
+}
+
+#toc {
+	border: 1px solid rgba(255,255,255,0.1);
+	max-width: max-content;
+	padding: .75em;
+	border-radius: 1em;
+
+	display: inline-block;
+	background: rgba(0,0,0,.1);
+}
+#toc li {
+	list-style-type: none;
+}
+.member-leaderboard-item-anchor {
+	color: inherit
+}
+.member-leaderboard-item {
+	list-style-type: none
+}
+
+.item {
+	display: inline-block;
+	font-size: 32px;
+	width: 1.2em;
+	height: 1.2em;
+	transition-property: font-size;
+	transition-duration: 500ms
+}
+.item-slot {
+	border: 1px solid #888;
+	border-radius: .1em
+}
+.item img {
+	position: absolute;
+	margin-top: .075em;
+	margin-left: .075em;
+	width: 1em;
+	height: 1em;
+}
+/* only pixelate items if they're not a head */
+.item img:not(.item-custom-head) {
+	image-rendering: crisp-edges;
+	image-rendering: pixelated;
+}
+
+.item-slot {
+	margin: .05em
+}
+
+.item-count {
+	font-size: .45em;
+	float: right;
+	position: relative;
+	top: 1.21em;
+	right: .1em;
+	font-family: Minecraft
+}
+
+.inventory-content:not(.inventory-content-active) {
+	display: none
+}
+
+#inventory-tabs {
+	margin-bottom: 1em;
+	margin-bottom: 1em;
+	overflow: hidden;
+	border-radius: 1em;
+	max-width: max-content;
+	width: min(40em, 100%);
+}
+.inventory-tab {
+	background-color: var(--theme-lighter-background);
+	color: var(--theme-main-text);
+	border: none;
+	padding: 1em;
+	cursor: pointer;
+	transition-duration: 200ms
+}
+.inventory-tab:hover, .inventory-tab-active {
+	background-color: var(--theme-lightest-background)
+}
+
+#global-tooltip {
+	position: absolute;
+	user-select: none;
+	pointer-events: none;
+	overflow: hidden;
+	z-index: 100;
+	background-color: #0a0a0aee;
+	padding: 0 .25rem;
+	border-radius: 3px;
+	box-shadow: 0 0 0 3px #206,0 0 0 6px #000;
+	font-family: Minecraft;
+	white-space: nowrap;
+}
+#global-tooltip p {
+	margin: 0
+}
+#global-tooltip .item-lore-name {
+	margin-bottom: .5em
+}
+
+
+#armor {
+	margin-right: 2em;
+	height: 16em;
+	display: inline-block;
+}
+#armor.armor-float {
+	float: left
+}
+
+#inventories {
+	display: inline-block;
+	min-height: 16em
+}
+.inventory-container-armor .item-slot {
+	display: block;
+	margin-bottom: .25em
+}
+img.item-custom-head {
+	width: .75em;
+	height: .75em;
+	margin-top: .1875em;
+	margin-left: .1875em;
+}
+
+.github-mark {
+	position: absolute;
+	top: .75em;
+	left: .75em;
+	opacity: .2;
+	transition-property: opacity;
+	transition-duration: 200ms;
+}
+.github-mark:hover {
+	opacity: .4
+}
+
+.list-item-with-icon {
+	list-style: none;
+	padding-left: 1.2em;
+	position: relative;
+	right: 1.2em;
+	image-rendering: crisp-edges;
+	image-rendering: pixelated;
+}
+
+tr {
+	text-align: left
+}
+
+.minions-table-locked {
+	opacity: .2
+}
+.minions-table-unlocked {
+	color: #3e3
+}
+
+.darker-text {
+	color: var(--theme-darker-text)
+}
+.main-text {
+	color: var(--theme-main-text)
+}
+
+@media only screen and (max-width: 490px) {
+	#inventories .item {
+		font-size: 24px
+	}
+}
+@media only screen and (max-width: 370px) {
+	#inventories .item {
+		font-size: 16px
+	}
+}
+
+
+
+#main-header {
+	background-color: var(--theme-background);
+	box-shadow: 0 0 1em rgba(0, 0, 0, .8)
+}
+
+header {
+	padding: .5rem 10%;
+}
+header .user-form {
+	margin: 0;
+	display: inline-block
+}
+header .enter-username-button {
+	box-shadow: none;
+}
+
+.back-arrow {
+	float: left;
+	transition: stroke 200ms;
+	stroke: var(--theme-darker-text);
+	margin-top: .4em;
+	margin-right: 1em;
+}
+.back-arrow:hover {
+	stroke: var(--theme-main-text)
+}
+
+#infobox {
+	float: right;
+	max-width: 95%;
+	background-color: rgba(20,20,20,.4);
+	padding: 1em;
+	margin-top: 2em;
+	width: 20em;
+	border-radius: .5em;
+	box-shadow: 0 0 1em #000;
+}
+
+#infobox p {
+	margin: 0 0 .25em 0;
+}
+
+@media only screen and (max-width: 600px) {
+	#infobox {
+		position: relative;
+		right: -2em;
+		margin-top: 0
+	}
+}
+@media only screen and (max-width: 550px) {
+	#infobox {
+		position: unset;
+		box-shadow: none;
+		float: none;
+		border: 1px solid var(--theme-lighter-background);
+	}
+}
+
+#login-button {
+	position: absolute;
+	right: .5em;
+	top: .5em;
+	border: 1px solid var(--theme-lighter-background);
+	padding: .5em;
+	transition-property: border, background-color;
+	transition-duration: 200ms;
+	border-radius: .5em;
+	color: var(--theme-main-text)
+}
+#login-button:hover {
+	background-color: var(--theme-lighter-background);
+	border-color: var(--theme-lightest-background);
+}
+#edit-profile-things {
+	margin-top: 2em
+}
+#edit-profile-title {
+	margin-bottom: 0
+}
+#background-selector {
+	display: flex;
+	flex-wrap: wrap
+}
+#background-selector > span {
+	display: inline-block;
+	height: 10em;
+	width: 18em;
+	background-position: center;
+	background-size: 110%;
+	margin: .5em;
+	border-radius: 1em;
+	transition: background-size 500ms;
+	cursor: pointer
+}
+#background-selector > span:hover {
+	background-size: 125%;
+}
+#profile-emoji-selector {
+	width: 2em;
+	padding: 0;
+	text-align: center;
+}
+
+
+.leaderboard-profile-list-item {
+	overflow-wrap: break-word
+}
+#leaderboard-profile-list {
+	margin-top: 1em
+}
+#leaderboard-title {
+	margin-bottom: 0
+}
+#leaderboard-info {
+	margin-top: .5em;
+	display: block
+}
+.skill-extra-info {
+	position: absolute;
+	opacity: .5;
+	left: 23em
+}
+.skill-level {
+	opacity: .9
+}
+.skill-maxed {
+	color: #0e0;
+	opacity: 1
+}
+.tooltip {
+	position: relative;
+	cursor: pointer;
+	/* commented out because idk why this is here */
+	/* max-width: max-content */
+}
+.tooltip::after {
+	font-size: 1rem;
+	display: inline-block;
+	left: 50%;
+	opacity: 0;
+	position: absolute;
+	z-index: -100;
+	background: var(--theme-lightest-background);
+	border-radius: .25em;
+	bottom: 125%;
+	color: var(--theme-main-text);
+	content: attr(data-tooltip);
+	margin-left: max(calc(-50% - 1em), -5em);
+	padding: .5em;
+	transition: all 200ms;
+	transform: scale(.6) translateY(50%);
+	width: max-content;
+	text-align: center;
+	max-width: 10em;
+	cursor: auto;
+	box-shadow: 0 0 1em .5em #0002;
+	pointer-events: none
+}
+.tooltip:hover::after, .tooltip:focus::after {
+	opacity: .9;
+	transform: scale(1) translateY(0);
+	z-index: 100;
+}
+/* hide all the tooltips after if one is selected, unfortunately we can't select all the elements before :( */
+.tooltip:focus ~ .tooltip::after {
+	transform: scale(.6) translateY(50%);
+	opacity: 0
+}
+.leaderboard-title-with-icon {
+	padding-left: 1.2em;
+	position: relative;
+	image-rendering: crisp-edges;
+	image-rendering: pixelated;
+}
+
+.item-custom-head {
+	image-rendering: auto
+}
+
+.total-stat {
+	font-size: 1.2em;
+	list-style-type: none;
+	position: relative;
+	right: 1em;
+	bottom: .5em
+}
+
+.profile-skills {
+	display: inline-block;
+	position: absolute;
+	margin: 1em;
+	margin-top: 1.6em;
+}
+
+.profile-skills > ul {
+	margin-top: 0;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-column-gap: 2em;
+}
+
+.profile-skills > ul > li {
+	width: 10em
+}
+
+
+#collections ul {
+	margin: 0;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-column-gap: 0;
+	width: fit-content
+}
+
+#collections ul > li {
+	width: 12em;
+	height: 1.5em;
+	text-overflow: ellipsis;
+}
+
+#collections h3 {
+	margin: .5em 0 .5em .5em;
+}
+
+@media only screen and (max-width: 1000px) {
+	.profile-skills {
+		position: unset;
+		display: block;
+		width: max-content;
+	}
+	.blurred-background-container-container {
+		left: 0!important;
+		width: 100vw!important;
+		clip: rect(-1.7em, auto, auto, auto);
+	}
+}
+
+@media only screen and (max-width: 500px) {
+	.profile-skills {
+		margin-left: 0;
+		margin-right: 0
+	}
+}
+@media only screen and (max-width: 410px) {
+	.profile-skills > ul {
+		grid-template-columns: repeat(1, 1fr);
+	}
+}
+
+
+.unvisited-zone {
+	opacity: .5
+}
+
+.profile-skills > ul > li {
+	margin: .25em .25em 0 0;
+}
+
+
+.blurred-background-container-container {
+	position: absolute;
+	width: 47rem;
+	height: calc(100% + 1em);
+	z-index: -9;
+	overflow: hidden;
+	clip: rect(-1em, auto, auto, -2em);
+}
+@media only screen and (max-width: 1400px) {
+	.blurred-background-container-container {
+		left: calc(5em + 5%);
+		width: 90%;
+		clip: rect(-1.7em, auto, auto, -10em);
+	}
+	main {
+		margin-top: .75em
+	}
+}
+.blurred-background {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	z-index: -10;
+	object-fit: cover;
+	background-blend-mode: overlay;
+	filter: blur(1em) brightness(.6);
+}
+.profile-emoji {
+	margin-left: .25em
+}
+
+.mayor-grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-column-gap: 1em;
+	grid-row-gap: 1em;
+	margin-top: 1em;
+	margin-bottom: 1em;
+}
+.mayor {
+	display: inline-block;
+	width: 12em;
+	margin-right: 1em;
+	vertical-align: top;
+}
+.mayor h3 {
+	filter: brightness(1.5);
+	text-align: center;
+}
+.mayor img {
+	display: block;
+	width: 5em;
+	margin: 0 auto;
+}
+.mayor-vote-count-number {
+	filter: brightness(1.2);
+}
+.mayor-vote-count {
+	text-align: center;
+	width: 100%;
+	margin: 0 0 .5em 0;
+}
+.mayor-perk h4 {
+	margin-bottom: 0
+}
+.mayor-perk p {
+	margin: 0
+}
+.mayor-candidates {
+	/* display: ; */
+	/* everything next to each other */
+	/* grid-template-columns: repeat(5, 1fr); */
+	max-width: fit-content
+}
+.mayor-perks {
+	list-style-type: none;
+	padding: 0
+}
+.candidate-year {
+	font-weight: normal;
+	color: var(--theme-darker-text)
+}
+.mayor-winner {
+	color: var(--theme-yellow);
+	font-weight: bold;
+	margin: 0;
+	text-align: center;
+	font-size: 1em
+}
+.next-special-mayor-time {
+	color: var(--theme-darker-text)
+}