base colors refactor to variables

remotes/1726908188925722499/search
pepinno 4 years ago
parent adbb7a1551
commit 0f1ca42f76

@ -1,5 +1,8 @@
@import "minireset"; @import "minireset";
@import "fonts"; @import "fonts";
$light-blue: #D8DEE9;
$rambotron-blue: #5E81AC;
$xdark-blue: #2E3440;
a { a {
text-decoration: none; text-decoration: none;
@ -18,7 +21,7 @@ body {
header { header {
padding: 4rem 0; padding: 4rem 0;
border-top: 8px solid; border-top: 8px solid;
border-image: linear-gradient(to right, #8FBCBB 25%, #88C0D0 25%, #88C0D0 50%, #81A1C1 50%, #81A1C1 75%, #5E81AC 75%, #5E81AC 100%) 1; border-image: linear-gradient(to right, #8FBCBB 25%, #88C0D0 25%, #88C0D0 50%, #81A1C1 50%, #81A1C1 75%, $rambotron-blue 75%, $rambotron-blue 100%) 1;
&.compact { &.compact {
padding: 1.3rem 0; padding: 1.3rem 0;
@ -119,7 +122,7 @@ header {
font-family: icomoon; font-family: icomoon;
font-size: .8em; font-size: .8em;
margin-left: .5em; margin-left: .5em;
color: #5E81AC; color: $rambotron-blue;
} }
&>ul>li:hover>a::after { color: inherit } &>ul>li:hover>a::after { color: inherit }
@ -150,7 +153,7 @@ main {
p, ul { line-height: 1.5 } p, ul { line-height: 1.5 }
a { a {
font-weight: bold; font-weight: bold;
color: #5E81AC; color: $rambotron-blue;
} }
a:hover { text-decoration: underline } a:hover { text-decoration: underline }
@ -183,7 +186,7 @@ main {
max-width: 50em; max-width: 50em;
height: 100%; height: 100%;
padding: 1em; padding: 1em;
border-top: 5px solid #5E81AC; border-top: 5px solid $rambotron-blue;
font-size: .85em; font-size: .85em;
color: #2E3440; color: #2E3440;
@ -237,7 +240,7 @@ main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.role { color: #81A1C1 } .role { color: #81a1c1 }
.other { .other {
display: flex; display: flex;
@ -318,7 +321,7 @@ main {
align-items: flex-start; align-items: flex-start;
text-align: left; text-align: left;
padding-top: 2em; padding-top: 2em;
border-top: 5px solid #D8DEE9; border-top: 5px solid $light-blue;
img { img {
width: 8rem; width: 8rem;
@ -352,7 +355,7 @@ main {
margin-top: 2rem; margin-top: 2rem;
outline: none; outline: none;
border: 0; border: 0;
border-top: 5px solid #D8DEE9; border-top: 5px solid $light-blue;
background: none; background: none;
text-transform: uppercase; text-transform: uppercase;
font-size: .9rem; font-size: .9rem;
@ -381,7 +384,7 @@ footer {
p { p {
font-size: .9em; font-size: .9em;
color: #D8DEE9; color: $light-blue;
} }
p:last-child { margin-top: .5em } p:last-child { margin-top: .5em }
@ -410,7 +413,7 @@ div.rambotron {
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #ECEFF4; color: #ECEFF4;
background: linear-gradient(rgba(94, 129, 172, 0.95), rgba(94, 129, 172, 0.95)), url("rambotron.jpg") center center no-repeat; background: linear-gradient(rgba($rambotron-blue, 0.95), rgba($rambotron-blue, 0.95)), url("rambotron.jpg") center center no-repeat;
background-size: cover; background-size: cover;
h1 { h1 {
@ -448,7 +451,7 @@ div.rambotron {
} }
div.breadcrumbs { div.breadcrumbs {
border-top: 1px solid #D8DEE9; border-top: 1px solid $light-blue;
font-size: .9em; font-size: .9em;
.wrap { .wrap {
@ -482,7 +485,7 @@ div.breadcrumbs {
content: "\203A"; content: "\203A";
margin: 0 1em; margin: 0 1em;
font-weight: bold; font-weight: bold;
color: #D8DEE9; color: $light-blue;
} }
&:last-child { font-weight: bold } &:last-child { font-weight: bold }
@ -495,13 +498,13 @@ table {
th { th {
padding: 1em; padding: 1em;
text-align: left; text-align: left;
background-color: #D8DEE9; background-color: $light-blue;
} }
td { td {
padding: .25em 1em; padding: .25em 1em;
border-bottom: 1px solid #D8DEE9; border-bottom: 1px solid $light-blue;
} }
border: 1px solid #D8DEE9; border: 1px solid $light-blue;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }

Loading…
Cancel
Save