CSS

Blog posts about my struggles with Cascading Style Sheets. The stuff that makes web pages look good. Or not.

2019-08-30 Dark Mode

If you’re a regular reader of this site, and you prefer “dark mode” in your browser, you you should be getting a “dark” theme, now. I hope it works. Let me know if anything looks weird.

The current CSS file uses the prefers-color-scheme media feature to change colours:

@media (prefers-color-scheme: dark) {
    body, rss {	color: #eeeee8; background-color: #333333; }
    a { color: #1e90ff }
    a:hover { color: #63b8ff }
    a:visited { color: #7a67ee }
    input, input[type="text"], textarea {
	color: #eeeee8; background-color: #555;
	padding: 0.5ex;
	font-size: 80%;
	line-height: 125%;
    }
    img { opacity: .75; transition: opacity .5s ease-in-out; }
    img:hover { opacity: 1; }
    /* ... some stuff removed ... */
}

Tags:

Add Comment

2019-08-09 CSS adventures

I’ve been experimenting with moving stats from inline into a sidebar for Hex Describe. It hasn’t been going too well.

First, I moved them into separate aside elements. The regular expression from hell was easy enough to write. 😭

my $stats_regexp = qr{
    (?<name> <strong>[^<>]*</strong> | <em>[^<>]*</em> )
    (?<text>
      [^<>]*            # random text without tags
      (?: <span \s+ class="images"><img[^>]+?></span>
      [^<>]* )*         # except for images followed by text
    )
    (?: \s+ \( )        # whitespace and opening parenthesis
    (?<stats> HD        # beginning of actual stats
      [^()]+            # anything that's not a parenthesis
      (?: \( [^()]+ \)  # anything that's not a parenthesis, in parentheses
          [^()]*        # followed by anything that's not a parenthesis
      )*                # multiple times
    )                   # end of stats
    (?: \) )            # followed by a closing parenthesis
    }x;

The core of the changes at the CSS level also didn’t take too long to discover. 😭

aside {
    position: absolute;
    width: 40ex;
    left: 90ex;
    display: block;
    float: right;
}

I didn’t know you could just not include top. I didn’t know you could use float to have the elements shuffle around a bit in order to get less overlap.

It was a bit trickier to reduce the font size because that also meant changing left.

aside p, aside table {
    /* font size smaller down here because we need the ex unit in the
       aside element */
    font-size: smaller;
}

Oh well.

And yet! And yet. Problems persist.

Apparently the regular expression doesn’t match all the stats. It doesn’t match the stats of the second white dragon in the example below. I guess that’s because highlighting the location name disrupts the regular expression.

Image 1

Sadly, there is still some rare overlap. Perhaps the idea that float would help avoid that was an illusion?

Image 2

Sometimes there is quite a lot of overlap!

Image 3

Unsurprisingly, repetitions are more glaring mistakes, now:

Image 4

Sometimes we have the monster type, the leader name, and something unrelated emphasized before stats. In this case, for example, the name of the clan is used to preface the stats in the margin. Not terrible, but also not perfect.

Image 5

Sometimes we have the monster type and the leader name before stats. In this case, it’s even weirder, because now the stats are prefaced by the leader name.

Image 6

Anyway, I’m not happy and I think I spent enough time investigating for me to give it a rest. I stored what I have in the aside branch and will revert back to what I had before. So long, sidebar with stats!

Tags:

Comments on 2019-08-09 CSS adventures

@kaushalmodi suggested I take a look at Tufte CSS. I had seen blogs that use it. Perhaps I simple “clear” instruction would have fixed those remaining overlap issues?

.sidenote,
.marginnote {
    float: right;
    clear: right;
    margin-right: -60%;
    width: 50%;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    vertical-align: baseline;
    position: relative; 
}

Some other day! Three hours is enough.

– Alex Schroeder 2019-08-09 13:26 UTC


@dredmorbius linked to their enumerated sidenotes codepen. And there are more examples on that site!

Nice!

– Alex Schroeder 2019-08-09 13:35 UTC

Add Comment

2018-10-25 Web Design for Simpletons

As mentioned before, I now have two static sites generated by a Planet, Old School RPG Planet and Indie RPG Planet. I wanted these pages to be easy to read from a phone. How to do this?

Screenshot of how it looks on wide screen

The first step is to add a viewport meta element. Don’t ask me why this is necessary. What were mobile browser makers thinking?

I added this to the HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

Next, I wanted the unnumbered list with all the members to be hidden by default, and to show or hide it with a click. The simplest solution (to a simpleton like me) is to use a class attribute on the element I want to toggle.

Thus:

<ul class="hidden">
...
</ul>

And some Javascript to toggle it:

function toggle(elem) {
   if (elem.className=="shown") {
      elem.className="hidden";
   }
   else {
      elem.className="shown";
   }
}

function addMenu() {
  var sidebar = document.getElementById('sidebar');
  if (!sidebar) return;
  var ul = sidebar.getElementsByTagName('ul')[0];
  var h2 = sidebar.getElementsByTagName('h2')[0];
  if (!ul || !h2) return;
  h2.onclick = function(){toggle(ul)};
}

I call addMenu when the page loads. It identifies the “Members” heading (the first h2) which will be used as a button and it identifies the actual list of members (the first ul) which will be toggled. Toggling simply means changing the class attribute from “hidden” to “shown” and back. Everything else happens in the CSS.

/* ------------------------- Small Devices ------------------------- */
@media only screen and (max-width: 1000px) {
    body {
        margin: 0.2em;
    }
    .news .content {
	padding: 0;
	margin: 0;
    }
    #sidebar {
	float: none;
	width: 100%;
	padding: 0;
	margin: 0;
    }
    #sidebar ul {
	list-style: none;
	display: none;
    }
    #sidebar ul.shown {
	display: block;
    }
    #sidebar ul.hidden {
	display: none;
    }
    #sidebar li {
	float: left;
	width: 100%;
	white-space: nowrap;
    }
    /* hide INFO */
    #sidebar h2, #sidebar dl, #sidebar form {
	display: none;
    }
    #sidebar h2, #sidebar dl, #sidebar form {
	display: none;
    }
    /* show MEMBERS */
    #sidebar h2:first-of-type {
	display: block;
	background: #ddd;
	margin: 0.5em;
	cursor: pointer;
    }
}

