From 665a66294a2cb2b975c6caa0332e1a073ef0586e Mon Sep 17 00:00:00 2001 From: Peppuz Date: Sat, 10 Mar 2018 03:43:57 +0100 Subject: [PATCH] index update --- assets/master.css | 71 +++++++++++--- assets/north.css | 233 ++++++++++++++++++++++++++++++++++++++++++++++ index.html | 19 ++-- 3 files changed, 299 insertions(+), 24 deletions(-) create mode 100644 assets/north.css diff --git a/assets/master.css b/assets/master.css index 01734df..72c9aeb 100644 --- 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); } diff --git a/assets/north.css b/assets/north.css new file mode 100644 index 0000000..178f431 --- /dev/null +++ b/assets/north.css @@ -0,0 +1,233 @@ +/* + * Copyright (c) 2016-present Arctic Ice Studio + * Copyright (c) 2016-present Sven Greb + * + * 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: +
+ + 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: +
+ + 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: +
+ + 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: +
+ + 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: +
+ + 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: +
+ + 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: +
+ + Styleguide Nord - Snow Storm + */ + --nord6: #eceff4; + + /* + Bluish core color. + + Used for classes, types and documentation tags. + + Markup: +
+ + 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: +
+ + 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: +
+ + Styleguide Nord - Frost + */ + --nord9: #81a1c1; + + /* + Bluish core color. + + Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`). + + Markup: +
+ + Styleguide Nord - Frost + */ + --nord10: #5e81ac; + + /* + Colorful component color. + + Used for errors, git/diff deletion and linter marker. + + Markup: +
+ + Styleguide Nord - Aurora + */ + --nord11: #bf616a; + + /* + Colorful component color. + + Used for annotations. + + Markup: +
+ + 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: +
+ + 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: +
+ + Styleguide Nord - Aurora + */ + --nord14: #a3be8c; + + /* + Colorful component color. + + Used for numbers. + + Markup: +
+ + Styleguide Nord - Aurora + */ + --nord15: #b48ead; +} diff --git a/index.html b/index.html index eb511c9..950ea47 100644 --- a/index.html +++ b/index.html @@ -10,23 +10,18 @@ +
-
- -
-
- -
- -
- -
- + +
+ + file input +
+
-