separate css

astreknet · May 16, 2022 · 9cd0fbc · 9cd0fbc
1 parent 42c2540
commit 9cd0fbc
Show file tree

Hide file tree

Showing 2 changed files with 153 additions and 157 deletions.
diff --git a/index.php b/index.php
@@ -72,163 +72,7 @@ function get_moon_svg_by_size($m_size,$id_tag) {
 
     <link rel="icon" type="image/png" sizes="196x196 160x160 96x96 64x64 32x32 16x16" href="favicon.svg" />
     <link rel="apple-touch-icon" sizes="180x180 120x120 76x76 72x72 60x60 57x57" href="favicon.svg" />
-
-<!-- STYLE CSS STARTS -->
-<style>
-    @media screen and (prefers-color-scheme: light) {
-        :root {
-            --background-color: #006199;
-            --bg-color-transparent: rgba(0, 97, 153, 0.81);
-            --color: #ccc;
-        }
-    }
-
-    @media screen and (prefers-color-scheme: dark) {
-        :root {
-            --background-color: #002D62;
-            --bg-color-transparent: rgba(0, 45, 98, 0.87);
-            --color: #ccc;
-        }
-    }
-
-    :root { color-scheme: light dark;}
-
-    @media (max-width: 999px) {
-        :root {
-            --width: 100%;
-            --next-img-width: 99%;
-            --font-size: 270%
-        }
-    }
-
-    @media only screen and (min-width: 999px) and (max-width: 1400px) {
-        :root {
-            --width: 69%;
-            --next-img-width: 99%;
-            --font-size: 180%
-        }
-    }
-
-    @media  (min-width: 1400px) {
-        :root {
-            --width: 42%;
-            --next-img-width: 99%;
-            --font-size: 150%;
-        }
-    }
-
-    body {
-        width:var(--width);
-        padding: 0;
-        background-color: var(--background-color);
-        color: var(--color);
-        font-size: var(--font-size);
-        font-family: verdana;
-    }
-
-    header, section {
-        -webkit-user-select: none;
-        -webkit-touch-callout: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
-
-    header { 
-        margin-top: 1%;
-        overflow: auto;
-    }
-
-    body, h2, #next, #forecast_img, #marquee ul, table { margin: 0 auto; }
-
-    .center_align, footer, h2, #marquee ul {text-align: center;}
-
-    .right_align { text-align: right; }
-
-    #marquee, #forecast_img, #keys  { border-radius: 0.45em; }
-
-    #next_days table, #keys, footer { padding: 0.9em; }
-
-    footer, #def, #lat { font-size: 0.6em; }
-
-    #def li, #def table { margin-top: 0.9em; }
-
-    .upsidedown { transform: scaleY(-1);}
-
-    h2 {
-        font-size: 1.2em;
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0.6em;
-    }
-
-    h1, h3, th {
-        visibility: hidden;
-        display: none;
-    }
-
-    a {
-        color: #BAD7FF;
-        text-decoration: none;
-    }
-
-    #keys { border: 0.06em dashed var(--color); }
-
-    .svg_color { fill: var(--color); }
-
-    .svg_text { 
-        fill: var(--background-color); 
-        font-family: 'Arial';
-        stroke-width: 0.03em;
-        }
-
-    #forecast_img {
-        width: var(--next-img-width);
-        display: block;
-    }
-
-    .svg_moon {
-        width: 1.5em;
-        height: 1.5em;
-        vertical-align: middle;
-    }       
-
-    footer svg {
-        width: 3.6em;
-        height: 3.6em;
-    }
-
-    #marquee {
-        width:96%;
-        margin: -3.9em auto 0.9em auto;
-        position: relative;
-        overflow-x: scroll;
-        overflow-y: hidden;
-        white-space: nowrap;
-        -ms-overflow-style: none;  /* IE and Edge */
-        scrollbar-width: none;
-    }
-
-    #marquee::-webkit-scrollbar { display: none }
-
-    #marquee ul, #donate {
-        list-style-type: none;
-        padding-left: 0;
-    }
-
-    #marquee li {
-        background-color: var(--bg-color-transparent);
-        cursor: pointer;
-        display: inline-block;
-        *display: inline;
-        *zoom: 1;
-        padding: 0.3em;
-    }
-
-    #next_days table { width: 100%; }
-
-</style>
+    <link rel="stylesheet" type="text/css" href="main.css" media="screen" />
 
 <title id="title">aurora forecast | astrek</title>
 </head>

