Zach's git repos / prosongsa
Backend for songs.zachdecook.com
* Theme: Ability to change between light and dark themes
Browse Source
Zach DeCook 2018-03-22
parent 7160ebb · commit e409436
Diffstat
-rw-r--r--README.md10
-rw-r--r--index.css19
-rw-r--r--index.less14
-rwxr-xr-xindex.php24
-rw-r--r--theme-dark.css15
5 files changed, 79 insertions, 3 deletions
diff --git a/README.md b/README.md
index aef2817..5de741d 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,16 @@ git pull && git submodule update --init --recursive && git submodule update &&
cd chordsdata && ./commands.sh
```
+## Developers
+
+Contributions are welcome! If you think you can do something to improve this project,
+feel free to make a pull request.
+
+### Notes
+
+The `index.css` file is made by
+`lessc --source-map-map-inline index.less > index.css`.
+
## Acknowledgements
* Github user [mzarillo](https://github.com/mzarillo) for
diff --git a/index.css b/index.css
index 4a4f6d4..302b9f8 100644
--- a/index.css
+++ b/index.css
@@ -2,6 +2,23 @@ pre {
font-weight: bold;
font-size: 1em;
}
+.darkbubble,
+.lightbubble {
+ font-size: 2em;
+}
+.darkbubble:hover,
+.lightbubble:hover {
+ text-decoration: none;
+ text-shadow: 0 0 5px;
+}
+.darkbubble,
+.darkbubble:hover {
+ color: #001144;
+}
+.lightbubble,
+.lightbubble:hover {
+ color: #CCDDFF;
+}
.tabs,
.chord0,
.chordC {
@@ -211,4 +228,4 @@ pre {
background-color: #d6306b;
border-color: #b40e49;
}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4Lmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJBO0VBQ0MsaUJBQUE7RUFDQSxjQUFBOztBQVFEO0FBQU87QUFBUzs7RUFMZixjQUFBO0VBT0EsaUJBQUE7O0FBRUQ7QUFBUztBQUFXO0VBVG5CLGNBQUE7O0FBWUQ7QUFBUztBQUFXO0VBWm5CLGNBQUE7O0FBZUQ7QUFBUztBQUFVO0VBZmxCLGNBQUE7O0FBa0JEO0FBQVM7QUFBVTtFQWxCbEIsY0FBQTs7QUFxQkQ7QUFBUztBQUFVO0VBckJsQixjQUFBOztBQXdCRDtBQUFTO0FBQVU7O0VBeEJsQixjQUFBOztBQTJCRDtBQUFTO0FBQVU7O0VBM0JsQixjQUFBOztBQThCRDtBQUFTO0FBQVU7O0VBOUJsQixjQUFBOztBQWlDRDtBQUFTO0FBQVU7O0VBakNsQixjQUFBOztBQW9DRDtBQUFVO0FBQVU7RUFwQ25CLGNBQUE7O0FBdUNEO0FBQVU7QUFBVTtFQXZDbkIsY0FBQTs7QUF5REQ7RUFiQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHNCQUFBO0VBQ0EscUJBQUE7O0FBSUEsTUFBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQU9GO0VBakJDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBVUY7RUFwQkMsY0FBQTtFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQUlBLE9BQUM7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFhRjtFQXZCQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsTUFBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQWdCRjtFQTFCQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsT0FBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQW1CRjtFQTdCQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsTUFBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQXNCRjtFQWhDQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsTUFBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQXlCRjtFQW5DQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsT0FBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQTRCRjtFQXRDQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsTUFBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQStCRjtFQXpDQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsT0FBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQWtDRjtFQTVDQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsTUFBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQXFDRjtFQS9DQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsT0FBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQXdDRjtFQWxEQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsTUFBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBIn0= */ \ No newline at end of file
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4Lmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJBO0VBQ0MsaUJBQUE7RUFDQSxjQUFBOztBQUVEO0FBQWE7RUFDWixjQUFBOztBQUVELFdBQVc7QUFBUSxZQUFZO0VBQzlCLHFCQUFBO0VBQ0Esb0JBQUE7O0FBRUQ7QUFBYSxXQUFXO0VBQ3ZCLGNBQUE7O0FBRUQ7QUFBYyxZQUFZO0VBQzFCLGNBQUE7O0FBU0E7QUFBTztBQUFTOztFQUxmLGNBQUE7RUFPQSxpQkFBQTs7QUFFRDtBQUFTO0FBQVc7RUFUbkIsY0FBQTs7QUFZRDtBQUFTO0FBQVc7RUFabkIsY0FBQTs7QUFlRDtBQUFTO0FBQVU7RUFmbEIsY0FBQTs7QUFrQkQ7QUFBUztBQUFVO0VBbEJsQixjQUFBOztBQXFCRDtBQUFTO0FBQVU7RUFyQmxCLGNBQUE7O0FBd0JEO0FBQVM7QUFBVTs7RUF4QmxCLGNBQUE7O0FBMkJEO0FBQVM7QUFBVTs7RUEzQmxCLGNBQUE7O0FBOEJEO0FBQVM7QUFBVTs7RUE5QmxCLGNBQUE7O0FBaUNEO0FBQVM7QUFBVTs7RUFqQ2xCLGNBQUE7O0FBb0NEO0FBQVU7QUFBVTtFQXBDbkIsY0FBQTs7QUF1Q0Q7QUFBVTtBQUFVO0VBdkNuQixjQUFBOztBQXlERDtFQWJDLGNBQUE7RUFDQSxZQUFBO0VBQ0Esc0JBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBT0Y7RUFqQkMsY0FBQTtFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQUlBLE1BQUM7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFVRjtFQXBCQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsT0FBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQWFGO0VBdkJDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBZ0JGO0VBMUJDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxPQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBbUJGO0VBN0JDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBc0JGO0VBaENDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBeUJGO0VBbkNDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxPQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBNEJGO0VBdENDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBK0JGO0VBekNDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxPQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBa0NGO0VBNUNDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBcUNGO0VBL0NDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxPQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBd0NGO0VBbERDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUEifQ== */ \ No newline at end of file
diff --git a/index.less b/index.less
index e1baf4a..abf4747 100644
--- a/index.less
+++ b/index.less
@@ -31,6 +31,20 @@ pre {
font-weight: bold;
font-size: 1em;
}
+.darkbubble, .lightbubble {
+ font-size: 2em;
+}
+.darkbubble:hover, .lightbubble:hover {
+ text-decoration: none;
+ text-shadow: 0 0 5px;
+}
+.darkbubble, .darkbubble:hover {
+ color: #001144;
+}
+.lightbubble, .lightbubble:hover {
+color: #CCDDFF;
+}
+
.chordZ(@color: #BBB){
color: @color;
& when(hsvvalue(@color) > 95%) and (lightness(@color) > 51%){
diff --git a/index.php b/index.php
index 34652c6..d8d68ac 100755
--- a/index.php
+++ b/index.php
@@ -1,3 +1,10 @@
+<?php
+$theme = $_COOKIE['theme'] ?? 'light';
+if ( isset( $_GET['theme'] ) ){
+ $theme = $_GET['theme'];
+ setcookie( 'theme', $theme, time()+60*60*24*30 );
+}
+?>
<!--
index.php contains the main html used for creating the page.
Author: Zach DeCook
@@ -11,7 +18,12 @@ Author: Zach DeCook
crossorigin="anonymous">
<link rel="stylesheet" href="index.css" >
- <link rel="stylesheet" href="theme.css" >
+ <link rel="stylesheet"
+ href=
+ <?php
+ if ( $theme == 'dark' ){echo "'theme-dark.css'";}
+ else {echo "'theme.css'";}
+ ?> >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=.65">
<title>Choruses and Hymns</title>
@@ -22,7 +34,15 @@ Author: Zach DeCook
<header>
<div class = "col-xs-6 col-xs-offset-0 ">
- <h3>Browse Songs</h3>
+ <h3>Prosongsa</h3>
+ Theme:
+ <?php
+ $query = preg_replace( '/&?theme=\w+/', '', $_SERVER['QUERY_STRING'] );
+ echo "<a class='lightbubble' href='?$query&theme=light'>&#x25cf;</a>
+ <a class='darkbubble' href='?$query&theme=dark'>&#x25cf;</a>";
+ ?>
+ (Uses cookies :)
+ <br>
<a href="?song=0">Table of contents</a>
<form>
<input name='song' type='number' value='<?php echo isset($_GET['song']) ? $_GET['song'] : '' ?>'
diff --git a/theme-dark.css b/theme-dark.css
new file mode 100644
index 0000000..f47b25b
--- /dev/null
+++ b/theme-dark.css
@@ -0,0 +1,15 @@
+body {
+ background-color: #001144;
+ color: white;
+}
+pre {
+ background-color: black;
+ color: white;
+}
+canvas {
+ -webkit-filter: invert(100%);
+ filter: invert(100%);
+}
+input, select {
+ color: black;
+}