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
Use jekyll vars unconditionally in main.css
  • Loading branch information
@jennydaman
jennydaman committed Jan 7, 2018
commit 73578b627cc9da6dfc783a7c7404ec1d6aa25045
3 changes: 2 additions & 1 deletion _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ avatar: "/img/avatar-icon.png"
# DeepSkyBlue
# #EEE
# #333399
# linear-gradient(to top left, #333399 0%, #9966ff 100%);
# rgb(66, 134, 244)
# linear-gradient(to top left, #333399 0%, #9966ff 100%)

# alternatively, the navbar, footer, and page can be set to background images.

Expand Down
73 changes: 15 additions & 58 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -29,14 +26,11 @@ h1,h2,h3,h4,h5,h6 {
font-weight: 800;
}
a {
color: #008AFF;
color: {{ site.hover-col }};
}
a:hover,
a:focus {
color: #0085a1;
{% if site.hover-col %}
color: {{ site.hover-col }};
{% endif %}
}
blockquote {
color: #808080;
Expand Down Expand Up @@ -74,18 +68,12 @@ hr.small {
::-moz-selection {
color: white;
text-shadow: none;
background: #0085a1;
{% if site.hover-col %}
background: {{ site.hover-col }};
{% endif %}
background-color: {{ site.hover-col }};
}
::selection {
color: white;
text-shadow: none;
background: #0085a1;
{% if site.hover-col %}
background: {{ site.hover-col }};
{% endif %}
background-color: {{ site.hover-col }};
}
img::selection {
color: white;
Expand Down Expand Up @@ -113,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;
Expand All @@ -134,20 +119,14 @@ img {
.navbar-custom .navbar-brand,
.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 @@ -241,17 +220,14 @@ img {
display: block;
padding: 10px;
padding-left: 30px;
background: #f5f5f5;
{% if site.navbar-children-col %}
background: {{ site.navbar-children-col }};
{% endif %}
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;
Expand All @@ -262,12 +238,9 @@ img {
text-align: center;
}
.navbar-custom .nav .navlinks-container:hover {
background: #eee;
{% if site.navbar-col %}
background: {{ site.navbar-col }};
background-color: {{ site.navbar-col }};
Copy link
Owner

Choose a reason for hiding this comment

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

Is this a fallback in case rgba background is not supported by the browser, since rgba will normally override this?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

image

Both background-color: SkyBlue; and background: rgba(0, 0, 0, 0.1); apply

Copy link
Owner

Choose a reason for hiding this comment

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

they're both technically applied, but I think it would be the exact same colour if you remove background-color

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 8007fb9

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 %}
background: rgba(0, 0, 0, 0.1);
Copy link
Owner

Choose a reason for hiding this comment

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

you're right about this, I like that it makes any background of navbar work

}
.navbar-custom .nav .navlinks-container:hover .navlinks-children {
display: block;
Expand All @@ -286,13 +259,10 @@ 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;
Expand Down Expand Up @@ -354,10 +324,7 @@ footer .theme-by {
.post-preview a:focus,
.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 @@ -421,20 +388,14 @@ 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 @@ -567,7 +528,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;
Expand Down Expand Up @@ -628,7 +589,7 @@ footer .theme-by {
font-weight: 800;
letter-spacing: 1px;
padding: 10px 5px;
background: #FFF;
background-color: #FFF;
border-radius: 0;
color: #404040;
}
Expand All @@ -640,12 +601,8 @@ footer .theme-by {
.pager li a:hover,
.pager li a:focus {
color: #FFF;
background: #0085a1;
border: 1px solid #0085a1;
{% if site.hover-col %}
background: {{ site.hover-col }};
border-color: {{ site.hover-col }};
{% endif %}
border: 1px solid {{ site.hover-col }};
background-color: {{ site.hover-col }};
}

.pager {
Expand Down Expand Up @@ -708,7 +665,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;
Expand Down