Flutterby™! : Realizing it's been a long time since

Next unread comment / Catchup all unread comments User Account Info | Logout | XML/Pilot/etc versions | Long version (with comments) | Weblog archives | Site Map | | Browse Topics

Realizing it's been a long time since

2024-03-02 19:10:02.820082+01 by Dan Lyke 3 comments

Realizing it's been a long time since my last Flutterby redesign, like pre the popularity of tablets and web browsing cell phones, and I should see how people are doing the comments sidebar on mobile devices and the right CSS incantations to make that work...

[ related topics: Work, productivity and environment ]

comments in ascending chronological order (reverse):

#Comment Re: Realizing it's been a long time since made: 2024-03-02 23:21:58.790541+01 by: spc476 [edit history]

On my blog, the two columns use the float: property to float left or right. Then, in the CSS file, I have:

@media screen and (max-device-width: 736px),
        screen and (max-width: 736px)
{
  BODY
  {
    margin:     .5em;
    padding:    0;
  }
}

This moves the left and right sidebars to below the main content.

I had to add the following to my HTML template in the <HEAD> section:

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

And that's pretty much all I did to support tablets and cell phones.

#Comment Re: Realizing it's been a long time since made: 2024-03-04 01:13:34.250901+01 by: Dan Lyke

Yeah, I need to do something similar. My front page has the first day in one block, then the right sidebar, then subsequent days, because when I laid it out my concern was that it be usable in Lynx. So I just need to juggle the right alternate for that.

And make the colors react to system settings. I used to do that through a cookie, but that code is long gone.

#Comment Re: Realizing it's been a long time since made: 2024-03-04 08:30:22.955923+01 by: spc476 [edit history]

On my blog, physically, the days come first, then the right hand picture, then the left side, which makes it nice for Lynx. Also, on phones, the width is such that the blocks that normally float left and right, flow below the entries.

Add your own comment:

(If anyone ever actually uses Webmention/indie-action to post here, please email me)




Format with:

(You should probably use "Text" mode: URLs will be mostly recognized and linked, _underscore quoted_ text is looked up in a glossary, _underscore quoted_ (http://xyz.pdq) becomes a link, without the link in the parenthesis it becomes a <cite> tag. All <cite>ed text will point to the Flutterby knowledge base. Two enters (ie: a blank line) gets you a new paragraph, special treatment for paragraphs that are manually indented or start with "#" (as in "#include" or "#!/usr/bin/perl"), "/* " or ">" (as in a quoted message) or look like lists, or within a paragraph you can use a number of HTML tags:

p, img, br, hr, a, sub, sup, tt, i, b, h1, h2, h3, h4, h5, h6, cite, em, strong, code, samp, kbd, pre, blockquote, address, ol, dl, ul, dt, dd, li, dir, menu, table, tr, td, th

Comment policy

We will not edit your comments. However, we may delete your comments, or cause them to be hidden behind another link, if we feel they detract from the conversation. Commercial plugs are fine, if they are relevant to the conversation, and if you don't try to pretend to be a consumer. Annoying endorsements will be deleted if you're lucky, if you're not a whole bunch of people smarter and more articulate than you will ridicule you, and we will leave such ridicule in place.

Flutterby™ is a trademark claimed by

Dan Lyke
for the web publications at www.flutterby.com and www.flutterby.net.