Larger base font size

Author: pilafmon

src/css/layouts/color-blocks.css

@@ -133,7 +133,7 @@ body >footer a:hover {
    outline: none;
    }
 /* Mobile devices */
-@media (max-width: 667px) {  /* selects iPhone 6/6s/7/8/SE(2020) landscape and anything narrower */
+@media (max-width: 667px) {  /* selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower */
    body >header { text-align: center; }
    body >header >aside { float: none; margin: 0px; }
    body >header.forkable >aside { text-align: left; }

src/css/layouts/letterbox.css

@@ -81,7 +81,7 @@ main >cite {
    opacity: 0.6;
    }
 /* Mobile devices */
-@media (max-width: 667px) {  /* selects iPhone 6/6s/7/8/SE(2020) landscape and anything narrower */
+@media (max-width: 667px) {  /* selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower */
    main >section+section { padding: 10px; }
    }
 /******************************************************************************/

src/css/layouts/modern.css

@@ -170,7 +170,7 @@ body >footer >div >address >p >span >a {
 body >footer >small {
    color: silver;
    }
-@media (max-width: 667px) {  /* selects iPhone 6/6s/7/8/SE(2020) landscape and anything narrower */
+@media (max-width: 667px) {  /* selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower */
    body >header { padding-top: 40px; }
    body >header >h2 { font-size: 1.2rem; }
    body >header >nav >a { margin: 0px 0px 5px 0px; }

src/css/layouts/modern.html

@@ -33,6 +33,7 @@
       ul >li:nth-child(7) { font-weight: 700; }
       ul >li:nth-child(8) { font-weight: 800; }
       ul >li:nth-child(9) { font-weight: 900; }
+      body >footer >div >figure >img { background-color: silver; }
    </style>
    <script defer src=https://cdn.jsdelivr.net/npm/jquery@3.6/dist/jquery.min.js></script>
    <script defer src=https://cdn.jsdelivr.net/npm/dna-engine@2.3/dist/dna-engine.min.js></script>
@@ -99,10 +100,10 @@ <h3>Font weights:</h3>
 <footer>
    <div>
       <figure>
-         <img src=https://avatarfiles.alphacoders.com/153/153677.jpg alt=avatar>
+         <img src=https://robohash.org/3 alt=avatar>
       </figure>
       <address>
-         <b>The Purple Hair Club</b>
+         <b>The Purple Robot Club</b>
          <p>
             <span>https://example.com</span>
             <span>contact@example.com</span>

src/css/layouts/neon.css

@@ -34,7 +34,7 @@ body.neon-image-6 { background-image: url(neon/supernova-nasagov.jpg); }
 body.neon-image-7 { background-image: url(neon/supernova-shock-lblgov.jpg); }
 body.neon-image-8 { background-image: url(neon/wind-tunnel-nasagov.jpg); }
 body {
-   max-width: 750px;
+   max-width: 850px;
    color: lime;
    background: black 20px 20px no-repeat fixed;
    background-size: 200px;
@@ -164,7 +164,7 @@ body >footer p {
    }
 
 /* Mobile devices */
-@media (max-width: 667px) {  /* selects iPhone 6/6s/7/8/SE(2020) landscape and anything narrower */
+@media (max-width: 667px) {  /* selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower */
    main >section >h2 + aside,
    main >section >h3 + aside {
       margin-top: 10px;

src/css/layouts/vertical-bars.css

@@ -65,7 +65,7 @@ body >footer #social-buttons {
    }
 
 /* Mobile devices */
-@media (max-width: 667px) {  /* selects iPhone 6/6s/7/8/SE(2020) landscape and anything narrower */
+@media (max-width: 667px) {  /* selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower */
    body { border: none; padding: 5px 15px; }
    body >header h1 { font-size: 1.7rem; }
    }

src/css/reset.less

@@ -10,14 +10,14 @@
 // Core
 * { box-sizing: border-box; }
 html { display: flex; flex-direction: column; height: 100%; min-height: 100%; }
+html { font-size: 115%; font-family: system-ui, geneva, tahoma, sans-serif; }  //override font-size percent to resize base font
 body { width: 100%; flex: 1; }
-body { font-size: 100%; font-family: system-ui, geneva, tahoma, sans-serif; }  /* override font-size percent to resize base font */
 body, h1, h2, h3, h4, h5, h6, p, figure, nav ul, nav ul li { padding: 0px; margin: 0px; }
 h1, h2, h3, h4, h5, h6 { letter-spacing: 0.04em; margin-bottom: 0.2em; }
 section, header, figure { margin-bottom: 20px; }
 p, ul, ol { margin-bottom: 0.9em; }
 ul, ol { margin-top: 2px; }
-ul li, ol li { font-size: 0.9rem; padding-left: 1.2em; text-indent: -1.3em; }
+ul li, ol li { font-size: 0.9em; padding-left: 1.2em; text-indent: -1.3em; }
 nav ul { list-style-type: none; }
 nav ul li { text-indent: 0px; }
 pre, code { font-family: menlo, consolas, monospace; font-style: normal; font-weight: bold; line-height: 1.3em; margin: 0px; }
@@ -31,7 +31,7 @@ hr { border: none; border-top: 1px solid silver; }
 sup, sub { font-size: 0.7rem; }
 iframe { border: none; }
 
-/* Basic styling */
+// Basic styling
 body { max-width: 900px; color: dimgray; padding: 40px 15px; margin: 0px auto; }
 body >header { text-align: center; }
 main { min-height: 300px; }
@@ -43,14 +43,14 @@ main section aside.simple { background-color: transparent; border: none; padding
 main section aside h2 { font-size: 1.1rem; }
 main section aside img { width: 100%; max-width: 100%; }
 main section aside p:last-child { margin-bottom: 0px; }
-section:after { content: " "; display: table; clear: both; }  /* a section with an aside will self clear */
+section:after { content: " "; display: table; clear: both; }  //a section with an aside will self clear
 body >footer { display: flex; justify-content: space-between; align-items: center; clear: both; text-align: center; font-size: 0.9rem; color: darkgray; padding: 30px 0px; }
-body >footer >div { min-width: 20%; }  /* centers middle child */
+body >footer >div { min-width: 20%; }  //centers middle child
 body >footer >div:first-child:last-child { width: 100%; }
 body >footer >div:first-child:not(:last-child) { text-align: left; }
 body >footer >div:last-child:not(:first-child) { text-align: right; }
 body >footer a img[alt=logo] { height: 50px; }
-h1 { font-size: 2.6rem; font-family: Chango, system-ui, sans-serif; }
+h1 { font-size: 2.5rem; font-family: Chango, system-ui, sans-serif; }
 h2 { font-size: 1.5rem; }
 h3 { font-size: 1.2rem; }
 h4 { font-size: 0.9rem; font-weight: normal; text-transform: uppercase; letter-spacing: 0.14em; }
@@ -60,7 +60,7 @@ quoteblock:after  { content: close-quote; }
 i.font-icon { font-size: 1.5em; }
 [title] { cursor: help; }
 
-/* Links */
+// Links
 a         { color: dimgray; text-decoration: none; border-bottom: 1px dotted; outline: 2px solid transparent; transition: all 400ms; }
 a:visited { color: darkgray; }
 a:hover   { color: white; }
@@ -82,12 +82,12 @@ label { display: block; }
 label >span:first-child { display: block; }
 input, textarea, select, fieldset >aside { width: 100%; max-width: 25em; font-size: 1.1em; }
 input, textarea { background-color: mintcream; border: 1px solid silver; border-radius: 5px; padding: 0.3em; }
-input:not([type=checkbox]):not([type=radio]), textarea { -webkit-appearance: none; }  /* ios inner shadow */
+input:not([type=checkbox]):not([type=radio]), textarea { -webkit-appearance: none; }  //ios inner shadow
 select { font-size: 1.1em; }
 input[type=number] { font-family: menlo, consolas, monospace; text-align: right; }
 input[type=checkbox], input[type=radio] { width: auto; margin: 0px 0.5em 0.2em 1.5em; }
 label:last-of-type input { margin-bottom: 1em; }
-textarea { height: 4.1em; }  /* 3 lines */
+textarea { height: 4.1em; }  //3 lines
 input, select, textarea { margin: 0px 0px 1em 0px; }
 input[type=range] { height: 0.7em; padding: 0px; margin: 0.5em 0px 1em 0px; cursor: grab; }
 input[type=range]:active { cursor: grabbing; }
@@ -352,7 +352,7 @@ body >header >#fork-me-container {  //dynamically added wrapper element
       pointer-events: auto;
       }
    }
-@media (max-width: 667px) {  //selects iPhone 6/6s/7/8/SE(2020) landscape and anything narrower
+@media (max-width: 667px) {  //selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower
    body >header >#fork-me-container >a#fork-me { display: none }
    body >header >#fork-me-container >i.font-icon { display: block }
    }
@@ -413,11 +413,11 @@ img.popup-image + .popup-image-layer img { display: block; width: auto; height:
 .info-rollover-msg { display: none; }
 
 // Mobile devices
-@media (max-width: 667px) {  //selects iPhone 6/6s/7/8/SE(2020) landscape and anything narrower
+@media (max-width: 667px) {  //selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower
    h1 { font-size: 2.0rem; }
    h1+h2 { font-size: 1.3rem; }
    main section aside,
-   main section aside.left { float: none; max-width: none; text-align: center; margin: 0px 0px 20px 0px; }
+   main section aside.left { clear: both; float: none; max-width: none; text-align: center; margin: 0px 0px 20px 0px; }
    main section aside img { width: auto; max-height: 200px }
    body { padding: 20px 10px; }
    body >footer { flex-direction: column; padding: 20px 2px; }