add blogs, move pictures to local + much more

assets/css/main.css

@@ -9,27 +9,49 @@
 html,
 body {
 	background-color: #191819;
+	color: white;
 }
 
 header {
-	background-image: url(https://images.unsplash.com/photo-1524413840807-0c3cb6fa808d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format);
-	background-position: center center;
+	background-image: url(~/assets/pictues/header.avif);
+	background-position: center;
 	background-repeat: no-repeat;
 	background-size: cover;
 }
 
+a {
+	@apply text-rose-500 hover:underline visited:bg-rose-700;
+}
+
 .font-jetbrains {
 	font-family: 'JetBrains Mono', monospace;
 }
 
-.font-rhd {
-	font-family: 'Red Hat Display', sans-serif;
+code, kbd, pre, samp {
+	font-family: 'JetBrains Mono', monospace;
 }
 
 .font-inter {
 	font-family: 'Inter';
 }
 
+.blog-post-img {
+	border-top-left-radius: 0.5rem;
+	border-top-right-radius: 0.5rem;
+}
+
+.text-overflow:before {
+	content: "";
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	--tw-bg-opacity: 1;
+	background: linear-gradient(transparent 150px,
+			rgba(39, 39, 42, var(--tw-bg-opacity)));
+}
+
 .love {
 	text-decoration: underline;
 	text-decoration-color: #EB0066;
@@ -120,6 +142,7 @@ header {
 	column-count: 12;
 }
 
-.bg-grid-pink-600\/\[0\.05\] {
-	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(90 43 136 / 0.05)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
+.btn-tabs {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(75px, max-content));
 }