💾 Archived View for lists.flounder.online › patches › threads › 20210327173856.1054-1-johann@qwertqw… captured on 2022-04-28 at 19:24:20. Gemini links have been rewritten to link to archived content
-=-=-=-=-=-=-
From: johann@qwertqwefsday.eu
Date: Sat, 27 Mar 2021 18:38:56 +0100
Message-Id: 20210327173856.1054-1-johann@qwertqwefsday.eu
To: <~aw/patches@lists.sr.ht>
Cc: "Johann150" <johann@qwertqwefsday.eu>
--------------------------------------
From: Johann150 <johann@qwertqwefsday.eu>
---
templates/static/style.css | 120 +++++++++++++++++++++----------------
1 file changed, 68 insertions(+), 52 deletions(-)
diff --git a/templates/static/style.css b/templates/static/style.css
index ad6129e..544f757 100644
--- a/templates/static/style.css
+++ b/templates/static/style.css
@@ -1,80 +1,81 @@
body {
- padding: 2ch;
- padding-left: 4ch;
- padding-right: 4ch;
- margin: auto;
- font-family: "Roboto", Helvetica, Arial, Sans-serif;
- word-wrap: break-word;
- background-color: white;
- line-height: 1.5;
+ padding: 2ch;
+ padding-left: 4ch;
+ padding-right: 4ch;
+ margin: auto;
+ font-family: "Roboto", Helvetica, Arial, Sans-serif;
+ word-wrap: break-word;
+ background-color: white;
+ line-height: 1.5;
}
.readme {
- max-width: 80ch;
+ max-width: 80ch;
}
a:visited {
- color: blue;
+ color: blue;
}
.repo-last-updated {
- font-style: italic;
+ font-style: italic;
}
.repo-link, .git-reference, .permissions, .commit-hash, .filename, .filesize, .commit-message{
- font-family: "Roboto Mono", monospace;
+ font-family: "Roboto Mono", monospace;
}
-.filesize {
- text-align: right;
+.filesize {
+ text-align: right;
}
.commit-hash {
- display: inline
+ display: inline
}
.footer {
- text-align: center;
- font-style: italic;
- font-size: .9rem;
+ text-align: center;
+ font-style: italic;
+ font-size: .9rem;
}
.line {
- display: inline-block;
- width: 4em;
- margin-right: .7em;
- text-align: right;
- text-decoration: none;
- -webkit-touch-callout: none; /* iOS Safari */
- -webkit-user-select: none; /* Safari */
- -khtml-user-select: none; /* Konqueror HTML */
- -moz-user-select: none; /* Old versions of Firefox */
- -ms-user-select: none; /* Internet Explorer/Edge */
- user-select: none; /* Non-prefixed version, currently */
+ display: inline-block;
+ width: 4em;
+ margin-right: .7em;
+ text-align: right;
+ text-decoration: none;
+ -webkit-touch-callout: none; /* iOS Safari */
+ -webkit-user-select: none; /* Safari */
+ -khtml-user-select: none; /* Konqueror HTML */
+ -moz-user-select: none; /* Old versions of Firefox */
+ -ms-user-select: none; /* Internet Explorer/Edge */
+ user-select: none; /* Non-prefixed version, currently */
}
:target {
- background: #FFFACD;
+ background: #FFFACD;
}
.clone-url {
- font-family: "Roboto Mono", monospace;
- -webkit-user-select: all; /* Safari */
- user-select: all; /* Standard syntax */
+ font-family: "Roboto Mono", monospace;
+ -webkit-user-select: all; /* Safari */
+ user-select: all; /* Standard syntax */
}
hr.thin {
- border: 0;
- height: 0;
- border-top: 1px solid rgba(0, 0, 0, 0.1);
- border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+ border: 0;
+ height: 0;
+ /* top border for light color scheme */
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+ /* bottom border for dark color scheme */
+ border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
h1, h2, h3 {
- margin: 0px;
+ margin: 0px;
}
-
pre {
line-height: 1.2;
font-size: 1rem;
@@ -84,14 +85,14 @@ pre {
}
tr:hover {
- background-color: #f0f0f0;
+ background-color: #f0f0f0;
}
td {
- white-space: nowrap;
- margin: 0px;
- border-style:hidden;
- padding: 0;
+ white-space: nowrap;
+ margin: 0px;
+ border-style:hidden;
+ padding: 0;
}
table td {
@@ -99,16 +100,31 @@ table td {
}
table.core {
- width: 100%;
- border-collapse: collapse;
+ width: 100%;
+ border-collapse: collapse;
}
@media only screen and (max-width: 600px) {
- body {
- font-size: 16px;
- }
+ body {
+ font-size: 16px;
+ }
+
+ .repo-description, .repo-last-updated, .commit-author-email, .commit-date {
+ display: none;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ body {
+ background: #212529;
+ color: #f8f9fa;
+ }
+
+ :target {
+ background: #ffffff;
+ }
- .repo-description, .repo-last-updated, .commit-author-email, .commit-date {
- display: none;
- }
+ tr:hover {
+ background-color: #0f0f0f;
+ }
}
--
2.20.1
From: alex@alexwennerberg.com
Date: Sat, 27 Mar 2021 14:12:16 -0700
Message-Id: FF63CD93-4A92-478F-86A0-ECDD779A2D1E@alexwennerberg.com
To: "Johann Galle" <johann@qwertqwefsday.eu>
In-Reply-To: 20210327173856.1054-1-johann@qwertqwefsday.eu
Cc: <~aw/patches@lists.sr.ht>
--------------------------------------
Thanks! I’ll take a look when i get home. I have a few ideas about the design, i want to make something that looks a little more modern without compromising the “brutalist “ style. Going to do some web design research
Alex
On Mar 27, 2021, at 10:39 AM, Johann Galle <johann@qwertqwefsday.eu> wrote:
From: Johann150 <johann@qwertqwefsday.eu>
---
templates/static/style.css | 120 +++++++++++++++++++++----------------
1 file changed, 68 insertions(+), 52 deletions(-)
diff --git a/templates/static/style.css b/templates/static/style.css
index ad6129e..544f757 100644
--- a/templates/static/style.css
+++ b/templates/static/style.css
@@ -1,80 +1,81 @@
body {
- padding: 2ch;
- padding-left: 4ch;
- padding-right: 4ch;
- margin: auto;
- font-family: "Roboto", Helvetica, Arial, Sans-serif;
- word-wrap: break-word;
- background-color: white;
- line-height: 1.5;
+ padding: 2ch;
+ padding-left: 4ch;
+ padding-right: 4ch;
+ margin: auto;
+ font-family: "Roboto", Helvetica, Arial, Sans-serif;
+ word-wrap: break-word;
+ background-color: white;
+ line-height: 1.5;
}
.readme {
- max-width: 80ch;
+ max-width: 80ch;
}
a:visited {
- color: blue;
+ color: blue;
}
.repo-last-updated {
- font-style: italic;
+ font-style: italic;
}
.repo-link, .git-reference, .permissions, .commit-hash, .filename, .filesize, .commit-message{
- font-family: "Roboto Mono", monospace;
+ font-family: "Roboto Mono", monospace;
}
-.filesize {
- text-align: right;
+.filesize {
+ text-align: right;
}
.commit-hash {
- display: inline
+ display: inline
}
.footer {
- text-align: center;
- font-style: italic;
- font-size: .9rem;
+ text-align: center;
+ font-style: italic;
+ font-size: .9rem;
}
.line {
- display: inline-block;
- width: 4em;
- margin-right: .7em;
- text-align: right;
- text-decoration: none;
- -webkit-touch-callout: none; /* iOS Safari */
- -webkit-user-select: none; /* Safari */
- -khtml-user-select: none; /* Konqueror HTML */
- -moz-user-select: none; /* Old versions of Firefox */
- -ms-user-select: none; /* Internet Explorer/Edge */
- user-select: none; /* Non-prefixed version, currently */
+ display: inline-block;
+ width: 4em;
+ margin-right: .7em;
+ text-align: right;
+ text-decoration: none;
+ -webkit-touch-callout: none; /* iOS Safari */
+ -webkit-user-select: none; /* Safari */
+ -khtml-user-select: none; /* Konqueror HTML */
+ -moz-user-select: none; /* Old versions of Firefox */
+ -ms-user-select: none; /* Internet Explorer/Edge */
+ user-select: none; /* Non-prefixed version, currently */
}
:target {
- background: #FFFACD;
+ background: #FFFACD;
}
.clone-url {
- font-family: "Roboto Mono", monospace;
- -webkit-user-select: all; /* Safari */
- user-select: all; /* Standard syntax */
+ font-family: "Roboto Mono", monospace;
+ -webkit-user-select: all; /* Safari */
+ user-select: all; /* Standard syntax */
}
hr.thin {
- border: 0;
- height: 0;
- border-top: 1px solid rgba(0, 0, 0, 0.1);
- border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+ border: 0;
+ height: 0;
+ /* top border for light color scheme */
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+ /* bottom border for dark color scheme */
+ border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
h1, h2, h3 {
- margin: 0px;
+ margin: 0px;
}
-
pre {
line-height: 1.2;
font-size: 1rem;
@@ -84,14 +85,14 @@ pre {
}
tr:hover {
- background-color: #f0f0f0;
+ background-color: #f0f0f0;
}
td {
- white-space: nowrap;
- margin: 0px;
- border-style:hidden;
- padding: 0;
+ white-space: nowrap;
+ margin: 0px;
+ border-style:hidden;
+ padding: 0;
}
table td {
@@ -99,16 +100,31 @@ table td {
}
table.core {
- width: 100%;
- border-collapse: collapse;
+ width: 100%;
+ border-collapse: collapse;
}
@media only screen and (max-width: 600px) {
- body {
- font-size: 16px;
- }
+ body {
+ font-size: 16px;
+ }
+
+ .repo-description, .repo-last-updated, .commit-author-email, .commit-date {
+ display: none;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ body {
+ background: #212529;
+ color: #f8f9fa;
+ }
+
+ :target {
+ background: #ffffff;
+ }
- .repo-description, .repo-last-updated, .commit-author-email, .commit-date {
- display: none;
- }
+ tr:hover {
+ background-color: #0f0f0f;
+ }
}
--
2.20.1
From: johann@qwertqwefsday.eu
Date: Sat, 27 Mar 2021 22:24:13 +0100
Message-Id: c74ade03-f150-d7bb-4004-d8447ee1f82e@qwertqwefsday.eu
To: "Alex" <alex@alexwennerberg.com>
In-Reply-To: FF63CD93-4A92-478F-86A0-ECDD779A2D1E@alexwennerberg.com
Cc: <~aw/patches@lists.sr.ht>
--------------------------------------
Just noticed that I forgot to include some explanation in the commit message:
I used the "Solarized" colour scheme which I found most easily available in syntect and online to put the right colours for the rest of the site. Also it is easy to switch between a light and dark colour scheme with it.
The style sheet has been a bit inflated because of all the classes syntect uses. But this was necessary to use CSS's prefers-color-scheme media query which could not be used with the previous hardcoded colour values in HTML style attributes. This file could probably be (a) optimized, but I think this is nontrivial because of cascading (b) cached which tide's serve_file does not do by itself. I already tried to optimize the style sheet somewhat from what syntect outputted with css_for_theme_with_class_style (where I got all the CSS classes from) which outputted the colours multiple times for each class and was very verbose.
The CSS media query is good because it makes styling easier for us because we do not have to handle user state of the selected theme and it is nicer for users because they do not have to select their preferred theme manually.
From: johann@qwertqwefsday.eu
Date: Sun, 28 Mar 2021 12:24:38 +0200
Message-Id: 29861a17-9819-b1ff-a898-b4e178f5c095@qwertqwefsday.eu
To: "Alex" <alex@alexwennerberg.com>
In-Reply-To: FF63CD93-4A92-478F-86A0-ECDD779A2D1E@alexwennerberg.com
Cc: <~aw/patches@lists.sr.ht>
--------------------------------------
Hey, why did you change my patch before applying? My patch was this <https://git.qwertqwefsday.eu/?p=mygit.git;a=commitdiff;h=2fd947a07adee4acb92cb84e9f2c98316543e2dd> but you applied this <https://git.qwertqwefsday.eu/?p=mygit.git;a=commitdiff;h=fa33ee7af2014f8584de014890341c6e1e833865> but the commit is still marked as authored by me.
I had moved everything regarding colours to the bottom to have a "colour scheme" section which could more easily be changed by users. Also using the CSS selector `a` is better than `a:visited` IMHO because it applies to all links.
It would be better to discuss things before applying the patch if there is something you do not like about it. But silently changing the patch while retaining author information is not okay.
From: johann@qwertqwefsday.eu
Date: Sun, 28 Mar 2021 12:26:39 +0200
Message-Id: c0281130-9d8c-a73b-4130-19d75d074cb1@qwertqwefsday.eu
To: "Alex" <alex@alexwennerberg.com>
In-Reply-To: 29861a17-9819-b1ff-a898-b4e178f5c095@qwertqwefsday.eu
Cc: <~aw/patches@lists.sr.ht>
--------------------------------------
Forget what I said, it was a mistake on my part. Sorry