diff --git a/src/components/issueComponent/issueComponent.module.css b/src/components/issueComponent/issueComponent.module.css index b56e4f0775e74d96aa9846d892f6f71f50639bff..a5f28e4b19fd21ef68ae9a683143ef5b0089ddaa 100644 --- a/src/components/issueComponent/issueComponent.module.css +++ b/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; + } + +} diff --git a/src/pages/issuePage.module.css b/src/pages/issuePage.module.css index 3c59a9e5fde16327b5bbb3a9bcb2ede9f0c9ee41..709ab5e9f9cf6562500cd3721752ad8514c4cd53 100644 --- a/src/pages/issuePage.module.css +++ b/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