10 files changed, 178 insertions, 7 deletions
diff --git a/docs/images/das_schweigende_spiegelbild_image.png b/docs/images/das_schweigende_spiegelbild_image.png
new file mode 100644
index 0000000..115a343
--- /dev/null
+++ b/docs/images/das_schweigende_spiegelbild_image.png
diff --git a/docs/images/hubristic_failures_image.png b/docs/images/hubristic_failures_image.png
new file mode 100644
index 0000000..a96bd3e
--- /dev/null
+++ b/docs/images/hubristic_failures_image.png
diff --git a/docs/images/mit_gutem_gewissen_image.png b/docs/images/mit_gutem_gewissen_image.png
new file mode 100644
index 0000000..d320e63
--- /dev/null
+++ b/docs/images/mit_gutem_gewissen_image.png
diff --git a/docs/index.html b/docs/index.html
index 1c46dbe..bc925a0 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -9,9 +9,22 @@
 </head>
 
 <body>
-    
-<h1>Home</h1>
+    <header>
+        <u><h1><a href="./index.html">Writer V2</a></h1></u>
+        Vithuran Vishnuthas
+    </header>
+    <nav>
+            <a href="./index.html">Home</a>
+            <a href="./stories.html">Stories</a>
+    </nav>
+    <main>
+        
+<h2>Home</h1>
 
+    </main>
+    <footer>
+        Vithuran Vishnuthas &copy; 2022
+    </footer>
 </body>
 
 </html>
diff --git a/docs/stories.html b/docs/stories.html
index 0fc9dc4..71db5ff 100644
--- a/docs/stories.html
+++ b/docs/stories.html
@@ -9,15 +9,64 @@
 </head>
 
 <body>
-    
+    <header>
+        <u><h1><a href="./index.html">Writer V2</a></h1></u>
+        Vithuran Vishnuthas
+    </header>
+    <nav>
+            <a href="./index.html">Home</a>
+            <a href="./stories.html">Stories</a>
+    </nav>
+    <main>
+        
 
-    Test
-    Test
+<a href=".&#x2F;stories&#x2F;mit_gutem_gewissen.pdf" style="background-image: url('.&#x2F;images&#x2F;mit_gutem_gewissen_image.png');" class="work-card" download>
+    <!--<article class="story-section" style="background-image: url('.&#x2F;images&#x2F;mit_gutem_gewissen_image.png');">-->
+            <div class="title-and-description">
+                <h3>Mit gutem Gewissen</h3>
+                <p>Lorem ipsum dolor sit amet, officia excepteur.</p>
+            </div>
+            <div class="info">
+                <span>7 Pages</span>
+                <span>German</span>
+                <span>Shortstory</span>
+            </div>
+            <!--</article>-->
+</a>
 
-    Test2
-    Test2
+<a href=".&#x2F;stories&#x2F;das_schweigende_spiegelbild.pdf" style="background-image: url('.&#x2F;images&#x2F;das_schweigende_spiegelbild_image.png');" class="work-card" download>
+    <!--<article class="story-section" style="background-image: url('.&#x2F;images&#x2F;das_schweigende_spiegelbild_image.png');">-->
+            <div class="title-and-description">
+                <h3>Das schweigende Spiegelbild</h3>
+                <p>Em pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia.</p>
+            </div>
+            <div class="info">
+                <span>2 Pages</span>
+                <span>German</span>
+                <span>Shortstory</span>
+            </div>
+            <!--</article>-->
+</a>
 
+<a href=".&#x2F;stories&#x2F;hubristic_failures.pdf" style="background-image: url('.&#x2F;images&#x2F;hubristic_failures_image.png');" class="work-card" download>
+    <!--<article class="story-section" style="background-image: url('.&#x2F;images&#x2F;hubristic_failures_image.png');">-->
+            <div class="title-and-description">
+                <h3>Hubristic Failures</h3>
+                <p>Ui minim labore adipisicing minim sint cillum sint consectetur cupidatat.ex esse exercitation idatat excepteur officia.</p>
+            </div>
+            <div class="info">
+                <span>2 Pages</span>
+                <span>English</span>
+                <span>Screenplay</span>
+            </div>
+            <!--</article>-->
+</a>
 
