diff --git a/css/stylesheet.css b/css/stylesheet.css index 96e3501..d0fe946 100644 --- a/css/stylesheet.css +++ b/css/stylesheet.css @@ -11,9 +11,15 @@ html { } body { - background: url(/img/background.svg); + background: + linear-gradient( + to right, + rgba(140, 140, 140, 0.5), + rgba(130, 130, 130, 0.5) + ), + url(/img/background.svg); background-repeat: repeat; - /*height: 100vh;*/ + /* height: 100vh; */ /* background: linear-gradient(-45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), linear-gradient(45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), rgb(2, 115, 127) */ @@ -49,6 +55,7 @@ div:has(#bar) { } #logo { + content: url(/img/logo-wordmark-horizontal.svg); height: 3em; } @@ -58,8 +65,21 @@ div:has(#bar) { input, input[type="submit" i], -input:not([type="email" i], [type="number" i], [type="password" i], [type="search" i], [type="tel" i], [type="text" i], [type="url" i]), -input:not([type="file" i], [type="image" i], [type="checkbox" i], [type="radio" i]) { +input:not( + [type="email" i], + [type="number" i], + [type="password" i], + [type="search" i], + [type="tel" i], + [type="text" i], + [type="url" i] +), +input:not( + [type="file" i], + [type="image" i], + [type="checkbox" i], + [type="radio" i] +) { all: unset; } @@ -142,6 +162,7 @@ label, } #logo-bottom { + content: url(/img/logo-wordmark-vertical.svg); margin: auto; margin-top: 4em; /* padding-bottom: 2.5em; */ @@ -160,9 +181,19 @@ h1 { } */ +#graphics { + background: #f2f2f2; + border: 1px solid #c0c0c0; + border-radius: 50px; + margin: auto; + max-width: 80%; + padding: 15px; + width: 40em; +} + #photo, #qrcode { - border: 1px solid #c0c0c0; + /* border: 1px solid #c0c0c0; */ /* width: 40%; */ /* margin-bottom: 2.5em; */ /* NOTE Reason for dimensions 276x276: To be in accord with generated QR Code. */ @@ -178,32 +209,7 @@ h1 { } #photo { - background: #fff; - border-right: none; - /* border-radius: 100px; 500px */ - border-bottom-left-radius: 50px; - border-top-left-radius: 50px; - margin-right: -3px; - object-fit: scale-down; -} - -/* - -NOTE -Use border to equalize element #phoro with #qrcode. -Perhaps also contain it within a span, in order to fill the background. - - border: 1em solid #fff; - height: 240px; - width: 240px; - -*/ - -#qrcode { - border-left: none; - border-bottom-right-radius: 50px; - border-top-right-radius: 50px; - margin-left: -3px; + /* object-fit: scale-down; */ } h3, h4, h5 { @@ -267,7 +273,7 @@ h3, h4, h5 { } #note { - color: #fff; + display: none; font-weight: bold; padding-bottom: 1em; text-align: center; @@ -276,7 +282,6 @@ h3, h4, h5 { #message { background: #000; - color: white; font-weight: bold; opacity: 10%; padding: 1em; @@ -287,10 +292,86 @@ h3, h4, h5 { right: 0; } +#message { + color: #fff; +} + #message:hover { opacity: unset; } +@media (prefers-color-scheme: dark) { + + h1, h2 ,h3, h4, h5, + label[for="jid"], + #count > a, + #jid, + #xmpp-uri { + color: #fbfbfe; + } + + #count > a { + color: #a7a7a7; /* a7a7bb */ + } + + body { + background: + linear-gradient( + to right, + rgba(0, 0, 0, 0.5), + rgba(0, 0, 0, 0.5) + ), + url(/img/background.svg); + } + + #bar { + background: #2b2a33; + } + + #logo { + content: url(/img/logo-wordmark-horizontal-dark.svg); + } + + #graphics { + background: #232323; + border: 1px solid #434a53; /* #6f7b8c */ + } + + #qrcode { + filter: invert(0.9); + } + + #profile { + background: #2b2a33; + filter: drop-shadow(2px 4px 6px grey); /* TODO Reverse color */ + } + + #message { + background: #fbfbfe; + } + + #message, + #note { + color: #2b2a33; + } + + #count > a:hover, + #preview:hover { + color: #fbfbfe; + } + + #note { + background: #2b2a33; + color: #f5f5f5; + text-shadow: 1px 1px #fbfbfe; + } + + #logo-bottom { + content: url(/img/logo-wordmark-vertical-dark.svg); + } + +} + /* NOTE This rule useful, for larger images (800x800), to switch from background-size: 100vw; */ @@ -305,6 +386,32 @@ h3, h4, h5 { } */ +@media (max-width: 870px) { + + h1 { + margin-bottom: 1em; + } + + #graphics { + background: unset; + border: unset; + border-radius: unset; + margin: unset; + max-width: unset; + padding: unset; + width: unset; + } + + #photo, + #qrcode { + display: block; + border-radius: 50px; + margin: auto; + margin-bottom: 2.5em; + } + +} + @media (max-width: 725px) { body { @@ -342,9 +449,7 @@ h3, h4, h5 { } #note { - background: #f5f5f5; - color: #000; - /* display: none; */ + display: block; font-weight: unset; padding-bottom: 1em; text-shadow: unset; @@ -352,11 +457,8 @@ h3, h4, h5 { #photo, #qrcode { - border: unset; - border-radius: 50px; /* height: unset; */ height: 360px; - margin-bottom: 2.5em; max-width: 70%; min-width: 360px; /* width: 360px; */ @@ -364,21 +466,14 @@ h3, h4, h5 { #photo { background: unset; - /* - border-bottom-left-radius: unset; - border-top-left-radius: unset; - */ - margin-right: unset; - /* object-fit: unset; */ } - #qrcode { - /* - border-bottom-right-radius: unset; - border-top-right-radius: unset; - */ - margin-left: unset; - } - - +} + +@media (max-width: 725px) and (prefers-color-scheme: dark) { + + body { + background: #2b2a33; + } + } diff --git a/fasi.py b/fasi.py index 7310e9b..8151b58 100644 --- a/fasi.py +++ b/fasi.py @@ -669,7 +669,10 @@ class Graphics: return selection def generate_qr_code_graphics_from_string(text, jid_bare): - qrcode_graphics = qrcode.make(text) + #qrcode_graphics = qrcode.make(text) + qr = qrcode.QRCode(border=2, box_size=10) + qr.add_data(text) + qrcode_graphics = qr.make_image(fill_color='#000', back_color='#f2f2f2') qrcode_graphics.save('qr/{}.png'.format(jid_bare)) class Syndication: diff --git a/img/background.svg b/img/background.svg index ae7c0f9..443673a 100644 --- a/img/background.svg +++ b/img/background.svg @@ -1,45 +1 @@ - - - - + \ No newline at end of file diff --git a/img/favicon.svg b/img/favicon.svg index 22860dc..b8c9200 100644 --- a/img/favicon.svg +++ b/img/favicon.svg @@ -1,109 +1 @@ - - - - + \ No newline at end of file diff --git a/img/logo-wordmark-horizontal-dark.svg b/img/logo-wordmark-horizontal-dark.svg new file mode 100644 index 0000000..58297b5 --- /dev/null +++ b/img/logo-wordmark-horizontal-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/logo-wordmark-horizontal.svg b/img/logo-wordmark-horizontal.svg new file mode 100644 index 0000000..4492705 --- /dev/null +++ b/img/logo-wordmark-horizontal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/logo-wordmark-vertical-dark.svg b/img/logo-wordmark-vertical-dark.svg new file mode 100644 index 0000000..6d86564 --- /dev/null +++ b/img/logo-wordmark-vertical-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/logo-wordmark-vertical.svg b/img/logo-wordmark-vertical.svg new file mode 100644 index 0000000..1724182 --- /dev/null +++ b/img/logo-wordmark-vertical.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 0000000..0e9c0f4 --- /dev/null +++ b/img/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/xmpp-logo-wordmark-horizontal.svg b/img/xmpp-logo-wordmark-horizontal.svg deleted file mode 100644 index 02f6723..0000000 --- a/img/xmpp-logo-wordmark-horizontal.svg +++ /dev/null @@ -1,123 +0,0 @@ - - diff --git a/img/xmpp-logo-wordmark-vertical.svg b/img/xmpp-logo-wordmark-vertical.svg deleted file mode 100644 index 0c904a7..0000000 --- a/img/xmpp-logo-wordmark-vertical.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - \ No newline at end of file diff --git a/img/xmpp-logo.svg b/img/xmpp-logo.svg deleted file mode 100644 index a6895bd..0000000 --- a/img/xmpp-logo.svg +++ /dev/null @@ -1,108 +0,0 @@ - - - diff --git a/xhtml/disco.xhtml b/xhtml/disco.xhtml index fd729dd..7a1127c 100644 --- a/xhtml/disco.xhtml +++ b/xhtml/disco.xhtml @@ -25,7 +25,7 @@
- {% if message %}