refactor css

cantarell/cantarell.css

@@ -1,15 +0,0 @@
-/* cantarell-regular */
-@font-face {
-	font-family: Cantarell;
-	font-style: normal;
-	font-weight: 400;
-	src: local("Cantarell Regular"), local("Cantarell-Regular"), url(cantarell-regular.woff2) format("woff2");
-}
-/* cantarell-bold */
-@font-face {
-	font-family: Cantarell;
-	font-style: normal;
-	font-weight: 700;
-	src: local("Cantarell Bold"), local("Cantarell-Bold"), url(cantarell-bold.woff2) format("woff2");
-}
-

inter/inter.css

@@ -0,0 +1,127 @@
+/* inter-black */
+@font-face {
+	font-family: Inter;
+	font-style: normal;
+	font-weight: 900;
+	src: local("Inter Black"), local("Inter-Black"), url(inter-black.woff2) format("woff2");
+}
+/* inter-black-italic */
+@font-face {
+	font-family: Inter;
+	font-style: italic;
+	font-weight: 900;
+	src: local("Inter Black Italic"), local("Inter-BlackItalic"), url(inter-black-italic.woff2) format("woff2");
+}
+/* inter-bold */
+@font-face {
+	font-family: Inter;
+	font-style: normal;
+	font-weight: 700;
+	src: local("Inter Bold"), local("Inter-Bold"), url(inter-bold.woff2) format("woff2");
+}
+/* inter-bold-italic */
+@font-face {
+	font-family: Inter;
+	font-style: italic;
+	font-weight: 700;
+	src: local("Inter Bold Italic"), local("Inter-BoldItalic"), url(inter-bold-italic.woff2) format("woff2");
+}
+/* inter-extrabold */
+@font-face {
+	font-family: Inter;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Inter ExtraBold"), local("Inter-ExtraBold"), url(inter-extrabold.woff2) format("woff2");
+}
+/* inter-extrabold-italic */
+@font-face {
+	font-family: Inter;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Inter ExtraBold Italic"), local("Inter-ExtraBoldItalic"), url(inter-extrabold-italic.woff2) format("woff2");
+}
+/* inter-extralight */
+@font-face {
+	font-family: Inter;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Inter ExtraLight"), local("Inter-ExtraLight"), url(inter-extralight.woff2) format("woff2");
+}
+/* inter-extralight-italic */
+@font-face {
+	font-family: Inter;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Inter ExtraLight Italic"), local("Inter-ExtraLightItalic"), url(inter-extralight-italic.woff2) format("woff2");
+}
+/* inter-italic */
+@font-face {
+	font-family: Inter;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Inter Italic"), local("Inter-Italic"), url(inter-italic.woff2) format("woff2");
+}
+/* inter-light */
+@font-face {
+	font-family: Inter;
+	font-style: normal;
+	font-weight: 300;
+	src: local("Inter Light"), local("Inter-Light"), url(inter-light.woff2) format("woff2");
+}
+/* inter-light-italic */
+@font-face {
+	font-family: Inter;
+	font-style: italic;
+	font-weight: 300;
+	src: local("Inter Light Italic"), local("Inter-LightItalic"), url(inter-light-italic.woff2) format("woff2");
+}
+/* inter-medium */
+@font-face {
+	font-family: Inter;
+	font-style: normal;
+	font-weight: 500;
+	src: local("Inter Medium"), local("Inter-Medium"), url(inter-medium.woff2) format("woff2");
+}
+/* inter-medium-italic */
+@font-face {
+	font-family: Inter;
+	font-style: italic;
+	font-weight: 500;
+	src: local("Inter Medium Italic"), local("Inter-MediumItalic"), url(inter-medium-italic.woff2) format("woff2");
+}
+/* inter-regular */
+@font-face {
+	font-family: Inter;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Inter Regular"), local("Inter-Regular"), url(inter-regular.woff2) format("woff2");
+}
+/* inter-semibold */
+@font-face {
+	font-family: Inter;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Inter SemiBold"), local("Inter-SemiBold"), url(inter-semibold.woff2) format("woff2");
+}
+/* inter-semibold-italic */
+@font-face {
+	font-family: Inter;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Inter SemiBold Italic"), local("Inter-SemiBoldItalic"), url(inter-semibold-italic.woff2) format("woff2");
+}
+/* inter-thin */
+@font-face {
+	font-family: Inter;
+	font-style: normal;
+	font-weight: 100;
+	src: local("Inter Thin"), local("Inter-Thin"), url(inter-thin.woff2) format("woff2");
+}
+/* inter-thin-italic */
+@font-face {
+	font-family: Inter;
+	font-style: italic;
+	font-weight: 100;
+	src: local("Inter Thin Italic"), local("Inter-ThinItalic"), url(inter-thin-italic.woff2) format("woff2");
+}
+

