Merge branch 'feature/lighthouse-score' into develop

mishamyrt · Sep 14, 2019 · b34b26a · b34b26a
2 parents 5d465b3 + d1771b8
commit b34b26a
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 6 deletions.
diff --git a/docker/nginx.conf b/docker/nginx.conf
@@ -17,6 +17,17 @@ http {
   server {
     listen 80;
 
+    gzip on;
+    gzip_disable "msie6";
+
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_buffers 16 8k;
+    gzip_http_version 1.1;
+    gzip_min_length 256;
+    gzip_types text/plain text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript font/opentype image/svg+xml image/x-icon;
+
     root /usr/share/nginx/html;
     charset UTF-8;
 

diff --git a/src/colors/colors.css b/src/colors/colors.css
@@ -4,7 +4,8 @@
   --color-link-background: #d8d8d8;
   --color-heading: black;
   --color-text: #6c6c6c;
-  --color-icon: #525252;
+  --color-icon: #949494;
+  --color-icon-hover: #525252;
   --color-line: var(--color-link-background);
   --color-technology-bg: var(--color-icon);
   --color-technology-fg: var(--color-background);
@@ -17,6 +18,7 @@
     --color-background: #121212;
     --color-text: rgba(255, 255, 255, 0.5);
     --color-icon: rgba(255, 255, 255, 0.5);
+    --color-icon-hover: rgba(255, 255, 255, 0.5);
     --color-line: rgba(255, 255, 255, 0.2);
     --color-link-background: rgba(255, 255, 255, 0.15);
     --color-technology-fg: rgba(255, 255, 255, 0.32);

diff --git a/src/head.pug b/src/head.pug
@@ -7,3 +7,6 @@ link( itemprop="url" href="https://myrt.co" )
 link( rel="icon" type="image/png" href="/favicon.png" )
 
 link( rel="stylesheet" href="/index.css" )
+link( rel="preload" as="font" href="/fonts/GraphikLCG-Semibold.woff2" type="font/woff2" )
+link( rel="preload" as="font" href="/fonts/IBMPlexMono-Regular.woff2" type="font/woff2" )
+
diff --git a/src/hero/hero.css b/src/hero/hero.css
@@ -38,10 +38,9 @@
   fill: var(--color-icon);
   width: 20px;
   display: block;
-  opacity: 0.33;
   font-size: 0;
   margin-right: 25px;
-  transition: opacity 0.25s ease-out;
+  transition: fill 0.25s ease-out;
   background-size: contain;
 }
 
@@ -50,8 +49,8 @@
 }
 
 a.hero-icon:hover {
-  opacity: 1;
-  transition: opacity 0s;
+  fill: var(--color-icon-hover);
+  transition: fill 0s;
 }
 
 a.hero-icon:hover::after {

diff --git a/src/index.css b/src/index.css
@@ -43,14 +43,20 @@ a::after {
   height: calc(100% + 2px);
   top: -1px;
   left: -4px;
-  mix-blend-mode: hue;
+  mix-blend-mode: darken;
   position: absolute;
   display: block;
   background-color: transparent;
   border-radius: 2px;
   transition: background-color 0.25s;
 }
 
+@media (prefers-color-scheme: dark) {
+  a::after {
+    mix-blend-mode: color;
+  }
+}
+
 a:hover::after {
   transition: background-color 0s;
   background-color: var(--color-link-background);