As you can see, I’m setting a few borders and paddings to smaller values or to zero in order to not waste any space, and most importantly, the display property of the list changes depending on the class attribute.

All of this is wrapped in a selector for narrow screens, which in this case means anything less than 1000px wide. Which you trigger on the Desktop by simply making your browser window narrow.

Screenshot on a narrow screen

Also, if your Javascript is disabled, the list is hidden and remains hidden. I think that’s a good default.

And in a text browser, the list is present. But it’s OK because there’s a “Skip to content” link at the very top.

Screenshot of w3m

Tags:

Comments on 2018-10-25 Web Design for Simpletons

@tomasino offers a different solution without JavaScript using a checkbox and the :checked pseudo class. He posted a codepen demo, too. Thanks!

And I used it for the two Planets,too!

The HTML now looks as follows:

<h2><label for="toggle">Members</label></h2>
<input type="checkbox" id="toggle"/>
<ul id="toggled">
...
</ul>

And the CSS stripped down to its essentials looks as follows:

#toggle {
    display: none;
}

@media only screen and (max-width: 1000px) {
    #sidebar ul {
	display: none;
    }
    #sidebar h2 label:before {
	content: "☰ ";
	font-size: 1.2em;
    }
    #sidebar h2 label:hover {
	cursor: pointer;
    }
    #toggle:checked ~ #toggled {
	display: block;
    }
}

In a text browser, the checkbox remains visible:

#                                              Indie RPG Planet (p1 of 40)
   #Indie RPG Planet

   Skip to content

                                  Indie RPG Planet

   What is this?

Members

   [ ]
     * (feed) Alex Schroeder
     * (feed) Burn After Running
     * (feed) Doom Rides
     * (feed) FASA Games, Inc.
     * (feed) Red Moose Games
     * (feed) Space·Time Will Tell
     * (feed) Spouting Lore
     * (feed) Step into RPGs
     * (feed) Take on Rules
     * (feed) Thoughty
     * (feed) UFO Press

For browsers without CSS support, the useless checkbox remains visible, of course.

– Alex Schroeder 2018-10-25 20:17 UTC

Add Comment

2017-11-14 CSS Naked Day

I should write an Oddmuse module for CSS Naked Day (April 9).

Try this site without CSS!

Get dressed again...

I wrote about this back in 2007 and never thought of it again. If I had a module, I’d get reminded of it, every April.

Today I was reminded of it because my browser at the office has 11 tabs with Wikipedia pages. I plugged in the laptop after yesterday’s meeting elsewhere, opened the browser, and the 11 tabs came back—but without styling! I had forgotten to plug in the networking cable and apparently Chrome caches the Wikipedia HTML but not the Wikipedia CSS.

