From fb7b93f8065c3dd044b5adbd4b2e9a34c2975a7d Mon Sep 17 00:00:00 2001 From: Brenden Matthews Date: Wed, 5 Dec 2018 21:18:03 -0500 Subject: [PATCH] Jazz the colours. --- _layouts/default.html | 2 +- assets/css/style.scss | 398 +++++++++++++++++++++++------------------- index.md | 2 +- 3 files changed, 223 insertions(+), 179 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 8d4effb..f9ba23d 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -3,7 +3,7 @@ - + diff --git a/assets/css/style.scss b/assets/css/style.scss index d05a996..691ce7d 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -3,23 +3,45 @@ @import "{{ site.theme }}"; +$shade1: #FFF6E5; +$shade2: #FF7F66; +$shade3: #7ECEFD; +$shade4: #2185C5; +$shade5: #3E454C; + +$background: linear-gradient($shade4, #fff 110%) fixed; +$languages: $shade2; +$langages_a: $shade1; +$langages_a_hover: $shade3; +$body: $shade5; +$body_h: $shade4; +$header_h: $shade1; +$header_a: $shade1; +$header_background: $shade3; +$header_p: $shade3; +$header_ul_bg: $shade2; +$footer: $shade5; +$footer_a: $shade4; +$bg_text: rgba($shade1, 0.2); + + html { - background: #003459; - background: linear-gradient(#00477a, #007ea7) fixed; + background: $background; } .dropbtn { - background-color: #5198DF; - color: white; - padding: 4px; - font-size: 13px; - border: none; - width: 100%; - cursor: pointer; + background-color: $shade3; + color: white; + padding: 4px; + font-size: 13px; + border: none; + width: 100%; + cursor: pointer; } -.dropbtn:hover, .dropbtn:focus { - background-color: #f8f8f8; +.dropbtn:hover, +.dropbtn:focus { + backgound-color: $shade2; } .dropdown-content { @@ -32,7 +54,7 @@ html { .languages { overflow: hidden; - background-color: #333; + background-color: $languages; position: absolute; top: 0; right: 0; @@ -46,7 +68,7 @@ html { .languages a { float: left; display: block; - color: #f2f2f2; + color: $langages_a; text-align: center; text-decoration: none; width: 100%; @@ -55,221 +77,239 @@ html { } .languages a:hover { - background: #ddd; + background: $langages_a_hover; color: black; } body { - padding:40px 0; - margin:0; + padding: 40px 0; + margin: 0; font-weight: 400; font-size: 14px/1.5; - font-family: 'Lato', sans-serif; - color: #003459; + font-family: 'Noto Sans TC', sans-serif; + color: $body; } .wrapper { - width:750px; - margin:0 auto; - background: #f7f7f7; + width: 800px; + margin: 0 auto; border-radius: 9px; + background: rgba(#fff, 0.7); box-shadow: rgba(#000, 0.1) 0 0 0 1px, rgba(#000, 0.35) 0 3px 10px; } #background { position: fixed; - z-index:0; - display:block; - width: 750px; + z-index: 0; + display: block; + width: 800px; top: 50%; transform: translateY(-50%); - color:yellow; + color: yellow; } #bg-text { - color: #ececec; + color: $bg_text; text-align: center; - font-family: 'Bowlby One SC', cursive; - font-weight: 600; + font-family: 'Lora', serif; + font-weight: 700; font-size: 100px; } -header, section, footer { - display:block; +header, +section, +footer { + display: block; } a { - color:#e8f1f2; - text-decoration:none; + color: $header_a; + text-decoration: none; } p { - margin:0 0 20px; - padding:0; + margin: 0 0 20px; + padding: 0; } strong { color: #00171f; - font-weight:700; + font-weight: 700; } header { border-radius: 9px 9px 0 0; - background: #007ea7; - background: linear-gradient(#080808, #007ea7 150px); - position:relative; - padding:20px 20px; - border-bottom:1px solid #B2D2E1; - - h1, h2 { - margin:0; - padding:0; - font-family: 'Unica One', cursive; + background: $header_background; + position: relative; + padding: 20px 20px; + border-bottom: 1px solid #B2D2E1; + + h1, + h2 { + margin: 0; + padding: 0; + font-family: 'Lora', serif; font-weight: 700; - font-size:48px; - line-height:1.2; - color: #007ea7; - text-shadow:rgba(#121212, 0.7) 0 1px 0; + font-size: 50px; + line-height: 1.2; + color: $header_h; + text-shadow: rgba(#121212, 0.7) 2px 2px 9px; } &.without-description h1 { - margin:10px 0; + margin: 10px 0; } p { - margin:0; - color:#61778B; - width:300px; - font-size:13px; - font-weight:700; + margin: 0; + color: $header_p; + width: 300px; + font-size: 13px; + font-weight: 700; + text-shadow: rgba(#121212, 0.7) 1px 1px 2px; &.view { - display:none; + display: none; text-shadow: none; - -webkit-font-smoothing:antialiased; + -webkit-font-smoothing: antialiased; a { color: #e8e8e8; } small { - font-weight:400; + font-weight: 400; } } } ul { - margin:0; - padding:0; - list-style:none; - position:absolute; - z-index:1; - right:20px; + margin: 0; + padding: 0; + list-style: none; + position: absolute; + z-index: 1; + right: 20px; top: 30px; - height:38px; - padding:1px 0; - background:#5198DF; - background: linear_gradient(#77B9FB, #3782CD); - border-radius:5px; + height: 38px; + padding: 1px 0; + background: $header_ul_bg; + border-radius: 5px; box-shadow: inset rgba(#fff, 0.45) 0 1px 0, inset rgba(#000, 0.2) 0 -1px 0; - width:auto; + width: auto; &:before { - content:''; - position:absolute; - z-index:-1; - left:-5px; - top:-4px; - right:-5px; - bottom:-6px; - background:rgba(#000, 0.1); + content: ''; + position: absolute; + z-index: -1; + left: -5px; + top: -4px; + right: -5px; + bottom: -6px; + background: rgba(#000, 0.1); border-radius: 9px; box-shadow: rgba(#000, 0.2) 0 -1px 0, inset rgba(#fff, 0.7) 0 -1px 0; } li { - width:79px; - float:left; - border-right:1px solid #3A7CBE; - height:38px; + width: 79px; + float: left; + border-right: 1px solid #3A7CBE; + height: 38px; &.single { - border:none; + border: none; } } - li + li { - width:78px; - border-left:1px solid #8BBEF3; + li+li { + width: 78px; + border-left: 1px solid #8BBEF3; } - li + li + li { - border-right:none; - width:79px; + li+li+li { + border-right: none; + width: 79px; } a { - line-height:1; - font-size:11px; - color:#fff; - color:rgba(#fff, 0.8); - display:block; - text-align:center; - font-weight:400; - padding-top:6px; - height:40px; - text-shadow:rgba(#000, 0.4) 0 -1px 0; + line-height: 1; + font-size: 11px; + color: #fff; + color: rgba(#fff, 0.8); + display: block; + text-align: center; + font-weight: 400; + padding-top: 6px; + height: 40px; + text-shadow: rgba(#000, 0.4) 0 -1px 0; strong { - font-size:14px; - display:block; - color:#fff; - -webkit-font-smoothing:antialiased; + font-size: 14px; + display: block; + color: #fff; + -webkit-font-smoothing: antialiased; } } } } section { - padding:17px 35px; - font-size:18px; - border-top:1px solid #fff; + padding: 17px 35px; + font-size: 18px; + border-top: 1px solid #fff; border-radius: 0 0 9px 9px; - position:relative; + position: relative; } -h1, h2, h3, h4, h5, h6 { - font-family: 'Unica One', cursive; - color: #007ea7; - padding:0; - margin:0 0 20px; - line-height:1.2; +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'Lora', serif; + color: $body_h; + padding: 0; + margin: 0 0 20px; + line-height: 1.2; } -p, ul, ol, table, pre, dl { - margin:0 0 20px; +p, +ul, +ol, +table, +pre, +dl { + margin: 0 0 20px; } -h1, h2, h3 { - line-height:1.1; +h1, +h2, +h3 { + line-height: 1.1; } -h1, h2 { - font-size:28px; - text-shadow:rgba(#090909, 0.7) 0 1px 0; +h1, +h2 { + font-size: 28px; + text-shadow: rgba($shade5, 0.7) 0 1px 0; } -h3, h4, h5, h6 { - color:#494949; +h3, +h4, +h5, +h6 { + color: $shade3; } blockquote { - margin:0 -20px 20px; - padding:15px 20px 1px 40px; - font-style:italic; - background:#ccc; - background:rgba(#000, 0.06); - color:#222; + margin: 0 -20px 20px; + padding: 15px 20px 1px 40px; + font-style: italic; + background: #ccc; + background: rgba(#000, 0.06); + color: #222; } img { @@ -278,85 +318,88 @@ img { margin: 10px 10px 10px 10px; } -code, pre { - font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal; - color:#333; - font-size:12px; - overflow-x:auto; +code, +pre { + font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal; + color: #333; + font-size: 12px; + overflow-x: auto; } pre { - padding:20px; + padding: 20px; background: #3A3C42; - color:#f8f8f2; - margin:0 -20px 20px; + color: #f8f8f2; + margin: 0 -20px 20px; code { - color:#f8f8f2; + color: #f8f8f2; } li & { - margin-left:-60px; - padding-left:60px; + margin-left: -60px; + padding-left: 60px; } } table { - width:100%; - border-collapse:collapse; + width: 100%; + border-collapse: collapse; } -th, td { - text-align:left; - padding:5px 10px; - border-bottom:1px solid #aaa; +th, +td { + text-align: left; + padding: 5px 10px; + border-bottom: 1px solid #aaa; } dt { - color:#222; - font-weight:700; + color: #222; + font-weight: 700; } th { - color:#222; + color: #222; } small { - font-size:11px; + font-size: 11px; } hr { - border:0; - background:#aaa; - height:1px; - margin:0 0 20px; + border: 0; + background: #aaa; + height: 1px; + margin: 0 0 20px; } footer { - width:640px; - margin:0 auto; - padding:20px 0 0; - color:#ccc; - overflow:hidden; + width: 700px; + margin: 0 auto; + padding: 20px 0 0; + color: $footer; + overflow: hidden; a { - color:#fff; - font-weight:bold; + color: $footer_a; + font-weight: bold; } p { - float:left; + float: left; font-size: 14px; } - p + p { - float:right; + p+p { + float: right; } } -@media print, screen and (max-width: 780px) { +@media print, +screen and (max-width: 780px) { body { - padding:0; + padding: 0; } header { @@ -366,7 +409,7 @@ footer { .wrapper { border-radius: 0px; box-shadow: none; - width:100%; + width: 100%; } #background { @@ -379,37 +422,38 @@ footer { footer { border-radius: 0px; - padding:20px; - width:auto; + padding: 20px; + width: auto; p { - float:none; - margin:0; + float: none; + margin: 0; } - p + p { - float:none; + p+p { + float: none; } } } -@media print, screen and (max-width:650px) { +@media print, +screen and (max-width:650px) { header ul { - display:none; + display: none; } header p.view { - display:block; + display: block; } header p { - width:100%; + width: 100%; } } @media print { header p.view a small:before { - content:'at https://github.com/'; + content: 'at https://github.com/'; } } diff --git a/index.md b/index.md index 2ddd223..c16395d 100644 --- a/index.md +++ b/index.md @@ -33,7 +33,7 @@ keeping. **A HODLer always controls their own private keys**. Should you decide to spend your coins, find vendors who accept your coins directly rather than selling or using fiat-based bridges (such as prepaid Visa -cards). By spending your coins, you fuel the ecosystem of fellow HODLers. Do +cards). By spending your coins, you fuel the ecosystem of fellow HODLers. Do not become a spendthrift either, or you will soon find yourself without coin. ## Rule 6: A True HODLer Spreads the Good Word