Added social media icons (tweaking/changes still needed). Initial work on organization of main css file.

app/assets/css/launcher.css

@@ -1,8 +1,20 @@
+/*******************************************************************************
+ *                                                                             *
+ * Fonts                                                                       *
+ *                                                                             *
+ ******************************************************************************/
+
 @font-face {
     font-family: 'Avenir Book';
     src: url('../fonts/Avenir.ttc');
 }
 
+/*******************************************************************************
+ *                                                                             *
+ * Element Styles                                                              *
+ *                                                                             *
+ ******************************************************************************/
+
 /* Reset body, html, and div presets. */
 body, html, div {
     margin: 0px;
@@ -23,7 +35,7 @@ p {
 
 /*******************************************************************************
  *                                                                             *
- * frame.ejs                                                                   *
+ * Frame Styles (frame.ejs)                                                    *
  *                                                                             *
  ******************************************************************************/
 
@@ -82,7 +94,7 @@ p {
 
 /*******************************************************************************
  *                                                                             *
- * login.ejs                                                                   *
+ * Login View (login.ejs)                                                      *
  *                                                                             *
  ******************************************************************************/
 
@@ -161,53 +173,52 @@ p {
     letter-spacing: 0.3em;
 }*/
 
+
 /*******************************************************************************
  *                                                                             *
- * index.ejs                                                                   *
+ * Landing View (Structural Styles)                                            *
  *                                                                             *
  ******************************************************************************/
 
+/* Main content container. */
 #main {
     height: calc(100% - 22px);
 }
 
+/* Upper content container. */
 #main > #upper {
     height: 77%;
     display: flex;
 }
-
-#main > #lower {
-    height: 23%;
-    display: flex;
-    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
-}
-
 #main > #upper > #left {
     display: inline-flex;
     width: 15%;
     height: 100%;
     justify-content: flex-end;
 }
-
 #main > #upper > #content {
     display: inline-flex;
     width: 59%;
     height: 100%;
 }
-
 #main > #upper > #right {
     display: inline-flex;
     width: 26%;
     height: 100%;
 }
 
+/* Lower content container. */
+#main > #lower {
+    height: 23%;
+    display: flex;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+}
 #main > #lower > #left {
     height: 100%;
     width: 33%;
     display: inline-flex;
     justify-content: center;
 }
-
 #main > #lower > #left #content {
     position: relative;
     top: 25px;
@@ -215,32 +226,33 @@ p {
     line-height: 24px;
     left: 50px;
 }
-
 #main > #lower > #center {
     height: 100%;
     width: 34%;
     display: inline-flex;
     justify-content: center;
 }
-
 #main > #lower > #center #content {
     position: relative;
     top: 10px;
 }
-
 #main > #lower > #right {
     height: 100%;
     width: 33%;
     display: inline-flex;
 }
 
-#main > #lower > #right #launch_content {
+/*******************************************************************************
-    position: relative;
+ *                                                                             *
-    top: 25px;
+ * Landing View (Top Styles)                                                   *
-    display: inline-flex;
+ *                                                                             *
-    line-height: 24px;
+ ******************************************************************************/
-}
 
+/* * *
+* Landing View (Top Styles) | Left Content
+* * */
+
+/* Logo image. */
 #image_seal {
     height: 70px;
     width: auto;
@@ -248,24 +260,43 @@ p {
     margin-top: 50px;
     border: 2px solid white;
     border-radius: 50%;
+    box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
 }
 
-#user_content > #top {
+/* * *
+* Landing View (Bottom Styles) | Right Content
+* * */
+
+/*  Wrapper container for top, right content. */
+#rightContainer {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    top: 50px;
+    align-items: flex-end;
+    height: calc(100% - 50px);
+}
+
+/* Right hand user content container. */
+#user_content {
     display: flex;
     align-items: center;
     justify-content: center;
-    position: relative;
+    box-sizing: border-box;
-    top: 50px;
+    height: 75px;
 }
 
+/* User profile avater. */
 #user_avatar {
     border-radius: 50%;
     border: 2px solid #cad7e1;
     background: rgba(1, 2, 1, 0.5);
     height: 70px;
     width: auto;
+    box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
 }
 
+/* User profile name text. */
 #user_text {
     font-family: 'Avenir Book';
     font-size: 12px;
@@ -278,75 +309,38 @@ p {
     right: 25px;
     text-align: right;
 }
