2 files changed, 137 insertions, 0 deletions
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..57948b4
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Meta tags for SEO -->
+    <meta name="description" content="Venkatesh Chaturvedi, passionate about Linux and FOSS.">
+    <meta name="keywords"
+        content="Venkatesh Chaturvedi, Blaster4385, tablaster, FOSS, CLI tools, Linux, Android, Open Source, git">
+    <meta name="author" content="Venkatesh Chaturvedi">
+    <meta name="robots" content="index, follow">
+    <!-- Open Graph meta tags for social sharing -->
+    <meta property="og:title" content="Blaster4385">
+    <meta property="og:description" content="Venkatesh Chaturvedi, passionate about Linux and FOSS.">
+    <meta property="og:image" content="https://github.com/Blaster4385.png">
+    <meta property="og:url" content="https://tablaster.dev">
+    <meta property="og:type" content="website">
+    <!-- Twitter Card meta tags for social sharing -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:creator" content="@Blaster4385">
+    <meta name="twitter:title" content="Blaster4385">
+    <meta name="twitter:description" content="Venkatesh Chaturvedi, passionate about Linux and FOSS.">
+    <meta name="twitter:image" content="https://github.com/Blaster4385.png">
+    <title>{{.Title}}</title>
+    <style>
+        {{.CSS}}
+    </style>
+    <link rel="icon" type="image/png" href="{{.Favicon}}">
+</head>
+
+<body>
+    <main class="container">
+        <header id="header">
+            <h1><a href="/">$ tablaster.dev</a></h1>
+        </header>
+        <div id="markdown">
+            {{.Body}}
+        </div>
+    </main>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/templates/styles.css b/templates/styles.css
new file mode 100644
index 0000000..9f8d7bd
--- /dev/null
+++ b/templates/styles.css
@@ -0,0 +1,94 @@
+:root {
+    --font-family: 'JetBrains Mono', monospace;
+    --color-background: #282828;
+    --color-text: #ebdbb2;
+    --color-accent: #fabd2f;
+    --color-highlight: #b8bb26;
+  }
+  
+  body {
+    font-family: var(--font-family);
+    background-color: var(--color-background);
+    color: var(--color-text);
+    margin: 0;
+    padding: 0;
+  }
+  
+  body::-webkit-scrollbar {
+    width: 11px;
+  }
+  
+  body::-webkit-scrollbar-track {
+    background: var(--color-background);
+  }
+  body::-webkit-scrollbar-thumb {
+    background-color: var(--color-text) ;
+    border-radius: 6px;
+    border: 3px solid var(--color-background);
+  }
+  
+  body::-webkit-scrollbar-thumb:hover {
+    border: 1px solid var(--color-background);
+  }
+  
+  .container {
+    margin: auto;
+    max-width: 1280px;
+  }
+  
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: bold;
+    color: var(--color-accent);
+  }
+  
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+  
+  code {
+    background-color: #444;
+    display: inline-block;
+    padding: 8px;
+    border-radius: 4px;
+    color: #b8bb26;
+  }
+  
+  #markdown {
+    margin: 20px;
+  }
+  
+  #header {
+    text-align: center;
+    padding: 20px;
+  }
+  
+  ul {
+    list-style-type: none;
+    padding-left: 20px;
+  }
+  
+  li::before {
+    content: "*";
+    color: var(--color-highlight);
+    margin-right: 10px;
+  }
+  
+  li {
+    margin-bottom: 10px;
+  }
+  
+  p {
+    font-size: 1.5 rem;
+    line-height: 1.5;
+    text-align: justify;
+  }
+  
+  hr {
+    border: 1px solid var(--color-text);
+  }
+\ No newline at end of file