migrate style to css file

2022-05-25 13:42:36 -05:00
parent bf4aacc680
commit 213bcf92d5
2 changed files with 82 additions and 81 deletions
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -0,0 +1,80 @@
+@font-face {
+    font-family: "Hellovetica";
+    src: url("hellovetica.ttf") format("truetype");
+}
+.dashboard {
+    font-family: "Helvetica";
+    height: 699px;
+    width: 600px;
+text-align: left;
+font-size: 17px;
+}
+
+.panel {
+    position: relative;
+    height: 50%;
+verical-align: top;
+/* 		height: 250px; */
+width: 100%;
+}
+
+.panel.top {
+    height: 35%;
+}
+
+.panel.bottom {
+    height: 65%;
+}
+
+.subpanel {
+    position: relative;
+    height:100%;
+    width:48%;
+    display: inline-block;
+    text-align: center;
+}
+
+.weather-icon {
+
+    position: relative;
+    height: 100%;
+    width: 100%;
+    object-fit: scale-down;
+}
+
+.week {
+    text-align: center;
+}
+
+.day {
+    border-style: solid;
+    display: inline-block;
+    min-height: 220px;
+    max-height: 220px;
+    width: 135px;
+    vertical-align: top;
+    margin: 1px;
+    align-items: center;
+    text-align: left;
+}
+
+.day-title{
+    background-color: black;
+    text-align: center;
+    color: white;
+    text-transform: uppercase;
+    font-weight: bold;
+
+}
+
+.event {
+    margin: 3pt;
+    background-color: white;
+    border-style: solid;
+    border-radius: 5px;
+    padding: 2px;
+}
+
+.daterange {
+    font-size: smaller;
+}
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -1,87 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title></title>
-    <style>
-        @font-face {
-            font-family: "Hellovetica";
-            src: url("hellovetica.ttf") format("truetype");
-        }
-        .dashboard {
-            font-family: "Helvetica";
-            height: 699px;
-            width: 600px;
-            {#border-style: solid;#}
-            text-align: left;
-            font-size: 17px;
-        }
-
-        .panel {
-            position: relative;
-            height: 50%;
-            {#border-style: dotted;#}
-            verical-align: top;
-            /* 		height: 250px; */
-            width: 100%;
-        }
-
-        .panel.top {
-            height: 35%;
-        }
-
-        .panel.bottom {
-            height: 65%;
-        }
-
-        .subpanel {
-            position: relative;
-            height:100%;
-            width:48%;
-            display: inline-block;
-            text-align: center;
-            align-items: middle;
-        }
-
-        .weather-icon {
-
-            position: relative;
-            height: 100%;
-            width: 100%;
-            object-fit: scale-down;
-        }
-
-        .week {
-            /* 			height:100% */
-        }
-
-        .day {
-            border-style: solid;
-            display: inline-block;
-            min-height: 220px;
-            max-height: 220px;
-            width: 135px;
-            vertical-align: top;
-            margin: 1px;
-            align-items: center;
-        }
-
-        .day-title{
-            background-color: black;
-            text-align: center;
-            color: white;
-            text-transform: uppercase;
-            font-weight: bold;
-
-        }
-
-        .event {
-            margin: 3pt;
-            background-color: white;
-            border-style: solid;
-            border-radius: 5px;
-
-        }
-    </style>
+    <title>Dashboard</title>
+    <link rel="stylesheet" href="static/style.css">
 </head>
 <body>
 <div class="dashboard">