rework to use new @besties/html2png

assets/style.css

@@ -1,7 +1,9 @@
+div {
+	display: flex;
+}
 p {
 	margin: 0px;
 }
-
 .wrapper {
 	background-color: #10121d;
 	display: flex;
@@ -10,7 +12,6 @@ p {
 	width: 1200px;
 	height: 600px;
 }
-
 .main {
 	color: #ffffff;
 	display: flex;
@@ -21,37 +22,31 @@ p {
 	width: 1050px;
 	height: 600px;
 }
-
 .has-languages .main {
 	height: 576px;
 }
-
 .contents {
 	display: flex;
 	width: 100%;
 	gap: 30px;
 }
-
-.info {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	width: 900px;
-}
-
 .graphics {
 	display: flex;
 	justify-content: flex-end;
 	align-items: flex-start;
 	width: 120px;
 }
-
 .graphics > img {
 	border-radius: 100%;
 	width: 120px;
 	height: 120px;
 }
-
+.info {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	width: 900px;
+}
 .title {
 	width: 100%;
 	font-weight: 800;
@@ -59,64 +54,16 @@ p {
 	line-height: 1em;
 	margin-bottom: 0.1em;
 }
-
-.issue .title {
-	display: flex;
-	column-gap: 0.25em;
-	flex-wrap: wrap;
-}
-
-.repo .title {
-	white-space: nowrap;
-}
-
 .title span.word {
 	max-width: 100%;
 	padding: 2rem 0;
 	margin: -2rem 0;
 	white-space: nowrap;
 }
-
 .title span.word:last-child {
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-
-.issue .number {
-	font-weight: 400;
-	color: #6d728f;
-}
-
-.repo .author {
-	display: flex;
-	align-items: center;
-	gap: 0.75rem;
-	font-size: 2.5rem;
-	font-weight: 600;
-	color: #aeb3d0;
-}
-
-.repo .author .username {
-	font-size: 1.75rem;
-	font-weight: 400;
-	color: #6d728f;
-}
-
-.issue .repo-name {
-	font-size: 2.5rem;
-	color: #6d728f;
-}
-.commit .repo-name {
-	font-size: 2.5rem;
-	color: #6d728f;
-}
-
-.repo .repo-name {
-	font-weight: 800;
-	font-size: 4.5rem;
-	line-height: 1.2em;
-}
-
 .description {
 	width: 100%;
 	padding: 0.5em 0;
@@ -130,21 +77,9 @@ p {
 	text-overflow: ellipsis;
 	-webkit-line-clamp: 2;
 }
-
 .is-debug .description {
 	display: block;
 }
-
-.languages {
-	width: 100%;
-	display: flex;
-	height: 24px;
-}
-
-.language {
-	height: 100%;
-}
-
 .info-line {
 	display: flex;
 	font-size: 1.75rem;
@@ -153,32 +88,24 @@ p {
 	align-items: center;
 	width: 100%;
 }
-
 .info-line:last-child {
 	margin-top: 1rem;
 }
-
 .info-line .author {
 	color: #ffffff;
 	font-weight: 700;
 }
-
 .info-line .avatar {
 	width: 48px;
 	height: 48px;
 	margin: 0;
 	border-radius: 100%;
 }
-
-.fact {
+.languages {
+	width: 100%;
 	display: flex;
-	margin-right: 0.5em;
-	font-size: 1.5rem;
-	flex-direction: column;
+	height: 24px;
 }
-
-.fact-heading {
-	color: #8c91af;
-	font-size: 2rem;
-	font-weight: 600;
+.language {
+	height: 100%;
 }