Merge branch '12-improve-layout-issuepage' into 'master'

Resolve "Improve layout issuePage"

Closes #12

See merge request it2810-h21/team-11/gitlab-visualization!16

src/components/issueComponent/issueComponent.module.css

@@ -7,12 +7,12 @@
     color: black;
     background: #8ECAE6;
     width: 100%;
-    height: 40vh;
+    height: 20vw;
     border-style: solid;
     border-radius: 5px;
     border-color: dodgerblue;
     text-align: center;
-    margin-bottom: 5vw;
+    margin-bottom: 2vw;
     margin-top: 3vw;
     box-shadow: 0 3px 10px black;
 }
@@ -21,15 +21,15 @@
 .title {
     justify-self: center;
     height: 7vw;
-    font-size: 5vw;
+    font-size: 4vw;
     margin: auto;
     grid-column: 1/3;
     grid-row-start: 1;
-    text-shadow: 2px 2px 4px #262626;
+    text-transform: capitalize;
 }
 
 .description {
-    font-size: 3.5vw;
+    font-size: 3vw;
     height: 9vw;
     width: 98%;
     margin: auto;
@@ -37,12 +37,17 @@
     grid-row-start: 2;
 }
 
+.description:first-letter{
+    text-transform: capitalize;
+}
+
 .state {
     height: 3vw;
     margin: auto;
     grid-column-start: 1;
     grid-row-start: 3;
     font-size: 2.5vw;
+    text-transform: capitalize;
 }
 
 .date {
@@ -53,4 +58,40 @@
     font-size: 2.5vw;
 }
 
+@media only screen and (min-width: 600px) {
+    .issue {
+        width: 100%;
+        height: 14vw;
+        border-style: solid;
+        border-radius: 5px;
+        border-color: dodgerblue;
+        text-align: center;
+        margin-bottom: 1vw;
+        margin-top: 1vw;
+    }
+
+
+    .title {
+        height: 7vw;
+        font-size: 2vw;
+        margin-bottom: -3vw;
+    }
+
+    .description {
+        font-size: 1.5vw;
+        height: 9vw;
+        width: 98%;
+        margin-bottom: -3vw;
+    }
+
+    .state {
+        height: 3vw;
+        font-size: 1.2vw;
+    }
+
+    .date {
+        height: 3vw;
+        font-size: 1.2vw;
+    }
 
+}

src/pages/issuePage.module.css

@@ -16,5 +16,18 @@ body {
     justify-self: center;
     color: black;
     font-size: 6vw;
-    text-shadow: 2px 2px 4px #262626;
+}
+
+@media only screen and (min-width: 600px) {
+    body {
+        background-color: #e1f0f6;
+        font-family: Epilogue;
+        font-size: 1.3vw;
+    }
+
+    .headline {
+        font-size: 3vw;
+        margin-bottom: 0.1vw;
+    }
+
 }
\ No newline at end of file