+
+    </main>
+    <footer>
+        Vithuran Vishnuthas &copy; 2022
+    </footer>
 </body>
 
 </html>
diff --git a/docs/stories/das_schweigende_spiegelbild.pdf b/docs/stories/das_schweigende_spiegelbild.pdf
new file mode 100644
index 0000000..29575c9
--- /dev/null
+++ b/docs/stories/das_schweigende_spiegelbild.pdf
diff --git a/docs/stories/hubristic_failures.pdf b/docs/stories/hubristic_failures.pdf
new file mode 100644
index 0000000..18aef92
--- /dev/null
+++ b/docs/stories/hubristic_failures.pdf
diff --git a/docs/stories/mit_gutem_gewissen.pdf b/docs/stories/mit_gutem_gewissen.pdf
new file mode 100644
index 0000000..a847164
--- /dev/null
+++ b/docs/stories/mit_gutem_gewissen.pdf
diff --git a/docs/style.css b/docs/style.css
index e69de29..2981ad6 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -0,0 +1,108 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+*:focus, *::selection {
+  background-color: inherit;
+  outline: none !important;
+  color: #ededed;
+}
+
+body {
+  background-color: #131313;
+  color: lightgray;
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.6;
+}
+
+header {
+  text-align: center;
+  padding: 1em 0em;
+}
+header h1 {
+  font-family: "Times New Roman", Times, serif;
+  letter-spacing: 0.1em;
+}
+
+nav {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  padding: 0em 2em;
+  background-color: #131313;
+}
+
+main {
+  margin: 2em;
+  min-height: calc(100vh - 108.8px - 25.6px - 25.6px);
+  display: grid;
+  row-gap: 2em;
+  column-gap: 2em;
+}
+main .work-card:nth-child(even) {
+  background-position: left;
+  align-items: flex-end;
+}
+@media screen and (min-width: 992px) {
+  main {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+footer {
+  text-align: center;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+a:hover {
+  border-color: #a29d7f;
+  color: #ededed;
+}
+
+.work-card {
+  padding: 2em;
+  background-color: #333;
+  border-radius: 0.3em;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: right;
+  border: 1px solid #131313;
+  height: 250px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-blend-mode: overlay;
+}
+.work-card .title-and-description, .work-card .info {
+  max-width: 50%;
+}
+.work-card .title-and-description h3, .work-card .info h3 {
+  font-weight: lighter;
+  color: #a29d7f;
+}
+@media screen and (max-width: 650px) {
+  .work-card .title-and-description, .work-card .info {
+    font-size: 0.8em;
+    max-width: 70%;
+  }
+}
+@media screen and (max-width: 500px) {
+  .work-card .title-and-description, .work-card .info {
+    font-size: 0.7em;
+    max-width: 100%;
+  }
+}
+.work-card .info span {
+  background-color: #131313;
+  padding: 0.5em;
+  margin: 0 0.5em;
+}
+.work-card:hover {
+  border: 1px solid #a29d7f;
+}
+
+/*# sourceMappingURL=style.css.map */
diff --git a/docs/style.css.map b/docs/style.css.map
new file mode 100644
index 0000000..8f65e8f
--- /dev/null
+++ b/docs/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;;AAIR;EACI,kBAjBe;EAkBf,OAhBS;EAiBT;EACA;;;AAGJ;EACI;EACA;;AACA;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA,kBArCe;;;AAwCnB;EACI;EACA;EAKA;EACA;EACA;;AANA;EACI;EACA;;AAMJ;EAXJ;IAYQ;;;;AAIR;EACI;;;AAGJ;EACI;EACA;;AACA;EACI,cA7DO;EA8DP;;;AAIR;EACI;EACA,kBAtEQ;EAuER;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA,OAnFG;;AAqFP;EANJ;IAOQ;IACA;;;AAEJ;EAVJ;IAWQ;IACA;;;AAKJ;EACI,kBApGO;EAqGP;EACA;;AAGR;EACI","file":"style.css"}
+\ No newline at end of file