Add styling and content

14 files changed, 315 insertions, 11 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
diff --git a/sass/style.scss b/sass/style.scss
new file mode 100644
index 0000000..83755e4
--- /dev/null
+++ b/sass/style.scss
@@ -0,0 +1,109 @@
+$background-color: #131313;
+$box-color: #333;
+$font-color: lightgray;
+$accent-color: #a29d7f;
+
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    &:focus, &::selection {
+        background-color: inherit;
+        outline: none !important;
+        color: lighten($color: $font-color, $amount: 10);
+    }
+}
+
+body {
+    background-color: $background-color;
+    color: $font-color;
+    font-family: Arial, Helvetica, sans-serif;
+    line-height: 1.6;
+}
+
+header {
+    text-align: center;
+    padding: 1em 0em;
+    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: $background-color;
+}
+
+main {
+    margin: 2em;
+    min-height: calc(100vh - 108.8px - 25.6px - 25.6px);
+    .work-card:nth-child(even) {
+        background-position: left;
+        align-items: flex-end;
+    }
+    display: grid;
+    row-gap: 2em;
+    column-gap: 2em;
+
+    @media screen and (min-width: 992px) {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+footer {
+    text-align: center;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+    &:hover {
+        border-color: $accent-color;
+        color: lighten($color: $font-color, $amount: 10);
+    }
+}
+
+.work-card {
+    padding: 2em;
+    background-color: $box-color;
+    border-radius: 0.3em;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: right;
+    border: 1px solid $background-color;
+    height: 250px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-blend-mode: overlay;
+    .title-and-description, .info {
+        max-width: 50%;
+        h3 {
+            font-weight: lighter;
+            color: $accent-color;
+        }
+        @media screen and (max-width: 650px) {
+            font-size: 0.8em;
+            max-width: 70%;
+        }
+        @media screen and (max-width: 500px) {
+            font-size: 0.7em;
+            max-width: 100%;
+        }
+
+    }
+    .info {
+        span {
+            background-color: $background-color;
+            padding: 0.5em;
+            margin: 0 0.5em;
+        }
+    }
+    &:hover {
+        border: 1px solid $accent-color;
+    }
+}
diff --git a/templates/base.html b/templates/base.html
index 4904cef..f0e855a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -9,7 +9,20 @@
 </head>
 
 <body>
-    {% block content %} {% endblock content%}
+    <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>
+        {% block content %} {% endblock content%}
+    </main>
+    <footer>
+        Vithuran Vishnuthas &copy; 2022
+    </footer>
 </body>
 
 </html>
diff --git a/templates/index.html b/templates/index.html
index f4f49ab..389a285 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
 {% block title %}Home{% endblock title %}
 {% block content %}
-<h1>Home</h1>
+<h2>Home</h1>
 {% endblock content %}
diff --git a/templates/stories.html b/templates/stories.html
index 34384a3..4c1267b 100644
--- a/templates/stories.html
+++ b/templates/stories.html
@@ -2,7 +2,18 @@
 {% block title %}Stories{% endblock title %}
 {% block content %}
 {% for work in works %}
-    {{work.title}}
-    {{work.description}}
+<a href="{{work.path_to_document}}" style="background-image: url('{{work.path_to_image}}');" class="work-card" download>
+    <!--<article class="story-section" style="background-image: url('{{work.path_to_image}}');">-->
+            <div class="title-and-description">
+                <h3>{{work.title}}</h3>
+                <p>{{work.description}}</p>
+            </div>
+            <div class="info">
+                <span>{{work.number_of_pages}} Pages</span>
+                <span>{{work.language}}</span>
+                <span>{{work.story_type}}</span>
+            </div>
+            <!--</article>-->
+</a>
 {% endfor %}
 {% endblock content %}