From: Ardis Lu <ardisglu@gmail.com>
Date: Sat, 8 Apr 2023 03:09:03 +0000 (-0700)
Subject: Add basic styling
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=168a56b9dce633df3ea100f3584259864fd6faff;p=css-for-line-clamp-ellipsis

Add basic styling
---

diff --git a/index.html b/index.html
index ef497c8..0d58439 100644
--- a/index.html
+++ b/index.html
@@ -9,18 +9,33 @@
   <style>
     body {
       font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+      background: hsl(216deg 50% 97%);
+      color: hsl(216deg 50% 5%);
     }
 
     header {
       display: flex;
       justify-content: center;
+      margin-inline: 8px;
     }
 
     main {
-      inline-size: min(720px, 100% - 16px);
+      inline-size: min(1080px, 100% - 16px);
       margin-inline: auto;
     }
 
+    p {
+      inline-size: min(80ch, 100% - 16px);
+    }
+
+    pre {
+      background: hsl(216deg 50% 90%);
+      padding: 8px;
+      border-radius: 4px;
+      border: 1px solid hsl(216deg 50% 75%);
+      overflow: auto;
+    }
+
     .line-clamp {
       display: -webkit-box;
       -webkit-box-orient: vertical;
@@ -42,6 +57,12 @@
     .height-resizable {
       resize: vertical;
     }
+
+    .width-resizable,
+    .height-resizable {
+      border: 1px dashed hsl(216deg 50% 75%);
+      border-radius: 4px;
+    }
   </style>
 </head>