feat(public): add padding dynamic in main frame

2025-09-17 13:20:03 +07:00
parent e5fe4d1c96
commit be218e2087
3 changed files with 71 additions and 4 deletions
@@ -45,6 +45,8 @@ const contentContent = computed(() => {
  margin-right: auto;
  border-radius: 0.375rem;
  padding-bottom: 5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }

 .cf-container > *,
@@ -82,15 +84,54 @@ const contentContent = computed(() => {
  border-radius: 0.375rem;
  border: 1px solid hsl(var(--border));
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  max-width: 100%;
+  padding: 1rem;
 }

 .cf-frame {
  margin-left: auto;
  margin-right: auto;
-  padding: 0.75rem;
+  padding: 1rem;
  background-color: hsl(var(--background));
  border-radius: 0.375rem;
  border: 1px solid hsl(var(--border));
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  max-width: 100%;
+}
+
+@media (min-width: 640px) {
+  .cf-container,
+  .cf-container-lg,
+  .cf-container-md,
+  .cf-container-sm {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .cf-frame {
+    padding: 2rem;
+  }
+
+  .cf-frame-width {
+    padding: 2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .cf-container,
+  .cf-container-lg,
+  .cf-container-md,
+  .cf-container-sm {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .cf-frame {
+    padding: 3rem;
+  }
+
+  .cf-frame-width {
+    padding: 3rem;
+  }
 }
 </style>