more UI

index.html

@@ -31,7 +31,7 @@
     }
 
     .explanation-text {
-      font-size: 1.1rem;
+      font-size: 1.3rem;
       line-height: 1.6;
       margin-bottom: calc(var(--spacing-unit) * 4);
     }
@@ -89,14 +89,14 @@
       grid-template-columns: 1fr 1fr;
     }
     .hero h1 { 
-      font-size: clamp(2.5rem, 5vw, 4rem); 
+      font-size: clamp(3rem, 6vw, 4.5rem); 
       font-weight: 700; 
       margin-bottom: calc(var(--spacing-unit) * 3); 
       letter-spacing: -0.03em;
       line-height: 1.1;
     }
     .hero p { 
-      font-size: 1.25rem; 
+      font-size: 1.4rem; 
       max-width: 45ch;
       font-weight: 400;
       line-height: 1.5;
@@ -128,7 +128,7 @@
     }
     
     .section-title {
-      font-size: 2.5rem;
+      font-size: 3rem;
       font-weight: 700;
       margin-bottom: calc(var(--spacing-unit) * 6);
       text-align: center;
@@ -160,7 +160,7 @@
     
     .card h2 { 
       margin-bottom: calc(var(--spacing-unit) * 3); 
-      font-size: 1.5rem; 
+      font-size: 1.8rem; 
       font-weight: 700;
       letter-spacing: -0.01em;
       height: 30px;
@@ -186,7 +186,7 @@
       border: 2px solid var(--black); 
       border-radius: 0; 
       font-family: 'Telegraf', sans-serif; 
-      font-size: 1rem; 
+      font-size: 1.2rem; 
       resize: vertical; 
       background: var(--white);
       min-height: 60px;
@@ -207,7 +207,7 @@
       font-weight: 600;
       padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
       min-width: 160px;
-      font-size: 1rem;
+      font-size: 1.2rem;
       font-family: 'Telegraf', sans-serif;
       border-radius: 0;
       cursor: pointer;
@@ -230,7 +230,7 @@
     }
 
     .status { 
-      font-size: 1rem; 
+      font-size: 1.2rem; 
       color: var(--black);
       flex: 1;
       font-weight: 500;
@@ -254,7 +254,7 @@
     }
 
     footer { 
-      font-size: 1rem; 
+      font-size: 1.2rem; 
       text-align: center; 
       padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 2); 
       color: var(--black);
@@ -274,7 +274,7 @@
       display: flex;
       align-items: center;
       font-weight: 600;
-      font-size: 1.1rem;
+      font-size: 1.3rem;
     }
 
     #decResult:not(:empty) {
@@ -330,8 +330,20 @@
         primaryTextColor: '#000', 
         lineColor: '#000', 
         tertiaryColor: '#fff',
-        fontFamily: 'Telegraf'
-      } 
+        fontFamily: 'Telegraf',
+        fontSize: '1.4rem'
+      },
+      flowchart: {
+        nodeSpacing: 50,
+        rankSpacing: 50,
+        curve: 'basis',
+        fontSize: '1.4rem'
+      },
+      sequence: {
+        actorFontSize: '1.4rem',
+        noteFontSize: '1.4rem',
+        messageFontSize: '1.4rem'
+      }
     });
   </script>
 </head>