feat: add media query for small screens (#18)

* feat: make elements' width responsive to the viewport * refactor: move inline style to main.css file * refactor: change unit to rem, em * feat: add media query for small screens * fix: make dialog responsive * update: add contributor (박이준)
hjh010501 · Aug 20, 2023 · 3a6d31e · 3a6d31e
1 parent 07e61ad
commit 3a6d31e
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -57,12 +57,12 @@
                     </tr>
             </table>
             <div id="result" class="result">공백 제외 0자, 공백 포함 0자, 0바이트</div>
-            <span style="font-size: 12pt; color:#aaa; font-family: 'Noto Sans KR'; letter-spacing: -1.25px; float: right; text-align: right;">영어, 숫자, 특수문자, 띄어쓰기 1바이트 / 엔터키 2바이트 / 한글 3바이트<br>해당 사이트 제작자가 20년도 졸업생인데, 생활기록부 입력 제한이 바뀐 것으로 알고 있어 지웠습니다.<br>PR 로 내용을 보내주시면 반영하겠습니다!<br>반영해주신 분들: <a href="https://github.com/Dongyeongkim" target="_blank">김동영</a>, <a href="https://github.com/rycont" target="_blank">정한(RyCont)</a>, <a href="https://github.com/cokia" target="_blank">한우영</a>, <a href="https://github.com/hajin-chung" target="_blank">정하진</a>, <a href="https://github.com/Otwooo" target="_blank">배송현</a>, <a href="https://github.com/mcgun1234" target="_blank">최수현</a>, <a href="https://github.com/b0u0b-0w0" target="_blank">김서진</a><br><br><a href="https://hjh010501.github.io/neis-counter/"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fhjh010501.github.io%2Fneis-counter%2F&count_bg=%23000000&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=%EB%B0%A9%EB%AC%B8%EC%9E%90+%EC%88%98&edge_flat=true"/></a></span>
+            <span class="info">영어, 숫자, 특수문자, 띄어쓰기 1바이트 / 엔터키 2바이트 / 한글 3바이트<br>해당 사이트 제작자가 20년도 졸업생인데,<br class="small-screen"> 생활기록부 입력 제한이 바뀐 것으로 알고 있어 지웠습니다.<br>PR 로 내용을 보내주시면 반영하겠습니다!<br>반영해주신 분들: <a href="https://github.com/Dongyeongkim" target="_blank">김동영</a>, <a href="https://github.com/rycont" target="_blank">정한(RyCont)</a>, <a href="https://github.com/cokia" target="_blank">한우영</a>, <a href="https://github.com/hajin-chung" target="_blank">정하진</a>, <a href="https://github.com/Otwooo" target="_blank">배송현</a>, <a href="https://github.com/mcgun1234" target="_blank">최수현</a>, <a href="https://github.com/b0u0b-0w0" target="_blank">김서진</a>, <a href="https://github.com/jjoonleo" target="_blank">박이준</a><br><br><a href="https://hjh010501.github.io/neis-counter/"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fhjh010501.github.io%2Fneis-counter%2F&count_bg=%23000000&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=%EB%B0%A9%EB%AC%B8%EC%9E%90+%EC%88%98&edge_flat=true"/></a></span>
         </div>
         <div class="footbar">
         <div class="footbar_content">
-            <span style="text-align: left;">👨‍💻 by <a href="https://github.com/hjh010501">kidevelop</a></span>
-            <span style="float: right;"><a class="github-button" href="https://github.com/hjh010501/neis-counter" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star hjh010501/neis-counter on GitHub">Star</a></span>
+            <span>👨‍💻 by <a href="https://github.com/hjh010501">kidevelop</a></span>
+            <span><a class="github-button" href="https://github.com/hjh010501/neis-counter" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star hjh010501/neis-counter on GitHub">Star</a></span>
         </div>
         </div>
         <script type="module" src="./spellchecker/index.js"></script>

diff --git a/main.css b/main.css
@@ -24,6 +24,10 @@
       format("opentype");
 }
 