Anyway, the code would be something like this:

$ModulesDescription .= '<p><a href="https://alexschroeder.ch/wiki/2017-11-14_CSS_Naked_Day">No CSS Day</a></p>';
*NoCssOldGetCss = \&GetCss;
*GetCss = \&NoCssNewGetCss;
sub NoCssNewGetCss {
  my ($sec,$min,$hour,$mday,$mon,$year,$wday,$yday) = gmtime($Now);
  # $mon: April is 3
  if ($mday == 9 and $mon == 3) {
    return '';
  } else {
    return NoCssOldGetCss(@_);
  }
}

Untested!

Also, I had never heard of the term “international day” before. The code on the CSS Naked day website has a funkier test than mine above and here’s why:

CSS Naked Day lasts for one international day. Technically speaking, it will be “April 9th” somewhere in the world for 48 hours. This is to ensure that everyone’s website will be publicly nude for the entire world to see at any given time during April 9. [1]

Tags:

Add Comment

2012-03-07 Tinkering with the CSS

I’ve started tinkering with the CSS again. No more secret theme switching by clicking on my face up there. :)

I’m going for black and white and the default blue for all links. The previous classification for site links, links to sister sites, links to Wikipedia and all other links didn’t really work with all the redirections I had implemented. Thus, be gone!

I’m sticking to Garamond as my favorite font even though I must admit it looks absolutely horrible when viewed on Windows without Clear Type. Oh well! Most people will be reading the site via a feed reader anyway, I guess.

I’ll also try to stick to a larger than average font-size. I haven’t decided whether I should be using Google Web Fonts.

Let me know if there is something you’d like to see changed. :)

Tags:

Comments on 2012-03-07 Tinkering with the CSS

How does the referrer thingy at the bottom of the post work? The two pages linked seem not to link to this post?

Regarding styling: I’d prefer a non-serif font.

Andreas Gohr 2012-03-08 10:14 UTC


The referrer thing works as follows: if a visitor to the wiki has referrer information, the wiki fetches this page and searches for a link to the page. If that works, it remembers the link. This means that eventually referrals expire if nobody ever follows them. Normally this works very well. Some sites such as Blogspot offer users a blog-roll. As far as I understand it, users will then see the n most recently updated entries or a random selection. Either way, by the time other visitors try and check the referral, it’s no longer being displayed.

If you check Self:action=refer you will notice that at the moment the authors of Dreams of Mythic Fantasy, The City of Iron and Troll and Flame seem to have me listed on their blog-roll. All of them are Blogspot blogs. :)

As for sans-serif, try this link. (Your preference is set in a cookie.) Feel free to switch back.

AlexSchroeder 2012-03-08 11:46 UTC


For Pierre and others who preferred the old look: Try this! switch to the Red Beige theme and switch back to the default theme

AlexSchroeder 2012-03-23 15:28 UTC

Add Comment

2009-09-19 SVG, CSS, and Inkscape

I have a problem with Inkscape and I think it’s related to the handling or loss of CSS information. I have a script that creates an SVG map which looks fine in Firefox – check it out and hit the submit button.

When I import that SVG into another SVG in order to add more layers, everything looks more or less ok. One thing that’s already wrong is that the hex coordinates are missing. When I save the file, close Inkscape, open Inkscape again, and reopen the new file, things are messed up:

  1. Coordinates are still missing
  2. Font sizes are wrong for the coordinates
  3. Symbols (text elements) around planets have some sort of white border

Do you think Inkscape will have an easier time handling the SVG if I don’t use CSS to specificy stroke width, opacity, and the like?

I’m using Inkscape 0.46 at the moment.

Tags:

Add Comment

2008-01-31 Web Design

Time Breakdown of Modern Web Design

via ThomasWaldmann who mentioned it on IRC, via Patrick Logan on his blog, via James Robertson on his blog, from Michael Vilain who offers “massage chair work at the Palo Alto Whole Foods”.

But if you google for “time breakdown of modern webdesign” you’ll find other copies of the image. One of them was marked ’© 2006 Alain “IE users must DIE” Foreman poisonedminds.com’. Some more Googling and looking at URLs of dead links, I finally found what I think is the source image: The Church of Poisoned Minds 2006-06-21!

Note the offensive copyright line that got stripped eventually. :]

I take pride in doing a tiny piece of research every now and then. ;)

Tags:

