~aw/patches

This thread contains a patchset. You're looking at the original emails, but you may wish to use the patch review UI. Review patch
4 2

[PATCH mygit] add dark colour scheme

Johann Galle
Details
Message ID
<20210327173856.1054-1-johann@qwertqwefsday.eu>
DKIM signature
pass
Download raw message
Patch: +68 -52
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
Details
Message ID
<FF63CD93-4A92-478F-86A0-ECDD779A2D1E@alexwennerberg.com>
In-Reply-To
<20210327173856.1054-1-johann@qwertqwefsday.eu> (view parent)
DKIM signature
pass
Download raw message
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
> 
Johann Galle
Details
Message ID
<c74ade03-f150-d7bb-4004-d8447ee1f82e@qwertqwefsday.eu>
In-Reply-To
<FF63CD93-4A92-478F-86A0-ECDD779A2D1E@alexwennerberg.com> (view parent)
DKIM signature
pass
Download raw message
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.
Johann Galle
Details
Message ID
<29861a17-9819-b1ff-a898-b4e178f5c095@qwertqwefsday.eu>
In-Reply-To
<FF63CD93-4A92-478F-86A0-ECDD779A2D1E@alexwennerberg.com> (view parent)
DKIM signature
pass
Download raw message
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.
Johann Galle
Details
Message ID
<c0281130-9d8c-a73b-4130-19d75d074cb1@qwertqwefsday.eu>
In-Reply-To
<29861a17-9819-b1ff-a898-b4e178f5c095@qwertqwefsday.eu> (view parent)
DKIM signature
pass
Download raw message
Forget what I said, it was a mistake on my part. Sorry
Reply to thread Export thread (mbox)