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%);
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;
}

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

@@ -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 */
</style>

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

@@ -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);