Gnarwhal/achievements_project
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added box-shadows

Browse source
This commit is contained in:
Gnarwhal 2021-01-22 03:12:42 -05:00
parent 77e451520e
commit 0a16c8e708
Signed by: Gnarwhal
GPG key ID: 0989A73D8C421174
2 changed files with 22 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
front_end/index.html
View file

@ -88,8 +88,8 @@
<p class="page-header-text">Achievements</p> <p class="page-header-text">Achievements</p>
<div class="page-header-separator"></div> <div class="page-header-separator"></div>
<div class="list-page-search"> <div class="list-page-search">
<label for="game-search">Search</label> <label for="achievement-search">Search</label>
<input id="game-search" type="text" placeholder="Name, Keyword, etc..." name="game-search" /> <input id="achievement-search" type="text" placeholder="Name, Keyword, etc..." name="achievement-search" />
</div> </div>
<div class="list-page-partitions"> <div class="list-page-partitions">
<div class="list-page-filter-partition"> <div class="list-page-filter-partition">
@ -265,19 +265,19 @@
<div class="page-subheader-separator"></div> <div class="page-subheader-separator"></div>
<div class="profile-game-entry"> <div class="profile-game-entry">
<img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" /> <img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-game-entry-name">Lorem Ipsum</p> <p class="profile-game-entry-name">Latin</p>
</div> </div>
<div class="profile-game-entry"> <div class="profile-game-entry">
<img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" /> <img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-game-entry-name">Lorem Ipsum</p> <p class="profile-game-entry-name">Latin</p>
</div> </div>
<div class="profile-game-entry"> <div class="profile-game-entry">
<img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" /> <img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-game-entry-name">Lorem Ipsum</p> <p class="profile-game-entry-name">Latin</p>
</div> </div>
<div class="profile-game-entry"> <div class="profile-game-entry">
<img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" /> <img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-game-entry-name">Lorem Ipsum</p> <p class="profile-game-entry-name">Latin</p>
</div> </div>
</div> </div>
<div id="profile-achievements"> <div id="profile-achievements">

18
front_end/styles/index.css
View file

@ -1,4 +1,5 @@
:root { :root {
--background-dark: #111115;
--background: #22222A; --background: #22222A;
--foreground: #EEEEEE; --foreground: #EEEEEE;
--distinction: #44444F; --distinction: #44444F;
@ -20,7 +21,7 @@
} }
html, body { html, body {
background-color: var(--background); background-color: var(--background-dark);
margin: 0; margin: 0;
border: 0; border: 0;
@ -32,6 +33,8 @@ html, body {
} }
#navbar { #navbar {
z-index: 1;
position: fixed; position: fixed;
background-color: var(--navbar-background); background-color: var(--navbar-background);
@ -45,6 +48,8 @@ html, body {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-shadow: 0px 0px 5px 10px rgba(0, 0, 0, 0.5);
} }
#navbar-left { #navbar-left {
@ -108,12 +113,19 @@ html, body {
} }
.page { .page {
z-index: 0;
box-sizing: border-box; box-sizing: border-box;
padding: 0px 64px; padding: 0px 64px;
width: 100%; width: 100%;
height: max-content; height: 100%;
background-color: var(--background);
box-shadow: 0px 0px 5px 10px rgba(0, 0, 0, 0.5);
overflow-y: auto;
display: none; display: none;
} }
@ -449,6 +461,8 @@ html, body {
#profile-page { #profile-page {
max-width: 1920px; max-width: 1920px;
display: block;
} }
#profile-section-1 { #profile-section-1 {