Frontend (#23)

* Gitignore + JsHint * [Template] Page #1 * Add scss structure * Update scss * Swap Bakcground & Text Colors * Add article 13 section * Add styling to first section * [Template] Article 13 * Article13 Design Anpassungen * Add what you can do section * Minor styling changes * Add static files to build pipeline * Fix what-do section layout * [Typo] Fix Header * Fix assets * Add minor style changes * Extract Header * Add white icons * Flag for vorder on/off * Remove borders * REMOVE THE FCKN DEBUG BAR
Insax · Jun 13, 2018 · 1982043 · 1982043
1 parent 1927307
commit 1982043
Show file tree

Hide file tree

Showing 29 changed files with 6,544 additions and 59 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,108 @@ vendor/
 npm-debug.log
 yarn-error.log
 ###< symfony/webpack-encore-pack ###
+
+
+# Created by https://www.gitignore.io/api/node,angular,visualstudiocode
+
+### Angular ###
+## Angular ##
+# compiled output
+/dist
+/tmp
+/app/**/*.js
+/app/**/*.js.map
+
+# dependencies
+/node_modules
+/bower_components
+
+# IDEs and editors
+/.idea
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage/*
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+#System Files
+.DS_Store
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history
+
+
+# End of https://www.gitignore.io/api/node,angular,visualstudiocode
diff --git a/.jshintrc b/.jshintrc
@@ -0,0 +1,91 @@
+{
+    // JSHint Default Configuration File (as on JSHint website)
+    // See http://jshint.com/docs/ for more details
+
+    "maxerr"        : 50,       // {int} Maximum error before stopping
+
+    // Enforcing
+    "bitwise"       : true,     // true: Prohibit bitwise operators (&, |, ^, etc.)
+    "camelcase"     : true,    // true: Identifiers must be in camelCase
+    "curly"         : true,     // true: Require {} for every new block or scope
+    "eqeqeq"        : true,     // true: Require triple equals (===) for comparison
+    "forin"         : true,     // true: Require filtering for..in loops with obj.hasOwnProperty()
+    "freeze"        : true,     // true: prohibits overwriting prototypes of native objects such as Array, Date etc.
+    "immed"         : false,    // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
+    "latedef"       : false,    // true: Require variables/functions to be defined before being used
+    "newcap"        : false,    // true: Require capitalization of all constructor functions e.g. `new F()`
+    "noarg"         : true,     // true: Prohibit use of `arguments.caller` and `arguments.callee`
+    "noempty"       : true,     // true: Prohibit use of empty blocks
+    "nonbsp"        : true,     // true: Prohibit "non-breaking whitespace" characters.
+    "nonew"         : false,    // true: Prohibit use of constructors for side-effects (without assignment)
+    "plusplus"      : false,    // true: Prohibit use of `++` and `--`
+    "quotmark"      : false,    // Quotation mark consistency:
+                                //   false    : do nothing (default)
+                                //   true     : ensure whatever is used is consistent
+                                //   "single" : require single quotes
+                                //   "double" : require double quotes
+    "undef"         : true,     // true: Require all non-global variables to be declared (prevents global leaks)
+    "unused"        : true,     // Unused variables:
+                                //   true     : all variables, last function parameter
+                                //   "vars"   : all variables only
+                                //   "strict" : all variables, all function parameters
+    "strict"        : true,     // true: Requires all functions run in ES5 Strict Mode
+    "maxparams"     : false,    // {int} Max number of formal params allowed per function
+    "maxdepth"      : false,    // {int} Max depth of nested blocks (within functions)
+    "maxstatements" : false,    // {int} Max number statements per function
+    "maxcomplexity" : false,    // {int} Max cyclomatic complexity per function
+    "maxlen"        : false,    // {int} Max number of characters per line
+    "varstmt"       : false,    // true: Disallow any var statements. Only `let` and `const` are allowed.
+
+    // Relaxing
+    "asi"           : false,     // true: Tolerate Automatic Semicolon Insertion (no semicolons)
+    "boss"          : false,     // true: Tolerate assignments where comparisons would be expected
+    "debug"         : false,     // true: Allow debugger statements e.g. browser breakpoints.
+    "eqnull"        : false,     // true: Tolerate use of `== null`
+    "esversion"     : 6,         // {int} Specify the ECMAScript version to which the code must adhere.
+    "moz"           : false,     // true: Allow Mozilla specific syntax (extends and overrides esnext features)
+                                 // (ex: `for each`, multiple try/catch, function expression…)
+    "evil"          : false,     // true: Tolerate use of `eval` and `new Function()`
+    "expr"          : false,     // true: Tolerate `ExpressionStatement` as Programs
+    "funcscope"     : false,     // true: Tolerate defining variables inside control statements
+    "globalstrict"  : false,     // true: Allow global "use strict" (also enables 'strict')
+    "iterator"      : false,     // true: Tolerate using the `__iterator__` property
+    "lastsemic"     : false,     // true: Tolerate omitting a semicolon for the last statement of a 1-line block
+    "laxbreak"      : false,     // true: Tolerate possibly unsafe line breakings
+    "laxcomma"      : false,     // true: Tolerate comma-first style coding
+    "loopfunc"      : false,     // true: Tolerate functions being defined in loops
+    "multistr"      : false,     // true: Tolerate multi-line strings
+    "noyield"       : false,     // true: Tolerate generator functions with no yield statement in them.
+    "notypeof"      : false,     // true: Tolerate invalid typeof operator values
+    "proto"         : false,     // true: Tolerate using the `__proto__` property
+    "scripturl"     : false,     // true: Tolerate script-targeted URLs
+    "shadow"        : false,     // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
+    "sub"           : false,     // true: Tolerate using `[]` notation when it can still be expressed in dot notation
+    "supernew"      : false,     // true: Tolerate `new function () { ... };` and `new Object;`
+    "validthis"     : false,     // true: Tolerate using this in a non-constructor function
+
+    // Environments
+    "browser"       : true,     // Web Browser (window, document, etc)
+    "browserify"    : true,    // Browserify (node.js code in the browser)
+    "couch"         : false,    // CouchDB
+    "devel"         : true,     // Development/debugging (alert, confirm, etc)
+    "dojo"          : false,    // Dojo Toolkit
+    "jasmine"       : false,    // Jasmine
+    "jquery"        : true,    // jQuery
+    "mocha"         : false,     // Mocha
+    "mootools"      : false,    // MooTools
+    "node"          : false,    // Node.js
+    "nonstandard"   : true,    // Widely adopted globals (escape, unescape, etc)
+    "phantom"       : false,    // PhantomJS
+    "prototypejs"   : false,    // Prototype and Scriptaculous
+    "qunit"         : false,    // QUnit
+    "rhino"         : false,    // Rhino
+    "shelljs"       : false,    // ShellJS
+    "typed"         : false,    // Globals for typed array constructions
+    "worker"        : false,    // Web Workers
+    "wsh"           : false,    // Windows Scripting Host
+    "yui"           : false,    // Yahoo User Interface
+
+    // Custom Globals
+    "globals"       : {}        // additional predefined global variables
+}
diff --git a/assets/css/_raleway.scss b/assets/css/_raleway.scss
@@ -0,0 +1,23 @@
+@font-face {
+    font-family: 'Raleway';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Raleway Light'), local('Raleway-Light'), url('../fonts/Raleway-Thin.ttf') format('ttf');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+    font-family: 'Raleway';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Raleway'), local('Raleway-Regular'), url('../fonts/Raleway-Regular.ttf') format('ttf');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+    font-family: 'Raleway';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Raleway Light'), local('Raleway-Bold'), url('../fonts/Raleway-Bold.ttf') format('ttf');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/assets/css/_shared.scss b/assets/css/_shared.scss
@@ -0,0 +1,54 @@
+@import "variables";
+body {
+  padding-top: 50px;
+  font-family: 'Raleway', sans-serif;
+}
+
+.starter-template {
+  padding: 3rem 1.5rem;
+  text-align: center;
+}
+
+b,
+strong {
+  font-family: 'Raleway', sans-serif;
+  font-weight: bold;
+}
+
+* {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+
+*:focus {
+  outline: none !important;
+}
+
+html,
+body {
+  box-sizing: border-box;
+  font-family: 'Raleway', 'Helvetica Neue', 'Helvetica', sans-serif;
+  font-weight: 400;
+  margin: 0;
+  height: auto;
+  min-height: 100vh;
+  color: $text;
+  background-color: $background;
+}
+
+body {
+  padding-bottom: 5rem;
+}
+
+a {
+  outline: none !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 500;
+}
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
@@ -0,0 +1,11 @@
+@import "~bootstrap/scss/bootstrap-grid";
+@import "raleway";
+
+$background: #212121;
+$background_invert: #fbfbfb;
+$text: #fbfbfb;
+$text_invert: #212121;
+$accent1: #1CD0CA;
+$accent2: #E2002B;
+
+$vertical-space: 50px;
diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -1,10 +1,6 @@
-@import "~bootstrap/scss/bootstrap";
+@import "_variables";
+@import "_shared";
 
-body {
-    padding-top: 5rem;
-}
+// PAGES
+@import "/pages/landing";
 
-.starter-template {
-    padding: 3rem 1.5rem;
-    text-align: center;
-}
diff --git a/assets/css/pages/article-thirteen.scss b/assets/css/pages/article-thirteen.scss
@@ -0,0 +1,69 @@
+@import "../variables";
+
+.article-thirteen {
+  margin-top: $vertical-space;
+  padding-bottom: 5rem;
+  .header {
+    .title {
+      margin: 0;
+      font-size: 3.4em;
+      font-weight: 500;
+      .highlight {
+        color: $accent2;
+      }
+    }
+    .tagline {
+      font-size: 1.1em;
+      margin: 0;
+      font-weight: 500;
+    }
+  }
+
+  .content-pair {
+    margin-top: 30px;
+    align-items: center;
+    .box-wrapper {
+      justify-content: center;
+      .box {
+        background-color: #b4b4b4;
+        justify-content: center;
+        align-items: center;
+        border-radius: 25px;
+        padding: 15px 55px;
+        width: 250px;
+        height: 150px;
+        img {
+          width: 140px;
+          height: auto;
+        }
+      }
+    }
+    .text {
+      @include media-breakpoint-down(md) {
+        margin-top: 15px;
+        margin-bottom: 50px;
+      }
+      .title {
+        margin: 0 0 5px 0;
+        font-size: 1.5em;
+        font-weight: bold;
+        .highlight {
+          color: $accent1;
+        }
+      }
+      .content {
+        margin: 0;
+      }
+    }
+  }
+
+  .box-reddit {
+    //background-color: #57fbbc;
+  }
+  .box-link {
+    //background-color: #62d1fd;
+  }
+  .box-pepe {
+    //background-color: #ff817c;
+  }
+}