-/*
-#main_progress[value] {
-    height: 32px;
-    width: 245px;
-    -webkit-appearance: none;
-}
 
-#main_progress[value]:before {
+/* Social media icon content container. */
-    position: absolute;
+#media_container {
-    content: attr(data-label);
+    position: relative;
-    color: white;
-    font-family: 'Avenir Book';
-    font-size: 15px;
-    line-height: 32px;
-    margin-left: 8px;
-}
-
-#main_progress[value]::-webkit-progress-bar {
-    border-radius: 20px 0px 0px 20px;
-    background-color: black;
-}
-
-#main_progress[value]::-webkit-progress-value {
-    background-color: black;
-    background-image: -webkit-linear-gradient(-45deg, 
-    transparent 33%, rgba(0, 0, 0, .1) 33%, 
-    rgba(0,0, 0, .1) 66%, transparent 66%),
--webkit-linear-gradient(top, 
-    rgba(255, 255, 255, .25), 
-    rgba(0, 0, 0, .25)),
--webkit-linear-gradient(left, #09c, #f44);
-    border-radius: 20px 0px 0px 20px;
-    background-size: 35px 20px, 100% 100%, 100% 100%;
-}
-
-#launch_area_container {
     display: flex;
-    position: absolute;
+    flex-direction: column;
-    left: 40px;
+    right: 25px;
-    top: 32px;
+    align-items: flex-end;
+    margin-top: 40px;
+    height: 100%;
 }
 
-.home_btn {
+/* Social Media Icon division containers. */
-    background-color: black;
+#internalMedia, #externalMedia {
-    color: white;
+    display: flex;
-    font-family: 'Avenir Book';
+    flex-direction: column;
-    border: none;
-    border-radius: 20px;
-    font-size: 11px;
-    height: 20px;
-    padding: 0px 17px 0px 12px;
-    line-height: 20px;
 }
 
-.home_btn:focus {
+/* Social media icon shared styles. */
-    outline: 0px;
+.mediaSVG {
+    fill: #ffffff;
+    margin-top: 15px;
+    height: 12px;
 }
 
-#mojang_btn {
+/*******************************************************************************
-    position: absolute;
+ *                                                                             *
-    left: 150px;
+ * Landing View (Bottom Styles)                                                *
-}
+ *                                                                             *
-
+ ******************************************************************************/
-#mojang_btn:before {
-    color: #93b253;
-    content: '\2022  ';
-    line-height: 20px;
-} */
 
+/* Style for a general label on the bottom of the landing view. */
 .bot_label {
     color: white;
     font-family: 'Avenir Book';
@@ -356,6 +350,20 @@ p {
     text-shadow: 0px 0px 0px #bebcbb;
 }
 
+/* Divider used on the bottom of the landing view. */
+.bot_divider {
+    height: 25px;
+    width: 2px;
+    background: rgba(107, 105, 105, 0.7);
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+/* * *
+* Landing View (Bottom Styles) | Left Content
+* * */
+
+/* Span which displays the player count of the selected server. */
 #player_count {
     color: #949494;
     font-family: 'Avenir Book';
@@ -365,20 +373,18 @@ p {
     margin-left: 10px;
 }
 
-.bot_divider {
+/* Icon which displays the status of the mojang services. */
-    height: 25px;
-    width: 2px;
-    background: rgba(107, 105, 105, 0.7);
-    margin-left: 20px;
-    margin-right: 20px;
-}
-
 #mojang_status_icon {
     font-size: 30px;
     color: #848484;
     margin-left: 15px;
 }
 
+/* * *
+* Landing View (Bottom Styles) | Center Content
+* * */
+
+/* Button which opens the menu view. */
 #menu_button {
     font-family: 'Avenir Book';
     background: none;
@@ -386,11 +392,13 @@ p {
     cursor: pointer;
 }
 
+/* Arrow image which floats above the menu button. */
 #menu_img {
     height: 11px;
     margin-left: -2px;
 }
 
+/* Span which contains the menu button text. */
 #menu_text {
     color: white;
     font-weight: 900;
@@ -401,6 +409,19 @@ p {
     display: flex;
 }
 
+/* * *
+* Landing View (Bottom Styles) | Right Content
+* * */
+
+/* Main launch content container. */
+#main > #lower > #right #launch_content {
+    position: relative;
+    top: 25px;
+    display: inline-flex;
+    line-height: 24px;
+}
+
+/* The launch button. */
 #launch_button {
     font-family: 'Avenir Book';
     background: none;
@@ -414,44 +435,19 @@ p {
     padding: 0px;
 }
 
+/* Launch details main container, hidden until launch processing begins. */
 #launch_details {
     position: relative;
     top: 25px;
-    /*display: flex;*/
     display: none;
 }
  
+/* Left side of launch details container, displays percentage and a divider. */
 #launch_details_left {
     display: flex;
 }
 
-#launch_details_right {
+/* Span which displays percentage complete. */
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-#launch_progress[value] {
-    height: 3px;
-    width: 265px;
-    -webkit-appearance: none;
-}
-
-#launch_progress[value]::-webkit-progress-bar {
-    background-color: transparent;
-}
-
-#launch_progress[value]::-webkit-progress-value {
-    background-color: #fff;
-}
-
-#launch_details_text {
-    font-size: 11px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
 #launch_progress_label {
     color: white;
     font-family: 'Avenir Book';
