~aw/patches

mygit: add dark colour scheme v1 PROPOSED

Johann Galle
Johann Galle: 1
 add dark colour scheme

 1 files changed, 68 insertions(+), 52 deletions(-)
Johann Galle
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
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
Forget what I said, it was a mistake on my part. Sorry
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~aw/patches/patches/21537/mbox | git am -3
Learn more about email & git
View this thread in the archives

[PATCH mygit] add dark colour scheme Export this patch

Johann Galle
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
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