Added Images and Readme

README.md

@@ -1,2 +1,40 @@
 # Archie - Hugo theme
-Archie is a minimal and clean theme for hugo 
+Archie is a minimal and clean theme for hugo with a markdown-ish UI.
+
+Forked from [Ezhil Theme](https://github.com/vividvilla/ezhil)
+
+## Demo
+
+[Check the Demo](https://athul.github.io/archie/) hosted on GitHub Pages :smile:
+
+![](/images/theme.png)
+
+## Feature
+- Google Analytics Script
+- Callouts
+- Tags
+- tl:dr; frontamatter
+
+## Installation
+In your Hugo website directory, create a new folder named theme and clone the repo
+```bash
+$ mkdir themes
+$ cd themes
+$ git clone https://github.com/athul/archie.git
+```
+Edit the `config.toml` file with `theme="archie"`
+For more information read the official [setup guide](https://gohugo.io/overview/installing/) of Hugo.
+
+## Writing Posts
+Create a new `.md` file in the *content/post* folder
+```yml
+---
+title: Title of the post
+description:
+date:
+tldr: (optional)
+---
+```
+
+## Credits
+Forked from [Ezhil Theme](https://github.com/vividvilla/ezhil) and Licensed under MIT License   

static/css/main.css

@@ -26,18 +26,6 @@ body{
   color: #fff;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-size: 1.2rem;
-  margin-top: 2em;
-}
-
-h1::before { color: var(--maincolor); content: '# '; }
-h2::before { color: var(--maincolor); content: '## '; }
-h3::before { color: var(--maincolor); content: '### '; }
-h4::before { color: var(--maincolor); content: '#### '; }
-h5::before { color: var(--maincolor); content: '##### '; }
-h6::before { color: var(--maincolor); content: '###### '; }
-
 p {
   font-family: 'IBM Plex Sans', sans-serif;
   line-height: 1.5;
@@ -156,6 +144,17 @@ header {
 header .main {
   font-size: 1.5rem;
 }
+h1, h2, h3, h4, h5, h6 {
+  font-size: 1.2rem;
+  margin-top: 2em;
+}
+
+h1::before { color: var(--maincolor); content: '# '; }
+h2::before { color: var(--maincolor); content: '## '; }
+h3::before { color: var(--maincolor); content: '### '; }
+h4::before { color: var(--maincolor); content: '#### '; }
+h5::before { color: var(--maincolor); content: '##### '; }
+h6::before { color: var(--maincolor); content: '###### '; }
 
 /* Footer */
 footer {
@@ -215,3 +214,11 @@ svg{
   background-color: hotpink;
   color: white;
 }
+time .draft-label{
+    color: #3700ff;
+    text-decoration: none;
+    padding: 2px 4px;
+    border-radius: 4px;
+    margin-left: 6px;
+    background-color: #f9f2f4;
+}