increase font in mobile and fix desktop css

ibokuri · Mar 4, 2024 · 2ca9c5d · 2ca9c5d
1 parent e385d40
commit 2ca9c5d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 25 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,13 +1,25 @@
+@media only screen and (min-device-width: 1200px) {
+  body {
+    font-family: monospace;
+    max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
+    padding: 20px;
+    background-color: #ffffff;
+    color: #000;
+    white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
+    word-wrap: break-word; /* Ensures long words do not overflow */
+  }
+}
+
 /*============================================================================== 
 iPhone 13 Pro || 390 x 844 || Default, Portrait and Landscape
 ================================================================================ */
 @media only screen and (min-width: 390px) and (max-width: 844px) {
     body { 
       font-family: monospace;
-      font-size: 5.5pt;
+      font-size: 6pt;
       max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
       margin: 0 auto;
-      padding: 20px;
+      padding: 7px;
       background-color: #ffffff;
       color: #000;
       white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
@@ -18,10 +30,10 @@ iPhone 13 Pro || 390 x 844 || Default, Portrait and Landscape
 @media only screen and (min-width: 390px) and (max-width: 844px) and (orientation: portrait) { 
     body { 
       font-family: monospace;
-      font-size: 5.5pt;
+      font-size: 6pt;
       max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
       margin: 0 auto;
-      padding: 20px;
+      padding: 7px;
       background-color: #ffffff;
       color: #000;
       white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
@@ -32,10 +44,10 @@ iPhone 13 Pro || 390 x 844 || Default, Portrait and Landscape
 @media only screen and (min-width: 390px) and (max-width: 844px) and (orientation: landscape) { 
     body { 
       font-family: monospace;
-      font-size: 5.5pt;
+      font-size: 6pt;
       max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
       margin: 0 auto;
-      padding: 20px;
+      padding: 7px;
       background-color: #ffffff;
       color: #000;
       white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
@@ -49,10 +61,10 @@ iPhone 15 Pro || 393 x 852 || Default, Portrait and Landscape
 @media only screen and (min-width: 393px) and (max-width: 852px) {
     body { 
       font-family: monospace;
-      font-size: 5.5pt;
+      font-size: 6pt;
       max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
       margin: 0 auto;
-      padding: 20px;
+      padding: 7px;
       background-color: #ffffff;
       color: #000;
       white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
@@ -63,10 +75,10 @@ iPhone 15 Pro || 393 x 852 || Default, Portrait and Landscape
 @media only screen and (min-width: 393px) and (max-width: 852px) and (orientation: portrait) { 
     body { 
       font-family: monospace;
-      font-size: 5.5pt;
+      font-size: 6pt;
       max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
       margin: 0 auto;
-      padding: 20px;
+      padding: 7px;
       background-color: #ffffff;
       color: #000;
       white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
@@ -77,25 +89,13 @@ iPhone 15 Pro || 393 x 852 || Default, Portrait and Landscape
 @media only screen and (min-width: 393px) and (max-width: 852px) and (orientation: landscape) { 
     body { 
       font-family: monospace;
-      font-size: 5.5pt;
+      font-size: 6pt;
       max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
       margin: 0 auto;
-      padding: 20px;
+      padding: 7px;
       background-color: #ffffff;
       color: #000;
       white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
       word-wrap: break-word; /* Ensures long words do not overflow */
   }
 }
-
-@media screen and (max-width: 1200px) {
-  body {
-    font-family: monospace;
-    max-width: 640px; /* Approximation for 80 characters per line, assuming 8px per character */
-    padding: 20px;
-    background-color: #ffffff;
-    color: #000;
-    white-space: pre-wrap; /* Allows text to wrap and preserve formatting */
-    word-wrap: break-word; /* Ensures long words do not overflow */
-  }
-}
diff --git a/html/index.html b/html/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+    <!--<link rel="icon" type="image/svg+xml" href="/favicon.svg">-->
     <link rel="stylesheet" href="style.css">
     <title>Danh Phan</title>
 </head>
@@ -12,7 +13,11 @@
 <b>NAME</b>
        Danh Phan
 
-<b>ARCHIVES</b>
+<b>SYNOPSIS</b>
+       Email&nbsp;&nbsp;&nbsp;<a href="mailto:[email protected]">[email protected]</a>
+       GitHub&nbsp;&nbsp;<a href="https://github.com/ibokuri">ibokuri</a>
+
+<b>ARCHIVE</b>
        2024‐03‐02&nbsp;&nbsp;<a href="./test.html">Test Blog Post</a>
 
                                                               <a href="https://danh.computer">DANH.COMPUTER(7)</a>