From 452bd149a392d2155276c8075f22f7e7e4f95915 Mon Sep 17 00:00:00 2001 From: "Luis S. Ruisinger" Date: Wed, 8 Jun 2022 18:43:21 +0200 Subject: [PATCH] Finished responsive behavior --- frontend/src/components/Custom404Page.vue | 12 +++---- frontend/src/components/ItemModel.vue | 41 ++++++++++++--------- frontend/src/styling/navbar.scss | 44 ++++++++++++----------- 3 files changed, 54 insertions(+), 43 deletions(-) diff --git a/frontend/src/components/Custom404Page.vue b/frontend/src/components/Custom404Page.vue index 9e97f38..5ad891b 100644 --- a/frontend/src/components/Custom404Page.vue +++ b/frontend/src/components/Custom404Page.vue @@ -42,7 +42,7 @@ export default { transform: translate(50%,50%); text-transform: uppercase; font-family: Montserrat, sans-serif; - font-size: 20rem; + font-size: 16vh; font-weight: 700; color: #F5F5F5; @@ -67,8 +67,8 @@ h1{ color: #F5F5F5; position: relative; font-family: "Source Code Pro", monospace; - font-size: 2rem; - top: 62rem; + font-size: 1.5vh; + top: 53.5vh; font-weight: 400; } @@ -88,7 +88,7 @@ h1::before{ } h1::after{ - width: 0.125rem; + width: 0.1vh; background: white; animation: shifteffect 4s steps(22) forwards, @@ -100,7 +100,7 @@ a{ position: absolute; top: 4%; right: 5%; - font-size: 2.5rem; + font-size: 2vh; text-transform: uppercase; text-decoration: none; color: #F5F5F5; @@ -109,7 +109,7 @@ a{ a:hover{ cursor: pointer; - font-size: 3rem; + font-size: 2.5vh; transition: all 300ms; } diff --git a/frontend/src/components/ItemModel.vue b/frontend/src/components/ItemModel.vue index cb5fbb3..4e449d6 100644 --- a/frontend/src/components/ItemModel.vue +++ b/frontend/src/components/ItemModel.vue @@ -191,7 +191,7 @@ export default Items display: grid; justify-content: center; align-items: center; - font-size: 1vh; + font-size: 1.25vh; background-color: darkcyan; } @@ -203,18 +203,18 @@ export default Items } .newItemName { - position: absolute; - top: -67.5vh; // 0,65 of height + position: relative; + top: -65.5vh; // 0,65 of height left: 0; width: 100%; height: 100%; - border: 2px solid white; // 0.10 of font size // u cannot use var here - border-radius: var(--globalFontSizeFifth); // times 2 of border + border: 0.07352941176470588vh solid white; // 0.10 of font size // u cannot use var here + border-radius: 0.4411764705882353vh; // times 2 of border font-family: inherit; font-size: inherit; color: black; outline: none; - padding: 1.3vh;// size of font + padding: 0.5vh;// size of font background: none; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4); // 0.5 size of font and 1.5 size of font } @@ -228,10 +228,11 @@ export default Items } .formLabel { - position: absolute; - left: 8px; // dont change this - top: -67vh; // 0.647peroid2 - padding: 8px; + position: relative; + top: -67.75vh; + left: 0.75vh; + padding: 0.1vh; + font-size: 0.1vh; color: white; cursor: text; transition: top 200ms ease-in, left 200ms ease-in, font-size 200ms ease-in; @@ -239,19 +240,27 @@ export default Items } .newItemName:hover ~ .formLabel, .newItemName:not(:placeholder-shown).newItemName:not(:hover) ~ .formLabel { - top: -68.65vh; - left: 0.25vw; - font-size: 0.00001rem; + top: -69.30vh; + left: 0.15vw; + font-size: 0.1vh; color: black; } .newItemName:focus ~ .formLabel, .newItemName:not(:placeholder-shown).newItemName:not(:focus) ~ .formLabel { - top: -68.65vh; - left: 0.25vw; - font-size: 0.00001rem; + top: -69.30vh; + left: 0.15vw; + font-size: 0.1vh; color: black; } +/* Workaround for below WQHD resolution */ + +@media screen and (max-height: 1400px) { + .formLabel{ + opacity: 0; + } +} + /* item section */ \ No newline at end of file diff --git a/frontend/src/styling/navbar.scss b/frontend/src/styling/navbar.scss index 4c05177..08f4a75 100644 --- a/frontend/src/styling/navbar.scss +++ b/frontend/src/styling/navbar.scss @@ -14,7 +14,7 @@ text-decoration: none; color: inherit; text-transform: uppercase; - font-size: 2.25vh; + font-size: 2vh; } .nav-links { @@ -22,13 +22,13 @@ list-style: none; a { - margin: 0.2rem; - padding: 1rem 0.5rem; + margin: 0.2vh; + padding: 1vh 0.5vh; transition: all 300ms; } a:hover { - font-size: 3.5rem; + font-size: 3vh; transition: all 300ms; } } @@ -42,7 +42,7 @@ .menu-icon { position: relative; - padding: 26px 10px; + padding: 0.5vh 0.5vh; cursor: pointer; z-index: 1; display: none; @@ -51,26 +51,26 @@ display: block; position: relative; background: black; - height: 2.5px; - width: 3rem; - border-radius: 4px; + height: 0.2vh; + width: 3vh; + border-radius: 2vh; &::before, &::after { content: ''; position: absolute; height: 100%; width: 100%; - border-radius: 4px; + border-radius: 2vh; background: black; transition: background .8s ease; } &::before { - transform: translateY(-10px); + transform: translateY(-0.75vh); } &::after { - transform: translateY(10px); + transform: translateY(0.75vh); } } } @@ -79,6 +79,9 @@ display: none; } +.logo{ + padding: 0.5vh 0.5vh; +} .logo:hover { cursor: default; @@ -110,24 +113,23 @@ .nav-links { position: absolute; - top: -2.5rem; + top: -2vh; left: 0; opacity: 0; flex-direction: column; justify-content: space-evenly; align-items: center; - padding: 10rem 0; + padding: 5vh 0; width: 100vw; height: 100vh; - font-size: 2rem; font-weight: bolder; - letter-spacing: 0.25rem; + letter-spacing: 0.25vh; color: white; background: #272727; transition: opacity 0.8s 0.5s, clip-path 1s 0.5s; - clip-path: circle(200px at top right); + clip-path: circle(9.615384615384615vh at top right); .nav-links { opacity: 0; @@ -137,7 +139,7 @@ a { display: block; - padding: 2rem 0; + padding: 2vh 0; } } } @@ -174,7 +176,7 @@ @keyframes openButtonBefore { 0% { - transform: translateY(-10px) rotate(0deg); + transform: translateY(-0.75vh) rotate(0deg); } 50% { transform: translateY(0px) rotate(0deg); @@ -195,7 +197,7 @@ @keyframes openButtonAfter { 0% { - transform: translateY(10px) rotate(0deg); + transform: translateY(0.75vh) rotate(0deg); } 50% { transform: translateY(0px) rotate(0deg); @@ -207,7 +209,7 @@ @keyframes closedButtonBefore { 0% { - transform: translateY(-10px) rotate(0deg); + transform: translateY(-0.75vh) rotate(0deg); } 50% { transform: translateY(0px) rotate(0deg); @@ -228,7 +230,7 @@ @keyframes closedButtonAfter { 0% { - transform: translateY(10px) rotate(0deg); + transform: translateY(0.75vh) rotate(0deg); } 50% { transform: translateY(0px) rotate(0deg);