From 2750c133242d590715db1fe2af59d11c3fef69c1 Mon Sep 17 00:00:00 2001 From: Ingrid Budau Date: Mon, 30 May 2022 15:49:26 +0200 Subject: New design for a startpage, based on the work of #6420 --- qutebrowser/browser/qutescheme.py | 16 ++++ qutebrowser/html/startpage.html | 179 +++++++++++++++++++++++++++++++++++ qutebrowser/img/qutebrowser_logo.svg | 32 +++++++ 3 files changed, 227 insertions(+) create mode 100644 qutebrowser/html/startpage.html create mode 100644 qutebrowser/img/qutebrowser_logo.svg diff --git a/qutebrowser/browser/qutescheme.py b/qutebrowser/browser/qutescheme.py index c0da8ac94..aae4e6413 100644 --- a/qutebrowser/browser/qutescheme.py +++ b/qutebrowser/browser/qutescheme.py @@ -595,3 +595,19 @@ def qute_resource(url: QUrl) -> _HandlerRet: except FileNotFoundError as e: raise NotFoundError(str(e)) return mimetype, data + + +@add_handler('start') +def qute_start(url: QUrl) -> _HandlerRet: + """Handler for qute://start.""" + bookmarks = sorted(objreg.get('bookmark-manager').marks.items(), + key=lambda x: x[1]) # Sort by title + quickmarks = sorted(objreg.get('quickmark-manager').marks.items(), + key=lambda x: x[0]) # Sort by name + searchurl = config.val.url.searchengines['DEFAULT'] + page = jinja.render('startpage.html', + title='Welcome to qutebrowser', + bookmarks=bookmarks, + search_url=searchurl, + quickmarks=quickmarks) + return 'text/html', page diff --git a/qutebrowser/html/startpage.html b/qutebrowser/html/startpage.html new file mode 100644 index 000000000..86bfd8043 --- /dev/null +++ b/qutebrowser/html/startpage.html @@ -0,0 +1,179 @@ +{% extends "base.html" %} + +{% block style %} +body { + background-color: #263238; + font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +.wrapper { + width: 800px; + margin: 0 auto; +} + +.header { + margin-top: 120px; + margin-bottom: 80px; +} + +.title-container { + display: flex; + align-items: center; + max-width: 600px; + margin: auto; + padding: 15px; +} + +.logo { + width: 95px; + height: 95px; + padding: 10px; +} + +.title { + color: #c2e0ff; + font-size: 40px; +} + +input { + font-size: 23px; + outline: none; + min-height: 50px; + width: 600px; + padding: 8px; + box-sizing: border-box; + border: 1px solid transparent; + border-radius: 8px; + background-color: #4e4f63db; + color: #cce1f7; +} + +input::placeholder { + color: #bccbda; +} + +.bookmarks { + display: flex; + flex-direction: column; +} + +.bookmark-container { + border-color: #222d32; + background-color: #222d32; + border-radius: 8px; + border-width: 1px; + border-style: solid; + margin-bottom: 15px; + padding: 10px; +} + +.bookmark-container-title { + margin: 0; + font-size: 25px; + font-family: monospace; + padding: 10px 10px 0 10px; + color: #84b4e6; +} + +.link-container { + margin: 10px 15px; + font-size: 18px; +} + +a { + text-decoration: none; +} + +a:link, a:visited { + color: #bdc4d4; +} + +@media (prefers-color-scheme: light) { + body { + background-color: #ffffff; + } + + .title { + color: #3cb0f3; + } + + input { + background-color: #f4f7fffc; + color: #4380c3; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + } + + input::placeholder { + color: #7b87a5; + } + + .bookmark-container { + margin-bottom: 20px; + background-color: #f4f7ff66; + border-color: #f4f7ff66; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + } + + .bookmark-container-title { + color: #4b91da; + } + + a:link, a:visited { + color: #4b5a80; + } + +} +{% endblock %} + +{% block content %} +
+
+
+ + +

qutebrowser

+ +
+ +
+
+ {% if bookmarks %} +
+

Bookmarks

+ {% for bookmark in bookmarks %} +
+ {{ bookmark[1] }} +
+ {% endfor %} +
+ {% endif %} + {% if quickmarks %} +
+

Quickmarks

+ {% for quickmark in quickmarks %} +
+ {{ quickmark[0] }} +
+ {% endfor %} +
+ {% endif %} +
+

