src/thsf/static/css/custom.css

@@ -1,7 +1,4 @@
-.logo {
+@media screen and (min-width: 45em) {
-  width: inherit;
-}
-
   .header {
     display: flex;
     flex-direction: row;
@@ -12,48 +9,95 @@
     font-weight: bold;
     padding: 0;
   }
-
+  .logo {
+    width: inherit;
+  }
   .header > span {
     margin: 0;
   }
-
   .subheader {
     margin: -1em 0 0 0;
     font-size: 3.47em;
   }
-
   .place {
     margin: 0;
     font-size: 2.145em;
   }
-
   .important {
     font-family: pfdintextcomppromedium;
   }
-
   .left {
     float: left;
     margin-right: 0.5em;
   }
-
   .right {
     float: right;
     margin-left: 0.5em;
   }
-
   .logo_partner {
     max-width: 250px;
     max-height: 250px;
     margin: 1em;
   }
-
   .button {
     font-size: 2.5em;
     transition-property: color;
     transition-duration: 1s;
   }
-
   .button:hover {
     color: var(--main-color);
     cursor: pointer;
   }
+}
+
+@media screen and (max-width: 44em) {
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 0;
+    text-align: center;
+    font-size: 6.75em;
+    font-weight: bold;
+    padding: 0;
+  }
+  .header > span {
+    margin: 0;
+  }
+  .logo {
+    width: inherit;
+  }
+  .subheader {
+    margin: -1em 0 0 0;
+    font-size: 2.30em;
+  }
+  .place {
+    margin: 0;
+    font-size: 1.8em;
+  }
+  .important {
+    font-family: pfdintextcomppromedium;
+  }
+  .left {
+    float: left;
+    margin-right: 0.25em;
+  }
+  .right {
+    float: right;
+    margin-left: 0.25em;
+  }
+  .logo_partner {
+    max-width: 125px;
+    max-height: 125px;
+    margin: 0.25em;
+  }
+  .button {
+    font-size: 1.5em;
+    transition-property: color;
+    transition-duration: 1s;
+  }
+  .button:hover {
+    color: var(--main-color);
+    cursor: pointer;
+  }
+}

src/thsf/static/css/wrappers.css

@@ -1,3 +1,4 @@
+@media screen and (min-width: 45em) {
   .page_wrapper {
     display: flex;
     flex-direction: column;
@@ -7,7 +8,6 @@
     text-align: center;
     padding-bottom: 5em;
   }
-
   .center_wrapper,
   .header_wrapper {
     display: flex;
@@ -16,12 +16,10 @@
     align-items: center;
     text-align: center;
   }
-
   .logo_wrapper {
     margin-top: 1em;
     width: 40em;
   }
-
   .navbar_wrapper {
     position: fixed;
     bottom: 0;
@@ -34,7 +32,6 @@
     background-color: var(--main-bg-color);
     width: 100vw;
   }
-
   .content {
     font-size: 2em;
     font-family: pfdintextcompprothin;
@@ -43,7 +40,6 @@
     text-align:justify;
     text-justify: inter-word;
   }
-
   .partners {
     display: flex;
     flex-direction: column;
@@ -51,7 +47,6 @@
     align-items: center;
     text-align: center;
   }
-
   .subpartners {
     display: flex;
     flex-direction: row;
@@ -59,3 +54,61 @@
     align-items: center;
     text-align: center;
   }
+}
+@media screen and (max-width: 44em) {
+  .page_wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    text-align: center;
+    padding-bottom: 2em;
+  }
+  .center_wrapper,
+  .header_wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+  .logo_wrapper {
+    margin-top: 0.5em;
+    width: 35em;
+  }
+  .navbar_wrapper {
+    position: fixed;
+    bottom: 0;
+    padding: 0.5em 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 1em;
+    background-color: var(--main-bg-color);
+    width: 100vw;
+  }
+  .content {
+    font-size: 1em;
+    font-family: pfdintextcompprothin;
+    color: var(--main-color);
+    width: 20em;
+    text-align:justify;
+    text-justify: inter-word;
+  }
+  .partners {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+  .subpartners {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+}