Skip to content
Snippets Groups Projects

Resolve "As a user, I would like a place to see all my earned badges, so that I can track my progress."

Merged Gabriel Copat requested to merge gamification into main
2 files
+ 189
11
Compare changes
  • Side-by-side
  • Inline
Files
2
+ 230
0
/* 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 {
display: flex;
flex-direction: column;
/*padding: min(2vw, 4em);*/
text-align: center;
& #userPicture {
width: min(30vw, 30em);
margin-inline: auto;
border-radius: 100%;
border: solid #a2a2a2 4px;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
}
& h1 {
font-size: max(5vw, 2em);
margin: 1svh 25%;
color:white;
border-bottom: #36454F solid 2px;
border-radius: 5vw;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
}
}
#badgesBar::-webkit-scrollbar {
display: none;
-ms-scrollbar-darkshadow-color: transparent;
}
#badgesBar {
display: grid;
grid-template-areas:
"header"
"badges";
overflow-x: scroll;
overflow-y: hidden;
color: white;
padding-bottom: 2%;
@media only screen and (min-device-width: 501px) {
height: 24vw;
}
& h2 {
position: absolute;
grid-area: header;
margin-inline: 5vw;
padding-inline: 2vw;
margin-block: -1svh;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
border-bottom: #36454F solid 2px;
font-size: 4vw;
width: 7em;
height: 1.2em;
}
& #allBadgesContainer {
margin-top: 3svh;
grid-area: badges;
height: 10svh;
align-content: center;
display: flex;
@media only screen and (min-device-width: 501px) {
height: 20vw;
margin-top: 6vw;
}
}
& .badgeImg {
margin-inline: 3vw;
height: 8svh;
z-index: 50;
@media only screen and (min-device-width: 501px) {
height: 15vw;
}
transition: 0.3s ease-out 100ms;
}
& .badgeImg:hover {
/*box-shadow: 0 0 20px 10px #bbbb00;*/
transform: scale(1.5,1.5);
}
}
#stickersBox {
padding-top: 5%;
display: flex;
flex-direction: column;
/* border-bottom-left-radius: 2vw; */
/* border-bottom-right-radius: 2vw; */
/*background: linear-gradient(to bottom, darkgoldenrod, transparent 90%);*/
margin-top: -1%;
& h2 {
font-size: 4em;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.7) 0 2vw 2vw -2vw;
border-bottom: #36454F solid 2px;
margin-block: 1svh;
margin-inline: 25%;
}
& .stickersContainer {
margin-block: 1svh;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
& .stickerImg {
width: 20vw;
margin-block: 1em;
}
}
}
.locked {
filter: grayscale(100%);
}
.dragonProgression {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
height: 16svh;
box-sizing: content-box;
/*background: linear-gradient(to bottom, transparent -50%, darkgoldenrod 50%);*/
width: 100%;
/*padding-top: 1svh;*/
@media only screen and (min-device-width: 501px) {
height: 28vw;
margin-bottom: 0;
padding-bottom: 5svh;
}
& h1 {
font-size: 3em;
box-shadow: rgba(0, 0, 0, 0.7) 0 2vw 2vw -2vw;
border-bottom: #36454F solid 2px;
border-top: #36454F solid 2px;
margin-inline: 25%;
margin-bottom: 1%;
}
& .dragonContainer {
position: relative;
margin: auto;
}
& .dragonImg {
height: 10svh;
width: 16svh;
@media only screen and (min-device-width: 501px) {
height: 22vw;
width: 30vw;
}
}
& .dragonFill {
position: absolute;
overflow: hidden;
width: 40%;
}
& .dragonOut {
/*position: absolute;*/
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
Loading