From 47556e24509d4c438a7fad6c05828ca4e3f2761a Mon Sep 17 00:00:00 2001 From: tpart Date: Wed, 18 Jan 2023 20:55:37 +0000 Subject: Update CSS (#2) Redesigned the start page and fixed some bugs Co-authored-by: tpart <10518520-tpart@users.noreply.gitlab.com> Reviewed-on: https://codeberg.org/metamuffin/keks-meet/pulls/2 Co-authored-by: tpart Co-committed-by: tpart --- client-web/public/assets/style/master.css | 34 ++++- client-web/public/assets/style/tile-backdrop.svg | 151 +++++++++++++++++++++++ 2 files changed, 180 insertions(+), 5 deletions(-) create mode 100644 client-web/public/assets/style/tile-backdrop.svg (limited to 'client-web/public/assets') diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css index 7a59d78..f30b085 100644 --- a/client-web/public/assets/style/master.css +++ b/client-web/public/assets/style/master.css @@ -12,7 +12,6 @@ * { font-family: "Ubuntu", sans-serif; - font-weight: 300; color: white; margin: 0px; padding: 0px; @@ -22,11 +21,19 @@ --bg: #151315; --bg-dark: #070707; --ac: #5e3f84; - --ac-light: #7c43bd; --ac-dark: #2d0d52; + --ac-light: #7c43bd; + --ac-dark-transparent: #2d0d52c9; +} + +body.start { + background-image: linear-gradient(var(--ac-dark-transparent), black 150%), url("./tile-backdrop.svg"); + background-size: 40vw; + background-color: var(--ac-dark); } body { + font-weight: 300; background-color: var(--bg-dark); height: 100vh; width: 100vw; @@ -34,10 +41,14 @@ body { } h1 { + text-shadow: 0px 0px 20px rgba(0,0,0,0.75); + font-size: 5em; font-weight: 700; - margin: 1em; + text-align: center; + margin-bottom: 0.1em; } + input[type="button"], button { padding: 0.5em; @@ -78,15 +89,28 @@ button:disabled { .start-box p { margin-bottom: 0.5em; + font-size: x-large; } .start-box input[type="text"] { - margin: 0.5em; + margin: 2em 0 1em 0; font-size: xx-large; } .start-box input[type="button"] { - margin: 0.5em; + margin: 1em 0 1em 0; + font-size: x-large; + width: 100%; +} + +.start-box .description { + margin-bottom: 1.5em; + font-size: xx-large; + text-align: center; +} + +#room-id-input { + padding: 0.5em; font-size: x-large; width: calc(100% - 1em); } \ No newline at end of file diff --git a/client-web/public/assets/style/tile-backdrop.svg b/client-web/public/assets/style/tile-backdrop.svg new file mode 100644 index 0000000..15ea791 --- /dev/null +++ b/client-web/public/assets/style/tile-backdrop.svg @@ -0,0 +1,151 @@ + + + + +Created by potrace 1.16, written by Peter Selinger 2001-2019 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -- cgit v1.2.3-70-g09d2 From a9ad28ffc17c07b18d6d559b698e9f09247a4879 Mon Sep 17 00:00:00 2001 From: tpart Date: Thu, 19 Jan 2023 19:30:41 +0000 Subject: fix css on mobile (#4) Co-authored-by: tpart <10518520-tpart@users.noreply.gitlab.com> Reviewed-on: https://codeberg.org/metamuffin/keks-meet/pulls/4 Co-authored-by: tpart Co-committed-by: tpart --- client-web/public/assets/style/master.css | 41 ++++++++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) (limited to 'client-web/public/assets') diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css index f30b085..c928e97 100644 --- a/client-web/public/assets/style/master.css +++ b/client-web/public/assets/style/master.css @@ -105,7 +105,6 @@ button:disabled { .start-box .description { margin-bottom: 1.5em; - font-size: xx-large; text-align: center; } @@ -113,4 +112,44 @@ button:disabled { padding: 0.5em; font-size: x-large; width: calc(100% - 1em); +} + +@media (max-width : 800px) { + h1 { + font-size: xxx-large; + } + + .start-box { + position: relative; + top: 0; + left: 0; + transform: none; + width: 90%; + margin: 0 auto; + margin-top: 1em; + } + + .start-box .description { + margin-bottom: 0.5em; + font-size: large; + } + + .start-box p { + margin-bottom: 0.5em; + font-size: large; + } + + .start-box input[type="text"] { + margin: 1em 0 0.5em 0; + font-size: large; + } + + .start-box input[type="button"] { + margin: 0.5em 0 0.5em 0; + font-size: large; + } + + #room-id-input { + font-size: large; + } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From aff0ed3c6e2ecf32abd10bf8c2deee31adb2919a Mon Sep 17 00:00:00 2001 From: tpart Date: Thu, 19 Jan 2023 19:57:56 +0000 Subject: make background repeat & fix start page on small screens (#6) Co-authored-by: tpart Reviewed-on: https://codeberg.org/metamuffin/keks-meet/pulls/6 Co-authored-by: tpart Co-committed-by: tpart --- client-web/public/assets/style/master.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'client-web/public/assets') diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css index c928e97..a1bc8e1 100644 --- a/client-web/public/assets/style/master.css +++ b/client-web/public/assets/style/master.css @@ -28,6 +28,7 @@ body.start { background-image: linear-gradient(var(--ac-dark-transparent), black 150%), url("./tile-backdrop.svg"); + background-attachment: fixed; background-size: 40vw; background-color: var(--ac-dark); } @@ -114,7 +115,7 @@ button:disabled { width: calc(100% - 1em); } -@media (max-width : 800px) { +@media (max-width : 800px), (max-height: 700px) { h1 { font-size: xxx-large; } -- cgit v1.2.3-70-g09d2 From c4c1d721582d6f14edef37bc4e2b86d679a2c459 Mon Sep 17 00:00:00 2001 From: tpart Date: Sat, 21 Jan 2023 11:35:11 +0100 Subject: Fix gradient on webkit --- client-web/public/assets/style/master.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client-web/public/assets') diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css index a1bc8e1..c6527b8 100644 --- a/client-web/public/assets/style/master.css +++ b/client-web/public/assets/style/master.css @@ -29,7 +29,7 @@ body.start { background-image: linear-gradient(var(--ac-dark-transparent), black 150%), url("./tile-backdrop.svg"); background-attachment: fixed; - background-size: 40vw; + background-size: cover, 40vw; background-color: var(--ac-dark); } -- cgit v1.2.3-70-g09d2 From 14feff1f92149d18767e58db16f0d2eebc88b757 Mon Sep 17 00:00:00 2001 From: metamuffin Date: Mon, 27 Feb 2023 17:25:06 +0100 Subject: embed fonts --- client-web/.gitignore | 1 + client-web/makefile | 5 ++++- client-web/public/assets/style/master.css | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) (limited to 'client-web/public/assets') diff --git a/client-web/.gitignore b/client-web/.gitignore index 55fe618..99be205 100644 --- a/client-web/.gitignore +++ b/client-web/.gitignore @@ -1,2 +1,3 @@ /public/assets/bundle.js /public/assets/sw.js +/public/assets/font diff --git a/client-web/makefile b/client-web/makefile index e81a09d..2623c6e 100644 --- a/client-web/makefile +++ b/client-web/makefile @@ -1,5 +1,5 @@ .PHONY: all watch -all: public/assets/bundle.js public/assets/sw.js +all: public/assets/bundle.js public/assets/sw.js public/assets/font/include.css watch: deno bundle --no-check --watch source/index.ts public/assets/bundle.js & deno bundle --no-check --watch source/sw/worker.ts public/assets/sw.js @@ -7,3 +7,6 @@ public/assets/bundle.js: $(shell find source -type f -name '*.ts') deno bundle --no-check --unstable source/index.ts > $@ public/assets/sw.js: $(shell find source/sw -type f -name '*.ts') deno bundle --no-check --unstable source/sw/worker.ts > $@ +public/assets/font/include.css: + mkdir -p public/assets/font + curl 'https://s.metamuffin.org/static/font-ubuntu.tar' | tar -xC public/assets/font diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css index c6527b8..13f8f2f 100644 --- a/client-web/public/assets/style/master.css +++ b/client-web/public/assets/style/master.css @@ -3,7 +3,7 @@ which is licensed under the GNU Affero General Public License (version 3); see /COPYING. Copyright (C) 2022 metamuffin */ -@import url("https://s.metamuffin.org/static/font-ubuntu/include.css"); +@import url("../font/include.css"); @import url("./logger.css"); @import url("./chat.css"); @import url("./room.css"); -- cgit v1.2.3-70-g09d2 From fe36a0640f2e36baad1f08033f09b49bdd0f1062 Mon Sep 17 00:00:00 2001 From: metamuffin Date: Mon, 27 Feb 2023 18:20:19 +0100 Subject: part 2 + fix css for small screens --- client-web/public/assets/style/master.css | 39 +++++++------------------------ 1 file changed, 9 insertions(+), 30 deletions(-) (limited to 'client-web/public/assets') diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css index 13f8f2f..8d77ca1 100644 --- a/client-web/public/assets/style/master.css +++ b/client-web/public/assets/style/master.css @@ -9,6 +9,7 @@ @import url("./room.css"); @import url("./prefs.css"); @import url("./menu.css"); +@import url("/overrides.css"); * { font-family: "Ubuntu", sans-serif; @@ -17,17 +18,9 @@ padding: 0px; } -:root { - --bg: #151315; - --bg-dark: #070707; - --ac: #5e3f84; - --ac-dark: #2d0d52; - --ac-light: #7c43bd; - --ac-dark-transparent: #2d0d52c9; -} - body.start { - background-image: linear-gradient(var(--ac-dark-transparent), black 150%), url("./tile-backdrop.svg"); + background-image: linear-gradient(var(--ac-dark-transparent), black 150%), + url("./tile-backdrop.svg"); background-attachment: fixed; background-size: cover, 40vw; background-color: var(--ac-dark); @@ -42,14 +35,13 @@ body { } h1 { - text-shadow: 0px 0px 20px rgba(0,0,0,0.75); + text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75); font-size: 5em; font-weight: 700; text-align: center; margin-bottom: 0.1em; } - input[type="button"], button { padding: 0.5em; @@ -115,11 +107,10 @@ button:disabled { width: calc(100% - 1em); } -@media (max-width : 800px), (max-height: 700px) { +@media (max-width: 800px), (max-height: 700px) { h1 { font-size: xxx-large; } - .start-box { position: relative; top: 0; @@ -129,28 +120,16 @@ button:disabled { margin: 0 auto; margin-top: 1em; } - - .start-box .description { - margin-bottom: 0.5em; - font-size: large; - } - .start-box p { margin-bottom: 0.5em; - font-size: large; + font-size: large !important; } - .start-box input[type="text"] { margin: 1em 0 0.5em 0; - font-size: large; + font-size: large !important; } - .start-box input[type="button"] { margin: 0.5em 0 0.5em 0; - font-size: large; + font-size: large !important; } - - #room-id-input { - font-size: large; - } -} \ No newline at end of file +} -- cgit v1.2.3-70-g09d2