Modification des couleurs et utilisation de variables

assets/css/screen.css

@@ -1,3 +1,14 @@
+:root {
+  --header-background-color: #1b2b34eb;
+  --main-background-color: #343D46;
+  --text: #d8dee9fd;
+  --link: #6699CC;
+  --footer-link: #50585D;
+  --title: #f99157;
+  --post-title: #a7adba;
+  --date: #c594c5;
+}
+
 @font-face {
  font-family:'icons';
  src:url("../fonts/icons.eot");
@@ -39,16 +50,16 @@ body {
  font-family:"Courier New", Courier, monospace;
  font-size:2.0rem;
  line-height:1.6em;
- color:#B2B6BD;
+ color: var(--text);
- background:#2b303b
+ background: var(--main-background-color)
 }
 ::-moz-selection {
- color:#1c212b;
+ color: var(--header-background-color);
  background:#a3be8c;
  text-shadow:none
 }
 ::selection {
- color:#1c212b;
+ color: var(--header-background-color);
  background:#a3be8c;
  text-shadow:none
 }
@@ -65,22 +76,22 @@ h6 {
  font-weight:normal
 }
 h1 a {
- color:#739a99
+ color: var(--post-title)
 }
 h2 a {
- color:#739a99
+ color: var(--post-title)
 }
 h3 a {
- color:#739a99
+ color: var(--post-title)
 }
 h4 a {
- color:#739a99
+ color: var(--post-title)
 }
 h5 a {
- color:#739a99
+ color: var(--post-title)
 }
 h6 a {
- color:#739a99
+ color: var(--post-title)
 }
 h1 {
  font-size:5rem;
@@ -105,17 +116,19 @@ h6 {
  font-size:2rem
 }
 a {
- color:#bf6165;
+ color: var(--link);
  -webkit-transition:color ease 0.3s;
- transition:color ease 0.3s
+ transition:color ease 0.3s;
+  text-decoration: none;
 }
 a:hover {
- color:#a3be8c
+  text-decoration: underline;
 }
 p,
 ul,
 ol {
- margin:1.6em 0
+ /* margin:1.6em 0 */
+ margin:0 0 1.6em 0
 }
 ol ol,
 ul ul,
@@ -272,8 +285,8 @@ select,
 textarea {
  background:#4f586b;
  border:1px solid #424a5a;
- color:#B2B6BD;
+ color: var(--text);
- outline-color:#bf6165
+ outline-color: var(--link)
 }
 .site-nav ul {
  padding:0
@@ -300,59 +313,9 @@ textarea {
  position:relative;
  display:table;
  width:100%;
- /* height:60%; */
  margin-bottom:5rem;
- /* text-align:center; */
+ color: var(--title);
- color:#a0add5;
+ background: var(--header-background-color) no-repeat center center;
- background:#1c212b no-repeat center center;
- background-size:cover
-}
-#blog-logo {
- width:100px;
- border-radius:50%;
- overflow:hidden;
- display:block;
- margin:0 auto;
- position:relative
-}
-#blog-logo:before {
- width:100px;
- height:100px;
- border-radius:50%;
- overflow:hidden;
- display:block;
- margin:0 auto;
- content:"";
- position:absolute;
- top:0;
- bottom:0;
- left:0;
- right:0;
- background:none;
- -webkit-transition:background .3s linear;
- transition:background .3s linear
-}
-#blog-logo:hover:before {
- background:rgba(204,31,39,0.5)
-}
-#blog-logo img {
- display:block;
- max-height:100px;
- width:auto;
- line-height:0;
- border-radius:50%
-}
-#blog-logo-title {
- margin:10px 0 10px 0;
- font-size:5rem;
- letter-spacing:-1px
-}
-#blog-logo-description {
- margin:0;
- font-size:1.8rem;
- line-height:1.5em;
- font-weight:300;
- letter-spacing:0
 }
 #back {
  color:rgba(0,0,0,0.2);
@@ -375,11 +338,11 @@ textarea {
  hyphens:auto
 }
 .post-title {
- color:#739a99;
+ color: var(--post-title);
  margin:0
 }
 .post-title a {
- color:#739a99 !important;
+ color: var(--post-title) !important;
  text-decoration:none
 }
 .post-title a:hover {
@@ -394,10 +357,10 @@ textarea {
  display:inline-block;
  margin:0 0 5px 0;
  font-size:1.5rem;
- color:#846d8f
+ color: var(--date)
 }
 .post a {
- color:#846d8f;
+ color: var(--date);
  text-decoration:none
 }
 .post a:hover {
@@ -405,7 +368,7 @@ textarea {
  color:#9c8aa5
 }
 .post-header a {
- color:#bf6165;
+ color: var(--link);
  -webkit-transition:color ease 0.3s;
  transition:color ease 0.3s
 }
@@ -533,19 +496,19 @@ textarea {
  border-top:#1a1e27 1px solid;
  font-size:1.3rem;
  line-height:1.7em;
- color:#BBC7CC;
+ color: var(--footer-link);
  text-align:center;
- background:#1c212b
+ background: var(--header-background-color)
 }
 .site-footer a {
- color:#BBC7CC;
+ color: var(--footer-link);
- text-decoration:underline
+ text-decoration:none;
 }
 .site-footer a:hover {
- color:#50585D
+ text-decoration:underline;
 }
 .poweredby .icon-ghost {
- color:#bf6165;
+ color: var(--link);
  font-weight:700;
  text-decoration:none
 }
@@ -596,7 +559,7 @@ textarea {
  top:-33px
 }
 .subscribe:hover:before {
- color:#50585D
+ color: var(--footer-link)
 }
 .tooltip {
  opacity:0;
@@ -610,7 +573,7 @@ textarea {
  font-weight:bold;
  line-height:1em;
  text-align:center;
- background:#50585D;
+ background: var(--footer-link);
  border-radius:20px;
  -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.1);
  box-shadow:0 1px 4px rgba(0,0,0,0.1);
@@ -621,7 +584,7 @@ textarea {
  content:"";
  border-width:5px 5px 0 5px;
  border-style:solid;
- border-color:#50585D transparent;
+ border-color: var(--footer-link) transparent;
  display:block;
  position:absolute;
  bottom:-4px;
@@ -643,7 +606,7 @@ textarea {
  }
  .blog-title {
   font-size:4rem;
-  letter-spacing:-1px
+  letter-spacing:-1px;
  }
  .blog-description {
   font-size:1.7rem;
@@ -659,9 +622,6 @@ textarea {
  .post-template .post-header {
   padding:40px 0
  }
- .post-header #blog-logo:before {
-  margin:40px auto
- }
  h1 {
   font-size:4.8rem;
   text-indent:-2px
@@ -677,16 +637,6 @@ textarea {
  }
 }
 @media only screen and (max-width: 500px) {
- #blog-logo img {
-  max-height:80px
- }
- #blog-logo {
-  width:80px
- }
- #blog-logo:before {
-  width:80px;
-  height:80px
- }
  .inner,
  .pagination {
   width:auto;
@@ -727,9 +677,6 @@ textarea {
  .post-template .post-header {
   padding:30px 0
  }
- .post-header #blog-logo:before {
-  margin:30px auto
- }
  .post-meta {
   font-size:1.3rem
  }