From aab7d05d3e0bc4b87db39739f17ecd100e803786 Mon Sep 17 00:00:00 2001 From: Jennings Zhang Date: Sun, 7 Jan 2018 17:12:21 -0500 Subject: [PATCH] Set common colours using jekyll config and add more colour customization (#299) --- CHANGELOG.md | 8 ++++--- _config.yml | 27 +++++++++++++++++------ css/main.css | 61 ++++++++++++++++++++++------------------------------ 3 files changed, 52 insertions(+), 44 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index afd5812..47d0bd6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,11 @@ -# CHANGELOG + # CHANGELOG This file lists all non-trivial changes to Beautiful Jekyll. I often make small changes to documentation, to the demo site, or to the general look-and-feel. These changes will not be listed here. Any other minor changes will also not be listed here. +**2018-01-06** More color personalization options (#297 and #298) (thanks @jennydaman) + **2018-01-05** Abstract the social networks logic (thanks @OCram85) **2018-01-03** Avatar image no longer causes a ghost click (thanks @alefi87) @@ -28,7 +30,7 @@ I often make small changes to documentation, to the demo site, or to the general **2016-12-25** Allow dynamic images on each blog post (#143) (thanks @bbritten) -**2016-12-15** Support `title-img` config param to have image in the navbar instead of text +**2016-12-15** Support `title-img` config param to have image in the navbar instead of text **2016-12-08** Add support for phone numbers in footer; fix #136 @@ -50,7 +52,7 @@ I often make small changes to documentation, to the demo site, or to the general **2016-02-07** Avatar is now conditional (thanks @hristoyankov) -**2016-02-02** Migrate (forced to...) to jekyll 3 +**2016-02-02** Migrate (forced to...) to jekyll 3 **2016-01-22** Make sure not to include JQuery twice, fixes #29 diff --git a/_config.yml b/_config.yml index cf4b443..7c75e62 100644 --- a/_config.yml +++ b/_config.yml @@ -40,14 +40,29 @@ avatar: "/img/avatar-icon.png" # --- Background colour/image options --- # -# By default, the navigation bar and footer have a light gray background, and the main page -# has a white background. You can specify a different background colour or a background image -# for the navigation bar, the main page, and the footer. -# navbar-col: "orange" +# Personalize the colors and theme of your website. +# values can be any HTML5/CSS3 color parameter. For example: +# pink https://www.w3schools.com/colors/colors_names.asp +# DeepSkyBlue +# #EEE https://www.w3schools.com/colors/colors_picker.asp +# #333399 +# rgb(66, 134, 244) +# linear-gradient(to top left, #333399 0%, #9966ff 100%) https://www.w3schools.com/colors/colors_gradient.asp + +navbar-col: "#F5F5F5" +navbar-text-col: "#404040" +navbar-children-col: "#f5f5f5" +page-col: "#FFF" +hover-col: "#0085a1" +link-col: "#008AFF" +footer-col: "#F5F5F5" +footer-text-col: "#777" +footer-link-col: "#404040" + +# Alternatively, the navbar, footer, and page can be set to use background images. + # navbar-img: "/img/bgimage.png" -# footer-col: "blue" # footer-img: "/img/bgimage.png" -# page-col: "#FF0000" # page-img: "/img/bgimage.png" # --- Footer options --- # diff --git a/css/main.css b/css/main.css index 08acba6..8a2c4f8 100644 --- a/css/main.css +++ b/css/main.css @@ -11,10 +11,7 @@ body { font-size: 18px; color: #404040; position: relative; - background: #FFF; - {% if site.page-col %} - background: {{ site.page-col }}; - {% endif %} + background-color: {{ site.page-col }}; {% if site.page-img %} background-image: url({{ site.page-img }}); background-attachment: fixed; @@ -24,20 +21,16 @@ p { line-height: 1.5; margin: 30px 0; } -p a { - /* text-decoration: underline */ - color: #008AFF; -} h1,h2,h3,h4,h5,h6 { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 800; } a { - color: #008AFF; + color: {{ site.link-col }}; } a:hover, a:focus { - color: #0085a1; + color: {{ site.hover-col }}; } blockquote { color: #808080; @@ -75,12 +68,12 @@ hr.small { ::-moz-selection { color: white; text-shadow: none; - background: #0085a1; + background-color: {{ site.hover-col }}; } ::selection { color: white; text-shadow: none; - background: #0085a1; + background-color: {{ site.hover-col }}; } img::selection { color: white; @@ -108,12 +101,9 @@ img { /* --- Navbar --- */ .navbar-custom { - background: #F5F5F5; + background-color: {{ site.navbar-col }}; border-bottom: 1px solid #EAEAEA; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - {% if site.navbar-col %} - background: {{ site.navbar-col }}; - {% endif %} {% if site.navbar-img %} background-image: url({{ site.navbar-img }}); background-attachment: fixed; @@ -129,14 +119,14 @@ img { .navbar-custom .navbar-brand, .navbar-custom .nav li a { font-weight: 800; - color: #404040; + color: {{ site.navbar-text-col }}; } .navbar-custom .navbar-brand:hover, .navbar-custom .navbar-brand:focus , .navbar-custom .nav li a:hover, .navbar-custom .nav li a:focus { - color: #0085a1; + color: {{ site.hover-col }}; } .navbar-custom .navbar-brand-logo { @@ -230,14 +220,14 @@ img { display: block; padding: 10px; padding-left: 30px; - background: #f5f5f5; + background-color: {{ site.navbar-children-col }}; text-decoration: none !important; border-width: 0 1px 1px 1px; font-weight: normal; } @media only screen and (max-width: 767px) { .navbar-custom .nav .navlinks-container.show-children { - background: #eee; + background-color: #eee; } .navbar-custom .nav .navlinks-container.show-children .navlinks-children { display: block; @@ -248,7 +238,7 @@ img { text-align: center; } .navbar-custom .nav .navlinks-container:hover { - background: #eee; + background: rgba(0, 0, 0, 0.1); } .navbar-custom .nav .navlinks-container:hover .navlinks-children { display: block; @@ -267,21 +257,22 @@ img { footer { padding: 30px 0; - background: #F5F5F5; border-top: 1px #EAEAEA solid; margin-top: 50px; font-size: 14px; - {% if site.footer-col %} - background: {{ site.footer-col }}; - {% endif %} + background-color: {{ site.footer-col }}; {% if site.footer-img %} background-image: url({{ site.footer-img }}); background-attachment: fixed; {% endif %} } +footer p.text-muted { + color: {{ site.footer-text-col }}; +} + footer a { - color: #404040; + color: {{site.footer-link-col}}; } footer .list-inline { @@ -335,7 +326,7 @@ footer .theme-by { .post-preview a:focus, .post-preview a:hover { text-decoration: none; - color: #0085a1; + color: {{ site.hover-col }}; } .post-preview .post-title { @@ -399,14 +390,14 @@ footer .theme-by { } .blog-tags a { - color: #008AFF; + color: {{ site.link-col }}; text-decoration: none; padding: 0px 5px; } .blog-tags a:hover { border-radius: 2px; - color: #008AFF; + color: {{ site.hover-col }}; background-color: #CCC; } @@ -539,7 +530,7 @@ footer .theme-by { .header-section.has-img .no-img { margin-top: 0; - background: #FCFCFC; + background-color: #FCFCFC; margin: 0 0 40px; padding: 20px 0; box-shadow: 0 0 5px #AAA; @@ -600,7 +591,7 @@ footer .theme-by { font-weight: 800; letter-spacing: 1px; padding: 10px 5px; - background: #FFF; + background-color: #FFF; border-radius: 0; color: #404040; } @@ -612,8 +603,8 @@ footer .theme-by { .pager li a:hover, .pager li a:focus { color: #FFF; - background: #0085a1; - border: 1px solid #0085a1; + border: 1px solid {{ site.hover-col }}; + background-color: {{ site.hover-col }}; } .pager { @@ -676,7 +667,7 @@ pre code { white-space: pre; } pre.highlight, .highlight > pre, td.code pre { - background: #FAFAFA; + background-color: #FAFAFA; background-image: linear-gradient(#F9F9F9 50%, #FDFDFD 50%); background-repeat: repeat; background-size: 3em 3em; @@ -750,5 +741,5 @@ td.gutter { } .navbar-default button.navbar-toggle[aria-expanded="true"] { - background-color: #ddd; + background-color: rgba(0, 0, 0, .2); }