diff --git a/.jsbeautifyrc b/.jsbeautifyrc index 09a846d..9bea123 100644 --- a/.jsbeautifyrc +++ b/.jsbeautifyrc @@ -12,8 +12,8 @@ "indent_with_tabs": true, "newline_between_rules": true, "selector_separator": " ", - "selector_separator_newline": true, + "selector_separator_newline": false, "preserve_newlines": true, - "max_preserve_newlines": 10 + "max_preserve_newlines": 3 } } diff --git a/public/css/modules/base.css b/public/css/modules/base.css index 2b216a4..bb18978 100644 --- a/public/css/modules/base.css +++ b/public/css/modules/base.css @@ -1,3 +1,14 @@ +* { + /* Normalizing */ + /* margin: 0; */ + /* padding: 0; */ + box-sizing: border-box; +} + +body { + font-size: 16px; +} + :root { --main-background: #ffffff; --secondary-background: #eeeeee; @@ -6,7 +17,7 @@ --panels-background: #222324; --panels-text: #ffffff; --panels-scroll: #2a2c2c; - --accent-color: #0A84FF; + --accent-color: #0a84ff; --accent-text: #ffffff; --tag-background: #0062c4; --tag-text: #ffffff; @@ -43,4 +54,4 @@ body { width: calc(100% - 48px); height: 100%; display: flex; -} \ No newline at end of file +} diff --git a/public/css/modules/sidebar.css b/public/css/modules/sidebar.css index 702706a..4ef8066 100644 --- a/public/css/modules/sidebar.css +++ b/public/css/modules/sidebar.css @@ -1,21 +1,51 @@ -/* Sidebar section selector */ #sidebar { - background-color: var(--panels-background); + display: flex; + flex-direction: column; width: 48px; height: 100%; position: absolute; + top: 0; + left: 0; + background-color: var(--panels-background); color: var(--panels-text); + transition: width 125ms ease-in-out 150ms; } -#sidebar > .side_icon { - font-size: 24px; - padding: 12px; +#sidebar:hover { + width: 200px; } -.side_icon.active { +#sidebar .main_tablinks_text { + display: none; + display: inline-block; + margin-left: 20px; + opacity: 0; + visibility: hidden; + transition: all 50ms ease-in-out 200ms; +} + +#sidebar:hover .main_tablinks_text { + display: inline-block; + opacity: 1; + visibility: visible; +} + +#sidebar .main_tablinks { + display: flex; + align-items: center; + margin-top: 5px; + cursor: pointer; +} + +#sidebar .main_tablinks:hover { + background-color: #3e3e3e; +} + +#sidebar .side_icon { + font-size: 30px; + padding: 9px; +} + +#sidebar .main_tablinks.active .side_icon { color: var(--accent-color); } - -.main_tablinks { - cursor: pointer; -} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 58bc4c5..24560d1 100644 --- a/public/index.html +++ b/public/index.html @@ -15,19 +15,21 @@ -