claude rework

vue/src/assets/base.css

@@ -66,7 +66,7 @@ body {
   line-height: 1.6;
   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
     Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
+  font-size: clamp(14px, 2.5vw, 16px);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

vue/src/assets/main.css

@@ -3,7 +3,7 @@
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 1rem;
 
   font-weight: normal;
 }
@@ -14,6 +14,29 @@ a,
   color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
 }
+.feed-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.feed-actions p {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding: 0.5rem 1rem;
+  margin: 0;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.feed-actions p:hover {
+  border-color: var(--color-border-hover);
+}
+
 .message {
   background-color: #3498db;
   color: white;
@@ -23,6 +46,8 @@ a,
   top: 10px;
   left: 50%;
   transform: translateX(-50%);
+  max-width: min(90vw, 28rem);
+  overflow-wrap: break-word;
   z-index: 9999;
 }
 @media (hover: hover) {
@@ -31,18 +56,52 @@ a,
   }
 }
 
+.feed-source {
+  margin: 0;
+  padding: 1em 1em 0;
+  font-size: clamp(0.75rem, 2vw, 0.85rem);
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: hsla(160, 100%, 37%, 1);
+}
+
 .feed-title {
   cursor: pointer;
   font-family: 'Courier New';
-  font-size: 22px;
+  font-size: clamp(1.1rem, 4vw, 1.4rem);
+  font-weight: bold;
+  color: hsla(200, 90%, 45%, 1);
   border-bottom: 1px solid #ccc;
-  padding: 1em;
+  padding: 0.25em 1em 1em;
+  min-height: 44px;
+  transition: color 0.2s;
+}
+
+.feed-title:hover {
+  color: hsla(200, 90%, 35%, 1);
+}
+
+@media (prefers-color-scheme: dark) {
+  .feed-title {
+    color: hsla(200, 90%, 65%, 1);
+  }
+
+  .feed-title:hover {
+    color: hsla(200, 90%, 75%, 1);
+  }
 }
 
 .feed-content {
   font-family: Georgia, 'Times New Roman', Times, serif;
-  font-size: 20px;
+  font-size: clamp(1rem, 3.5vw, 1.25rem);
   padding: 1em;
+  overflow-wrap: break-word;
+}
+
+.feed-content img {
+  max-width: 100%;
+  height: auto;
 }
 
 .feed-content p {
@@ -51,10 +110,16 @@ a,
 
 .feed-content h3 {
   padding: 1em;
-  font-size: 21px;
+  font-size: clamp(1rem, 3vw, 1.3rem);
   font-weight: bold;
 }
 
 h3 {
-  font-size: 14px;
+  font-size: clamp(0.85rem, 2.5vw, 1rem);
+}
+
+@media (min-width: 768px) {
+  #app {
+    padding: 2rem;
+  }
 }

vue/src/assets/modal.css

@@ -1,6 +1,11 @@
 
 input {
-  margin: 15px;
+  display: block;
+  width: 100%;
+  min-height: 44px;
+  margin: 0.5rem 0 1rem;
+  padding: 0.5rem;
+  font-size: 1rem;
 }
 
 .modal-mask {
@@ -16,7 +21,9 @@ input {
 }
 
 .modal-container {
-  width: 300px;
+  width: clamp(280px, 90vw, 420px);
+  max-height: 90vh;
+  overflow-y: auto;
   margin: auto;
   padding: 20px 30px;
   background-color: #fff;
@@ -34,8 +41,19 @@ input {
   margin: 20px 0;
 }
 
-.modal-default-button {
-  float: right;
+.modal-footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.modal-footer button {
+  flex: 1 1 auto;
+  min-height: 44px;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  cursor: pointer;
 }
 
 /*