+html {
+  font-size: 62.5%;
+}
+
 a {
   text-decoration: none;
   font-family: "Noto Sans KR Bold";
@@ -41,7 +45,8 @@ body {
 }
 
 .center {
-  width: 800px;
+  width: 80vw;
+  max-width: 800px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -66,7 +71,7 @@ header {
 
 .title {
   font-family: "Noto Sans KR Bold";
-  font-size: 20pt;
+  font-size: 2.6rem;
   letter-spacing: -1.25px;
   color: #1d1a1a;
 }
@@ -75,35 +80,51 @@ header {
   width: 30px;
   height: 4px;
   background: #1d1d1d;
-  margin-top: 20px;
-  margin-bottom: 30px;
+  margin-top: 2rem;
+  margin-bottom: 3rem;
 }
 
 .counter {
   font-family: "Noto Sans KR";
-  font-size: 11pt;
+  font-size: 1.5rem;
   border: 0;
   resize: none;
   border: 1px solid #ddd;
-  width: 800px;
+  width: 100%;
   height: 400px;
   outline: 0;
-  line-height: 25px;
+  line-height: 1.7em;
   box-sizing: border-box;
 }
 
 .result {
   font-family: "Noto Sans KR Bold";
-  font-size: 20pt;
+  font-size: 2.6rem;
   letter-spacing: -1.25px;
   color: #1d1a1a;
   text-align: right;
-  margin-top: 20px;
+  margin-top: 2rem;
+}
+
+.info {
+  font-size: 1.6rem;
+  color: #aaa;
+  font-family: 'Noto Sans KR';
+  letter-spacing: -1.25px;
+  float: right;
+  text-align: right;
+}
+
+.footbar_content{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  font-size: 1.6rem;
 }
 
 button {
   border: 1px solid rgba(0, 0, 0, 0.2);
-  padding: 4px 12px;
+  padding: 0.4rem 1.2rem;
   border-radius: 20px;
   font-family: "Noto Sans KR";
   background-color: #1d1d1d;
@@ -120,27 +141,97 @@ table {
   font-family: "Noto Sans KR";
   letter-spacing: -1.25px;
   border: 1px solid #fff;
-  font-size: 14pt;
-  margin-top: 20px;
+  font-size: 1.8rem;
+  margin-top: 2rem;
 }
 
 th {
   background: #1d1d1d;
   font-weight: 400;
   color: #fff;
-  padding: 10px;
+  padding: 0.5em;
 }
+
 td {
   background-color: #ededed;
   color: #1d1d1d;
-  padding: 10px;
+  padding: 0.5em;
 }
 
 .footbar {
-  margin-top: 45px;
+  width: 80vw;
+  max-width: 800px;
+  margin-top: 4.5rem;
 }
 
 .footbar_content {
-  width: 800px;
+  width: 100%;
   margin: 0 auto;
 }
+
+
+@media (max-width:768px) {
+  .center {
+    width: 85vw;
+  }
+
+  .title {
+    font-size: 2.3rem;
+  }
+
+  table {
+    font-size: 1.3rem;
+  }
+
+  .result{
+    font-size: 2.3rem
+  }
+
+  .info{
+    font-size: 1.3rem;
+  }
+}
+
+@media (max-width:480px) {
+  header {
+    flex-direction: column;
+    align-items: start;
+    margin-bottom: 2em;
+  }
+
+  .title {
+    font-size: 2rem;
+    margin-bottom: 0.5em;
+  }
+
+  .title_underbar_wrapper {
+    display: none;
+  }
+
+  tr {
+    display: block;
+    float: left;
+  }
+
+  tbody>tr:first-child {
+    width: 40%;
+  }
+
+  tbody>tr:last-child {
+    width: 60%;
+  }
+
+  th,
+  td {
+    display: block;
+  }
+
+  .result{
+    font-size: 1.7rem;
+    text-wrap:balance;
+  }
+
+  .info{
+    font-size: 1rem;
+  }
+}
diff --git a/spellchecker/agreement.js b/spellchecker/agreement.js
@@ -18,6 +18,17 @@ class Agreement extends LitElement {
       h1 {
         font-size: 16px;
       }
+      @media (max-width:768px) {
+        dialog{
+          width: 400px;
+        }
+      }
+      @media (max-width:480px) {
+        dialog{
+          width: 90vw;
+          margin: auto;
+        }
+      }
     `,
   ];