style.css

@@ -1,8 +1,8 @@
-@import url("cantarell/cantarell.css");
+@import url("inter/inter.css");
 
 html *
 {
-   font-family: Cantarell, sans-serif;
+   font-family: Inter, Cantarell, sans-serif;
 }
 
 .header {
@@ -23,7 +23,6 @@ html *
   justify-content: center;
   align-items: center;
   margin-top: 2cm;
-  
 }
 
 .middle {
@@ -46,6 +45,104 @@ html *
   opacity: 0.5;
 }
 
+.logo {
+  text-align: center;
+}
+
+.grid-container {
+  display: grid;
+  justify-content: center;
+  grid-template-areas: 
+    'left middle right' 
+}
+
+.headerbutton {
+  border: none;
+  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  display: flex;
+  font-size: 14px;
+  font-weight: bold;
+  margin: 4px 2px;
+  padding-left: 0.3cm;
+  padding-right: 0.3cm;
+  cursor: pointer;
+  min-height: 35px;
+  transition-duration: 0.2s;
+}
+
+.list {
+  border-radius: 12px 12px 12px 12px;
+  box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
+  margin-bottom: 50px;
+}
+
+.listaction {
+  display: grid;
+  grid-template-columns: 1fr 1cm;
+  text-decoration: none;
+  align-items: center;
+  min-height: 1.5cm;
+}
+
+.listinfo {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  text-decoration: none;
+  align-items: center;
+  min-height: 1.5cm;
+}
+
+.separator {
+  max-width: 15cm;
+  height: 1px;
+}
+
+.topbar {
+  position: fixed;
+  width: 100%;
+  height: 1.2cm;
+  top: 0px;
+  left: 0px;
+  z-index: 10;
+}
+
+.backbutton {
+  position: absolute;
+  border-radius:10px;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  display: grid;
+  font-size: 14px;
+  cursor: pointer;
+  margin: 0.1cm;
+  transition-duration: 0.2s;
+  width: 1cm;
+  height: 1cm;
+}
+
+.gtk-button-pill {
+  position: relative;
+  width: auto;
+  height: 44px;
+  border-radius: 22px;
+  background-color: rgba(53, 132, 228, 1);
+  color: white;
+  text-decoration: none;
+  font-weight: bold;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0px;
+  padding: 0px 32px;
+  margin-bottom: 1cm;
+  flex-wrap: nowrap;
+}
+
 @media (prefers-color-scheme: light) {
 
   body {
@@ -54,56 +151,15 @@ html *
 
   .logo {
     color: #000;
-    text-align: center;
   }
 
   .grid-container {
-    display: grid;
-    justify-content: center;
     color: #000000;
-    grid-template-areas: 
-        'left middle right' 
-  } 
-
-  .button {
-    background-color: #EBEBEB;
-    color: black;
-    border: none;
-    border-radius: 8px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    display: flex;
-    font-size: 16px;
-    font-weight: bold;
-    margin: 4px 2px;
-    cursor: pointer;
-    width: 100px;
-    height: 35px;
-    transition-duration: 0.2s;
-  }
-
-  .button:hover {
-    background-color: #E0E0E0;
   } 
 
   .headerbutton {
     background-color: #EBEBEB;
-    color: black;
+    color: #000;
-    border: none;
-    border-radius: 8px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    display: flex;
-    font-size: 14px;
-    font-weight: bold;
-    margin: 4px 2px;
-    padding-left: 0.3cm;
-    padding-right: 0.3cm;
-    cursor: pointer;
-    min-height: 35px;
-    transition-duration: 0.2s;
   }
 
   .headerbutton:hover {
@@ -111,162 +167,53 @@ html *
   }
 
   .list {
-    border-radius: 12px 12px 12px 12px;
     background-color: #ffffff;
-    box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
-    margin-bottom: 50px;
   }
 
   .separator {
-    max-width: 15cm;
-    height: 1px;
     background-color: rgba(237, 237, 237, 1);
   }
 
   .listaction {
-    display: grid;
-    grid-template-columns: 1fr 1cm;
-    text-decoration: none;
     color: black;
-    align-items: center;
-    min-height: 1.5cm;
   }
 
   .listinfo {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    text-decoration: none;
     color: black;
-    align-items: center;
-    min-height: 1.5cm;
   }
 
   .topbar {
-    position: fixed;
-    width: 100%;
-    height: 1.2cm;
-    top: 0px;
-    left: 0px;
     background-color: rgba(255, 255, 255, 1);
     border: 1px solid rgba(224, 224, 224, 1);
     color: #000000;
-    z-index: 10;
   }
 
-
   .backbutton {
-    position: absolute;
     color: black;
-    border-radius:10px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    display: grid;
-    font-size: 14px;
-    cursor: pointer;
-    margin: 0.1cm;
-    transition-duration: 0.2s;
-    width: 1cm;
-    height: 1cm;
   }
 
   .backbutton:hover {
     background-color: #DEDEDE;
   }
-
-  .banner {
-    position: fixed;
-    background-color: #BFD7F3;
-    color: black;
-    width: 100%;
-    height: 1.2cm;
-    top: 0px;
-    left: 0px;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    font-weight: bold;
-    text-align: center;
-  }
-
-  .gtk-button-pill {
-    position: relative;
-    width: auto;
-    height: 44px;
-    border-radius: 22px;
-    background-color: rgba(53, 132, 228, 1);
-    color: white;
-    text-decoration: none;
-    font-weight: bold;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 0px;
-    padding: 0px 32px;
-    margin-bottom: 1cm;
-    flex-wrap: nowrap;
-  }
 }
 
 @media (prefers-color-scheme: dark) {
 
-  .logo {
-    color: #fff;
-    text-align: center;
-  }
-
   body {
     background-color: #222222;
   }
 
+  .logo {
+    color: #fff;
+  }
+
   .grid-container {
-    display: grid;
-    justify-content: center;
     color: #ffffff;
-    grid-template-areas: 
-      'left middle right' 
-  }
-
-  .button {
-    background-color: #4a4a4a;
-    color: #ffffff;
-    border: none;
-    border-radius: 8px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    display: flex;
-    font-size: 16px;
-    font-weight: bold;
-    margin: 4px 2px;
-    cursor: pointer;
-    width: 100px;
-    height: 35px;
-    transition-duration: 0.2s;
-  }
-
-  .button:hover {
-    background-color: #595959;
   }
 
   .headerbutton {
     background-color: #4a4a4a;
-    color: #ffffff;
+    color: #fff;
-    border: none;
-    border-radius: 8px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    display: flex;
-    font-size: 14px;
-    font-weight: bold;
-    margin: 4px 2px;
-    padding-left: 0.3cm;
-    padding-right: 0.3cm;
-    cursor: pointer;
-    min-height: 35px;
-    transition-duration: 0.2s;
   }
 
   .headerbutton:hover {
@@ -274,101 +221,32 @@ html *
   }
 
   .list {
-    border-radius: 12px 12px 12px 12px;
     background-color: #363636;
-    box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
-    margin-bottom: 50px;
   }
 
   .separator {
-    max-width: 15cm;
-    height: 1px;
     background-color: #232323;
   }
 
   .listaction {
-    display: grid;
-    grid-template-columns: 1fr 1cm;
-    text-decoration: none;
     color: #ffffff;
-    align-items: center;
-    min-height: 1.5cm;
   }
 
   .listinfo {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    text-decoration: none;
     color: #ffffff;
-    align-items: center;
-    min-height: 1.5cm;
   }
 
   .topbar {
-    position: fixed;
-    width: 100%;
-    height: 1.2cm;
-    top: 0px;
-    left: 0px;
     background-color: #303030;
     border: 1px solid #1f1f1f;
     color: #ffffff;
-    z-index: 10;
   }
 
-
-
   .backbutton {
-    position: absolute;
     color: #ffffff;
-    border-radius:10px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    display: grid;
-    font-size: 14px;
-    cursor: pointer;
-    margin: 0.1cm;
-    transition-duration: 0.2s;
-    width: 1cm;
-    height: 1cm;
   }
 
   .backbutton:hover {
     background-color: #3e3e3e;
   }
-
-  .banner {
-    position: fixed;
-    background-color: #29415E;
-    color: white;
-    width: 100%;
-    height: 1.2cm;
-    top: 0px;
-    left: 0px;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    font-weight: bold;
-    text-align: center;
-  }
-
-  .gtk-button-pill {
-    position: relative;
-    width: auto;
-    height: 44px;
-    border-radius: 22px;
-    background-color: rgba(53, 132, 228, 1);
-    color: white;
-    text-decoration: none;
-    font-weight: bold;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 0px;
-    padding: 0px 32px;
-    margin-bottom: 1cm;
-    flex-wrap: nowrap;
-  }
 }