toaster

static/css/base.css

@@ -393,6 +393,10 @@ section.rowsect>div {
     font-weight: 900;
 }
 
+.title-font {
+    font-family: var(--title-font);
+}
+
 @media screen and (max-width: 1000px) {
     body {
         background-color: var(--background-color);

static/css/toaster.css

@@ -0,0 +1,54 @@
+ul#toaster-specs {
+    padding: 0;
+    margin: 5px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+ul#toaster-specs li {
+    display: flex;
+    justify-content: space-between;
+    gap: 2rem;
+    height: 35px;
+    align-items: center;
+}
+
+.color {
+    border-radius: 10px;
+    border: 2px solid var(--secondary-background-color);
+    padding: 1px 5px;
+    box-sizing: border-box;
+    height: min-content;
+}
+
+#toaster-img {
+    max-width: 100%;
+    object-fit: contain;
+    border-radius: 10px;
+    border: 2px solid var(--secondary-background-color);
+}
+
+.flex-col {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+}
+
+.no-sect {
+    backdrop-filter: none;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.fill-height {
+    height: 100%;
+}