First try

* removed jquery bootstrap
* use css grid to center

1 files changed, 39 insertions, 47 deletions

diff --git a/common/css/main.css b/common/css/main.css
index 8de186d..6d4bf93 100644
--- a/common/css/main.css
+++ b/common/css/main.css
@@ -1,65 +1,57 @@
-html {
-	height: 100%; 
+html, body {
+	height: 100%;
 	width: 100%;
+	margin: 0;
 }
-
 body {
-	z-index: 1; 
-	height: 100%; 
-	width: 100%; 
-	background-position: center; 
+	z-index: 1;
+	background-position: center;
 	background-attachment: fixed;
 }
 
-.itemlist {
-	border-radius: 6px; 
-	background-color: rgba(0, 0, 0, .4); 
-	padding: 20px;
-	box-sizing: border-box;
+.github-corner {
+	opacity: 0.3;
 }
-
-.itemlist a {
-	color: #fff;
+.github-corner:hover {
+	opacity: 1;
 }
 
 #wrapper {
-	font-size: 80px;
-	position: fixed;
-	left: 50%;
-	top: 50%;
-	transform: translate(-50%, -50%);
-	padding-bottom: 3px;
-	width: fit-content;
-	height: auto;
-	max-width: 80%;
-	max-height: 85%;
-	overflow: auto;
-	display: flex;
-	overflow-y: auto;
+	text-align: center;
 }
-
-#wrapper a {
-	transition: .3s all;
+.itemlist {
+	display: inline-grid;
+	grid-template-columns: repeat(2, 1fr);
+	margin: 0.5em 0;
 }
-
-#wrapper a:hover {
-	color: #c4c4c4;
+@media only screen and (min-width: 600px) and (max-width: 799px) {
+	.itemlist {
+		grid-template-columns: repeat(3, 1fr);
+	}
 }
-
-#wrapper .link {
-	display: inline-block;
-	width: 33%;
-	float: left;
-	text-align: center;
+@media only screen and (min-width: 800px) {
+	.itemlist {
+		grid-template-columns: repeat(6, 1fr);
+	}
 }
 
-#wrapper::-webkit-scrollbar {
-	width: 10px;
-	background-color: transparent;
+.itemlist {
+	border-radius: 6px;
+	background-color: rgba(0, 0, 0, .4);
+	font-size: 4em;
+}
+.itemlist>* {
+	padding: 15px;
+	margin: 0 auto;
 }
 
-#wrapper::-webkit-scrollbar-thumb {
-	border-radius: 6px;
-	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.4);
-	background-color: rgba(255,255,255,.2);
+
+
+
+/* link colors */
+.itemlist a {
+	color: #fff;
+}
+.itemlist a:hover {
+	color: #c4c4c4;
 }