diff --git a/main.css b/main.css
@@ -0,0 +1,152 @@
+@media screen and (prefers-color-scheme: light) {
+	:root {
+        --background-color: #006199;
+        --bg-color-transparent: rgba(0, 97, 153, 0.81);
+        --color: #ccc;
+        }
+}
+
+@media screen and (prefers-color-scheme: dark) {
+	:root {
+            --background-color: #002D62;
+            --bg-color-transparent: rgba(0, 45, 98, 0.87);
+            --color: #ccc;
+        }
+}
+
+:root { color-scheme: light dark;}
+
+@media (max-width: 999px) {
+	:root {
+            --width: 100%;
+            --next-img-width: 99%;
+            --font-size: 270%
+        }
+}
+
+@media only screen and (min-width: 999px) and (max-width: 1400px) {
+	:root {
+            --width: 69%;
+            --next-img-width: 99%;
+            --font-size: 180%
+        }
+}
+
+@media  (min-width: 1400px) {
+	:root {
+            --width: 42%;
+            --next-img-width: 99%;
+            --font-size: 150%;
+        }
+}
+
+body {
+	width:var(--width);
+        padding: 0;
+        background-color: var(--background-color);
+        color: var(--color);
+        font-size: var(--font-size);
+        font-family: verdana;
+}
+
+header, section {
+        -webkit-user-select: none;
+        -webkit-touch-callout: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+}
+
+header { 
+        margin-top: 1%;
+        overflow: auto;
+}
+
+body, h2, #next, #forecast_img, #marquee ul, table { margin: 0 auto; }
+
+.center_align, footer, h2, #marquee ul {text-align: center;}
+
+.right_align { text-align: right; }
+
+#marquee, #forecast_img, #keys  { border-radius: 0.45em; }
+
+#next_days table, #keys, footer { padding: 0.9em; }
+
+footer, #def, #lat { font-size: 0.6em; }
+
+#def li, #def table { margin-top: 0.9em; }
+
+.upsidedown { transform: scaleY(-1);}
+
+h2 {
+        font-size: 1.2em;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0.6em;
+}
+
+h1, h3, th {
+        visibility: hidden;
+        display: none;
+}
+
+a {
+        color: #BAD7FF;
+        text-decoration: none;
+}
+
+#keys { border: 0.06em dashed var(--color); }
+
+.svg_color { fill: var(--color); }
+
+.svg_text { 
+        fill: var(--background-color); 
+        font-family: 'Arial';
+        stroke-width: 0.03em;
+}
+
+#forecast_img {
+        width: var(--next-img-width);
+        display: block;
+}
+
+.svg_moon {
+        width: 1.5em;
+        height: 1.5em;
+        vertical-align: middle;
+}       
+
+footer svg {
+        width: 3.6em;
+        height: 3.6em;
+}
+
+#marquee {
+        width:96%;
+        margin: -3.9em auto 0.9em auto;
+        position: relative;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        white-space: nowrap;
+        -ms-overflow-style: none;  /* IE and Edge */
+        scrollbar-width: none;
+}
+
+#marquee::-webkit-scrollbar { display: none }
+
+#marquee ul, #donate {
+        list-style-type: none;
+        padding-left: 0;
+}
+
+#marquee li {
+        background-color: var(--bg-color-transparent);
+        cursor: pointer;
+        display: inline-block;
+        *display: inline;
+        *zoom: 1;
+        padding: 0.3em;
+}
+
+#next_days table { width: 100%; }