index update

2018-03-10 03:43:57 +01:00 · 2018-03-10 03:43:57 +01:00 · 665a66294a
commit 665a66294a
parent 56d70fd9e8
3 changed files with 299 additions and 24 deletions
--- a/assets/master.css
+++ b/assets/master.css
@ -1,17 +1,64 @@
-.form{
+@import "north.css";

-}
-
-.submit{
-  
-}
-
-.bg{
-  background-color: gray;
+html, body {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
 }

 .center{
-  margin:auto;
-  padding: 10px;
-  width: 50%;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  padding: 0;
+  max-width: 980px;
+}
+
+.form {
+    padding: 20px;
+}
+
+.form textarea {
+  background-color: var(--nord3);
+  border: 1px solid var(--nord6);
+  border-radius: 5px;
+  color: var(--nord6);
+  resize: none;
+
+
+}
+
+.form-item {
+    display: block;
+    width: 100%;
+    margin: 15px 0;
+}
+
+.file-input{
+  position: relative;
+
+}
+.file-input span {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.file-input input[type=file]{
+  z-index: 2;
+  opacity: 0;
+}
+
+.submit{
+  display: block;
+  background-color: var(--nord3);
+  border: 1px transparent solid;
+  color: var(--nord14);
+  border-radius: 5px;
+  font-size: 2rem;
+}
+
+.bg{
+  background-color: var(--nord1);
 }
--- a/assets/north.css
+++ b/assets/north.css
@ -0,0 +1,233 @@
+/*
+ * Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (c) 2016-present Sven Greb <code@svengreb.de>
+ *
+ * Project:    Nord
+ * Version:    0.2.0
+ * Repository: https://github.com/arcticicestudio/nord
+ * License:    MIT
+ * References:
+ *   https://www.w3.org/TR/css-variables
+ *   https://www.w3.org/TR/selectors/#root-pseudo
+ *   https://drafts.csswg.org/css-variables
+ *   https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
+ *   http://warpspire.com/kss
+ *   https://github.com/kss-node/kss-node
+ */
+
+/*
+An arctic, north-bluish color palette.
+Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax
+highlighting and UI.
+It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful
+ambiance.
+
+Styleguide Nord
+*/
+
+:root {
+  /*
+  Base component color of "Polar Night".
+
+  Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.
+
+  Markup:
+  <div style="background-color:#2e3440; width=60; height=60"></div>
+
+  Styleguide Nord - Polar Night
+  */
+  --nord0: #2e3440;
+
+  /*
+  Lighter shade color of the base component color.
+
+  Used as a lighter background color for UI elements like status bars.
+
+  Markup:
+  <div style="background-color:#3b4252; width=60; height=60"></div>
+
+  Styleguide Nord - Polar Night
+  */
+  --nord1: #3b4252;
+
+  /*
+  Lighter shade color of the base component color.
+
+  Used as line highlighting in the editor.
+  In the UI scope it may be used as selection- and highlight color.
+
+  Markup:
+  <div style="background-color:#434c5e; width=60; height=60"></div>
+
+  Styleguide Nord - Polar Night
+  */
+  --nord2: #434c5e;
+
+  /*
+  Lighter shade color of the base component color.
+
+  Used for comments, invisibles, indent- and wrap guide marker.
+  In the UI scope used as pseudoclass color for disabled elements.
+
+  Markup:
+  <div style="background-color:#4c566a; width=60; height=60"></div>
+
+  Styleguide Nord - Polar Night
+  */
+  --nord3: #4c566a;
+
+  /*
+  Base component color of "Snow Storm".
+
+  Main color for text, variables, constants and attributes.
+  In the UI scope used as semi-light background depending on the theme shading design.
+
+  Markup:
+  <div style="background-color:#d8dee9; width=60; height=60"></div>
+
+  Styleguide Nord - Snow Storm
+  */
+  --nord4: #d8dee9;
+
+  /*
+  Lighter shade color of the base component color.
+
+  Used as a lighter background color for UI elements like status bars.
+  Used as semi-light background depending on the theme shading design.
+
+  Markup:
+  <div style="background-color:#e5e9f0; width=60; height=60"></div>
+
+  Styleguide Nord - Snow Storm
+  */
+  --nord5: #e5e9f0;
+
+  /*
+  Lighter shade color of the base component color.
+
+  Used for punctuations, carets and structuring characters like curly- and square brackets.
+  In the UI scope used as background, selection- and highlight color depending on the theme shading design.
+
+  Markup:
+  <div style="background-color:#eceff4; width=60; height=60"></div>
+
+  Styleguide Nord - Snow Storm
+  */
+  --nord6: #eceff4;
+
+  /*
+  Bluish core color.
+
+  Used for classes, types and documentation tags.
+
+  Markup:
+  <div style="background-color:#8fbcbb; width=60; height=60"></div>
+
+  Styleguide Nord - Frost
+  */
+  --nord7: #8fbcbb;
+
+  /*
+  Bluish core accent color.
+
+  Represents the accent color of the color palette.
+  Main color for primary UI elements and methods/functions.
+
+  Can be used for
+    - Markup quotes
+    - Markup link URLs
+
+  Markup:
+  <div style="background-color:#88c0d0; width=60; height=60"></div>
+
+  Styleguide Nord - Frost
+  */
+  --nord8: #88c0d0;
+
+  /*
+  Bluish core color.
+
+  Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
+  punctuations like (semi)colons,commas and braces.
+
+  Markup:
+  <div style="background-color:#81a1c1; width=60; height=60"></div>
+
+  Styleguide Nord - Frost
+  */
+  --nord9: #81a1c1;
+
+  /*
+  Bluish core color.
+
+  Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).
+
+  Markup:
+  <div style="background-color:#5e81ac; width=60; height=60"></div>
+
+  Styleguide Nord - Frost
+  */
+  --nord10: #5e81ac;
+
+  /*
+  Colorful component color.
+
+  Used for errors, git/diff deletion and linter marker.
+
+  Markup:
+  <div style="background-color:#bf616a; width=60; height=60"></div>
+
+  Styleguide Nord - Aurora
+  */
+  --nord11: #bf616a;
+
+  /*
+  Colorful component color.
+
+  Used for annotations.
+
+  Markup:
+  <div style="background-color:#d08770; width=60; height=60"></div>
+
+  Styleguide Nord - Aurora
+  */
+  --nord12: #d08770;
+
+  /*
+  Colorful component color.
+
+  Used for escape characters, regular expressions and markup entities.
+  In the UI scope used for warnings and git/diff renamings.
+
+  Markup:
+  <div style="background-color:#ebcb8b; width=60; height=60"></div>
+
+  Styleguide Nord - Aurora
+  */
+  --nord13: #ebcb8b;
+
+  /*
+  Colorful component color.
+
+  Main color for strings and attribute values.
+  In the UI scope used for git/diff additions and success visualizations.
+
+  Markup:
+  <div style="background-color:#a3be8c; width=60; height=60"></div>
+
+  Styleguide Nord - Aurora
+  */
+  --nord14: #a3be8c;
+
+  /*
+  Colorful component color.
+
+  Used for numbers.
+
+  Markup:
+  <div style="background-color:#b48ead; width=60; height=60"></div>
+
+  Styleguide Nord - Aurora
+  */
+  --nord15: #b48ead;
+}
--- a/index.html
+++ b/index.html
@ -10,23 +10,18 @@
 </head>

 <body class="bg">
+
  <div class="center">
    <form class="form" enctype="multipart/form-data" action="/image" method="post">
-      <div class="">
-        <textarea class="text" name="text" cols="30" rows="3"></textarea>
-      </div>
-      <div class="">
-        <input class="" name="image" type="file">
-      </div>
-
-      <div class="">
-        <input class="" type="submit" value="submit">
-      </div>
-
+        <textarea class="form-item" name="text" cols="30" rows="3"></textarea>
+        <div class="file-input">
+          <input class="form-item" name="image" type="file">
+          <span>file input</span>
+        </div>
+        <input class="form-item submit " type="submit" value="submit">
    </form>
  </div>

-
 </body>

 </html>