-
-
Notifications
You must be signed in to change notification settings - Fork 103
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
The website could be more mobile friendly #1
Comments
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. |
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 |
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. |
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 |
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:But I have no idea how adapting a website for phones is usually done. There must be a less hacky way to accomplish this.
The text was updated successfully, but these errors were encountered: