Add separate works div

5 files changed, 22 insertions, 12 deletions

diff --git a/docs/stories.html b/docs/stories.html
index 173f076..487a9c9 100644
--- a/docs/stories.html
+++ b/docs/stories.html
@@ -19,6 +19,7 @@
     </nav>
     <main>
         
+<div class="works">
     
         <a href=".&#x2F;stories&#x2F;mit_gutem_gewissen.pdf" style="background-image: url('./images/workcardimages/mit_gutem_gewissen_image.png');" class="work-card" download>
                     <div class="title-and-description">
@@ -56,6 +57,7 @@
                     </div>
         </a>
     
+</div>
 
     </main>
     <footer>
diff --git a/docs/style.css b/docs/style.css
index 2981ad6..e27e7bc 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -36,16 +36,18 @@ nav {
 main {
   margin: 2em;
   min-height: calc(100vh - 108.8px - 25.6px - 25.6px);
+}
+main .works {
   display: grid;
   row-gap: 2em;
   column-gap: 2em;
 }
-main .work-card:nth-child(even) {
+main .works .work-card:nth-child(even) {
   background-position: left;
   align-items: flex-end;
 }
 @media screen and (min-width: 992px) {
-  main {
+  main .works {
     grid-template-columns: 1fr 1fr;
   }
 }
diff --git a/docs/style.css.map b/docs/style.css.map
index 8f65e8f..157ee13 100644
--- a/docs/style.css.map
+++ b/docs/style.css.map
@@ -1 +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
+{"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;;AACA;EAKI;EACA;EACA;;AANA;EACI;EACA;;AAMJ;EATJ;IAUQ;;;;AAOZ;EACI;;;AAGJ;EACI;EACA;;AACA;EACI,cAjEO;EAkEP;;;AAIR;EACI;EACA,kBA1EQ;EA2ER;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA,OAvFG;;AAyFP;EANJ;IAOQ;IACA;;;AAEJ;EAVJ;IAWQ;IACA;;;AAKJ;EACI,kBAxGO;EAyGP;EACA;;AAGR;EACI","file":"style.css"}
\ No newline at end of file
diff --git a/sass/style.scss b/sass/style.scss
index 83755e4..ef30a11 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -41,19 +41,23 @@ nav {
 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;
+    .works {
+        .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;
+        @media screen and (min-width: 992px) {
+            grid-template-columns: 1fr 1fr;
+        }
     }
+
 }
 
+
 footer {
     text-align: center;
 }
diff --git a/templates/stories.html b/templates/stories.html
index 481a431..bc77644 100644
--- a/templates/stories.html
+++ b/templates/stories.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 {% block title %}Stories{% endblock title %}
 {% block content %}
+<div class="works">
     {% for work in works %}
         <a href="{{work.path_to_document}}" style="background-image: url('./images/workcardimages/{{work.path_to_image}}');" class="work-card" download>
                     <div class="title-and-description">
@@ -14,4 +15,5 @@
                     </div>
         </a>
     {% endfor %}
+</div>
 {% endblock content %}