5 files changed, 126 insertions, 7 deletions

diff --git a/frontend/src/css/About.css b/frontend/src/css/About.css
new file mode 100644
index 0000000..f998699
--- /dev/null
+++ b/frontend/src/css/About.css
@@ -0,0 +1,16 @@
+#about {
+    overflow: auto;
+    overflow-x: hidden;
+    position: relative;
+
+    width: calc(100% - 380px); 
+    height: 100vh;
+    left: 350px;
+
+    padding-right: 30px;
+
+    font-size: 24px;
+    font-family: BarlowSemiCondensed-Regular;
+    color: #cdcfdf;
+
+}
\ No newline at end of file
diff --git a/frontend/src/css/Maplist.css b/frontend/src/css/Maplist.css
index bd1f646..230ac98 100644
--- a/frontend/src/css/Maplist.css
+++ b/frontend/src/css/Maplist.css
@@ -107,7 +107,7 @@ h3 {
 
 .difficulty-bar {
     display: flex;
-    margin: 0px 10px;
+    margin: 15px 10px;
 }
 
 .difficulty-bar span {
diff --git a/frontend/src/css/Maps.css b/frontend/src/css/Maps.css
index 335e0b2..d38eea5 100644
--- a/frontend/src/css/Maps.css
+++ b/frontend/src/css/Maps.css
@@ -299,7 +299,7 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
 
 
 #description>iframe{
-    margin: 4px;
+    margin: 20px;
     float:right; 
     border: 0;
     border-radius: 24px;
@@ -311,6 +311,7 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
     display: block;
     font-size: 21px;
     word-wrap: break-word;
+    text-align: justify;
 }
 #description-text>b{font-size: inherit;}
 #description-text>a{font-size: inherit;color: #3c91e6;}
diff --git a/frontend/src/css/Sidebar.css b/frontend/src/css/Sidebar.css
index 34ede80..396f6ac 100644
--- a/frontend/src/css/Sidebar.css
+++ b/frontend/src/css/Sidebar.css
@@ -10,22 +10,22 @@
  /* logo */

 #logo{

     display: grid;

-    grid-template-columns: 60px 200px;

+    grid-template-columns: 60px 220px;

 

 

     height:  80px;

-    padding: 20px 0 20px 30px;

+    padding: 20px 0 20px 20px;

     cursor: pointer;

     user-select: none;

 } 

 

 #logo-text{

     font-family: BarlowCondensed-Regular;

-    font-size: 42px;

+    font-size: 36px;

     color: #FFF;

     line-height: 38px;

 }

-span>b{

+#logo-text>span>b{

     font-family: BarlowCondensed-Bold;

     font-size: 56px;

 }

@@ -55,7 +55,7 @@ span>b{
 

     margin: 0 5px 0 5px;

     justify-items: left;

-    grid-template-rows: calc(100vh - 670px) 50px 50px 50px;

+    grid-template-rows: calc(100vh - 720px) 50px 50px 50px;

 }

 .sidebar-button>span{

     font-family: BarlowSemiCondensed-Regular;

@@ -85,6 +85,61 @@ span>b{
     padding .3s;

 }

 

+.logout-button{

+    display: grid;

+    grid-template-columns: 50px auto;

+    place-items: left;

+    text-align: left;

+    

+    background-color: inherit;

+    cursor: pointer;

+    border: none;

+    width: 310px;

+    height: 40px;

+    border-radius: 20px;

+    padding: 0.4em 0 0 11px;

+

+    transition: 

+    width .3s,

+    background-color .15s,

+    padding .3s;

+}

+

+.submit-run-button {

+    display: grid;

+    grid-template-columns: 50px auto;

+    place-items: left;

+    text-align: left;

+    

+    background-color: inherit;

+    cursor: pointer;

+    border: none;

+    width: 310px;

+    height: 40px;

+    border-radius: 20px;

+    padding: 0.4em 0 0 11px;

+

+    transition: 

+    width .3s,

+    background-color .15s,

+    padding .3s;

+    background-color: #202232aa;

+}

+

+.submit-run-button:hover {

+    background-color: #202232;

+}

+

+

+.submit-run-button>span{

+    font-family: BarlowSemiCondensed-Regular;

+    font-size: 18px;

+    color: #CDCFDF;

+    height: 32px;

+    line-height: 28px;

+    transition: opacity .1s;

+}

+

 .sidebar-button-selected {

     background-color: #202232;

 }

diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css
new file mode 100644
index 0000000..60f0a28
--- /dev/null
+++ b/frontend/src/css/UploadRunDialog.css
@@ -0,0 +1,47 @@
+div#upload-run{
+    position: absolute;
+    left: 50%;
+    z-index: 20;
+    width: 320px; height: auto;
+    /* background-color: red; */
+
+    transform: translateY(-68%);
+}
+
+
+#upload-run-menu{
+    position: absolute;
+    left: calc(50% + 160px); top: 130px;
+    transform: translateX(-50%);
+    background-color: #2b2e46;
+    z-index: 2; color: white;
+}
+
+#upload-run-menu-add,
+#upload-run-menu-edit{
+    box-shadow: 0 0 40px 16px black;
+    outline: 8px solid #2b2e46;
+    border-radius: 20px;
+    font-size: 40px;
+    display: grid;
+    grid-template-columns: 20% 20% 20% 20% 20%;
+}
+
+#upload-run-menu-add>div,
+#upload-run-menu-edit>div{
+    display: grid;
+    margin: 20px;
+    width: 200px;
+    font-size: 20px;
+}
+
+#upload-run-block{
+    position: absolute;
+    background-color: black;
+    opacity: .3;
+    left: 320px;
+    width: calc(100% - 320px);
+    height: 100%;
+    z-index: 2;
+    cursor: no-drop;
+}