About
This is the base framework that I use for my character pages. Its main feature is that it allows you to easily make a grid with varying element widths, which is ironically something much more easily accomplished with flexbox than grid. It's also a fairly good Tumblr knockoff layout if you're into that.
You can copy the source code for this from Github! Or just take it from the view source page directly.
Refernce Sheet
This layout uses mobile-first CSS, which means the main CSS is for smaller screens, while a @media tag defines the CSS for larger screens. I've marked out which CSS applies to which screen sizes in the code.
Design notes
This layout uses mobile-first CSS, which means the main CSS is for smaller screens, while a @media tag defines the CSS for larger screens. I've marked out which CSS applies to which screen sizes in the code.
Gallery
This layout uses mobile-first CSS, which means the main CSS is for smaller screens, while a @media tag defines the CSS for larger screens. I've marked out which CSS applies to which screen sizes in the code.
Relationships
This is a half-width section. All sections, regardless of their grid size, will take up the entire screen width on small screens (under 1024px wide).
Acheivments
This is a half-width section. All sections, regardless of their grid size, will take up the entire screen width on small screens (under 1024px wide).
Volume Masterlist
All volumes they are in!
Quarter-width section
Fun pagedoll goes here