Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Set colors using Jekyll variables (without conditionals) in main.css #299

Merged
merged 9 commits into from
Jan 7, 2018
Merged

Set colors using Jekyll variables (without conditionals) in main.css #299

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
203601d
Darken .navbar-toggle
jennydaman Jan 6, 2018
8abdcd8
Colors
jennydaman Jan 6, 2018
7d89d31
Update CHANGELOG.md
jennydaman Jan 7, 2018
e2fbe19
Specify default colors in _config.yaml
jennydaman Jan 7, 2018
73578b6
Use jekyll vars unconditionally in main.css
jennydaman Jan 7, 2018
b226b9c
Add link col
jennydaman Jan 7, 2018
f715c39
Update _config.yaml, add footer color vars
jennydaman Jan 7, 2018
afd4859
Remove outline from navlinks-container
jennydaman Jan 7, 2018
8007fb9
Remove background-color from .navlinks-container:hover
jennydaman Jan 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Colors
  • Loading branch information
@jennydaman
jennydaman committed Jan 6, 2018
commit 8abdcd89e7d2d2b6374992679bd259450ccb8274
5 changes: 4 additions & 1 deletion _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,15 @@ avatar: "/img/avatar-icon.png"
# 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"
# navbar-col: "linear-gradient(to top left, #333399 0%, #9966ff 100%);" # go crazy :)
# navbar-text-col: "#EEEEEE"
# navbar-children-col: "#333399"
# navbar-img: "/img/bgimage.png"
# footer-col: "blue"
# footer-img: "/img/bgimage.png"
# page-col: "#FF0000"
# page-img: "/img/bgimage.png"
# hover-col: "pink"

# --- Footer options --- #

Expand Down
40 changes: 36 additions & 4 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,6 @@ 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;
Expand All @@ -38,6 +34,9 @@ a {
a:hover,
a:focus {
color: #0085a1;
{% if site.hover-col %}
color: {{ site.hover-col }};
{% endif %}
}
blockquote {
color: #808080;
Expand Down Expand Up @@ -76,11 +75,17 @@ hr.small {
color: white;
text-shadow: none;
background: #0085a1;
{% if site.hover-col %}
background: {{ site.hover-col }};
{% endif %}
}
::selection {
color: white;
text-shadow: none;
background: #0085a1;
{% if site.hover-col %}
background: {{ site.hover-col }};
{% endif %}
}
img::selection {
color: white;
Expand Down Expand Up @@ -130,13 +135,19 @@ img {
.navbar-custom .nav li a {
font-weight: 800;
color: #404040;
{% if site.navbar-text-col %}
color: {{ site.navbar-text-col }};
{% endif %}
}

.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus ,
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus {
color: #0085a1;
{% if site.hover-col %}
color: {{ site.hover-col }};
{% endif %}
}

.navbar-custom .navbar-brand-logo {
Expand Down Expand Up @@ -231,6 +242,9 @@ img {
padding: 10px;
padding-left: 30px;
background: #f5f5f5;
{% if site.navbar-children-col %}
background: {{ site.navbar-children-col }};
{% endif %}
text-decoration: none !important;
border-width: 0 1px 1px 1px;
font-weight: normal;
Expand All @@ -249,6 +263,11 @@ img {
}
.navbar-custom .nav .navlinks-container:hover {
background: #eee;
{% if site.navbar-col %}
background: {{ site.navbar-col }};
outline: 1px #eaeaea solid;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually don't think this outline is necessary, to me it looks to make things a bit less nice

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed afd4859

background: rgba(0, 0, 0, -0.1);
{% endif %}
}
.navbar-custom .nav .navlinks-container:hover .navlinks-children {
display: block;
Expand Down Expand Up @@ -336,6 +355,9 @@ footer .theme-by {
.post-preview a:hover {
text-decoration: none;
color: #0085a1;
{% if site.hover-col %}
color: {{ site.hover-col }};
{% endif %}
}

.post-preview .post-title {
Expand Down Expand Up @@ -400,13 +422,19 @@ footer .theme-by {

.blog-tags a {
color: #008AFF;
{% if site.hover-col %}
color: {{ site.hover-col }};
{% endif %}
text-decoration: none;
padding: 0px 5px;
}

.blog-tags a:hover {
border-radius: 2px;
color: #008AFF;
{% if site.hover-col %}
color: {{ site.hover-col }};
{% endif %}
background-color: #CCC;
}

Expand Down Expand Up @@ -614,6 +642,10 @@ footer .theme-by {
color: #FFF;
background: #0085a1;
border: 1px solid #0085a1;
{% if site.hover-col %}
background: {{ site.hover-col }};
border-color: {{ site.hover-col }};
{% endif %}
}

.pager {
Expand Down