From 0117883bd5eca83c9237f572df2e24ae55e25c58 Mon Sep 17 00:00:00 2001 From: rainydaysavings Date: Sun, 5 Jul 2020 21:56:09 +0100 Subject: [PATCH] [UI] Standardization of sizes and variable usage for faster theming --- public/assets/css/base.css | 45 +++++---- public/assets/css/base_mid.css | 49 ++++++---- public/assets/css/base_small.css | 36 +++++--- public/assets/css/settings/settings.css | 92 +++++++------------ public/assets/css/settings/settings_mid.css | 92 +++++++------------ public/assets/css/settings/settings_small.css | 92 +++++++------------ 6 files changed, 177 insertions(+), 229 deletions(-) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 30783d697a..da63902903 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -1,4 +1,14 @@ /* GENERAL ----------------------------*/ +:root { + --head-font: 'Montserrat', sans-serif; + --main-font: 'Open Sans', sans-serif; + --main-size: 1.25em; + --medium-size: 0.8em; + --small-size: 0.65em; + --unit-size: 1em; + --side-margin: 20%; +} + body, html { background-color: #29323c; @@ -6,8 +16,8 @@ html { background-attachment: fixed; background-size: cover; color: #F6F6F6; - font-family: 'Open Sans', sans-serif; - font-size: 1.250em; + font-family: var(--main-font); + font-size: var(--main-size); margin: 0; padding: 0; } @@ -63,7 +73,7 @@ a:visited { } ul li ul a { - font-size: 0.65em; + font-size: var(--small-size); } b { @@ -87,8 +97,8 @@ b { flex-wrap: wrap; order: 1; width: 100%; - margin-left: 20%; - margin-right: 20%; + margin-left: var(--side-margin); + margin-right: var(--side-margin); background-color: rgba(0, 0, 0, 0.40); box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } @@ -100,15 +110,15 @@ b { flex-wrap: wrap; order: 1; width: 100%; - padding: 1em 1em 0.6em 1em; + padding: var(--unit-size) var(--unit-size) var(--small-size) var(--unit-size); } /* MENU -------------------------------*/ .icon-menu { display: inline-block; vertical-align: top; - width: 1em; - height: 1em; + width: var(--unit-size); + height: var(--unit-size); stroke-width: 0; stroke: currentColor; fill: currentColor; @@ -129,8 +139,8 @@ b { .icon-logo { display: inline-block; vertical-align: top; - width: 1em; - height: 1em; + width: var(--unit-size); + height: var(--unit-size); stroke-width: 0; stroke: currentColor; fill: currentColor; @@ -145,8 +155,8 @@ b { .icon-search { display: inline-block; vertical-align: top; - width: 1em; - height: 1em; + width: var(--unit-size); + height: var(--unit-size); stroke-width: 0; stroke: currentColor; fill: currentColor; @@ -172,18 +182,17 @@ b { position: absolute; width: 4em; height: 4em; - margin-left: 1em; + margin-left: var(--unit-size); } - #profile { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; - padding: 1em 1em; + padding: var(--medium-size) var(--medium-size); order: 4; - font-size: 0.8em; + font-size: var(--medium-size); align-items: center; } @@ -199,7 +208,7 @@ b { } #tags i { - margin-left: 0.5em; + margin-left: var(--small-size); } #stats { @@ -210,7 +219,7 @@ b { } #stats b:last-child { - margin-left: 1em; + margin-left: var(--unit-size); } /*-------------------------------------*/ \ No newline at end of file diff --git a/public/assets/css/base_mid.css b/public/assets/css/base_mid.css index fdff926b06..c28a1e0ca4 100644 --- a/public/assets/css/base_mid.css +++ b/public/assets/css/base_mid.css @@ -1,4 +1,14 @@ /* GENERAL ----------------------------*/ +:root { + --head-font: 'Montserrat', sans-serif; + --main-font: 'Open Sans', sans-serif; + --main-size: 1.15em; + --medium-size: 0.9em; + --small-size: 0.8em; + --unit-size: 1em; + --side-margin: 5%; +} + body, html { background-color: #29323c; @@ -6,8 +16,8 @@ html { background-attachment: fixed; background-size: cover; color: #F6F6F6; - font-family: 'Open Sans', sans-serif; - font-size: 1.2em; + font-family: var(--main-font); + font-size: var(--main-size); margin: 0; padding: 0; } @@ -63,7 +73,7 @@ a:visited { } ul li ul a { - font-size: 0.65em; + font-size: var(--small-size); } b { @@ -87,8 +97,8 @@ b { flex-wrap: wrap; order: 1; width: 100%; - margin-left: 5%; - margin-right: 5%; + margin-left: var(--side-margin); + margin-right: var(--side-margin); background-color: rgba(0, 0, 0, 0.40); box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } @@ -100,15 +110,15 @@ b { flex-wrap: wrap; order: 1; width: 100%; - padding: 1em 1em 0.6em 1em; + padding: var(--unit-size) var(--unit-size) var(--small-size) var(--unit-size); } /* MENU -------------------------------*/ .icon-menu { display: inline-block; vertical-align: top; - width: 1em; - height: 1em; + width: var(--unit-size); + height: var(--unit-size); stroke-width: 0; stroke: currentColor; fill: currentColor; @@ -129,8 +139,8 @@ b { .icon-logo { display: inline-block; vertical-align: top; - width: 1em; - height: 1em; + width: var(--unit-size); + height: var(--unit-size); stroke-width: 0; stroke: currentColor; fill: currentColor; @@ -145,8 +155,8 @@ b { .icon-search { display: inline-block; vertical-align: top; - width: 1em; - height: 1em; + width: var(--unit-size); + height: var(--unit-size); stroke-width: 0; stroke: currentColor; fill: currentColor; @@ -170,9 +180,9 @@ b { #avatar { z-index: 1; position: absolute; - width: 3em; - height: 3em; - margin-left: 1em; + width: 4em; + height: 4em; + margin-left: var(--unit-size); } #profile { @@ -180,12 +190,13 @@ b { flex-wrap: wrap; justify-content: flex-start; width: 100%; - padding: 1em 1em; + padding: var(--medium-size) var(--medium-size); order: 4; - font-size: 0.8em; + font-size: var(--medium-size); align-items: center; } + #info { order: 1; display: flex; @@ -197,7 +208,7 @@ b { } #tags i { - margin-left: 0.5em; + margin-left: var(--small-size); } #stats { @@ -208,7 +219,7 @@ b { } #stats b:last-child { - margin-left: 1em; + margin-left: var(--unit-size); } /*-------------------------------------*/ \ No newline at end of file diff --git a/public/assets/css/base_small.css b/public/assets/css/base_small.css index 0de0fbb4bb..6da53eaa47 100644 --- a/public/assets/css/base_small.css +++ b/public/assets/css/base_small.css @@ -1,4 +1,14 @@ /* GENERAL ----------------------------*/ +:root { + --head-font: 'Montserrat', sans-serif; + --main-font: 'Open Sans', sans-serif; + --main-size: 1.1em; + --medium-size: 0.75em; + --small-size: 0.7em; + --unit-size: 1em; + --side-margin: 0%; +} + body, html { background-color: #29323c; @@ -6,8 +16,8 @@ html { background-attachment: fixed; background-size: cover; color: #F6F6F6; - font-family: 'Open Sans', sans-serif; - font-size: 1.1em; + font-family: var(--main-font); + font-size: var(--main-size); margin: 0; padding: 0; } @@ -25,7 +35,7 @@ ul { } .drop-down ul li ul a { - line-height: 1.4em; + line-height: 0.8em; } .drop-down ul li ul { @@ -63,7 +73,7 @@ a:visited { } ul li ul a { - font-size: 0.8em; + font-size: var(--small-size); } b { @@ -87,8 +97,8 @@ b { flex-wrap: wrap; order: 1; width: 100%; - margin-left: 0; - margin-right: 0; + margin-left: var(--side-margin); + margin-right: var(--side-margin); background-color: rgba(0, 0, 0, 0.40); box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } @@ -100,15 +110,15 @@ b { flex-wrap: wrap; order: 1; width: 100%; - padding: 1em 1em 0.6em 1em; + padding: var(--unit-size) var(--unit-size) var(--small-size) var(--unit-size); } /* MENU -------------------------------*/ .icon-menu { display: inline-block; vertical-align: top; - width: 1em; - height: 1em; + width: var(--unit-size); + height: var(--unit-size); stroke-width: 0; stroke: currentColor; fill: currentColor; @@ -129,8 +139,8 @@ b { .icon-logo { display: inline-block; vertical-align: top; - width: 1em; - height: 1em; + width: var(--unit-size); + height: var(--unit-size); stroke-width: 0; stroke: currentColor; fill: currentColor; @@ -145,8 +155,8 @@ b { .icon-search { display: inline-block; vertical-align: top; - width: 1em; - height: 1em; + width: var(--unit-size); + height: var(--unit-size); stroke-width: 0; stroke: currentColor; fill: currentColor; diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css index 8fbcb46457..8003bdfbf3 100644 --- a/public/assets/css/settings/settings.css +++ b/public/assets/css/settings/settings.css @@ -6,11 +6,12 @@ flex-wrap: wrap; order: 2; width: 100%; - margin-left: 20%; - margin-right: 20%; + margin-left: var(--side-margin); + margin-right: var(--side-margin); background-color: #00000080; - padding: 1em 1em; - font-size: 0.7em; + padding: var(--medium-size) var(--medium-size); + font-size: var(--medium-size); + font-family: var(--head-font); box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } @@ -19,8 +20,8 @@ align-items: stretch; justify-content: space-evenly; width: 100%; - margin-left: 5%; - margin-right: 5%; + margin-left: calc(var(--side-margin) * 0.25); + margin-right: calc(var(--side-margin) * 0.25); padding: 0; } @@ -53,14 +54,15 @@ flex-wrap: wrap; order: 2; width: 100%; - margin-left: 20%; - margin-right: 20%; - margin-top: 1em; + margin-left: var(--side-margin); + margin-right: var(--side-margin); + margin-top: var(--unit-size); background-color: #00000080; - border-top-left-radius: 1em; - border-top-right-radius: 1em; - padding: 0.8em 0.8em; - font-size: 0.7em; + border-top-left-radius: var(--unit-size); + border-top-right-radius: var(--unit-size); + padding: var(--medium-size) var(--medium-size); + font-size: var(--medium-size); + font-family: var(--head-font); box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } @@ -69,8 +71,8 @@ align-items: stretch; justify-content: space-evenly; width: 100%; - margin-left: 10%; - margin-right: 10%; + margin-left: calc(var(--side-margin) * 0.5); + margin-right: calc(var(--side-margin) * 0.5); padding: 0; } @@ -106,65 +108,35 @@ hr { flex-wrap: wrap; order: 3; width: 100%; - margin-bottom: 1em; - margin-left: 20%; - margin-right: 20%; + margin-bottom: var(--unit-size); + margin-left: var(--side-margin); + margin-right: var(--side-margin); background-color: rgba(0, 0, 0, 0.30); - padding: 1em 1em 1em 1em; - border-bottom-left-radius: 1em; - border-bottom-right-radius: 1em; - font-size: 0.7em; + padding: var(--unit-size); + border-bottom-left-radius: var(--unit-size); + border-bottom-right-radius: var(--unit-size); box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } /* FORMS ------------------------------*/ -.label { +label { font-family: 'Montserrat', sans-serif; font-weight: 800; + font-size: var(--medium-size); } -#nickname { - order: 1; - width: 98%; -} - -#name { - order: 2; - width: 98%; - margin-top: 1em; -} - -#homepage { - order: 3; - width: 98%; - margin-top: 1em; -} - -#bio { - order: 4; - width: 98%; - margin-top: 1em; -} - -#location { - order: 5; - width: 98%; - margin-top: 1em; -} - -#save { - order: 6; - margin-top: 1em; - margin-left: auto; +label:nth-child() { + margin-top: var(--medium-size); } input[type=text] { - margin-top: 0.5em; + margin-top: calc(var(--unit-size) * 0.5); width: 100%; background-color: rgba(0, 0, 0, 0.30); border-style: none; - padding: 0.5em 0.5em; + padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); color: #F6F6F6; - border-radius: 0.5em; - font-size: 0.9em; + border-radius: calc(var(--unit-size) * 0.5); + font-size: var(--medium-size); + margin-bottom: var(--unit-size); } \ No newline at end of file diff --git a/public/assets/css/settings/settings_mid.css b/public/assets/css/settings/settings_mid.css index f7ec8f3c25..8003bdfbf3 100644 --- a/public/assets/css/settings/settings_mid.css +++ b/public/assets/css/settings/settings_mid.css @@ -6,11 +6,12 @@ flex-wrap: wrap; order: 2; width: 100%; - margin-left: 5%; - margin-right: 5%; + margin-left: var(--side-margin); + margin-right: var(--side-margin); background-color: #00000080; - padding: 1em 1em; - font-size: 0.7em; + padding: var(--medium-size) var(--medium-size); + font-size: var(--medium-size); + font-family: var(--head-font); box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } @@ -19,8 +20,8 @@ align-items: stretch; justify-content: space-evenly; width: 100%; - margin-left: 5%; - margin-right: 5%; + margin-left: calc(var(--side-margin) * 0.25); + margin-right: calc(var(--side-margin) * 0.25); padding: 0; } @@ -53,14 +54,15 @@ flex-wrap: wrap; order: 2; width: 100%; - margin-left: 5%; - margin-right: 5%; - margin-top: 1em; + margin-left: var(--side-margin); + margin-right: var(--side-margin); + margin-top: var(--unit-size); background-color: #00000080; - border-top-left-radius: 1em; - border-top-right-radius: 1em; - padding: 0.8em 0.8em; - font-size: 0.7em; + border-top-left-radius: var(--unit-size); + border-top-right-radius: var(--unit-size); + padding: var(--medium-size) var(--medium-size); + font-size: var(--medium-size); + font-family: var(--head-font); box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } @@ -69,8 +71,8 @@ align-items: stretch; justify-content: space-evenly; width: 100%; - margin-left: 10%; - margin-right: 10%; + margin-left: calc(var(--side-margin) * 0.5); + margin-right: calc(var(--side-margin) * 0.5); padding: 0; } @@ -106,65 +108,35 @@ hr { flex-wrap: wrap; order: 3; width: 100%; - margin-bottom: 1em; - margin-left: 5%; - margin-right: 5%; + margin-bottom: var(--unit-size); + margin-left: var(--side-margin); + margin-right: var(--side-margin); background-color: rgba(0, 0, 0, 0.30); - padding: 1em 1em 1em 1em; - border-bottom-left-radius: 1em; - border-bottom-right-radius: 1em; - font-size: 0.7em; + padding: var(--unit-size); + border-bottom-left-radius: var(--unit-size); + border-bottom-right-radius: var(--unit-size); box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } /* FORMS ------------------------------*/ -.label { +label { font-family: 'Montserrat', sans-serif; font-weight: 800; + font-size: var(--medium-size); } -#nickname { - order: 1; - width: 98%; -} - -#name { - order: 2; - width: 98%; - margin-top: 1em; -} - -#homepage { - order: 3; - width: 98%; - margin-top: 1em; -} - -#bio { - order: 4; - width: 98%; - margin-top: 1em; -} - -#location { - order: 5; - width: 98%; - margin-top: 1em; -} - -#save { - order: 6; - margin-top: 1em; - margin-left: auto; +label:nth-child() { + margin-top: var(--medium-size); } input[type=text] { - margin-top: 0.5em; + margin-top: calc(var(--unit-size) * 0.5); width: 100%; background-color: rgba(0, 0, 0, 0.30); border-style: none; - padding: 0.5em 0.5em; + padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); color: #F6F6F6; - border-radius: 0.5em; - font-size: 0.9em; + border-radius: calc(var(--unit-size) * 0.5); + font-size: var(--medium-size); + margin-bottom: var(--unit-size); } \ No newline at end of file diff --git a/public/assets/css/settings/settings_small.css b/public/assets/css/settings/settings_small.css index d2f05c4961..0f02fdb8ae 100644 --- a/public/assets/css/settings/settings_small.css +++ b/public/assets/css/settings/settings_small.css @@ -6,11 +6,12 @@ flex-wrap: wrap; order: 2; width: 100%; - margin-left: 0; - margin-right: 0; + margin-left: var(--side-margin); + margin-right: var(--side-margin); background-color: #00000080; - padding: 1em 1em; - font-size: 0.8em; + padding: var(--medium-size) var(--medium-size); + font-size: var(--medium-size); + font-family: var(--head-font); box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } @@ -19,8 +20,8 @@ align-items: stretch; justify-content: space-evenly; width: 100%; - margin-left: 5%; - margin-right: 5%; + margin-left: calc(var(--side-margin) * 0.25); + margin-right: calc(var(--side-margin) * 0.25); padding: 0; } @@ -48,19 +49,20 @@ /*-------------------------------------*/ /*-------------------------------------*/ .set-nav2 { - position: relative; display: flex; + position: relative; flex-wrap: wrap; order: 2; width: 100%; - margin-left: 1%; - margin-right: 1%; - margin-top: 1em; + margin-left: calc(var(--side-margin) + 1%); + margin-right: calc(var(--side-margin) + 1%); + margin-top: var(--unit-size); background-color: #00000080; - border-top-left-radius: 1em; - border-top-right-radius: 1em; - padding: 0.8em 0.8em; - font-size: 0.7em; + border-top-left-radius: var(--unit-size); + border-top-right-radius: var(--unit-size); + padding: var(--medium-size) var(--medium-size); + font-size: var(--medium-size); + font-family: var(--head-font); box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } @@ -69,6 +71,8 @@ align-items: stretch; justify-content: space-evenly; width: 100%; + margin-left: calc(var(--side-margin) * 0.5); + margin-right: calc(var(--side-margin) * 0.5); padding: 0; } @@ -104,65 +108,35 @@ hr { flex-wrap: wrap; order: 3; width: 100%; - margin-bottom: 1em; - margin-left: 1%; - margin-right: 1%; + margin-bottom: var(--unit-size); + margin-left: calc(var(--side-margin) + 1%); + margin-right: calc(var(--side-margin) + 1%); background-color: rgba(0, 0, 0, 0.30); - padding: 1em 1em 1em 1em; - border-bottom-left-radius: 1em; - border-bottom-right-radius: 1em; - font-size: 0.8em; + padding: var(--unit-size); + border-bottom-left-radius: var(--unit-size); + border-bottom-right-radius: var(--unit-size); box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } /* FORMS ------------------------------*/ -.label { +label { font-family: 'Montserrat', sans-serif; font-weight: 800; + font-size: var(--medium-size); } -#nickname { - order: 1; - width: 98%; -} - -#name { - order: 2; - width: 98%; - margin-top: 1em; -} - -#homepage { - order: 3; - width: 98%; - margin-top: 1em; -} - -#bio { - order: 4; - width: 98%; - margin-top: 1em; -} - -#location { - order: 5; - width: 98%; - margin-top: 1em; -} - -#save { - order: 6; - margin-top: 1em; - margin-left: auto; +label:nth-child() { + margin-top: var(--medium-size); } input[type=text] { - margin-top: 0.5em; + margin-top: calc(var(--unit-size) * 0.5); width: 100%; background-color: rgba(0, 0, 0, 0.30); border-style: none; - padding: 0.5em 0.5em; + padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); color: #F6F6F6; - border-radius: 0.5em; - font-size: 0.9em; + border-radius: calc(var(--unit-size) * 0.5); + font-size: var(--medium-size); + margin-bottom: var(--unit-size); } \ No newline at end of file