tries more variables

mystic_forest/custom_portal.css

@@ -5,13 +5,16 @@
 ===============================================================================
 */
 
+/* Defines theme variables */
 :root {
     --background-color: #141709;
     --primary-color: #525c2e;
     --primary-hover-color: #708a00;
+    --logo-width: 412px;
+    --logo-height: 175px;
+    --box-width: 21em;
 }
 
-
 .ynh-user-portal {
 	background: var(--background-color);
 	display: flex;
@@ -20,10 +23,23 @@
 	align-items: center;
 }
 
-.content { 
-	padding: 0%;
-	width: 21em;
+.classic-btn { 
+    background: var(--primary-color); 
 }
+.classic-btn:hover { 
+    background: var(--primary-hover-color); 
+}
+
+.messages { 
+    margin: 0; 
+    /*width: 100%; */
+}
+.messages.info { 
+    background: var(--primary-color);
+}
+
+
+/* Styling specific to portal view */
 
 .logged .content {
 	display: flex;
@@ -35,8 +51,8 @@
 .user {
 	background: url("./forest.png");
 	background-repeat: no-repeat;
-	padding-top: 175px;
-	width: 412px;
+	padding-top: var(--logo-height);
+	width: var(--logo-width);
 	flex: 0 1 auto;
 	display: flex;
 	flex-flow: column-reverse nowrap;
@@ -44,52 +60,57 @@
 	margin-left: 4%;
 }
 
-.user-menu, .user-container {
+.user-menu, 
+.user-container {
 	background-color: var(--primary-color);
-	max-width: 21em;
-	margin-left: 38px;
+	width: var(--box-width);
+	margin-left: calc((var(--logo-width) - 21em) / 2);
 }
 
 .apps {
-	width: 50%;
+	width: 50%; /* Hack to force footer to wrap on another row */
 	flex: 1 1 auto;
 	margin: 4%;
 }
 
-.footer { flex: 1 1 auto; margin: 4%; }
+.footer { 
+    flex: 1 1 auto; 
+    margin: 4%; 
+}
+
+/* Styling specific to the login view */
+
+:not(.logged) .content { 
+	padding: 0%;
+	width: 21em;
+}
 
-/* Select only non-logged in view */
 :not(.logged) > .ynh-logo{
     background-image: url("./forest.png");
-    width: 412px;
-    height: 175px;
+    width: var(--logo-width);
+    height: var(--logo-height);
     opacity: 1;
     flex: 0 0 auto;
     margin-top: 0;
 }
 
-.ynh-wrapper.login { margin: 0; width: 100%;}
+.ynh-wrapper.login { 
+    margin: 0; 
+    width: 100%;
+}
 
 .login-form .form-group { 
-	margin:0; 
+	margin: 0; 
 	border: 0.4em solid var(--primary-color);
 	border-top: none;
 }
-.login-form .btn { margin-top: 0.4em; }
 
-.classic-btn { background: var(--primary-color); }
-.classic-btn:hover { background: var(--primary-hover-color); }
-
-.messages { 
-    margin: 0; 
-    /*width: 100%; */
+.login-form .btn { 
+    margin-top: 0.4em; 
 }
 
-.messages.info { 
-    background: var(--primary-color);
-}
-
-/* Tiles colors are copied from default theme */
+/* End of custom theme
+   Tiles colors are copied from default theme */
 
 .bluebg {
     background: #3498DB!important;