frontend: make guide component responsive

Author: thisconnect

frontends/web/src/components/guide/entry.tsx

@@ -47,10 +47,12 @@ export const Entry = (props: TProps) => {
   return (
     <div className={style.entry}>
       <div className={style.entryTitle} onClick={toggle}>
-        <div className={style.entryToggle}>{shown ? '–' : '+'}</div>
-        <div className={style.entryTitleText}>
-          <h2>{entry.title}</h2>
+        <div className={style.entryToggle}>
+          {shown ? '–' : '+'}
         </div>
+        <h3 className={style.entryTitleText}>
+          {entry.title}
+        </h3>
       </div>
       <div className={[style.entryContent, shown ? style.expanded : ''].join(' ')}>
         {shown ? (

frontends/web/src/components/guide/guide.module.css

@@ -12,15 +12,16 @@
 
 .close {
     display: flex;
-    height: 24px;
+    height: 2.4rem;
+    margin-left: var(--space-eight);
+    min-height: 0;
     padding: 4px;
-    width: 24px;
+    width: 2.4rem;
 }
 
 .close img {
-    height: 20px;
-    margin-left: calc(var(--space-quarter) / 2);
-    width: 20px;
+    height: min(2rem, 36px);
+    width: min(2rem, 36px);
 }
 
 .wrapper {
@@ -61,11 +62,6 @@
     margin: 0;
 }
 
-.header a {
-    cursor: pointer;
-    font-size: 2rem;
-}
-
 .content {
     display: flex;
     flex-direction: column;
@@ -74,17 +70,6 @@
     padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
-.content h1 {
-    font-size: 1.5em;
-    margin-top: 0px;
-}
-
-.content h2 {
-    font-size: var(--size-subheader);
-    font-weight: 400;
-    margin: 0;
-}
-
 .guide p {
     font-size: var(--size-default);
     margin: 0.4em 0;
@@ -94,44 +79,47 @@
     margin-right: 0;
 }
 
-.entry {
-    margin-top: var(--space-default);
-}
-
 .appendix {
     padding-top: var(--space-half);
     margin-top: auto;
 }
 
+.entry {
+    margin-top: var(--space-default);
+}
+
 .entryTitle {
     align-items: flex-start;
     cursor: default;
     display: flex;
     flex-direction: row;
+    font-size: var(--size-subheader);
     justify-content: flex-start;
 }
 
-.entryTitle .entryToggle {
+.entryToggle {
     align-items: center;
     display: flex;
-    font-size: var(--size-subheader);
-    flex-direction: row;
     font-weight: bold;
+    flex-direction: row;
     justify-content: flex-start;
-    line-height: 1.2em;
-    width: 16px;
+    line-height: 1.2;
+    width: 1.4rem;
 }
 
-.entryTitle .entryTitleText {
+.entryTitleText {
     flex: 1;
+    font-size: var(--size-subheader);
+    font-weight: 400;
+    margin: 0;
 }
 
 .entryContent {
     align-items: flex-start;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    padding-left: 16px;
+    padding-left: 1.4rem;
 }
 
 .expanded {