Modification des couleurs et utilisation de variables
This commit is contained in:
parent
d048f300d0
commit
2a30e4e472
@ -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;
|
||||
background:#2b303b
|
||||
color: var(--text);
|
||||
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,12 +116,13 @@ 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,
|
||||
@ -273,8 +285,8 @@ select,
|
||||
textarea {
|
||||
background:#4f586b;
|
||||
border:1px solid #424a5a;
|
||||
color:#B2B6BD;
|
||||
outline-color:#bf6165
|
||||
color: var(--text);
|
||||
outline-color: var(--link)
|
||||
}
|
||||
.site-nav ul {
|
||||
padding:0
|
||||
@ -301,59 +313,9 @@ textarea {
|
||||
position:relative;
|
||||
display:table;
|
||||
width:100%;
|
||||
/* height:60%; */
|
||||
margin-bottom:5rem;
|
||||
/* text-align: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
|
||||
color: var(--title);
|
||||
background: var(--header-background-color) no-repeat center center;
|
||||
}
|
||||
#back {
|
||||
color:rgba(0,0,0,0.2);
|
||||
@ -376,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 {
|
||||
@ -395,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 {
|
||||
@ -406,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
|
||||
}
|
||||
@ -534,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;
|
||||
text-decoration:underline
|
||||
color: var(--footer-link);
|
||||
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
|
||||
}
|
||||
@ -597,7 +559,7 @@ textarea {
|
||||
top:-33px
|
||||
}
|
||||
.subscribe:hover:before {
|
||||
color:#50585D
|
||||
color: var(--footer-link)
|
||||
}
|
||||
.tooltip {
|
||||
opacity:0;
|
||||
@ -611,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);
|
||||
@ -622,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;
|
||||
@ -644,7 +606,7 @@ textarea {
|
||||
}
|
||||
.blog-title {
|
||||
font-size:4rem;
|
||||
letter-spacing:-1px
|
||||
letter-spacing:-1px;
|
||||
}
|
||||
.blog-description {
|
||||
font-size:1.7rem;
|
||||
@ -660,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
|
||||
@ -678,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;
|
||||
@ -728,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
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user