From 91335bebf3c9721df7c6667cc7bdf3a776f081bb Mon Sep 17 00:00:00 2001 From: MichaelCook Date: Mon, 27 Feb 2017 12:58:17 +0000 Subject: [PATCH] Props to my ho cause he fly. Plus a retro style upadte --- dist/css/app.css | 2 +- dist/js/app.js | 2 +- index.html | 4 ++++ src/js/app.js | 1 - src/scss/app.scss | 40 +++++++++++++++++++++++++++++++++++++--- 5 files changed, 43 insertions(+), 6 deletions(-) diff --git a/dist/css/app.css b/dist/css/app.css index f014117..8cd8b35 100644 --- a/dist/css/app.css +++ b/dist/css/app.css @@ -1 +1 @@ -body{font-size:calc(10px + .5vw);padding:0 0 30px;font-family:Play,sans-serif}.container-fluid{max-width:1440px;overflow:auto}h2{font-size:20px}th{position:relative;text-transform:capitalize;background:#eef7fd}.react-bs-table{border:1px solid #ddd;border-radius:2px;margin:0}.react-bs-table table td,.react-bs-table table th{white-space:normal;word-break:break-word}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:1px calc(0px + 1vw)}.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>th{padding-right:20px}td:nth-child(1),th:nth-child(1){width:50%}td:nth-child(2),th:nth-child(2){width:22%}td:nth-child(3),th:nth-child(3){width:14%}td:nth-child(4),th:nth-child(4){width:14%}.order{position:absolute;top:1px;right:3px} \ No newline at end of file +body{font-size:calc(10px + .5vw);padding:0 0 30px;font-family:Play,sans-serif;background:#000;color:#47c101}.container-fluid{max-width:1440px;overflow:auto}h1,h2,h3{color:#ba4ee4}h2{font-size:20px}a{color:#df3968}a:hover{color:#fff}th{position:relative;text-transform:capitalize;background:#052c36;color:#15afd9}.react-bs-table{border:1px solid #052c36;border-radius:2px;margin:0}.react-bs-table table td,.react-bs-table table th{white-space:normal;word-break:break-word}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{border-color:#052c36;padding:1px calc(0px + 1vw)}.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>th{padding-right:20px}.table-hover>tbody>tr:hover{background:#060f00}td:nth-child(1),th:nth-child(1){width:50%}td:nth-child(2),th:nth-child(2){width:22%}td:nth-child(3),th:nth-child(3){width:14%}td:nth-child(4),th:nth-child(4){width:14%}.order{position:absolute;top:1px;right:3px} \ No newline at end of file diff --git a/dist/js/app.js b/dist/js/app.js index 79b9b74..d76e567 100644 --- a/dist/js/app.js +++ b/dist/js/app.js @@ -1 +1 @@ -"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var _createClass=function(){function e(e,t){for(var o=0;o
+

Movies For Hackers

+ +

Every aspiring hacker & cyberpunk must watch these movies - drawing directly from the impressive curated list from Nikolaos Kamarinakis

+
diff --git a/src/js/app.js b/src/js/app.js index 6979c25..12dca7e 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -134,7 +134,6 @@ client.onreadystatechange = function(e) { ReactDOM.render(
-

Movies For Hackers

{moviesCollectionJSX}
, document.getElementById("root") diff --git a/src/scss/app.scss b/src/scss/app.scss index caf3ba8..84afb3e 100644 --- a/src/scss/app.scss +++ b/src/scss/app.scss @@ -1,22 +1,46 @@ +// Realistically, this would bring in bootstrap as a package and use it properly but this is a quick project. +$brand-primary: #ba4ee4; +$brand-secondary: #47c101; +$brand-tertiary: #15afd9; +$headings-color: $brand-primary; +$link-color: #df3968; +$border-color: adjust-color( + $brand-tertiary, + $lightness: -35% +); body { font-size: calc(10px + .5vw); padding: 0 0 30px; font-family: 'Play', sans-serif; + background: black; + color: $brand-secondary; } .container-fluid { max-width: 1440px; overflow: auto; } +h1, +h2, +h3 { + color: $headings-color; +} h2 { font-size: 20px; } +a { + color: $link-color; + &:hover { + color: white; + } +} th { position: relative; text-transform: capitalize; - background: #eef7fd; + background: $border-color; + color: $brand-tertiary; } .react-bs-table { - border: 1px solid #ddd; + border: 1px solid $border-color; border-radius: 2px; margin: 0; &, @@ -34,7 +58,6 @@ th { } } } -// Realistically, this would bring in bootstrap as a package and use it properly .table { // Cells > thead, @@ -43,6 +66,7 @@ th { > tr { > th, > td { + border-color: $border-color; padding: 1px calc(0px + 1vw); } > th { @@ -51,6 +75,16 @@ th { } } } +.table-hover { + > tbody { + > tr:hover { + background: adjust-color( + $brand-secondary, + $lightness: -35% + ); + } + } +} // Quick solution to the forced table-layout: fixed th, td {