4 files changed, 73 insertions, 9 deletions
diff --git a/assets/index.css b/assets/index.css
index 83f9602..ebe0e30 100644
--- a/assets/index.css
+++ b/assets/index.css
@@ -68,21 +68,22 @@ html, body {
 
 
 .content {
-  background-color: rgb(200,200,200);
+  background-color: #f5f6fa;
+  position: relative;
 }
 
 .sidebar {
   background-color: #353b48;
   border-left: 1pt #353b48 solid;
   box-shadow: 0px 0px 4px 0px black;
-  z-index: 3;
+  z-index: 10;
 }
 
 .footer {
-  background-color: rgb(140,140,140);
+  background-color: #c8d5d8;
   box-shadow: 0px 0px 2px 1px rgb(0, 0, 0);
   overflow: hidden;
-  z-index: 4;
+  z-index: 20;
 }
 
 #play {
@@ -175,12 +176,18 @@ html, body {
 }
 
 .sidebarItem > .colapse > div {
+  font-family: SourceSansPro;
   padding:4pt;
-  color:grey;
+  color:#949494;
   border-bottom: 0.5pt hsla(215, 15%, 20%, 1) solid;
 }
+.sidebarItem > .colapse > div:hover {
+  background-color: rgba(255, 255, 255, 0.02);
+}
 .sidebarItem > .colapse > div.selected {
   cursor: default;
+  background-color: rgba(255, 255, 255, 0.04);
+  color: #c1c1c1;
 }
 .sidebarItem > .colapse > div > svg {
   margin-right:4pt;
@@ -194,13 +201,13 @@ html, body {
 
 #contentBackground {
   position: fixed;
-  left: : -5%;
+  left: -5%;
   top: -5%;
   min-width: 110%;
   min-height: 110%;
   z-index: 0;
   opacity: 1;
-  background-color: #f5f6fa;
+  background-color: #2C2F33;
   transition: opacity 1s ease-out;
 }
 
@@ -213,3 +220,61 @@ html, body {
   min-height: 100%;
   pointer-events: none;
 }
+
+#serverPage{
+  position: absolute;
+  z-index: 4;
+  overflow-y: scroll;
+  width: 100%;
+  height: 100%;
+  color: white;
+  font-family: SourceSansPro;
+}
+
+.infoServerPage {
+  padding: 12pt;
+
+}
+
+.infoServerPage > .title {
+  /*outline: 1pt red dotted; */
+  background: rgba(0, 0, 0, 0.6);
+  margin-bottom: 5pt;
+  width: fit-content;
+  padding: 5pt 5pt;
+  border-radius: 2pt;
+  font-size: x-large;
+  line-height: 100%;
+}
+
+.infoServerPage > .shortDescription {
+  /*outline: 1pt red dotted;*/
+  background: rgba(0, 0, 0, 0.6);
+  width: fit-content;
+}
+
+
+.unknownServerPage {
+  background: rgba(0, 0, 0, 0.6);
+  color:white;
+  padding: 4pt;
+  margin: auto 10pt;
+}
+
+#serverPage::-webkit-scrollbar {
+  width: 6px;
+  margin-left: 3px;
+}
+
+#serverPage::-webkit-scrollbar-track {
+  background-color: rgba(0,0,0,0);
+}
+
+#serverPage::-webkit-scrollbar-thumb {
+  background-color: rgba(255,255,255,0.3);
+  border-radius:2pt;
+}
+
+#serverPage::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255,255,255,0.5);
+}
diff --git a/assets/index.html b/assets/index.html
index 1af2a83..a4e7972 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -21,8 +21,7 @@
         <div class="inner_wrapper">
           <div class="content">
             <div id="contentBackground"></div>
-            Content
-            <button onclick="sv.openSocialLink(this)" socialLink="abc"><i class="fa fa-user"></i></button><br>
+            <div id="serverPage"></div>
           </div>
           <div class="sidebar" id="sidebar"></div>
         </div>
diff --git a/assets/media/server/evol/background1.png b/assets/media/server/evol/background1.png
new file mode 100644
index 0000000..a1fe4f8
--- /dev/null
+++ b/assets/media/server/evol/background1.png
diff --git a/assets/media/server/tmw/background1.png b/assets/media/server/tmw/background1.png
new file mode 100644
index 0000000..5604c9c
--- /dev/null
+++ b/assets/media/server/tmw/background1.png