Full changes

1. Removed line-height for header, appeared redundant across screen-sizes. 2. Converted header font-size to rem (.625)_ 3. Changed header right-padding to rem (.25) and overall padding (.125 rem) 4. Converted general classes -- .default to .comment -- to rem values. 5. Converted attributes to rem values. 6. Converted mobile classes and attributes to rem values.
philocalyst · May 8, 2024 · bdcadbe · bdcadbe
1 parent 03207a0
commit bdcadbe
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 25 deletions.
diff --git a/index.htm b/index.htm
@@ -14,23 +14,23 @@
         <tbody>
           <tr>
             <td bgcolor="#ff6600">
-              <table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:2px">
+              <table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:.125rem">
                 <tbody>
                   <tr>
-                    <td style="width:18px;padding-right:4px">
+                    <td style="width:18px;padding-right:.25rem">
                       <a href="https://news.ycombinator.com/">
                         <img src="y18.svg" width="18" height="18" style="border:1px white solid; display:block">
                       </a>
                     </td>
-                    <td style="line-height:12pt; height:10px;">
+                    <td style="height:.625rem;">
                       <span class="pagetop">
                         <b class="hnname">
                           <a href="https://news.ycombinator.com/news">Hacker News</a>
                         </b>
                         <a href="https://news.ycombinator.com/newest">new</a> | <a href="https://news.ycombinator.com/front">past</a> | <a href="https://news.ycombinator.com/newcomments">comments</a> | <a href="https://news.ycombinator.com/ask">ask</a> | <a href="https://news.ycombinator.com/show">show</a> | <a href="https://news.ycombinator.com/jobs">jobs</a> | <a href="https://news.ycombinator.com/submit" rel="nofollow">submit</a>
                       </span>
                     </td>
-                    <td style="text-align:right;padding-right:4px;">
+                    <td style="text-align:right;padding-right:.25rem;">
                       <span class="pagetop">
                         <a href="https://news.ycombinator.com/login?goto=news">login</a>
                       </span>
@@ -1045,7 +1045,7 @@
           </tr>
           <tr>
             <td>
-              <img src="Hacker%20News_files/s.gif" height="10" width="0">
+              <img src="s.gif" height="10" width="0">
               <table width="100%" cellspacing="0" cellpadding="1">
                 <tbody>
                   <tr>
@@ -1068,7 +1068,7 @@
         </tbody>
       </table>
     </center>
-    <script type="text/javascript" src="Hacker%20News_files/hn.js"></script>
+    <script type="text/javascript" src="hn.js"></script>
     <readwise-tooltip-container></readwise-tooltip-container>
   </body>
 </html>
diff --git a/news.css b/news.css
@@ -1,24 +1,24 @@
-body  { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color:#828282; }
-td    { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color:#828282; }
+body  { font-family:Verdana, Geneva, sans-serif; font-size: .8333333333rem; color:#828282; }
+td    { font-family:Verdana, Geneva, sans-serif; font-size: .8333333333rem; color:#828282; }
 
-.admin td   { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color:#000000; }
-.subtext td { font-family:Verdana, Geneva, sans-serif; font-size:  7pt; color:#828282; }
+.admin td   { font-family:Verdana, Geneva, sans-serif; font-size: .7083333333rem; color:#000000; }
+.subtext td { font-family:Verdana, Geneva, sans-serif; font-size:  .5833333333rem; color:#828282; }
 
-input    { font-family:monospace; font-size:10pt; }
-input[type='submit'] { font-family:Verdana, Geneva, sans-serif; }
-textarea { font-family:monospace; font-size:10pt; resize:both; }
+input    { font-family:monospace; font-size: .8333333333rem; }
+input[type=\"submit\"] { font-family:Verdana, Geneva, sans-serif; }
+textarea { font-family:monospace; font-size: .8333333333rem; resize:both; }
 
 a:link    { color:#000000; text-decoration:none; }
 a:visited { color:#828282; text-decoration:none; }
 
-.default { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color:#828282; }
-.admin   { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color:#000000; }
-.title   { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color:#828282; overflow:hidden; }
-.subtext { font-family:Verdana, Geneva, sans-serif; font-size:  7pt; color:#828282; }
-.yclinks { font-family:Verdana, Geneva, sans-serif; font-size:  8pt; color:#828282; }
-.pagetop { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color:#222222; line-height:12px; }
-.comhead { font-family:Verdana, Geneva, sans-serif; font-size:  8pt; color:#828282; }
-.comment { font-family:Verdana, Geneva, sans-serif; font-size:  9pt; }
+.default { font-family:Verdana, Geneva, sans-serif; font-size: .8333333333rem; color:#828282; }
+.admin   { font-family:Verdana, Geneva, sans-serif; font-size: .7083333333rem; color:#000000; }
+.title   { font-family:Verdana, Geneva, sans-serif; font-size: .8333333333rem; color:#828282; overflow:hidden; }
+.subtext { font-family:Verdana, Geneva, sans-serif; font-size: .5833333333rem; color:#828282; }
+.yclinks { font-family:Verdana, Geneva, sans-serif; font-size: .6666666667rem; color:#828282; }
+.pagetop { font-family:Verdana, Geneva, sans-serif; font-size: .8333333333rem; color:#222222; line-height:12px; }
+.comhead { font-family:Verdana, Geneva, sans-serif; font-size: .6666666667rem; color:#828282; }
+.comment { font-family:Verdana, Geneva, sans-serif; font-size: .75rem; }
 .hnname  { margin-left:1px; margin-right: 5px; }
 
 #hnmain { min-width: 796px; }
@@ -53,7 +53,7 @@ a:visited { color:#828282; text-decoration:none; }
 .hnmore a:link, a:visited { color:#828282; }
 .hnmore { text-decoration:underline; }
 
-.default p { margin-top: 8px; margin-bottom: 0px; }
+.default p { margin-top: .5rem; margin-bottom: 0rem; }
 
 .pagebreak {page-break-before:always}
 
@@ -102,8 +102,8 @@ and (max-width : 750px) {
   body { padding: 0; margin: 0; width: 100%; }
   td { height: inherit !important; }
   .title, .comment { font-size: inherit;  }
-  span.pagetop { display: block; margin: 3px 5px; font-size: 12px; line-height: normal }
-  span.pagetop b { display: block; font-size: 15px; }
+  span.pagetop { display: block; margin: .1875rem .3125rem; font-size: .75rem; line-height: normal }
+  span.pagetop b { display: block; font-size: .9375rem; }
   table.comment-tree .comment a { display: inline-block; max-width: 200px; overflow: hidden; white-space: nowrap;
     text-overflow: ellipsis; vertical-align:top; }
   img[src='s.gif'][width='40'] { width: 12px; }
@@ -127,7 +127,7 @@ and (max-width : 750px) {
   img[src='s.gif'][width='760'] { width: 228px; }
   img[src='s.gif'][width='800'] { width: 240px; }
   img[src='s.gif'][width='840'] { width: 252px; }
-  .title { font-size: 11pt; line-height: 14pt;  }
+  .title { font-size: .6875rem; line-height: 14pt;  }
   .subtext { font-size: 9pt; }
   .votearrow { transform: scale(1.3,1.3); margin-right: 6px; }
   .votearrow.rotate180 {