Skip to content
Snippets Groups Projects
Commit 4f60c2f2 authored by Gabriel Copat's avatar Gabriel Copat
Browse files

Updated CSS and page layout -> Header

parent 8ea83b39
No related branches found
No related tags found
1 merge request!25Resolve "As a user, I would like a place to see all my earned badges, so that I can track my progress."
...@@ -183,6 +183,7 @@ main .badgesBlock{ ...@@ -183,6 +183,7 @@ main .badgesBlock{
} }
footer { footer {
z-index: 99;
bottom: 0%; bottom: 0%;
left: 0%; left: 0%;
position: fixed; position: fixed;
......
* {
margin:0;
padding:0;
}
body {
background: linear-gradient(135deg, #9f74be, #3e126b);
height: 100svh;
}
main {
background: linear-gradient(to bottom, #1e1e1e 10%, darkgoldenrod 50%, #1e1e1e 90%);
border-radius: 1vw;
margin-inline: 5%;
margin-block: 5%;
width: auto;
padding-block: 2svh;
padding-inline: 1vw;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
@media only screen and (max-device-width: 500px) {
min-height: 90svh;
}
@media only screen and (min-device-width: 1000px) {
margin-block: 2.5%
}
}
/* Header */ /* Header */
.headerBar { .headerBar {
/*border-bottom: 2px rgb(230, 230, 230) solid;*/ /*border-bottom: 2px rgb(230, 230, 230) solid;*/
......
/* AUTHOR: Gabriel Copat*/ /* AUTHOR: Gabriel Copat*/
/*FONTS, TYPOGRAPHY & BACKGROUNDS*/
* {
margin: 0;
padding: 0;
& h1, & h2 {
letter-spacing: 0.25vw;
line-height: 1.3;
text-align: center;
color: white;
text-justify: inter-word;
}
}
@media only screen and (max-device-width: 500px) {
/*ADJUSTING FOR SMALLER SCREENS*/
* {
& h1, & h2 { text-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1svh;}
& p { line-height: 1.1; color: white;}
}
}
body {
background: linear-gradient(135deg, #9f74be, #3e126b);
height: 100svh;
}
main {
background: linear-gradient(to bottom, #1e1e1e 10%, darkgoldenrod 50%, #1e1e1e 90%);
border-radius: 1vw;
margin-inline: 5%;
/*margin-block: 5%;*/
width: auto;
padding-block: 2svh;
margin-top: 6em;
padding-inline: 1vw;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
}
.userInfo { .userInfo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: min(2vw, 4em); /*padding: min(2vw, 4em);*/
text-align: center; text-align: center;
& #userPicture { & #userPicture {
...@@ -27,22 +66,15 @@ ...@@ -27,22 +66,15 @@
-ms-scrollbar-darkshadow-color: transparent; -ms-scrollbar-darkshadow-color: transparent;
} }
#badgesBar { #badgesBar {
/* border-radius: 1vw; */
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"header" "header"
"badges"; "badges";
overflow-x: scroll; overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;
scrollbar-width: none;
scrollbar-color: transparent transparent;
color: white; color: white;
padding-bottom: 2%; padding-bottom: 2%;
z-index: 99999; @media only screen and (min-device-width: 501px) {
/* margin-right: 10px; */
/*background: linear-gradient(to bottom, transparent, darkgoldenrod 200%);*/
@media only screen and (
min-device-width: 501px) {
height: 24vw; height: 24vw;
} }
& h2 { & h2 {
...@@ -54,7 +86,9 @@ ...@@ -54,7 +86,9 @@
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw; box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
border-bottom: #36454F solid 2px; border-bottom: #36454F solid 2px;
font-size: 4vw; font-size: 4vw;
width: 25%; width: 7em;
height: 1.2em;
} }
& #allBadgesContainer { & #allBadgesContainer {
margin-top: 3svh; margin-top: 3svh;
...@@ -62,8 +96,7 @@ ...@@ -62,8 +96,7 @@
height: 10svh; height: 10svh;
align-content: center; align-content: center;
display: flex; display: flex;
@media only screen and ( @media only screen and (min-device-width: 501px) {
min-device-width: 501px) {
height: 20vw; height: 20vw;
margin-top: 6vw; margin-top: 6vw;
} }
...@@ -71,9 +104,8 @@ ...@@ -71,9 +104,8 @@
& .badgeImg { & .badgeImg {
margin-inline: 3vw; margin-inline: 3vw;
height: 8svh; height: 8svh;
z-index: 999; z-index: 50;
@media only screen and ( @media only screen and (min-device-width: 501px) {
min-device-width: 501px) {
height: 15vw; height: 15vw;
} }
transition: 0.3s ease-out 100ms; transition: 0.3s ease-out 100ms;
...@@ -131,15 +163,13 @@ ...@@ -131,15 +163,13 @@
width: 100%; width: 100%;
/*padding-top: 1svh;*/ /*padding-top: 1svh;*/
@media only screen and ( @media only screen and (min-device-width: 501px) {
min-device-width: 501px) {
height: 28vw; height: 28vw;
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 5svh; padding-bottom: 5svh;
} }
& h1 { & h1 {
font-size: 3em; font-size: 3em;
color: white;
box-shadow: rgba(0, 0, 0, 0.7) 0 2vw 2vw -2vw; box-shadow: rgba(0, 0, 0, 0.7) 0 2vw 2vw -2vw;
border-bottom: #36454F solid 2px; border-bottom: #36454F solid 2px;
border-top: #36454F solid 2px; border-top: #36454F solid 2px;
...@@ -153,14 +183,12 @@ ...@@ -153,14 +183,12 @@
& .dragonImg { & .dragonImg {
height: 10svh; height: 10svh;
width: 16svh; width: 16svh;
@media only screen and ( @media only screen and (min-device-width: 501px) {
min-device-width: 501px) {
height: 22vw; height: 22vw;
width: 30vw; width: 30vw;
} }
} }
& .dragonFill { & .dragonFill {
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
...@@ -171,3 +199,32 @@ ...@@ -171,3 +199,32 @@
overflow: hidden; overflow: hidden;
} }
} }
header {
z-index: 99;
top: 0.5svh;
left: 0;
position: fixed;
width: 100vw;
justify-content: center;
display: flex;
}
header .footerBar {
display: flex;
list-style: none;
border-radius: 1vw;
overflow: hidden;
justify-content: space-evenly;
background-color: rgba(0, 0, 0, 0.7);
}
header .footerButton {
padding: 1vw;
text-align: center;
/*flex: 1 1;*/
color:crimson;
background-color: rgba(31, 31, 31, 0.7);
font-size: 2.5em;
width: 15vw;
}
header .footerButton:hover {
background-color: #36454F;
}
\ No newline at end of file
...@@ -4,11 +4,19 @@ ...@@ -4,11 +4,19 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title th:text="'VZLA Profile Page of ' + ${user.getName()}"></title> <title th:text="'VZLA Profile Page of ' + ${user.getName()}"></title>
<link rel="stylesheet" th:href="@{/css/userProfile.css}"> <link rel="stylesheet" th:href="@{/css/userProfile.css}">
<link rel="stylesheet" th:href="@{/css/templatingstyle.css}"> <!-- <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">-->
</head> </head>
<body> <body>
<header></header> <header>
<ul class="footerBar">
<li class="footerButton"><b>Home</b></li>
<li class="footerButton"><b>About</b></li>
<li class="footerButton"><b>Map</b></li>
<li class="footerButton"><b>Facilities</b></li>
<li class="footerButton"><b>Search</b></li>
</ul>
</header>
<main> <main>
<!--PICTURE - DATA - BADGES --> <!--PICTURE - DATA - BADGES -->
...@@ -54,7 +62,9 @@ ...@@ -54,7 +62,9 @@
</main> </main>
<footer></footer> <footer>
</footer>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment