The website could be more mobile friendly

[mikepierce]

I've only implemented a basic way to make the website more accessible on devices with small screens by manually increasing the font-size of a few selectors if the screen is too narrow using this block at the bottom of the assets/main.css file:

@media only screen and (max-width: 1100px) {
    h2{font-size:3.00em;}
    p{font-size:1.5em; line-height:1.5em;}
    th,td,tr{font-size:1.5em; line-height:1.5em;}
    td.date{font-size:1em; padding-top:0.5em;}
    td.navigation{font-size:1.5em; padding:0px 20px 0px 20px;}
    table.footer{font-size:0.33em;}
}

But I have no idea how adapting a website for phones is usually done. There must be a less hacky way to accomplish this.

[edgarlepe]

You typically design for mobile first and then use media queries (like you did) to adjust for larger screens. I'd be happy to help you make the changes.

[mikepierce]

I've looked into how to do it a bit now. I'm concerned about the simplicity of the CSS we'd have to lose to do it.

Well, would it be easy to very clearly separate in the CSS file the stuff a person using this template might want to edit/restyle from the stuff that only effects the layout of the website on desktop vs mobile? I don't want any academic folks who look to use this to get overwhelmed by a bunch of @medias everywhere in the CSS.

[edgarlepe]

Yeah, that's essentially what we would need to do—put the stuff that a user would want to edit/restyle at the top and document it well with good comments and variable names. For example, we could use css variabes (custom properties):

/*
 * Give a brief overview/description of variable section and describe how to change them.
 */
:root {
     /* Typography
        ========================================================================= */
    --font-family: 'Roboto Slab', serif;
    --font-family--heading: 'Roboto', sans-serif;
    --line-height: 1.5;

     /* Colors
        ========================================================================= */
    --site-background-color: #fafafa;

    --text-color: #505050;
    --text-color--heading: #813c54;
    --text-color--link: #b8860b;
    --text-color--navigation-current: #52739e; /* A description */

    /* Describe what this pair represents */
    --text-color--title-1: #52739e;
    --text-color--title-2: #b2132e;

    --text-color--program-title: #813c54;
    --text-color--program-special-titles: #52739e; /* Another description */
}

then for the most part it is as simple as changing the value of a variable. The rest of the css would now look something like:

html {
    background-color: var(--site-background-color);
    color: var(--text-color);
    font-family: var(--font-family);
    line-height: var(--line-height);

    /* Compatibility, feel free to ignore */
    font-size: 100%; /* user agent style sheet compatibility */ 
    -webkit-text-size-adjust: 100%; /* iPhone compatibility */
}

and if we want to, I'm pretty sure we could put the media queries at the bottom/end.

[mikepierce]

I remember shying away from using CSS variables, but I don't remember why. Maybe they didn't work on my site hosted on the Math Department's (virtual) server? Idk. Do you know any compatibility concerns with CSS variables?

Besides that, I'd say go ahead. But yeah keep the :root visually separate from the rest of the CSS. And maybe format the comments fewer different ways ;)