fixed size

2026-03-03 17:36:06 -06:00
parent 1de700902a
commit c69aa009b7
8 changed files with 63 additions and 40 deletions
@@ -63,10 +63,15 @@
  background-repeat: no-repeat;
 }

-@media(max-height:550px) {
+@media(max-height:800px) {
  .addTime {
    margin-top: 0.5rem;
    padding: 0.5rem;
+    max-width: 320px;
+  }
+
+  .firstPartInformationTime {
+    max-width: 320px;
  }
 }

@@ -3,7 +3,7 @@
  top: 0;
  background-color: #ffffff;
  width: 100%;
-  max-width: 700px;
+  max-width: 600px;
  border-radius: 4px;
  padding: 1rem;
  margin-top: 1rem;
@@ -28,8 +28,13 @@
  height: fit-content;
 }

-@media(max-height:550px) {
+@media(max-height:800px) {
+  .firstPartInformation {
+    max-width: 320px;
+  }
+
  .inscripcion {
+    max-width: 400px;
    padding: 0.5rem;
    margin-top: 0.5rem;
  }
@@ -15,7 +15,7 @@ export default function Information(props: InformationProps) {
        {entries.map(([key, value]) => (
          <li key={key} className="informationItem">
            <span className="informationKey">{key}</span>
-            <span className="informationValue">{value}</span>
+            <span className={`informationValue ${key}`}>{value}</span>
          </li>
        ))}
      </ul>
@@ -44,9 +44,11 @@
  margin-right: 6px;
  vertical-align: middle;
 }
-@media(max-height:550px) {
+
+@media(max-height:800px) {
  .tableContainer {
    margin-top: 1.5rem;
+    max-width: 320px;
  }
 }

@@ -172,6 +172,7 @@ tbody {
    position: absolute;
    top: 76px;
    left: 0;
+    top: 100%;
    width: 100%;
    background-color: #fff;
    flex-direction: column;
@@ -362,8 +362,13 @@ a {
 }

 .informationValue {
-  color: #555;
-  font-size: 1.25rem;
+  color: #000000;
+  font-size: 1.5rem;
+}
+
+.Credito {
+  font-weight: bold;
+  font-size: 2rem;
 }

 .title {
@@ -399,7 +404,7 @@ form {
 .toggleSection {
  width: 100%;
  max-width: fit-content;
-  min-width: 750px;
+  min-width: 600px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@@ -496,7 +501,7 @@ thead tr {
  background-color: #2563eb;
  position: relative;
  z-index: 1;
-}  
+}

 tbody tr {
  transition: transform 0.3s ease, opacity 0.3s ease;
@@ -677,7 +682,7 @@ table td:last-child {
  }

  .informationValue {
-    font-size: 1rem;
+    font-size: 1.01rem;
  }

  .informationItem {
@@ -687,7 +692,6 @@ table td:last-child {
  input,
  select {
    padding: 0.5rem;
-    font-size: 1.3rem;
    height: 3rem;
  }

@@ -727,6 +731,27 @@ table td:last-child {
    height: 30px;
  }

+  .information {
+    max-width: 320px;
+
+  }
+
+  .containerForm {
+    max-width: 320px;
+  }
+
+  .Credito {
+    font-size: 1.5rem;
+  }
+
+  table th,
+  table td {
+    padding: 0.65rem 1rem;
+  }
+
+  .toggleSection {
+    min-width: 570px;
+  }
 }

@media (max-height: 960px) {
@@ -9,11 +9,14 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"], weight: ["400", "700"] });

 export const metadata: Metadata = {
-  title: "Servicio AT",
+  title: {
+    default: "Servicio AT",
+    template: "Servicio AT | %s",
+  },
  description: "Servicio de administracion de la FES Acatlan",
  authors: [{ name: "FES Acatlán" }],
  creator: "Lino,Carlos,Axel",
-    icons: {
+  icons: {
    icon: "/icon.svg",
  },
 };
@@ -26,9 +29,9 @@ export default function RootLayout({
  return (
    <html lang="es">
      <body className={inter.className} suppressHydrationWarning>
-          <Header />
-          <main>{children}</main>
-          <Footer />
+        <Header />
+        <main>{children}</main>
+        <Footer />
      </body>
    </html>
  );