Lower semantc weight for site name

philwareham · philwareham · commit 74d6f631d4ef · 2018-05-02T17:31:28.000+01:00
diff --git a/dist/four-point-seven/forms/article/default.txp b/dist/four-point-seven/forms/article/default.txp
@@ -2,14 +2,9 @@
     <meta itemprop="mainEntityOfPage" content="<txp:permlink />">
 
     <txp:if_individual_article>
-        <h1 itemprop="headline">
-            <txp:title />
-        </h1>
+        <h1 itemprop="headline"><txp:title /></h1>
     <txp:else />
-        <h1 itemprop="headline">
-            <a href="<txp:permlink />" itemprop="url">
-                <txp:title />
-            </a>
+        <h1 itemprop="headline"><a href="<txp:permlink />" itemprop="url"><txp:title /></a>
         </h1>
     </txp:if_individual_article>
 
diff --git a/dist/four-point-seven/forms/misc/body_header.txp b/dist/four-point-seven/forms/misc/body_header.txp
@@ -1,5 +1,5 @@
 <header class="site-header">
-    <h1><txp:link_to_home><txp:site_name /></txp:link_to_home></h1>
+    <h2><txp:link_to_home><txp:site_name /></txp:link_to_home></h2>
     <txp:evaluate>
         <h3><txp:site_slogan /></h3>
     </txp:evaluate>
diff --git a/dist/four-point-seven/pages/archive.txp b/dist/four-point-seven/pages/archive.txp
@@ -91,9 +91,7 @@
 
                 <txp:if_article_list>
 
-                    <h1 itemprop="name">
-                        <txp:section title="1" />
-                    </h1>
+                    <h1 itemprop="name"><txp:section title="1" /></h1>
                     <txp:article class="article-list" form="article_listing" limit="10" wraptag="ul" />
                     <!-- ...or if you want to list all articles from all sections instead, then replace txp:article with txp:article_custom -->
 
diff --git a/dist/four-point-seven/pages/error_default.txp b/dist/four-point-seven/pages/error_default.txp
@@ -30,12 +30,8 @@
 
             <!-- Main content -->
             <main aria-label="<txp:text item="main_content" />">
-                <h1 class="error-status">
-                    <txp:error_status />
-                </h1>
-                <p class="error-msg">
-                    <txp:error_message />
-                </p>
+                <h1 class="error-status"><txp:error_status /></h1>
+                <p class="error-msg"><txp:error_message /></p>
             </main>
 
             <txp:output_form form="body_aside" />
diff --git a/dist/four-point-seven/styles/default.css b/dist/four-point-seven/styles/default.css
@@ -113,7 +113,7 @@ nav ol::after,
   .site-header {
     padding: 1em 0;
   }
