Merge pull request #4 from Polyfrost/website/icon-fix

2 files changed, 103 insertions, 1 deletions

diff --git a/apps/website/src/styles/blog.css b/apps/website/src/styles/blog.css
new file mode 100644
index 0000000..9cfe3fa
--- /dev/null
+++ b/apps/website/src/styles/blog.css
@@ -0,0 +1,37 @@
+main {
+	width: calc(100% - 2em);
+	max-width: 100%;
+	margin: 0;
+}
+.hero-image {
+	width: 100%;
+}
+.hero-image img {
+	display: block;
+	margin: 0 auto;
+	border-radius: 12px;
+	box-shadow: var(--box-shadow);
+}
+.prose {
+	width: 720px;
+	max-width: calc(100% - 2em);
+	margin: auto;
+	padding: 1em;
+	color: rgb(var(--gray-dark));
+}
+.title {
+	margin-bottom: 1em;
+	padding: 1em 0;
+	text-align: center;
+	line-height: 1;
+}
+.title h1 {
+	margin: 0 0 0.5em 0;
+}
+.date {
+	margin-bottom: 0.5em;
+	color: rgb(var(--gray));
+}
+.last-updated-on {
+	font-style: italic;
+}
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
index 0bbfc2e..371d5e6 100644
--- a/apps/website/src/styles/global.css
+++ b/apps/website/src/styles/global.css
@@ -1,7 +1,11 @@
 @tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
 
 * {
 	font-family: 'Poppins', sans-serif;
+	-webkit-tap-highlight-color: transparent;
 }
 
 @layer base {
@@ -20,6 +24,67 @@
 
 	html,
 	body {
-		@apply text-[14px] md:text-[16px];
+		@apply text-[15px] md:text-[16px] lg:text-[19px] /* overflow-hidden */;
 	}
+
+	a {
+		-webkit-user-drag: none;
+	}
+}
+
+/* [data-scroll-container], [data-scroll-section] {
+	transform-style: preserve-3d;
+	will-change: transform;
+	perspective: 1px;
+} */
+
+main {
+	@apply overflow-x-hidden;
+}
+
+/* Codeblocks */
+.astro-code {
+	padding: 10px;
+	border-radius: 16px;
+	border: 1px solid rgba(65, 74, 88, 1);
+	width: 100%;
+	line-height: 18px;
+}
+
+.astro-code code {
+	white-space: pre-wrap;
+	padding: 10px;
+	padding-bottom: 0;
+	color: #546E7A;
+}
+
+.astro-code code::before {
+	counter-reset: listing;
+}
+
+.astro-code code span {
+	font-family: 'Roboto Mono', monospace !important;
+}
+
+.astro-code code span.line {
+	counter-increment: listing;
+	text-align: left;
+	float: left;
+	clear: left;
+	font-size: 13px;
+	white-space: pre;
+}
+
+.astro-code code span.line::before {
+	content: counter(listing) " ";
+	display: inline-block;
+	float: left;
+	width: 2em;
+	padding: 0;
+	margin-left: auto;
+	margin-right: 1ch;
+	/* margin-right: 10px; */
+	text-align: right;
+	font-family: 'Roboto Mono', monospace !important;
+	font-size: 13px;
 }