From 88aa19b06f165bf52db29bdecd2c74ee14a31052 Mon Sep 17 00:00:00 2001
From: weboko <oleksandr@status.im>
Date: Fri, 9 Dec 2022 01:06:01 +0100
Subject: [PATCH] extract css into separate file

Signed-off-by: weboko <anon@mail.com>
---
 light-chat/index.html | 140 +-----------------------------------------
 light-chat/style.css  | 137 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 138 insertions(+), 139 deletions(-)
 create mode 100644 light-chat/style.css

diff --git a/light-chat/index.html b/light-chat/index.html
index 3d14e2b..90b8037 100644
--- a/light-chat/index.html
+++ b/light-chat/index.html
@@ -4,145 +4,7 @@
         <meta charset='UTF-8'/>
         <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
         <title>JS-Waku light chat</title>
-        <style>
-            * {
-                margin: 0;
-                padding: 0;
-                word-wrap: break-word;
-                box-sizing: border-box;
-            }
-
-            html, body {
-                width: 100%;
-                height: 100%;
-                max-width: 100%;
-                max-height: 100%;
-            }
-
-            html {
-                font-size: 16px;
-                overflow: hidden;
-            }
-
-            body {
-                display: flex;
-                align-items: center;
-                padding: 10px;
-                justify-content: center;
-            }
-
-            details {
-                margin-bottom: 15px;
-            }
-
-            details p {
-                margin-bottom: 10px;
-            }
-
-            summary {
-                cursor: pointer;
-                max-width: 100%;
-                margin-bottom: 5px;
-            }
-
-            span {
-                font-weight: 300;
-            }
-
-            input, textarea {
-                line-height: 1rem;
-                padding: 5px;
-            }
-
-            textarea {
-                min-height: 3rem;
-            }
-
-            h3 {
-                margin-bottom: 5px;
-            }
-
-            .content {
-                width: 800px;
-                min-width: 300px;
-                max-width: 800px;
-                height: 100%;
-                display: flex;
-                flex-direction: column;
-                align-content: space-between;
-            }
-
-            #messages {
-                overflow-y: scroll;
-                overflow-x: hidden;
-            }
-
-            .message + .message {
-                margin-top: 15px;
-            }
-
-            .message :first-child {
-                font-weight: bold;
-            }
-
-            .message p + p {
-                margin-top: 5px;
-            }
-
-            .message span {
-                font-size: 0.8rem;
-            }
-
-            .inputArea {
-                display: flex;
-                gap: 10px;
-                flex-direction: column;
-                margin-top: 20px;
-            }
-
-            .controls {
-                margin-top: 10px;
-                display: flex;
-                gap: 10px;
-            }
-
-            .controls button {
-                flex-grow: 1;
-                cursor: pointer;
-                padding: 10px;
-            }
-
-            #send {
-                background-color: #32d1a0;
-                border: none;
-                color: white;
-            }
-            #send:hover {
-                background-color: #3abd96;
-            }
-            #send:active {
-                background-color: #3ba183;
-            }
-
-            #exit {
-                color: white;
-                border: none;
-                background-color: #ff3a31;
-            }
-            #exit:hover {
-                background-color: #e4423a;
-            }
-            #exit:active {
-                background-color: #c84740;
-            }
-
-            .footer {
-                display: flex;
-                width: 100%;
-                flex-direction: column;
-                align-self: flex-end;
-            }
-        </style>
+        <link rel="stylesheet" href="./style.css">
     </head>
 
     <body>
diff --git a/light-chat/style.css b/light-chat/style.css
new file mode 100644
index 0000000..eb3e853
--- /dev/null
+++ b/light-chat/style.css
@@ -0,0 +1,137 @@
+* {
+    margin: 0;
+    padding: 0;
+    word-wrap: break-word;
+    box-sizing: border-box;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+html {
+    font-size: 16px;
+    overflow: hidden;
+}
+
+body {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    justify-content: center;
+}
+
+details {
+    margin-bottom: 15px;
+}
+
+details p {
+    margin-bottom: 10px;
+}
+
+summary {
+    cursor: pointer;
+    max-width: 100%;
+    margin-bottom: 5px;
+}
+
+span {
+    font-weight: 300;
+}
+
+input, textarea {
+    line-height: 1rem;
+    padding: 5px;
+}
+
+textarea {
+    min-height: 3rem;
+}
+
+h3 {
+    margin-bottom: 5px;
+}
+
+.content {
+    width: 800px;
+    min-width: 300px;
+    max-width: 800px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-content: space-between;
+}
+
+#messages {
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+
+.message + .message {
+    margin-top: 15px;
+}
+
+.message :first-child {
+    font-weight: bold;
+}
+
+.message p + p {
+    margin-top: 5px;
+}
+
+.message span {
+    font-size: 0.8rem;
+}
+
+.inputArea {
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+    margin-top: 20px;
+}
+
+.controls {
+    margin-top: 10px;
+    display: flex;
+    gap: 10px;
+}
+
+.controls button {
+    flex-grow: 1;
+    cursor: pointer;
+    padding: 10px;
+}
+
+#send {
+    background-color: #32d1a0;
+    border: none;
+    color: white;
+}
+#send:hover {
+    background-color: #3abd96;
+}
+#send:active {
+    background-color: #3ba183;
+}
+
+#exit {
+    color: white;
+    border: none;
+    background-color: #ff3a31;
+}
+#exit:hover {
+    background-color: #e4423a;
+}
+#exit:active {
+    background-color: #c84740;
+}
+
+.footer {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-self: flex-end;
+}