Merge pull request #13 from antioxidants/HEAD

Head
darkstarteam · May 15, 2017 · e6e2c89 · e6e2c89
2 parents 3926e31 + 022c36a
commit e6e2c89
Show file tree

Hide file tree

Showing 7 changed files with 160 additions and 6 deletions.
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+destinyflavortext.net
diff --git a/css/dark.css b/css/dark.css
@@ -0,0 +1,120 @@
+body {
+    font-family: 'Roboto', sans-serif;
+    background: rgba(24, 29, 37, 1);
+}
+
+@media (min-width: 300px) {}
+
+.container {
+    position: relative;
+    width: 100%;
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+
+p {
+    color: rgba(245, 245, 245, 1);
+}
+
+#name {
+    font-size: 18pt;
+}
+
+#type {
+    font-size: 14pt;
+}
+
+#flavortext {
+    font-size: 12pt;
+}
+
+.type-filter {
+    position: relative;
+    float: left;
+    overflow: hidden;
+    width: auto;
+    padding: 0 10px 0 0;
+    margin-right: 9px;
+    background: rgba(30,36,43,1);
+    border: 1px solid rgba(245,245,245,0.1);
+    border-radius: .278rem;
+    font-size: 11px;
+    line-height: 155%
+}
+
+select {
+	width: 130%;
+    height: 130%;
+	padding: .8em 1em;;
+	color: #F5F5F5;
+	border: 0;
+    border-radius: .278rem;
+	box-shadow: none;
+	background: rgba(30,36,43, 1);
+	background-image: none;
+	font-size: 15px;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	appearance: none;
+    line-height: 155%
+}
+
+select:focus {
+	outline: none;
+}
+
+select:hover
+{
+	background: rgba(40, 46, 53, 1);
+}
+
+.type-filter:after
+{
+	content: "\f0d7";
+	font-family: FontAwesome;
+    font-size: 15px;
+	position: absolute;
+	top: 16px;
+	right: 16px;
+	color: rgba(245, 245, 245, 1);
+}
+
+#theme-div:after {
+    top: 15px;
+	right: 9px;
+}
+
+.button {
+    vertical-align: middle;
+    cursor: pointer;
+    overflow: visible;
+    padding: .8em 1em;
+    background-color: rgba(255,206,31,0.8);
+    border: 0;
+    border-radius: .278rem;
+    color: black;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    line-height: 150%
+}
+
+.button:hover {
+    background-color: #ffce1f;
+}
+
+.button:focus {
+  outline: none;
+}
+
+.footer {
+    position: relative;
+    width: 100%;
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
diff --git a/css/main.css → css/light.css b/css/main.css → css/light.css
@@ -36,6 +36,7 @@ body {
     border: 1px solid rgba(30,36,43,0.1);
     border-radius: .278rem;
     font-size: 11px;
+    line-height: 155%
 }
 
 select {
@@ -52,6 +53,7 @@ select {
 	-moz-appearance: none;
 	-webkit-appearance: none;
 	appearance: none;
+    line-height: 155%
 }
 
 select:focus {
@@ -69,11 +71,16 @@ select:hover
 	font-family: FontAwesome;
     font-size: 15px;
 	position: absolute;
-	top: 14px;
+	top: 16px;
 	right: 16px;
 	color: rgba(30,36,43, 1);
 }
 
+#theme-div:after {
+    top: 15px;
+	right: 9px;
+}
+
 .button {
     vertical-align: middle;
     cursor: pointer;
@@ -87,6 +94,7 @@ select:hover
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
+    line-height: 150%
 }
 
 .button:hover {

diff --git a/index.html b/index.html
@@ -4,9 +4,13 @@
         <title>Destiny Flavor Text</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta charset="UTF-8">
-        <link rel="stylesheet" type="text/css" href="css/main.css">
+        <link rel="stylesheet" type="text/css" href="css/light.css" title="default">
+        <link rel="dark stylesheet" type="text/css" href="css/dark.css" title="dark"> 
         <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
         <link rel="shortcut icon" type="image/png" href="/favicon.ico"/>
+
+        <script src="js/styleswitcher.js"></script>
+
     </head>
     <body onload="GrabRandomFlavorText()">
         <script>
@@ -22,11 +26,16 @@
         <script src="https://use.fontawesome.com/b28bdd3e8c.js"></script>
         <script src="js/flavortext.min.js"></script>
         <div class="container">
-        <br>
         <p id="name"></p>
         <p id="type"></p>
         <p id="flavortext"></p>
         <button class="button" id="refresh_button" onclick="Refresh()">One more</button>&nbsp;&nbsp;<button class="button" id="list_button" onclick="goToLists()">Lists</button>&nbsp;&nbsp;<button class="button" id="about_button" onclick="About()">About</button>
+        <br>
+        <br>
+        <div class="type-filter" id="theme-div"><select id="theme-picker" name="theme">
+            <option value="light">Light Theme</option>
+            <option value="dark">Dark Theme</option>
+        </select></div><button class="button" id="theme-button" onclick="ThemeChooser()">Submit</button>
         </div>
     </body>
 </html>
diff --git a/js/flavortext.js b/js/flavortext.js
@@ -38,6 +38,11 @@
             window.location = "https://destinyflavortext.net"
         }
 
+        function ThemeChooser() {
+            document.getElementById("theme-picker").value!="light"||(setActiveStyleSheet('default'))
+            document.getElementById("theme-picker").value!="dark"||(setActiveStyleSheet('dark'))
+        }
+
         // Changes the list depending on the chosen filter.
         function SubmitFilterChoice() {
         document.getElementById("filter_type").value!="all"||(GrabFlavorText())

diff --git a/js/styleswitcher.js b/js/styleswitcher.js
diff --git a/lists.html b/lists.html
@@ -4,9 +4,13 @@
         <title>Destiny Flavor Text</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta charset="UTF-8">
-        <link rel="stylesheet" type="text/css" href="css/main.css">
+        <link rel="stylesheet" type="text/css" href="css/light.css" title="default">
+        <link rel="dark stylesheet"" type="text/css" href="css/dark.css"" title="dark"> 
         <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
         <link rel="shortcut icon" type="image/png" href="/favicon.ico"/>
+
+        <script src="js/styleswitcher.js"></script>
+
     </head>
     <body onload="GrabFlavorText()">
         <script>
@@ -60,8 +64,14 @@
                     <option value="sparrows">Sparrows</option>
                 </select></div>
                  <button class="button" id="filter" onclick="SubmitFilterChoice()">Submit</button>&nbsp;&nbsp;<button class="button" id="filter" onclick="GoHome()">Go Back</button>
+                 <br>
+                 <br>
+                 <div class="type-filter" id="theme-div"><select id="theme-picker" name="theme">
+                     <option value="light">Light Theme</option>
+                     <option value="dark">Dark Theme</option>
+                     </select></div><button class="button" id="theme-button" onclick="ThemeChooser()">Submit</button>
             <div id="item_list"></div>
         </div>
-
-    </body>
+        <body>
+</body>
 </html>