Fix ugly bolder font-weight on mobile

ixth · ixth · commit 44417cd0fb27 · 2022-11-14T23:18:41.000+01:00
diff --git a/vcard/css/card.css b/vcard/css/card.css
@@ -1,7 +1,8 @@
 .card {
+    box-sizing: border-box;
+
     width: 7in;
     height: 4in;
-    box-sizing: border-box;
     padding: .52in .44in .21in .22in;
 
     background: var(--card-background);
@@ -20,16 +21,11 @@
         text-align: center;
     }
 
-    .card__company-title {
-        font-weight: bold;
-    }
-
     .card__company-subtitle {
         font-size: .65em;
     }
 
     .card__surname {
-        font-weight: bold;
         text-transform: uppercase;
     }
 
@@ -47,12 +43,10 @@
     .card__title {
         font-size: .9em;
         text-transform: capitalize;
-        font-weight: bold;
     }
 
     .card__address {
         font-size: .7em;
-        font-weight: bold;
         text-align: center;
     }
 
@@ -124,3 +118,21 @@
 .card_typography .card__title {
     letter-spacing: .055em;
 }
+
+@media only screen and (min-width: 761px) {
+    .card__title,
+    .card__address,
+    .card__surname,
+    .card__company-title {
+        font-weight: bold;
+    }
+}
+
+@media only screen and (max-width: 760px) {
+    .card {
+        width: 3.5in;
+        height: 2in;
+        padding: .26in .22in .105in .11in;
+        font-size: 10pt;
+    }
+}
diff --git a/vcard/mikhail-menshikov.html b/vcard/mikhail-menshikov.html
@@ -2,6 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>Mikhail Menshikov</title>
     <link rel="preload" type="font/woff2" as="font" href="css/fonts/Sillian%20Rail%20Regular.woff2"/>
     <link rel="stylesheet" type="text/css" href="css/index.css"/>
diff --git a/vcard/patrick-bateman.html b/vcard/patrick-bateman.html
@@ -2,6 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>Patrick Bateman</title>
     <link rel="preload" type="font/woff2" as="font" href="css/fonts/Sillian%20Rail%20Regular.woff2"/>
     <link rel="stylesheet" type="text/css" href="css/index.css"/>
