Files
danbooru/app/javascript/src/styles/common/main_layout.scss
evazion 3a3d456bd2 html: standardize font sizes and heading tags.
Standardize font sizes and heading tags (<h1>-<h6>) to be more
consistent across the site.

Changes:

* Introduce font size CSS variables and start replacing hardcoded font
  sizes with standard sizes.
* Change header tags to use only one <h1> per page. One <h1> per page is
  recommended for SEO purposes. Usually this is for the page title, like
  in forum threads or wiki pages.
* Standardize on <h2> for section headers in sidebars and <h3> for
  smaller subsection headers. Don't use <h4>-<h6>.
* In DText, make h1-h4 headers all the same size. Standard wiki style is
  to ignore h1-h3 and start at h4.
* In DText, make h4-h6 the same size as the h1-h3 tags outside of DText.
* In the tag list, change the <h1> and <h2> tag category headers to <h3>.
* Make usernames in comments and forum posts smaller. Also change the
  <h4> tag for the commenter name to <div class="author-name">.
* Make the tag list, paginator, and nav menu smaller on mobile.
* Change h1#app-name-header to a#app-name-header.
2020-07-23 17:34:17 -05:00

64 lines
853 B
SCSS

@import "../base/000_vars.scss";
div#page {
overflow: visible;
margin: 0 20px;
padding: 0 10px;
aside#sidebar {
#options-box i.fa-bookmark {
margin-right: 0.25em;
}
}
aside#sidebar > section {
margin-bottom: 1em;
}
section#content {
overflow: visible;
}
}
footer#page-footer {
width: 100%;
margin-top: 1em;
text-align: center;
padding: 1em 0 1em;
border-top: var(--footer-border);
.social-icon img {
vertical-align: bottom;
margin: 0 0.1em;
height: 16px;
}
}
.sidebar-container {
display: flex;
#sidebar {
flex: 0;
min-width: 20em;
}
#content {
flex: 1;
padding-left: 1em;
min-width: 0;
}
@media (max-width: 660px) {
flex-direction: column;
#content {
order: 1;
padding: 0;
}
#sidebar {
order: 2;
}
}
}