diff --git a/.gitignore b/.gitignore index a0f71cd..a33d44b 100644 --- a/.gitignore +++ b/.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 \ No newline at end of file +!.gitkeep diff --git a/README.md b/README.md index 8a07881..94438b8 100644 --- a/README.md +++ b/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). diff --git a/src/less/main.less b/src/less/main.less index af64d0f..7a571e7 100644 --- a/src/less/main.less +++ b/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; +} diff --git a/src/less/variables.less b/src/less/variables.less index 543d28e..244a446 100644 --- a/src/less/variables.less +++ b/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; diff --git a/templates/index.html.twig b/templates/index.html.twig index 00d5258..3491a67 100644 --- a/templates/index.html.twig +++ b/templates/index.html.twig @@ -183,6 +183,7 @@
MIT Licensed | Inspired by Nile Red's awesome chemistry videos.
+ {% include "_donations.html.twig" %}