Getting Started

+
+ Official Website +
+
+ Cheat Sheet +
+
+ Changelog +
+
+
+
+{% endblock %} diff --git a/qutebrowser/img/qutebrowser_logo.svg b/qutebrowser/img/qutebrowser_logo.svg new file mode 100644 index 000000000..e816e8352 --- /dev/null +++ b/qutebrowser/img/qutebrowser_logo.svg @@ -0,0 +1,32 @@ + + + + + + + + + image/svg+xml + + + + + + + + + \ No newline at end of file -- cgit v1.2.3-54-g00ecf From 32fa3b5817fd79afa4d1652e339a6bfea3a2ffc8 Mon Sep 17 00:00:00 2001 From: Ingrid Budau Date: Tue, 14 Jun 2022 13:30:53 +0200 Subject: Center logo As well as: - replace external links with internal links for changelog and quickstart - remove unused class names - use already existing logo - replace `url` with `_url` to mark it unused --- qutebrowser/browser/qutescheme.py | 2 +- qutebrowser/html/startpage.html | 22 ++++++++++------------ qutebrowser/img/qutebrowser_logo.svg | 32 -------------------------------- 3 files changed, 11 insertions(+), 45 deletions(-) delete mode 100644 qutebrowser/img/qutebrowser_logo.svg diff --git a/qutebrowser/browser/qutescheme.py b/qutebrowser/browser/qutescheme.py index aae4e6413..23de022c7 100644 --- a/qutebrowser/browser/qutescheme.py +++ b/qutebrowser/browser/qutescheme.py @@ -598,7 +598,7 @@ def qute_resource(url: QUrl) -> _HandlerRet: @add_handler('start') -def qute_start(url: QUrl) -> _HandlerRet: +def qute_start(_url: QUrl) -> _HandlerRet: """Handler for qute://start.""" bookmarks = sorted(objreg.get('bookmark-manager').marks.items(), key=lambda x: x[1]) # Sort by title diff --git a/qutebrowser/html/startpage.html b/qutebrowser/html/startpage.html index 86bfd8043..391a14c91 100644 --- a/qutebrowser/html/startpage.html +++ b/qutebrowser/html/startpage.html @@ -19,15 +19,16 @@ body { .title-container { display: flex; align-items: center; + justify-content: center; max-width: 600px; margin: auto; padding: 15px; } .logo { - width: 95px; - height: 95px; - padding: 10px; + width: 105px; + height: 105px; + margin-bottom: 20px; } .title { @@ -129,10 +130,7 @@ a:link, a:visited {
- - -

qutebrowser

- +
@@ -157,7 +155,7 @@ a:link, a:visited {

Quickmarks

{% for quickmark in quickmarks %}
- {{ quickmark[0] }} + {{ quickmark[0] }}
{% endfor %}
@@ -165,13 +163,13 @@ a:link, a:visited {

Getting Started

- Official Website + Official Website
- Cheat Sheet + Quickstart
- Changelog + Changelog
diff --git a/qutebrowser/img/qutebrowser_logo.svg b/qutebrowser/img/qutebrowser_logo.svg deleted file mode 100644 index e816e8352..000000000 --- a/qutebrowser/img/qutebrowser_logo.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - image/svg+xml - - - - - - - - - \ No newline at end of file -- cgit v1.2.3-54-g00ecf From ed01767d4965b4bfb1dfeb42ea1599e122a24368 Mon Sep 17 00:00:00 2001 From: Ingrid Budau Date: Thu, 16 Jun 2022 12:35:02 +0200 Subject: Change background color for light color scheme - Added a nuance of blue instead of white, as a background for light color scheme - Deleted some unused CSS --- qutebrowser/html/startpage.html | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/qutebrowser/html/startpage.html b/qutebrowser/html/startpage.html index 391a14c91..9cb3be706 100644 --- a/qutebrowser/html/startpage.html +++ b/qutebrowser/html/startpage.html @@ -31,11 +31,6 @@ body { margin-bottom: 20px; } -.title { - color: #c2e0ff; - font-size: 40px; -} - input { font-size: 23px; outline: none; @@ -91,11 +86,7 @@ a:link, a:visited { @media (prefers-color-scheme: light) { body { - background-color: #ffffff; - } - - .title { - color: #3cb0f3; + background-color: #f9fcff; } input { -- cgit v1.2.3-54-g00ecf