Updated colar to

https://color.adobe.com/%C5%9Eunun-kopyas%C4%B1-Flat-UI-color-theme-10379556
2018-01-09 09:49:58 +01:00
parent cc85dcedc6
commit a0116cd2cf
4 changed files with 59 additions and 41 deletions
--- a/index.html
+++ b/index.html
@@ -3,27 +3,6 @@
    <meta charset="UTF-8">
    <title>Getting Started</title>
    <link rel="stylesheet" href="style.css">
-    <style>
-        .line, .line1, .line2{
-            fill: none;
-            stroke: steelblue;
-            stroke-width: 2px;
-        }
-
-        .area{
-            fill: lightsteelblue;
-            -webkit-transition: opacity 2s;
-            -moz-transition: opacity 2s;
-            -ms-transition: opacity 2s;
-            -o-transition: opacity 2s;
-            transition: opacity 2s;
-            opacity: 1;
-        }
-
-        .hidden{
-            opacity: 0;
-        }
-    </style>
 </head>
 <body class="impress-not-supported">

--- a/style.css
+++ b/style.css
@@ -1,4 +1,21 @@
@import url("https://fonts.googleapis.com/css?family=Roboto");
+.line, .line1, .line2 {
+  fill: none;
+  stroke: #2980B9;
+  stroke-width: 2px; }
+
+.area {
+  fill: #3498DB;
+  -webkit-transition: opacity 2s;
+  -moz-transition: opacity 2s;
+  -ms-transition: opacity 2s;
+  -o-transition: opacity 2s;
+  transition: opacity 2s;
+  opacity: 1; }
+
+.hidden {
+  opacity: 0; }
+
 .fallback-message {
  font-family: sans-serif;
  line-height: 1.3;
@@ -18,8 +35,8 @@
 body {
  font-family: Roboto, sans-serif;
  min-height: 740px;
-  background: #aaccbb;
-  color: #ff4466; }
+  background: #ECF0F1;
+  color: #2C3E50; }

 .step {
  position: relative;
@@ -41,10 +58,11 @@ body {
 h1, h2, h3 {
  margin-bottom: 0.5em;
  margin-top: 0.5em;
-  text-align: center; }
+  text-align: center;
+  color: #E74C3C; }

 p {
-  color: black;
+  color: #2C3E50;
  text-align: center;
  margin: 0.7em; }

@@ -52,21 +70,16 @@ li {
  margin: 0.2em; }

 a {
-  color: inherit;
+  color: #E74C3C;
  text-decoration: none;
  padding: 0 0.1em;
-  background: rgba(200, 200, 100, 0.9);
  text-shadow: -1px 1px 2px rgba(100, 100, 100, 0.9);
-  border-radius: 0.2em;
-  border-bottom: 1px solid rgba(100, 100, 100, 0.4);
-  border-left: 1px solid rgba(100, 100, 100, 0.4);
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s; }
  a:hover, a:focus {
-    background: #c8c8ff;
    text-shadow: -1px px 2px rgba(100, 100, 100, 0.5); }

 blockquote, q {
@@ -109,6 +122,7 @@ img {
      padding-left: 1em;
      padding-right: 1em; }
  .impress-enabled div#impress-toolbar {
+    color: #ECF0F1;
    position: fixed;
    right: 1px;
    bottom: 1px;
--- a/style.css.map
+++ b/style.css.map
@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
 "sources": ["style.sass"],
 "names": [],
 "file": "style.css"
--- a/style.sass
+++ b/style.sass
@@ -1,7 +1,30 @@
 //@import url(https://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic|Cutive+Mono)

+$color_dark: #2C3E50
+$color_red: #E74C3C
+$color_white: #ECF0F1
+$color_blue: #3498DB
+$color_blue_2: #2980B9
+
@import url('https://fonts.googleapis.com/css?family=Roboto')

+.line, .line1, .line2
+  fill: none
+  stroke: $color_blue_2
+  stroke-width: 2px
+
+.area
+  fill: $color_blue
+  -webkit-transition: opacity 2s
+  -moz-transition: opacity 2s
+  -ms-transition: opacity 2s
+  -o-transition: opacity 2s
+  transition: opacity 2s
+  opacity: 1
+
+.hidden
+  opacity: 0
+
 .fallback-message
  font-family: sans-serif
  line-height: 1.3
@@ -24,8 +47,8 @@ body
  font-family: Roboto, sans-serif
  min-height: 740px

-  background: #aaccbb
-  color: #ff4466
+  background: $color_white
+  color: $color_dark

 .step
  position: relative
@@ -50,9 +73,10 @@ h1, h2, h3
  margin-bottom: 0.5em
  margin-top: 0.5em
  text-align: center
+  color: $color_red

 p
-  color: black
+  color: $color_dark
  text-align: center
  margin: 0.7em

@@ -60,14 +84,14 @@ li
  margin: 0.2em

 a
-  color: inherit
+  color: $color_red
  text-decoration: none
  padding: 0 0.1em
-  background: rgba(200, 200, 100, 0.9)
+  //background:
  text-shadow: -1px 1px 2px rgba(100, 100, 100, 0.9)
-  border-radius: 0.2em
-  border-bottom: 1px solid rgba(100, 100, 100, 0.4)
-  border-left: 1px solid rgba(100, 100, 100, 0.4)
+  //border-radius: 0.2em
+  //border-bottom: 1px solid rgba(100, 100, 100, 0.4)
+  //border-left: 1px solid rgba(100, 100, 100, 0.4)

  -webkit-transition: 0.5s
  -moz-transition: 0.5s
@@ -76,7 +100,7 @@ a
  transition: 0.5s

  &:hover, &:focus
-    background: rgba(200, 200, 2000, 1)
+    //background: rgba(200, 200, 2000, 1)
    text-shadow: -1px px 2px rgba(100, 100, 100, 0.5)

 blockquote, q
@@ -120,6 +144,7 @@ img
      padding-right: 1em

  & div#impress-toolbar
+    color: $color_white
    position: fixed
    right: 1px
    bottom: 1px