Merge pull request #39 from lambdacasserole/donations-div

Add donations subtemplate and CSS

.gitignore

@@ -62,6 +62,7 @@ phpunit.phar
 # Sensitive
 /config/config.yaml
 /templates/_analytics.html.twig
+/templates/_donations.html.twig
 
 # Compiled code
 /web/js/
@@ -71,4 +72,4 @@ phpunit.phar
 /db/*.dat
 
 # Keep files
-!.gitkeep
+!.gitkeep

README.md

@@ -19,7 +19,7 @@ A couple of files need changing to get the site working for you.
 
 1. Copy `config/config.yaml.dist` and rename it to `config.yaml`. Fill in the fields according to their descriptions and save.
 2. For `sourire_service` you'll want to point it to your local [Sourire](https://github.com/tmoerman/sourire) server. For example `http://localhost:8080/`.
-3. Create a file at `templates/_analytics.txt` for your analytics code. Leave it blank if you like, but you must create it.
+3. Create files at `templates/_analytics.html.twig` for your analytics code and `templates/_donations.html.twig` for any donation buttons. Leave them blank if you like, but you must create them.
 
 ## Building
 Clone the project down and open the folder in your favourite editor. It's a JetBrains PhpStorm project but you can use whichever paid/free software takes your fancy.
@@ -63,3 +63,4 @@ A big thank you to:
 * [Jay Holtslander](https://codepen.io/j_holtslander/) put together the hamburger menu/sidebar combo in his [Pen](https://codepen.io/j_holtslander/pen/XmpMEp) on CodePen. I believe it's derived from earlier work by [maridlcrmn](https://bootsnipp.com/maridlcrmn).
 * [Thomas Moerman](https://github.com/tmoerman) created [Sourire](https://github.com/tmoerman/sourire), which really simplified the molecule rendering process.
 * [Andre Plötze](https://github.com/andrepxx) created [pure-knob](https://github.com/andrepxx/pure-knob), which is used here for the rotation knob/wheel/dial thing.
+* [Contributors to this awesome repo](https://github.com/spothq/cryptocurrency-icons) which provides the cryptocurrency donation icons in the web app (they aren't bundled here).

src/less/main.less

@@ -170,3 +170,52 @@ input[type=text] {
   padding: 4px;
   font-size: 8pt;
 }
+
+// Modals.
+
+.modal-header {
+  background: #222222;
+  border-color: #333333;
+}
+
+.close span {
+  color: #cccccc;
+}
+
+.modal-title {
+  font-weight: normal;
+}
+
+.modal-body {
+  background: #222222;
+}
+
+.modal-body p {
+  line-height: 24px;
+}
+
+.modal-footer {
+  background: #222222;
+  border-color: #333333;
+}
+
+// Donation-related.
+
+code {
+  border: 1px solid @code-border;
+  border-radius: 5px;
+  background: @code-background;
+  text-shadow: none;
+  padding: 5px 10px 5px 10px;
+  color: @code-color;
+}
+
+.crypto-qr {
+  border-radius: 5px;
+}
+
+.crypto-icon {
+  cursor: pointer;
+  width: 24px;
+  margin: 4px;
+}

src/less/variables.less

@@ -17,6 +17,11 @@
 @button-border: #555;
 @button-text: #fff;
 
+// Text colours.
+@code-border: #555;
+@code-color: #ff6347;
+@code-background: #111;
+
 // Input fields.
 @input-background: #222;
 @input-background-hover: #444;

templates/index.html.twig

@@ -183,6 +183,7 @@
             <div class="misc-text">
                 MIT Licensed | Inspired by <a target="_blank" href="https://www.youtube.com/user/TheRedNile">Nile Red's awesome chemistry videos</a>.
             </div>
+            {% include "_donations.html.twig" %}
         </div>
     </body>
 </html>