Set common colours using jekyll config and add more colour customization (#299)
This commit is contained in:
Jennings Zhang
Dean Attali
parent
a77474ac07
commit
aab7d05d3e
|
|
@ -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
|
||||
|
||||
|
|
|
|||
27
_config.yml
27
_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 --- #
|
||||
|
|
|
|||
61
css/main.css
61
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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue