jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

html: standardize font sizes and heading tags.

Browse Source 
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.
This commit is contained in:
evazion
2020-07-17 13:05:40 -05:00
parent a59afcdf29
commit 3a3d456bd2
37 changed files with 83 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/javascript/src/styles/base/000_vars.scss
View File

@@ -1,13 +1,11 @@
$h1_size: 2em;
$h2_size: 1.5em;
$h3_size: 1.16667em;
$h4_size: 1em;
$dtext_h1_size: 2em;
$dtext_h2_size: 1.8em;
$dtext_h3_size: 1.6em;
$dtext_h4_size: 1.4em;
$dtext_h5_size: 1.2em;
$dtext_h6_size: 1em;
:root {
--text-sm: 0.9em;
--text-md: 1em;
--text-lg: 1.16667em;
--text-xl: 1.5em;
--text-xxl: 2em;
}
$h1_padding: 0.8em 0 0.25em 0;
$h2_padding: 0.8em 0 0.25em 0;
$h3_padding: 0.8em 0 0.25em 0;

9
app/javascript/src/styles/base/020_base.scss
View File

@@ -25,22 +25,23 @@ dt {
font-weight: bold;
}
h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6, .heading {
font-family: Tahoma, Verdana, Helvetica, sans-serif;
font-weight: bold;
line-height: 1.5em;
color: var(--header-color);
}
h1 {
font-size: $h1_size;
font-size: var(--text-xxl);
}
h2 {
font-size: $h2_size;
font-size: var(--text-lg);
}
h3, h4, h5, h6 {
font-size: $h3_size;
font-size: var(--text-md);
}
fieldset {

12
app/javascript/src/styles/common/dtext.scss
View File

@@ -9,32 +9,32 @@ div.prose {
}
h1 {
font-size: $dtext_h1_size;
font-size: var(--text-xl);
padding: $h1_padding;
}
h2 {
font-size: $dtext_h2_size;
font-size: var(--text-xl);
padding: $h2_padding;
}
h3 {
font-size: $dtext_h3_size;
font-size: var(--text-xl);
padding: $h3_padding;
}
h4 {
font-size: $dtext_h4_size;
font-size: var(--text-xl);
padding: $h4_padding;
}
h5 {
font-size: $dtext_h5_size;
font-size: var(--text-lg);
padding: $h4_padding;
}
h6 {
font-size: $dtext_h6_size;
font-size: var(--text-md);
padding: $h4_padding;
}

4
app/javascript/src/styles/common/main_layout.scss
View File

@@ -6,10 +6,6 @@ div#page {
padding: 0 10px;
aside#sidebar {
h1 {
font-size: $h3_size;
}
#options-box i.fa-bookmark {
margin-right: 0.25em;
}

6
app/javascript/src/styles/common/messages.scss
View File

@@ -15,6 +15,10 @@ div.list-of-messages {
width: 12em;
margin-right: 1em;
div.author-name {
font-weight: bold;
}
a.message-timestamp {
font-style: italic;
font-size: 0.90em;
@@ -42,7 +46,7 @@ div.list-of-messages {
margin: 0 0 1em;
width: auto;
h4 {
div.author-name {
display: inline;
margin-right: 0.5em;
}

4
app/javascript/src/styles/common/page_header.scss
View File

@@ -3,8 +3,8 @@
}
header#top {
h1#app-name-header {
font-size: 2em;
#app-name-header {
font-size: var(--text-xxl);
margin: 0 30px;
}

12
app/javascript/src/styles/specific/pools.scss
View File

@@ -27,17 +27,9 @@ div#add-to-pool-dialog {
margin-left: 1em;
cursor: pointer;
}
h1 {
font-size: $h3_size;
}
}
div#c-pools {
h1 {
font-size: $h2_size;
}
textarea {
height: 10em;
}
@@ -50,10 +42,6 @@ div#c-pools {
}
div#c-pool-orders, div#c-favorite-group-orders {
h1 {
font-size: $h2_size;
}
div#a-edit {
ul.ui-sortable {
list-style-type: none;

8
app/javascript/src/styles/specific/posts.scss
View File

@@ -274,10 +274,6 @@ div#c-posts {
&.post-notice-search { background: var(--post-search-notice-background); }
}
aside#sidebar #tag-list h2 {
font-size: $h4_size;
}
aside#sidebar > section > ul {
margin-bottom: 1em;
@@ -308,7 +304,7 @@ div#c-posts {
div#a-index {
menu#post-sections {
margin-bottom: 0.5em;
font-size: $h3_size;
font-size: var(--text-lg);
li {
padding: 0 1em 0.5em 0;
@@ -331,7 +327,7 @@ div#c-posts {
menu#post-sections {
margin: 0;
font-size: $h3_size;
font-size: var(--text-lg);
li {
padding: 0 1em 0 0;

4
app/javascript/src/styles/specific/site_map.scss
View File

@@ -7,10 +7,6 @@ div#c-static {
section {
flex: 1;
h1 {
font-size: $h3_size;
}
ul {
margin-bottom: 1.5em;
}

11
app/javascript/src/styles/specific/z_responsive.scss
View File

@@ -4,20 +4,12 @@
div#page {
margin: 0 0.5rem;
padding: 0;
aside#sidebar {
font-size: $h3_size;
}
}
header#top {
position: relative;
text-align: center;
h1#app-name-header {
display: inline;
}
#maintoggle {
display: block;
font-weight: bold;
@@ -28,7 +20,6 @@
}
nav#nav {
font-size: $h3_size;
line-height: 2em;
display: none;
@@ -53,7 +44,7 @@
}
div.paginator {
font-size: $h2_size;
font-size: var(--text-lg);
padding: 1em 0 0;
li {