diff --git a/web/css/styles.css b/web/css/styles.css index c731a8a..61dec65 100644 --- a/web/css/styles.css +++ b/web/css/styles.css @@ -1,52 +1,10 @@ -/* Hello welcome to my styles. Here are some notes. - * - * - I use Noto Sans because it supports most languages. - * - I will implement light mode first and then attempt dark. - * - All variables should be declared at the top. - * - Use as little as possible, write from scratch, and utilize helper - * classes. - * - No transpilers! - */ - -@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap'); - -:root { - /* Colors */ - --clrBg: #fff; - --clrPanel: #f9f9f9; - --clrBorder: #f2f2f2; - --clrBtn: #202020; - --clrText: #202020; - --clrTextLight: #868686; - --clrTextLighter: #abb4ca; - --clrHeart: #ff5050; - --clrWarn: #fbc560; - - /* Font Sizes */ - --fsSmall: 12px; - --fsNormal: 16px; - --fsReduced: 14px; - --fsEnlarged: 18px; - - /* Font Families */ - --ffDefault: "Noto Sans", sans-serif; - - /* Z Layers */ - --zDefault: 0; - --zPFP: 1; - --zHeader: 2; - --zGlobal: 3; - --zModal: 4; - - /* Icon */ - --iconSize: 24px; -} *:focus-visible { /* Technically this is bad and something else should be done to indicate * that something is in focus. */ outline: none; } + body { background: var(--clrBg); color: var(--clrText); @@ -56,82 +14,6 @@ body { padding: 0; } -/* Utilities */ -.flex-fill { - flex: auto; -} -.flex-noshrink { - /*flex-shrink: 0;*/ - flex: none; -} -.hide { - display: none !important; -} -.loader { - font-size: 24px; -} -button.action:disabled { - cursor: default; - background-color: var(--clrTextLight); -} -button { - background: #171717; - cursor: pointer; -} -button.icon { - border: none; - background: transparent; - padding: 0; - margin: 0; -} -button.icon > img.icon { - /* Remove the space below the image. */ - display: block; - margin: 0 auto; -} -button.action { - border: none; - border-radius: 50px; - background: #171717; - padding: 10px 15px; - font-size: 16px; - color: white; - font-weight: 800; -} -img.icon { - width: var(--iconSize); - height: var(--iconSize); -} -.float-right { - float: right; -} -.clickable { - cursor: pointer; -} -.bottom-border { /* TODO rename to bdr-bottom */ - border-bottom: solid 1px var(--clrBorder); -} -.sticky { - position: sticky; - top: 0; -} -.event-message { - background: #f2f2f2; - padding: 10px; - border-radius: 12px; - color: #444; -} -.flex { - display: flex; -} - -/* Icon */ - -img.invert { - /* This class is good for white on black icons; */ - filter: invert(1); -} - /* Navigation */ #nav { border-right: 1px solid var(--clrBorder); @@ -148,6 +30,19 @@ img.invert { padding: 10px; position: relative; } +#nav > div[data-active] img.active { + display: none; +} +#nav > div[data-active="home"] [role="home"] img.inactive, +#nav > div[data-active="explore"] [role="explore"] img.inactive, +#nav > div[data-active="notifications"] [role="notifications"] img.inactive { + display: none; +} +#nav > div[data-active="home"] [role="home"] img.active, +#nav > div[data-active="explore"] [role="explore"] img.active, +#nav > div[data-active="notifications"] [role="notifications"] img.active { + display: block; +} #app-icon-logo > img { width: 36px; height: 36px; diff --git a/web/css/utils.css b/web/css/utils.css new file mode 100644 index 0000000..63cb617 --- /dev/null +++ b/web/css/utils.css @@ -0,0 +1,77 @@ +.flex-fill { + flex: auto; +} +.flex-noshrink { + /*flex-shrink: 0;*/ + flex: none; +} + +.hide { + display: none !important; +} + +.loader { + font-size: 24px; +} + +button.action:disabled { + cursor: default; + background-color: var(--clrTextLight); +} +button { + background: #171717; + cursor: pointer; +} +button.icon { + border: none; + background: transparent; + padding: 0; + margin: 0; +} +button.icon > img.icon { + /* Remove the space below the image. */ + display: block; + margin: 0 auto; +} +button.action { + border: none; + border-radius: 50px; + background: #171717; + padding: 10px 15px; + font-size: 16px; + color: white; + font-weight: 800; +} +img.icon { + width: var(--iconSize); + height: var(--iconSize); +} +.float-right { + float: right; +} +.clickable { + cursor: pointer; +} +.bottom-border { /* TODO rename to bdr-bottom */ + border-bottom: solid 1px var(--clrBorder); +} +.sticky { + position: sticky; + top: 0; +} +.event-message { + background: #f2f2f2; + padding: 10px; + border-radius: 12px; + color: #444; +} +.flex { + display: flex; +} + +/* Icon */ + +img.invert { + /* This class is good for white on black icons; */ + filter: invert(1); +} diff --git a/web/css/vars.css b/web/css/vars.css new file mode 100644 index 0000000..978978c --- /dev/null +++ b/web/css/vars.css @@ -0,0 +1,33 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap'); + +:root { + /* Colors */ + --clrBg: #fff; + --clrPanel: #f9f9f9; + --clrBorder: #f2f2f2; + --clrBtn: #202020; + --clrText: #202020; + --clrTextLight: #868686; + --clrTextLighter: #abb4ca; + --clrHeart: #ff5050; + --clrWarn: #fbc560; + + /* Font Sizes */ + --fsSmall: 12px; + --fsNormal: 16px; + --fsReduced: 14px; + --fsEnlarged: 18px; + + /* Font Families */ + --ffDefault: "Noto Sans", sans-serif; + + /* Z Layers */ + --zDefault: 0; + --zPFP: 1; + --zHeader: 2; + --zGlobal: 3; + --zModal: 4; + + /* Icon */ + --iconSize: 24px; +} diff --git a/web/icon/explore-active.svg b/web/icon/explore-active.svg new file mode 100644 index 0000000..03a48d7 --- /dev/null +++ b/web/icon/explore-active.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/icon/explore.svg b/web/icon/explore.svg index dcecda0..3c5b121 100644 --- a/web/icon/explore.svg +++ b/web/icon/explore.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/web/icon/home-active.svg b/web/icon/home-active.svg new file mode 100644 index 0000000..8ecef69 --- /dev/null +++ b/web/icon/home-active.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/icon/home.svg b/web/icon/home.svg index 8ecef69..355b1e3 100644 --- a/web/icon/home.svg +++ b/web/icon/home.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/web/icon/logo-inverted.svg b/web/icon/logo-inverted.svg new file mode 100644 index 0000000..b06a7b5 --- /dev/null +++ b/web/icon/logo-inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/icon/notifications-active.svg b/web/icon/notifications-active.svg new file mode 100644 index 0000000..f21cc7d --- /dev/null +++ b/web/icon/notifications-active.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/index.html b/web/index.html index 09e8cb5..631f968 100644 --- a/web/index.html +++ b/web/index.html @@ -4,7 +4,9 @@ Damus - + + + @@ -46,18 +48,24 @@