@@ -463,3 +459,31 @@ p {
     max-width: 53.21px;
     text-align: right;
 }
+
+/* Right side of launch details container, displays progress bar and details. */
+#launch_details_right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+/* Progress bar styles. */
+#launch_progress[value] {
+    height: 3px;
+    width: 265px;
+    -webkit-appearance: none;
+}
+#launch_progress[value]::-webkit-progress-bar {
+    background-color: transparent;
+}
+#launch_progress[value]::-webkit-progress-value {
+    background-color: #fff;
+}
+
+/* Span which displays information about the status of the launch process. */
+#launch_details_text {
+    font-size: 11px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}

app/index.ejs

@@ -22,12 +22,48 @@
             <div id="content">
             </div>
             <div id="right">
+                <div id="rightContainer">
                     <div id="user_content">
-                    <div id="top">
                         <span id="user_text">Username</span>
                         <img id="user_avatar" src="https://cdn.discordapp.com/avatars/169197209630277642/6650b5a50e1cb3d00a79b9b88b9a0cd4.png"/>
                     </div>
-                    <div id="bottom">
+                    <div id="media_container">
+                        <div id="internalMedia">
+                            <svg id="newsSVG" class="mediaSVG" x="0px" y="0px" viewBox="0 0 297 297" height="20px" width="25px">
+                                <g>
+                                    <path d="M286.933,262.429c5.56,0,10.067-4.508,10.067-10.068V44.64c0-5.56-4.508-10.068-10.067-10.068H44.677c-5.56,0-10.067,4.508-10.067,10.068v24.553H10.067C4.508,69.192,0,73.7,0,79.261v173.1c0,5.561,4.508,10.068,10.067,10.068 H286.933z M20.136,89.328h14.474v152.965H20.136V89.328z M276.864,242.293H54.745V54.707h222.119V242.293z"/>
+                                    <path d="M165.804,193.189h86.52c5.56,0,10.067-4.508,10.067-10.067V96.572c0-5.56-4.508-10.068-10.067-10.068h-86.52c-5.56,0-10.067,4.509-10.067,10.068v86.549C155.736,188.681,160.244,193.189,165.804,193.189z M175.872,106.64h66.383v66.413h-66.383V106.64z"/>
+                                    <path d="M79.284,227.808h173.039c5.56,0,10.067-4.508,10.067-10.068c0-5.56-4.508-10.067-10.067-10.067H79.284c-5.561,0-10.068,4.508-10.068,10.067C69.216,223.3,73.724,227.808,79.284,227.808z"/>
+                                    <path d="M79.284,106.64h51.913c5.56,0,10.067-4.508,10.067-10.067c0-5.56-4.508-10.068-10.067-10.068H79.284c-5.561,0-10.068,4.509-10.068,10.068C69.216,102.132,73.724,106.64,79.284,106.64z"/>
+                                    <path d="M79.284,141.26h51.913c5.56,0,10.067-4.508,10.067-10.067c0-5.561-4.508-10.068-10.067-10.068H79.284c-5.561,0-10.068,4.508-10.068,10.068C69.216,136.752,73.724,141.26,79.284,141.26z"/>
+                                    <path d="M79.284,175.876h51.913c5.56,0,10.067-4.508,10.067-10.068c0-5.56-4.508-10.067-10.067-10.067H79.284c-5.561,0-10.068,4.508-10.068,10.067C69.216,171.368,73.724,175.876,79.284,175.876z"/>
+                                </g>
+                            </svg>
+                        </div>
+                        <div id="externalMedia">
+                            <svg id="linkSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">
+                                <g>
+                                    <path d="M75.37,65.51a3.85,3.85,0,0,0-1.73.42,8.22,8.22,0,0,1,.94,3.76A8.36,8.36,0,0,1,66.23,78H46.37a8.35,8.35,0,1,1,0-16.7h9.18a21.51,21.51,0,0,1,6.65-8.72H46.37a17.07,17.07,0,1,0,0,34.15H66.23A17,17,0,0,0,82.77,65.51Z"/>
+                                    <path d="M66,73.88a3.85,3.85,0,0,0,1.73-.42,8.22,8.22,0,0,1-.94-3.76,8.36,8.36,0,0,1,8.35-8.35H95A8.35,8.35,0,1,1,95,78H85.8a21.51,21.51,0,0,1-6.65,8.72H95a17.07,17.07,0,0,0,0-34.15H75.13A17,17,0,0,0,58.59,73.88Z"/>
+                                </g>
+                            </svg>
+                            <svg id="twitterSVG" class="mediaSVG" width="25px" height="20px" viewBox="0 0 5000 4060" preserveAspectRatio="xMidYMid meet">	
+                                <g>
+                                    <path d="M1210 4048 c-350 -30 -780 -175 -1124 -378 -56 -33 -86 -57 -86 -68 0 -16 7 -17 83 -9 114 12 349 1 493 -22 295 -49 620 -180 843 -341 l54 -38 -49 -7 c-367 -49 -660 -256 -821 -582 -30 -61 -53 -120 -51 -130 3 -16 12 -17 73 -13 97 7 199 5 270 -4 l60 -9 -65 -22 c-341 -117 -609 -419 -681 -769 -18 -88 -26 -226 -13 -239 4 -3 32 7 63 22 68 35 198 77 266 86 28 4 58 9 68 12 10 2 -22 -34 -72 -82 -240 -232 -353 -532 -321 -852 15 -149 79 -347 133 -418 16 -20 17 -19 49 20 377 455 913 795 1491 945 160 41 346 74 485 86 l82 7 -7 -59 c-5 -33 -7 -117 -6 -189 2 -163 31 -286 103 -430 141 -285 422 -504 708 -550 112 -19 333 -19 442 0 180 30 335 108 477 239 l58 54 95 -24 c143 -36 286 -89 427 -160 70 -35 131 -60 135 -56 19 19 -74 209 -151 312 -50 66 -161 178 -216 217 l-30 22 73 -14 c111 -21 257 -63 353 -101 99 -39 99 -39 99 -19 0 57 -237 326 -412 468 l-88 71 6 51 c4 28 1 130 -5 226 -30 440 -131 806 -333 1202 -380 745 -1036 1277 -1823 1477 -243 62 -430 81 -786 78 -134 0 -291 -5 -349 -10z"/>
+                                </g>                                </svg>
+                            <svg id="instagramSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">
+                                <path d="M91.31,38.27H50a10.81,10.81,0,0,0-10.8,10.8V90.33A10.81,10.81,0,0,0,50,101.13H91.31a10.81,10.81,0,0,0,10.8-10.8V49.06A10.81,10.81,0,0,0,91.31,38.27Zm3.27,10.8v7.36H83.83V45.8h7.48A3.27,3.27,0,0,1,94.58,49.06Zm-23.9,10A10.64,10.64,0,1,1,60,69.7,10.66,10.66,0,0,1,70.68,59.05ZM91.31,93.6H50a3.27,3.27,0,0,1-3.27-3.27V63.6h6.86a18,18,0,0,0-1.13,6.1,18.17,18.17,0,1,0,36.35,0,18,18,0,0,0-1.13-6.1h6.86V90.33A3.27,3.27,0,0,1,91.31,93.6Z"/>
+                            </svg>
+                            <svg id="youtubeSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">                                    <g>
+                                    <path d="M84.8,69.52,65.88,79.76V59.27Zm23.65.59c0-5.14-.79-17.63-3.94-20.57S99,45.86,73.37,45.86s-28,.73-31.14,3.68S38.29,65,38.29,70.11s.79,17.63,3.94,20.57,5.52,3.68,31.14,3.68,28-.74,31.14-3.68,3.94-15.42,3.94-20.57"/>
+                                </g>
+                            </svg>
+                            <svg id="discordSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">
+                                <g>
+                                    <path d="M81.23,78.48a6.14,6.14,0,1,1,6.14-6.14,6.14,6.14,0,0,1-6.14,6.14M60,78.48a6.14,6.14,0,1,1,6.14-6.14A6.14,6.14,0,0,1,60,78.48M104.41,73c-.92-7.7-8.24-22.9-8.24-22.9A43,43,0,0,0,88,45.59a17.88,17.88,0,0,0-8.38-1.27l-.13,1.06a23.52,23.52,0,0,1,5.8,1.95,87.59,87.59,0,0,1,8.17,4.87s-10.32-5.63-22.27-5.63a51.32,51.32,0,0,0-23.2,5.63,87.84,87.84,0,0,1,8.17-4.87,23.57,23.57,0,0,1,5.8-1.95l-.13-1.06a17.88,17.88,0,0,0-8.38,1.27,42.84,42.84,0,0,0-8.21,4.56S37.87,65.35,37,73s-.37,11.54-.37,11.54,4.22,5.68,9.9,7.14,7.7,1.47,7.7,1.47l3.75-4.68a21.22,21.22,0,0,1-4.65-2A24.47,24.47,0,0,1,47.93,82S61.16,88.4,70.68,88.4c10,0,22.75-6.44,22.75-6.44a24.56,24.56,0,0,1-5.35,4.56,21.22,21.22,0,0,1-4.65,2l3.75,4.68s2,0,7.7-1.47,9.89-7.14,9.89-7.14.55-3.85-.37-11.54"/>
+                                </g>
+                            </svg>
+                        </div>
                     </div>
                 </div>
             </div>