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.

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

feat: support for css media query (prefers-color-scheme: dark) #6

Merged
merged 1 commit into from Nov 3, 2018
Merged
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.
+138 −32
Diff settings

Always

Just for now

Copy path View file
@@ -33,6 +33,37 @@ $breakpoint-medium: 600px;
}
}

@mixin box {
font-size: 0.9rem;
padding: 1rem 0.5rem;
margin-top: 3rem;
margin-bottom: 1rem;
background-color: $base06;
border: 1px solid $base0d;
filter: brightness(.9);

&:hover {
filter: brightness(1);
}

a:hover {
background-color: $base05;
}

@media (prefers-color-scheme: dark) {
background-color: $base02;
border: 1px solid $base0d;

a {
color: $base09;
}

a:hover {
background-color: $base01;
}
}
}

body {
color: $base00;
font-family: $base-font;
@@ -58,3 +89,18 @@ h5,
h6 {
font-family: $alternative-font;
}

@media (prefers-color-scheme: dark) {
body {
background-color: $base01;
color: $base06;
}

a {
color: $base09;

&:hover {
background-color: $base02;
}
}
}
Copy path View file
@@ -36,3 +36,11 @@ $small-font-size: 14px; // let's use the px unit here, for legal reasons
font-size: $small-font-size;
margin: 2rem 0 0;
}

@media (prefers-color-scheme: dark) {
.contact__phone,
.contact__mailing-address,
.contact_phone-number {
color: $base05;
}
}
Copy path View file
@@ -13,6 +13,10 @@
font-weight: 100;
}

.header__linked-portrait {
font-size: 0;
}

.header__portrait {
width: auto;
height: 15rem;
@@ -29,3 +33,14 @@
padding-top: 3rem;
text-align: right;
}

@media (prefers-color-scheme: dark) {
.header__portrait {
filter: brightness(.9);
transition: filter .4s ease-in;

&:hover {
filter: brightness(1);
}
}
}
Copy path View file
@@ -12,19 +12,12 @@
}

.index__link--prominent {
@include box();

display: block;
padding: 1rem;
background-color: $base06;
border: 1px solid $base05;
border-radius: 3px;
margin: 0 auto;
margin: 0 auto 1rem;
text-align: center;
margin: 1rem 3.3rem;

&:hover {
background-color: $base05;
border: 1px solid $base06;
}
}

.index__link {
@@ -35,3 +35,10 @@
background-color: lighten($base02, 10);
color: #b3cae0;
}

@media (prefers-color-scheme: dark) {
.navigation__item:hover,
.navigation__item--active {
background-color: $base01;
}
}
Copy path View file
@@ -35,16 +35,7 @@
}

.post__footer-note {
font-size: 0.9rem;
padding: 1rem 0.5rem;
margin-top: 3rem;
margin-bottom: 1rem;
background-color: $base06;
border: 1px solid $base0d;

a:hover {
background-color: $base05;
}
@include box;
}

.post-preview__list {
@@ -70,3 +70,21 @@
.vi { color: #008080 } // Name.Variable.Instance
.il { color: #099 } // Literal.Number.Integer.Long
}


@media (prefers-color-scheme: dark) {
.highlighter-rouge {
background-color: $base00;
}

.highlight {
background-color: $base00;

.c , .err , .cm , .cp , .c1 , .cs , .gd , .gd .x , .gr , .gh , .gi , .gi .x,
.go , .gp , .gu , .gt , .kt , .m , .s , .na , .nb , .nc , .no , .ni , .ne,
.nf , .nn , .nt , .nv , .w , .mf , .mh , .mi , .mo , .sb , .sc , .sd , .s2 ,
.se , .sh , .si , .sx , .sr , .s1 , .ss , .bp , .vc , .vg , .vi , .il {
filter: invert(100%);
}
}
}
Copy path View file
@@ -1,12 +1,3 @@
$tag-color: darken($base03, 20);
$tag-settings: (
1: 60%,
2: 65%,
3: 75%,
4: 90%,
5: 100%,
);

.tags {
display: flex;
flex-wrap: wrap;
@@ -18,16 +9,25 @@ $tag-settings: (
margin: 1em 0;
}

%tags__tag {
@mixin tag {
display: inline-block;
padding: 0 .5rem;
line-height: 1.1;
font-family: $alternative-font;
}

$tag-color: darken($base03, 20);
$tag-settings: (
1: 60%,
2: 65%,
3: 75%,
4: 90%,
5: 100%,
);

@each $level, $visibility in $tag-settings {
.tags__tag--#{$level} {
@extend %tags__tag;
@include tag;
font-size: $visibility;
color: rgba($tag-color, ($visibility / 100%));
}
@@ -37,3 +37,15 @@ $tag-settings: (
display: none;
}


@media (prefers-color-scheme: dark) {
$tag-color: $base04;

@each $level, $visibility in $tag-settings {
.tags__tag--#{$level} {
@include tag;
font-size: $visibility;
color: rgba($tag-color, ($visibility / 100%));
}
}
}
@@ -53,3 +53,9 @@
width: 100%;
}
}

@media (prefers-color-scheme: dark) {
.work-experience__textbox {
color: $base04;
}
}
Copy path View file
@@ -51,3 +51,13 @@
background: linear-gradient(180deg, rgba($base06, 0.75), rgba($base06, 0));
}
}

@media (prefers-color-scheme: dark) {
.footer__social-link {
filter: invert(100%);
}

.section {
border-top-color: $base00;
}
}
Copy path View file
Binary file not shown.
Copy path View file
Binary file not shown.
Copy path View file
@@ -17,7 +17,7 @@ <h2 class="header__subheadline">{{ site.subheadline }}</h2>
</div>

<div class="header__column--right" role="complementary">
<a href="{{ '/about' | relative_url }}">
<a href="{{ '/about' | relative_url }}" class="header__linked-portrait">
{% img gil@2x class:"header__portrait" alt:"Portrait photo of Gil" %}
</a>
</div>
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.