Comments on 2008-01-31 Web Design

LOL!!!!

Oh, that’s 100% completely, utterly and totally accurate - probably a first for a pie chart :)

greywulf 2008-01-31 12:57 UTC


LOL...this is very true. I like the bit about trying to get things to work in the flippin’ Explorer :p

Christa 2008-01-31 13:04 UTC


Yes, I’ve been there. My workmate Thomas was spitting tacks at Javascript just this week.

– Marco 2008-01-31 16:37 UTC


I also like the WTF measure.

WTF?

Posted by forcer on the EmacsChannel... :)

AlexSchroeder 2008-02-05 16:23 UTC

Add Comment

2007-11-13 Black and White

So now I’ve done away with the “real” logo. Clicking on the logo no longer takes you to the Diary. I never used that functionality anyway. The logo now switches between the normal color theme and a black and white theme using blue, underlined links. As standard as can be. :)

push(@MyInitVariables, \&LogoBar);

sub LogoBar {
  $InvisibleCookieParameters{theme} = 1;
  my $id = GetId();
  $id = $RCName if GetParam('action', 'browse') eq 'rc';
  $id = $HomePage unless $id;
  my $url = $ScriptName . '/' . $id;
  my $css = GetParam('css', $StyleSheet);
  my $text;
  my $pic;
  if (GetParam('theme', //) eq //) {
    # default: offer to switch to black-and-white                                                                          
    $url .= "?theme=bw";
    $text = 'black and white';
    $pic = '/pics/alex.png';
  } else {
    $url .= "?theme=";
    $text = 'default color';
    $pic = '/alex/pics/alex-face-balcony-small.jpg';
  }
  # $url .= ';css=' if $css;                                                                                               
  $UserGotoBar .= qq {                                                                                                      
<a class="logo" href="$url" title="Switch to $text theme">                                                                 
  <img class="logo" src="$pic" />                                                                                          
</a>                                                                                                                       
};

And for the CSS:

@import "/css/beige-red.css";

body.bw {
    color: black;
    background-color: white;
}

body.bw h1, body.bw h2, body.bw h3,
body.bw h1 a, body.bw h2 a, body.bw h3 a,
body.bw div.journal h1, body.bw div.journal h2, body.bw div.journal h3,
body.bw a.number {
    color: inherit;
    text-decoration: none;
}

body.bw a {
    color: blue;
    text-decoration: underline;
}

div.footer a.logo {
    display: none;
}

Tags:

Comments on 2007-11-13 Black and White

Sounds like an Easter Egg. :)

AaronHawley 2007-11-13 15:38 UTC


Totally. :)

AlexSchroeder 2007-11-13 17:35 UTC

Add Comment

2007-11-09 Fonts

I just realized that my Mac Mini does not offer the Garamond and Bookman Old Style fonts that I’ve been using for my CSS. These two fonts came with Mac OS 10.3 but seem to be lacking in Mac OS 10.4.

Furthermore, when I copy the Garamond font file ont the Mac Mini and install the font, it seems to have no effect on Firefox: The font was installed as a user but remains inaccessible. What’s going on? I found that the Baskerville R looks a bit like the Garamond R... I don’t like the overall structure, however. At the screen resolution I’m using various character seem darker than the others. Gah! What am I to do?

I decided to switch from Baskerville to Cochin as a second-best. But I want my Garamond back!

Googling for some references, I found a little essay on typographer Matthew Carter who designed Georgia, Helvetica, Mantinia, Miller, Nina, Olympian, Sophia, Tahoma, Verdana, Alisal, Auriol, Bell Centennial, Cascade Script, Big Caslon, New Century Schoolbook, Shelley Script, Skia, Snell Roundhand Script, Bitstream Charter, Cochin, ITC Galliard, and Gando. [1]

Wow.

Grr. I installed a static web page to test this. [2]

Tags:

Add Comment

2005-10-17 Oddmuse CSS

2005-10-17 Kochen shows that I need to work on the CSS: The logo somehow prevents the table from expanding to the right when printing, and there’s an extra hr at the end of the table.

Tags:

Add Comment

More...

Comments


Please make sure you contribute only your own work, or work licensed under the GNU Free Documentation License. Note: in order to facilitate peer review and fight vandalism, we will store your IP number for a number of days. See Privacy Policy for more information. See Info for text formatting rules. You can edit the comment page if you need to fix typos. You can subscribe to new comments by email without leaving a comment.

To save this page you must answer this question:

Please say HELLO.