From af3450d54c8a221b7126bd8cc32a94b4aa95558c Mon Sep 17 00:00:00 2001 From: Devin Fiachra Date: Tue, 30 May 2023 13:39:01 +0200 Subject: [PATCH] added basic media queries --- index.html | 2 ++ styles.css | 41 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+) create mode 100644 styles.css diff --git a/index.html b/index.html index 72b560d..e5da3ab 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,8 @@ My Personal Web Page + +
diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..e5c5165 --- /dev/null +++ b/styles.css @@ -0,0 +1,41 @@ +html { + font-size: 16px; +} + +@media screen and (max-width: 600px) { + body { + font-size: calc(1vh + 1rem); + overflow: hidden; + text-overflow: ellipsis; + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + } +} + +@media screen and (min-width: 601px) { + body { + display: flex; + font-size: clamp(1em, 1rem, 2em); + height: min(80vh, 100vh); + } + + header { + width: min(30vw, 30%); + display: flex; + flex-direction: column; + } + + main { + display: flex; + width: min(70vw, 70%); + flex-wrap: wrap; + flex-direction: column; + } + + footer { + position: fixed; + bottom: 0; + } +}