2024-12-16

server/app/templates/style.css

@@ -1,66 +1,106 @@
 @import url('http://127.0.0.1:5000/fonts/dinpro/dinpro.css');
 @import url('http://127.0.0.1:5000/fonts/noto-emoji.css');
 @import url('http://127.0.0.1:5000/fonts/openmoji.css');
-@import url('http://127.0.0.1:5000/fonts/weather-icons/weather-icons.css');
-
-
-body {
-    height: 800px;
+@import url('http://10.0.1.128:56733/fonts/weather-icons/weather-icons.css');
+* {
+    box-sizing: border-box; /* Include padding and borders in size calculations */
+}
+html, body {
     width: 600px;
+    height: 800px;
+    margin: 0; /* Prevent any default margins */
+    padding: 0;
 }
 
 .dashboard {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
     flex-direction: column;
     font-family: sans-serif;
     text-align: left;
     font-size: 17px;
     height: 100%;
     width: 100%;
+    margin: 0 auto; /* Center horizontally */
 }
 
 .panel.top {
-    display:flex;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: row;
     flex-direction: row;
-    flex:0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+    flex: 0 1 auto;
 }
 
 .panel.top .splitpanel {
-    flex:1;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    text-align: center;
 }
 
 .splitpanel.big-text {
     font-size: 60px;
     font-weight: bold;
-    vertical-align:top; 
-    text-align:right;
+    vertical-align: top;
+    text-align: right;
 }
 
 .splitpanel .weather-icon {
-    font-size: 200px;
+    font-size: 180px;
+    display: block;
+    margin: auto;
 }
 
 .panel.bottom {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
     flex: 1;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-flex-direction: column;
+    flex-direction: column;
 }
 
 .panel.bottom.week .row {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
     flex: 1;
-    height:50%;
+    height: 50%;
 }
 
 .panel.bottom.week .row .day {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-orient: vertical; /* Old WebKit property for column layout */
+    -webkit-box-direction: normal; /* Old WebKit property for forward direction */
+    -webkit-flex-direction: column; /* Flexbox column direction for modern WebKit */
+    flex-direction: column; /* Standard Flexbox column layout */
     border-style: solid;
-    width: 135px;
-    vertical-align: top;
+    width: 135px; /* Fixed width for each day */
     margin: 1px;
-    align-items: center;
+    align-items: stretch; /* Stretch children to fill the width (optional) */
+    justify-content: flex-start; /* Align children at the top */
     text-align: left;
-    flex:1;
+    flex: 1;
 }
 
-.day .day-title{
+.day .day-title {
     background-color: black;
     text-align: center;
     color: white;
@@ -80,4 +120,8 @@ body {
     border-style: solid;
     border-radius: 5px;
     padding: 2px;
+}
+
+code {
+    font-size: .8em;
 }