-  .site-header h1 {
+  .site-header h2 {
     margin: 0;
   }
   .site-header h3 {
@@ -332,10 +332,10 @@ nav ol::after,
     line-height: 1.1842105;
   }
   h2 {
-    margin: 0.8em 0;
-    font-size: 1.875rem;
+    margin: 0.75em 0;
+    font-size: 2rem;
     letter-spacing: -0.25px;
-    line-height: 1.2666667;
+    line-height: 1.25;
   }
   h3 {
     margin: 1em 0;
diff --git a/src/dev-docs/design-patterns-page.textile b/src/dev-docs/design-patterns-page.textile
@@ -2,13 +2,17 @@ Article containing examples of various inline and block elements that should be
 
 h2. Typography
 
-h1. h1 Heading 1 h1 Heading 1 h1 Heading 1 h1 Heading 1 h1
+h1. h1 Heading 1 h1 Heading 1 h1 Heading 1
 
-h2. h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2
+h2. h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2
 
-h3. h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3
+h3. h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3
 
-h4. h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4
+h4. h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4
+
+h5. h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5 h5 Heading 5
+
+h6. h6 Heading 6 h6 Heading 6 h6 Heading 6 h6 Heading 6 h6 Heading 6 h6 Heading 6 h6 Heading 6 h6 Heading 6
 
 *Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper.* Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.
 
@@ -49,6 +53,14 @@ The <var>var element</var> example
 
 h2. Block text-level semantics
 
+h3. Disclosure (details/summary)
+
+notextile. <details>
+    <summary>System requirements</summary>
+    <p>Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage.</p>
+    <p>An <a href="#">input device</a> as well as some form of <a href="#">output device</a> is recommended.</p>
+</details>
+
 h3. Pre-formatted text blocks
 
 pre. This is an example of a non-code
@@ -57,7 +69,7 @@ pre. This is an example of a non-code
 
 h3. Pre-formatted code blocks
 
-bc. <section class="alert alert-error fade in" role="alert">
+bc. <section class="alert alert-error" role="alert">
     <a class="close" data-dismiss="alert">&amp;times;</a>
     <h3>Message pane</h3>
     <p>Error message goes here.</p>
@@ -90,8 +102,8 @@ h3. Images with links
 h3. Figures
 
 notextile. <figure>
-<img src="https://placehold.it/480x240/999999/333333" alt="Alt text">
-<figcaption>Figcaption content</figcaption>
+    <img src="https://placehold.it/480x240/999999/333333" alt="Alt text">
+    <figcaption>Figcaption content</figcaption>
 </figure>
 
 h3. Left ranged image
@@ -106,30 +118,13 @@ h3. Centred image
 
 Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis. !=https://placehold.it/160/999999/333333(160x160px placeholder)! Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In lectus nisl, porttitor eget, fermentum et, viverra a, odio. Sed semper. Praesent vulputate nibh eget nisi. Sed ligula. Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis.
 
-h3. SVG
-
-notextile. <svg width="100px" height="100px">
-<circle cx="100" cy="100" r="100" fill="#999999"/>
-</svg>
-
 h3. Videos
 
-notextile. <video>
-    <source type="video/mp4" src="https://clips.vorwaerts-gmbh.de/VfE_html5.mp4">
-    <source type="video/webm" src="https://clips.vorwaerts-gmbh.de/VfE.webm">
+notextile. <video controls>
+    <source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4">
+    <source type="video/webm" src="http://clips.vorwaerts-gmbh.de/VfE.webm">
 </video>
 
-h2. Details / summary
-
-notextile. <details>
-    <summary>More info</summary>
-    <p>Additional information</p>
-    <ul>
-        <li>Point 1</li>
-        <li>Point 2</li>
-    </ul>
-</details>
-
 h2. Lists
 
 # this is an example
@@ -158,41 +153,35 @@ Table with @<caption>@, @<thead>@ and @<tfoot>@ included.
 |=. This is a table caption
 |^.
 |_. Planet |_. Population |_. Government |
-|~.
-|\3. This is the tfoot |
 |-.
 | Diso | 4.1 B | Democracy |
 | Lave | 2.5 B | Dictatorship |
 | Leesti | 5.0 B | Corporate State |
 | Reorte | 3.1 B | Dictatorship |
 | Zaonce | 5.3 B | Corporate State |
+|~.
+|\3. This is the tfoot |
 
 h2. Forms
 
 notextile. <form action="#" method="post" enctype="multipart/form-data" onsubmit="return false">
     <p>
-        <input id="test_checkbox_1" name="test_checkbox_1" type="checkbox">
+        <input type="checkbox" id="test_checkbox_1" name="test_checkbox_1" checked>
         <label for="test_checkbox_1">Test checkbox 1</label>
-        &nbsp;
-        &nbsp;
-        <input id="test_checkbox_2" name="test_checkbox_2" type="checkbox">
+        <input type="checkbox" id="test_checkbox_2" name="test_checkbox_2">
         <label for="test_checkbox_2">Test checkbox 2</label>
-        &nbsp;
-        &nbsp;
-        <input id="test_checkbox_3" name="test_checkbox_3" type="checkbox">
-        <label for="test_checkbox_3">Test checkbox 3</label>
+        <input type="checkbox" id="test_checkbox_3" name="test_checkbox_3" disabled>
+        <label for="test_checkbox_3">Test checkbox 3 (disabled)</label>
+        <input type="checkbox" id="test_checkbox_4" name="test_checkbox_4" disabled checked>
+        <label for="test_checkbox_4">Test checkbox 4 (disabled checked)</label>
     </p>
     <p>
-        <input id="test_radio_1" name="test_radio_group" type="radio">
+        <input type="radio" id="test_radio_1" name="test_radio_group" checked>
         <label for="test_radio_1">Test radio 1</label>
-        &nbsp;
-        &nbsp;
-        <input id="test_radio_2" name="test_radio_group" type="radio">
+        <input type="radio" id="test_radio_2" name="test_radio_group">
         <label for="test_radio_2">Test radio 2</label>
-        &nbsp;
-        &nbsp;
-        <input id="test_radio_3" name="test_radio_group" type="radio">
-        <label for="test_radio_3">Test radio 3</label>
+        <input type="radio" id="test_radio_3" name="test_radio_group" disabled>
+        <label for="test_radio_3">Test radio 3 (disabled)</label>
     </p>
     <p>
         <label for="select_dd">Inline form elements</label><br>
@@ -239,8 +228,12 @@ notextile. <form action="#" method="post" enctype="multipart/form-data" onsubmit
         <input type="button" value="Hello" disabled>
     </p>
     <p>
-        <label for="select_multi">Select multiple</label>
-        <br>
+        <label for="file_upload">File upload</label><br>
+        <input type="file" id="file_upload" name="file_upload" accept="image/*" multiple>
+        <input type="button" value="Upload">
+    </p>
+    <p>
+        <label for="select_multi">Select multiple</label><br>
         <select id="select_multi" name="select_multi" multiple="multiple" size="10">
             <optgroup label="Group 1">
                 <option value="1">Some text goes here</option>
@@ -260,81 +253,75 @@ notextile. <form action="#" method="post" enctype="multipart/form-data" onsubmit
         </select>
     </p>
     <p>
-        <label for="textarea">Textarea</label>
-        <br>
+        <label for="textarea">Textarea</label><br>
         <textarea id="textarea" name="textarea" rows="5" placeholder="This is an example of HTML5 placeholder text."></textarea>
     </p>
     <p>
-        <label for="url">URL</label>
-        <br>
-        <input id="url" name="url" type="url">
+        <label for="color">Colour</label><br>
+        <input type="color" id="color" name="color" value="#cc0000">
     </p>
     <p>
-        <label for="email">Email</label>
-        <br>
-        <input id="email" name="email" type="email" placeholder="name@example.com">
+        <label for="date">Date</label><br>
+        <input id="date" name="date" type="date">
     </p>
     <p>
-        <label for="text">Text</label>
-        <br>
-        <input id="text" name="text" type="text">
+        <label for="datetime-local">Datetime local</label><br>
+        <input id="datetime-local" name="datetime-local" type="datetime-local">
     </p>
     <p>
-        <label for="text-data">Text with data list</label>
-        <br>
-        <input id="text-data" name="text-data" type="text" list="text-data-list">
-        <datalist id="text-data-list">
-            <option value="Afghanistan">
-            <option value="Albania">
-            <option value="Algeria">
-            <option value="Andorra">
-            <option value="Angola">
-        </datalist>
+        <label for="email">Email</label><br>
+        <input id="email" name="email" type="email" placeholder="name@example.com">
     </p>
     <p>
-        <label for="datetime-local">Datetime local</label>
-        <br>
-        <input id="datetime-local" name="datetime-local" type="datetime-local">
+        <label for="month">Month</label><br>
+        <input id="month" name="month" type="month">
     </p>
     <p>
-        <label for="number">Number</label>
-        <br>
+        <label for="number">Number</label><br>
         <input id="number" name="number" type="number" min="0" max="999" step="1">
     </p>
     <p>
-        <label for="tel">Tel (phone)</label>
-        <br>
-        <input id="tel" name="tel" type="tel">
+        <label for="password">Password</label><br>
+        <input id="password" name="password" type="password">
     </p>
     <p>
-        <label for="datetime">Datetime</label>
-        <br>
-        <input id="datetime" name="datetime" type="datetime">
+        <label for="range">Range</label><br>
+        <input id="range" name="range" type="range">
     </p>
     <p>
-        <label for="date">Date</label>
-        <br>
-        <input id="date" name="date" type="date">
+        <label for="search">Search</label><br>
+        <input id="search" name="search" type="search">
     </p>
     <p>
-        <label for="month">Month</label>
-        <br>
-        <input id="month" name="month" type="month">
+        <label for="tel">Tel (phone)</label><br>
+        <input id="tel" name="tel" type="tel">
     </p>
     <p>
-        <label for="search">Search</label>
-        <br>
-        <input id="search" name="search" type="search">
+        <label for="text">Text <abbr class="required" title="Required">*</abbr></label><br>
+        <input id="text" name="text" type="text">
     </p>
     <p>
-        <label for="range">Range</label>
-        <br>
-        <input id="range" name="range" type="range">
+        <label for="text-data">Text with data list</label><br>
+        <input id="text-data" name="text-data" type="text" list="text-data-list">
+        <datalist id="text-data-list">
+            <option value="Afghanistan">
+            <option value="Albania">
+            <option value="Algeria">
+            <option value="Andorra">
+            <option value="Angola">
+        </datalist>
+    </p>
+    <p>
+        <label for="time">Time</label><br>
+        <input id="time" name="time" type="time">
+    </p>
+    <p>
+        <label for="url">URL</label><br>
+        <input id="url" name="url" type="url">
     </p>
     <p>
-        <label for="color">Colour</label>
-        <br>
-        <input id="color" name="color" type="color" value="#cc0000">
+        <label for="url">Week</label><br>
+        <input id="week" name="week" type="week">
     </p>
     <p>
         <input type="submit" value="Input - Submit">
diff --git a/src/scss/modules/_layout.scss b/src/scss/modules/_layout.scss
@@ -69,7 +69,7 @@ body {
 .site-header {
     padding: 1em 0;
 
-    h1 {
+    h2 {
         margin: 0;
     }
 
diff --git a/src/scss/modules/_typography.scss b/src/scss/modules/_typography.scss
@@ -50,10 +50,10 @@ h1 {
 }
 
 h2 {
-    margin: 0.8em 0; // 24px / 30px
-    font-size: 1.875rem; // 30px / 16px
+    margin: 0.75em 0; // 24px / 32px
+    font-size: 2rem; // 32px / 16px
     letter-spacing: -0.25px;
-    line-height: 1.2666667; // 38px / 30px
+    line-height: 1.25; // 40px / 32px
 }
 
 h3 {
diff --git a/src/templates/forms/article/default.txp b/src/templates/forms/article/default.txp
@@ -2,14 +2,9 @@
     <meta itemprop="mainEntityOfPage" content="<txp:permlink />">
 
     <txp:if_individual_article>
-        <h1 itemprop="headline">
-            <txp:title />
-        </h1>
+        <h1 itemprop="headline"><txp:title /></h1>
     <txp:else />
-        <h1 itemprop="headline">
-            <a href="<txp:permlink />" itemprop="url">
-                <txp:title />
-            </a>
+        <h1 itemprop="headline"><a href="<txp:permlink />" itemprop="url"><txp:title /></a>
         </h1>
     </txp:if_individual_article>
 
diff --git a/src/templates/forms/misc/body_header.txp b/src/templates/forms/misc/body_header.txp
diff --git a/src/templates/pages/archive.txp b/src/templates/pages/archive.txp
diff --git a/src/templates/pages/error_default.txp b/src/templates/pages/error_default.txp

Original file line number	Diff line number	Diff line change
`@@ -113,7 +113,7 @@ nav ol::after,`
`113`	`113`	`.site-header {`
`114`	`114`	`padding: 1em 0;`
`115`	`115`	`}`
`116`		`- .site-header h1 {`
	`116`	`+ .site-header h2 {`
`117`	`117`	`margin: 0;`
`118`	`118`	`}`
`119`	`119`	`.site-header h3 {`
`@@ -332,10 +332,10 @@ nav ol::after,`
`332`	`332`	`line-height: 1.1842105;`
`333`	`333`	`}`
`334`	`334`	`h2 {`
`335`		`- margin: 0.8em 0;`
`336`		`- font-size: 1.875rem;`
	`335`	`+ margin: 0.75em 0;`
	`336`	`+ font-size: 2rem;`
`337`	`337`	`letter-spacing: -0.25px;`
`338`		`- line-height: 1.2666667;`
	`338`	`+ line-height: 1.25;`
`339`	`339`	`}`
`340`	`340`	`h3 {`
`341`	`341`	`margin: 1em 0;`
Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,7 @@ body {`
`69`	`69`	`.site-header {`
`70`	`70`	`padding: 1em 0;`
`71`	`71`
`72`		`- h1 {`
	`72`	`+ h2 {`
`73`	`73`	`margin: 0;`
`74`	`74`	`}`
`75`	`75`
Original file line number	Diff line number	Diff line change
`@@ -50,10 +50,10 @@ h1 {`
`50`	`50`	`}`
`51`	`51`
`52`	`52`	`h2 {`
`53`		`- margin: 0.8em 0; // 24px / 30px`
`54`		`- font-size: 1.875rem; // 30px / 16px`
	`53`	`+ margin: 0.75em 0; // 24px / 32px`
	`54`	`+ font-size: 2rem; // 32px / 16px`
`55`	`55`	`letter-spacing: -0.25px;`
`56`		`- line-height: 1.2666667; // 38px / 30px`
	`56`	`+ line-height: 1.25; // 40px / 32px`
`57`	`57`	`}`
`58`	`58`
`59`	`59`	`h3 {`