assets/css/screen.css

@@ -1,14 +1,3 @@
-: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");
@@ -50,16 +39,16 @@ body {
  font-family:"Courier New", Courier, monospace;
  font-size:2.0rem;
  line-height:1.6em;
- color: var(--text);
+ color:#B2B6BD;
- background: var(--main-background-color)
+ background:#2b303b
 }
 ::-moz-selection {
- color: var(--header-background-color);
+ color:#1c212b;
  background:#a3be8c;
  text-shadow:none
 }
 ::selection {
- color: var(--header-background-color);
+ color:#1c212b;
  background:#a3be8c;
  text-shadow:none
 }
@@ -76,22 +65,22 @@ h6 {
  font-weight:normal
 }
 h1 a {
- color: var(--post-title)
+ color:#739a99
 }
 h2 a {
- color: var(--post-title)
+ color:#739a99
 }
 h3 a {
- color: var(--post-title)
+ color:#739a99
 }
 h4 a {
- color: var(--post-title)
+ color:#739a99
 }
 h5 a {
- color: var(--post-title)
+ color:#739a99
 }
 h6 a {
- color: var(--post-title)
+ color:#739a99
 }
 h1 {
  font-size:5rem;
@@ -116,19 +105,17 @@ h6 {
  font-size:2rem
 }
 a {
- color: var(--link);
+ color:#bf6165;
  -webkit-transition:color ease 0.3s;
- transition:color ease 0.3s;
+ transition:color ease 0.3s
-  text-decoration: none;
 }
 a:hover {
-  text-decoration: underline;
+ color:#a3be8c
 }
 p,
 ul,
 ol {
- /* margin:1.6em 0 */
+ margin:1.6em 0
- margin:0 0 1.6em 0
 }
 ol ol,
 ul ul,
@@ -285,8 +272,8 @@ select,
 textarea {
  background:#4f586b;
  border:1px solid #424a5a;
- color: var(--text);
+ color:#B2B6BD;
- outline-color: var(--link)
+ outline-color:#bf6165
 }
 .site-nav ul {
  padding:0
@@ -313,9 +300,59 @@ textarea {
  position:relative;
  display:table;
  width:100%;
+ /* height:60%; */
  margin-bottom:5rem;
- color: var(--title);
+ /* text-align:center; */
- background: var(--header-background-color) no-repeat center center;
+ color:#a0add5;
+ 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);
@@ -338,11 +375,11 @@ textarea {
  hyphens:auto
 }
 .post-title {
- color: var(--post-title);
+ color:#739a99;
  margin:0
 }
 .post-title a {
- color: var(--post-title) !important;
+ color:#739a99 !important;
  text-decoration:none
 }
 .post-title a:hover {
@@ -357,10 +394,10 @@ textarea {
  display:inline-block;
  margin:0 0 5px 0;
  font-size:1.5rem;
- color: var(--date)
+ color:#846d8f
 }
 .post a {
- color: var(--date);
+ color:#846d8f;
  text-decoration:none
 }
 .post a:hover {
@@ -368,7 +405,7 @@ textarea {
  color:#9c8aa5
 }
 .post-header a {
- color: var(--link);
+ color:#bf6165;
  -webkit-transition:color ease 0.3s;
  transition:color ease 0.3s
 }
@@ -496,19 +533,19 @@ textarea {
  border-top:#1a1e27 1px solid;
  font-size:1.3rem;
  line-height:1.7em;
- color: var(--footer-link);
+ color:#BBC7CC;
  text-align:center;
- background: var(--header-background-color)
+ background:#1c212b
 }
 .site-footer a {
- color: var(--footer-link);
+ color:#BBC7CC;
- text-decoration:none;
+ text-decoration:underline
 }
 .site-footer a:hover {
- text-decoration:underline;
+ color:#50585D
 }
 .poweredby .icon-ghost {
- color: var(--link);
+ color:#bf6165;
  font-weight:700;
  text-decoration:none
 }
@@ -559,7 +596,7 @@ textarea {
  top:-33px
 }
 .subscribe:hover:before {
- color: var(--footer-link)
+ color:#50585D
 }
 .tooltip {
  opacity:0;
@@ -573,7 +610,7 @@ textarea {
  font-weight:bold;
  line-height:1em;
  text-align:center;
- background: var(--footer-link);
+ background:#50585D;
  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);
@@ -584,7 +621,7 @@ textarea {
  content:"";
  border-width:5px 5px 0 5px;
  border-style:solid;
- border-color: var(--footer-link) transparent;
+ border-color:#50585D transparent;
  display:block;
  position:absolute;
  bottom:-4px;
@@ -606,7 +643,7 @@ textarea {
  }
  .blog-title {
   font-size:4rem;
-  letter-spacing:-1px;
+  letter-spacing:-1px
  }
  .blog-description {
   font-size:1.7rem;
@@ -622,6 +659,9 @@ textarea {
  .post-template .post-header {
   padding:40px 0
  }
+ .post-header #blog-logo:before {
+  margin:40px auto
+ }
  h1 {
   font-size:4.8rem;
   text-indent:-2px
@@ -637,6 +677,16 @@ 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;
@@ -677,6 +727,9 @@ textarea {
  .post-template .post-header {
   padding:30px 0
  }
+ .post-header #blog-logo:before {
+  margin:30px auto
+ }
  .post-meta {
   font-size:1.3rem
  }