style: narrower questions on mobile (#54)

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true
+}

public/globals.css

@@ -10,7 +10,7 @@
     --link-color: #92adff;
 }
 
-[data-theme="light"] {
+[data-theme='light'] {
     --main-bg: rgb(219, 219, 219);
     --text-color: #000;
     --muted-text-color: #636363;
@@ -26,7 +26,6 @@ a {
     color: var(--link-color);
 }
 
-
 html {
     margin: 0;
     padding: 0;
@@ -45,9 +44,9 @@ html {
 .icon img {
     background: white;
     border-radius: 50%;
-    padding: .25rem;
+    padding: 0.25rem;
 }
 
 details {
     cursor: pointer;
-}
+}

public/question.css

@@ -19,9 +19,17 @@ body {
     box-sizing: border-box;
 }
 
-.parent {
-    max-width: 90%;
-    width: fit-content;
+@media (orientation: landscape) {
+    .parent {
+        max-width: 50%;
+        width: fit-content;
+    }
+}
+@media (orientation: portrait) {
+    .parent {
+        max-width: 90%;
+        width: fit-content;
+    }
 }
 
 .header {
@@ -31,7 +39,7 @@ body {
 
 .card-tags {
     display: flex;
-    gap: .5rem;
+    gap: 0.5rem;
 }
 
 .card-tags .tag {
@@ -94,7 +102,7 @@ img {
     margin-bottom: 1rem;
     background-color: var(--meta-bg);
     color: var(--text-color);
-    
+
     display: flex;
     justify-content: space-between;
     align-items: center;