cato447/EIST-Teamprojekt
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Finished responsive behavior

Browse Source
This commit is contained in:
Luis S. Ruisinger
2022-06-08 18:43:21 +02:00
parent c238309ad6
commit 452bd149a3
3 changed files with 54 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/Custom404Page.vue
View File

@@ -42,7 +42,7 @@ export default {
transform: translate(50%,50%); transform: translate(50%,50%);
text-transform: uppercase; text-transform: uppercase;
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-size: 20rem; font-size: 16vh;
font-weight: 700; font-weight: 700;
color: #F5F5F5; color: #F5F5F5;
@@ -67,8 +67,8 @@ h1{
color: #F5F5F5; color: #F5F5F5;
position: relative; position: relative;
font-family: "Source Code Pro", monospace; font-family: "Source Code Pro", monospace;
font-size: 2rem; font-size: 1.5vh;
top: 62rem; top: 53.5vh;
font-weight: 400; font-weight: 400;
} }
@@ -88,7 +88,7 @@ h1::before{
} }
h1::after{ h1::after{
width: 0.125rem; width: 0.1vh;
background: white; background: white;
animation: animation:
shifteffect 4s steps(22) forwards, shifteffect 4s steps(22) forwards,
@@ -100,7 +100,7 @@ a{
position: absolute; position: absolute;
top: 4%; top: 4%;
right: 5%; right: 5%;
font-size: 2.5rem; font-size: 2vh;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
color: #F5F5F5; color: #F5F5F5;
@@ -109,7 +109,7 @@ a{
a:hover{ a:hover{
cursor: pointer; cursor: pointer;
font-size: 3rem; font-size: 2.5vh;
transition: all 300ms; transition: all 300ms;
} }

41
frontend/src/components/ItemModel.vue
View File

@@ -191,7 +191,7 @@ export default Items
display: grid; display: grid;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 1vh; font-size: 1.25vh;
background-color: darkcyan; background-color: darkcyan;
} }
@@ -203,18 +203,18 @@ export default Items
} }
.newItemName { .newItemName {
position: absolute; position: relative;
top: -67.5vh; // 0,65 of height top: -65.5vh; // 0,65 of height
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 2px solid white; // 0.10 of font size // u cannot use var here border: 0.07352941176470588vh solid white; // 0.10 of font size // u cannot use var here
border-radius: var(--globalFontSizeFifth); // times 2 of border border-radius: 0.4411764705882353vh; // times 2 of border
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
color: black; color: black;
outline: none; outline: none;
padding: 1.3vh;// size of font padding: 0.5vh;// size of font
background: none; background: none;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4); // 0.5 size of font and 1.5 size of font 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 { .formLabel {
position: absolute; position: relative;
left: 8px; // dont change this top: -67.75vh;
top: -67vh; // 0.647peroid2 left: 0.75vh;
padding: 8px; padding: 0.1vh;
font-size: 0.1vh;
color: white; color: white;
cursor: text; cursor: text;
transition: top 200ms ease-in, left 200ms ease-in, font-size 200ms ease-in; 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 { .newItemName:hover ~ .formLabel, .newItemName:not(:placeholder-shown).newItemName:not(:hover) ~ .formLabel {
top: -68.65vh; top: -69.30vh;
left: 0.25vw; left: 0.15vw;
font-size: 0.00001rem; font-size: 0.1vh;
color: black; color: black;
} }
.newItemName:focus ~ .formLabel, .newItemName:not(:placeholder-shown).newItemName:not(:focus) ~ .formLabel { .newItemName:focus ~ .formLabel, .newItemName:not(:placeholder-shown).newItemName:not(:focus) ~ .formLabel {
top: -68.65vh; top: -69.30vh;
left: 0.25vw; left: 0.15vw;
font-size: 0.00001rem; font-size: 0.1vh;
color: black; color: black;
} }
/* Workaround for below WQHD resolution */
@media screen and (max-height: 1400px) {
.formLabel{
opacity: 0;
}
}
/* item section */ /* item section */
</style> </style>

44
frontend/src/styling/navbar.scss
View File

@@ -14,7 +14,7 @@
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
text-transform: uppercase; text-transform: uppercase;
font-size: 2.25vh; font-size: 2vh;
} }
.nav-links { .nav-links {
@@ -22,13 +22,13 @@
list-style: none; list-style: none;
a { a {
margin: 0.2rem; margin: 0.2vh;
padding: 1rem 0.5rem; padding: 1vh 0.5vh;
transition: all 300ms; transition: all 300ms;
} }
a:hover { a:hover {
font-size: 3.5rem; font-size: 3vh;
transition: all 300ms; transition: all 300ms;
} }
} }
@@ -42,7 +42,7 @@
.menu-icon { .menu-icon {
position: relative; position: relative;
padding: 26px 10px; padding: 0.5vh 0.5vh;
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
display: none; display: none;
@@ -51,26 +51,26 @@
display: block; display: block;
position: relative; position: relative;
background: black; background: black;
height: 2.5px; height: 0.2vh;
width: 3rem; width: 3vh;
border-radius: 4px; border-radius: 2vh;
&::before, &::after { &::before, &::after {
content: ''; content: '';
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
border-radius: 4px; border-radius: 2vh;
background: black; background: black;
transition: background .8s ease; transition: background .8s ease;
} }
&::before { &::before {
transform: translateY(-10px); transform: translateY(-0.75vh);
} }
&::after { &::after {
transform: translateY(10px); transform: translateY(0.75vh);
} }
} }
} }
@@ -79,6 +79,9 @@
display: none; display: none;
} }
.logo{
padding: 0.5vh 0.5vh;
}
.logo:hover { .logo:hover {
cursor: default; cursor: default;
@@ -110,24 +113,23 @@
.nav-links { .nav-links {
position: absolute; position: absolute;
top: -2.5rem; top: -2vh;
left: 0; left: 0;
opacity: 0; opacity: 0;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
padding: 10rem 0; padding: 5vh 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
font-size: 2rem;
font-weight: bolder; font-weight: bolder;
letter-spacing: 0.25rem; letter-spacing: 0.25vh;
color: white; color: white;
background: #272727; background: #272727;
transition: opacity 0.8s 0.5s, transition: opacity 0.8s 0.5s,
clip-path 1s 0.5s; clip-path 1s 0.5s;
clip-path: circle(200px at top right); clip-path: circle(9.615384615384615vh at top right);
.nav-links { .nav-links {
opacity: 0; opacity: 0;
@@ -137,7 +139,7 @@
a { a {
display: block; display: block;
padding: 2rem 0; padding: 2vh 0;
} }
} }
} }
@@ -174,7 +176,7 @@
@keyframes openButtonBefore { @keyframes openButtonBefore {
0% { 0% {
transform: translateY(-10px) rotate(0deg); transform: translateY(-0.75vh) rotate(0deg);
} }
50% { 50% {
transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg);
@@ -195,7 +197,7 @@
@keyframes openButtonAfter { @keyframes openButtonAfter {
0% { 0% {
transform: translateY(10px) rotate(0deg); transform: translateY(0.75vh) rotate(0deg);
} }
50% { 50% {
transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg);
@@ -207,7 +209,7 @@
@keyframes closedButtonBefore { @keyframes closedButtonBefore {
0% { 0% {
transform: translateY(-10px) rotate(0deg); transform: translateY(-0.75vh) rotate(0deg);
} }
50% { 50% {
transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg);
@@ -228,7 +230,7 @@
@keyframes closedButtonAfter { @keyframes closedButtonAfter {
0% { 0% {
transform: translateY(10px) rotate(0deg); transform: translateY(0.75vh) rotate(0deg);
} }
50% { 50% {
transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg);