diff --git a/layouts/partials/footer_scripts.html b/layouts/partials/footer_scripts.html
index aab9d08..a868a01 100644
--- a/layouts/partials/footer_scripts.html
+++ b/layouts/partials/footer_scripts.html
@@ -21,8 +21,3 @@
     {{ end }}
   };
 </script>
-
-<link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,700,700i" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
-
diff --git a/layouts/partials/head_includes.html b/layouts/partials/head_includes.html
index 4ba31bc..a78ce5f 100644
--- a/layouts/partials/head_includes.html
+++ b/layouts/partials/head_includes.html
@@ -1,13 +1,23 @@
 <!-- CSS -->
 
-<link rel="stylesheet" href="{{ .Site.BaseURL }}css/main.v1.0.0.css">
+<link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,700,700i" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
+
+<link rel="stylesheet" href="{{ .Site.BaseURL }}css/main.v1.0.0.css" media="screen">
+<link rel="stylesheet" href="{{ .Site.BaseURL }}css/min600px.v1.0.0.css" media="(min-width: 600px)">
+<link rel="stylesheet" href="{{ .Site.BaseURL }}css/min769px.v1.0.0.css" media="(min-width: 769px)">
 
 {{ if .Site.Params.highlightjs }}
-  <link rel="stylesheet" href="{{ .Site.BaseURL }}css/highlight.min.css">
+  <style type="text/css" media="screen">
+    {{ partial "highlight.min.css" . | safeCSS }}
+  </style>
 {{ end }}
 
 {{ if .Site.Params.progressively }}
-  <link rel="stylesheet" href="{{ .Site.BaseURL }}css/progressively.min.css">
+  <style type="text/css" media="screen">
+    {{ partial "progressively.min.css" . | safeCSS }}
+  </style>
 {{ end }}
 
 {{ range .Site.Params.extracssfiles }}
diff --git a/static/css/highlight.min.css b/layouts/partials/highlight.min.css
similarity index 100%
rename from static/css/highlight.min.css
rename to layouts/partials/highlight.min.css
diff --git a/static/css/progressively.min.css b/layouts/partials/progressively.min.css
similarity index 100%
rename from static/css/progressively.min.css
rename to layouts/partials/progressively.min.css
diff --git a/static/css/main.v1.0.0.css b/static/css/main.v1.0.0.css
index e61489c..12d1d6b 100644
--- a/static/css/main.v1.0.0.css
+++ b/static/css/main.v1.0.0.css
@@ -88,17 +88,6 @@ body {
   line-height: 1.6;
   text-rendering: optimizeLegibility !important;
 }
-@media (min-width: 600px) {
-  body {
-    -webkit-justify-content: center;
-    -moz-justify-content: center;
-    -ms-justify-content: center;
-    justify-content: center;
-  }
-  .non-narrow.zero-top-spacing {
-    padding-top: 0 !important;
-  }
-}
 .icon {
   text-rendering: geometricPrecision !important;
 }
@@ -126,14 +115,6 @@ section {
   display: flex;
   width: 100%;
 }
-@media (min-width: 600px) {
-  section {
-    padding: 0 16px;
-    margin-left: 100px;
-    margin-right: 100px;
-    max-width: 750px;
-  }
-}
 section.header .container {
   -webkit-align-items: center;
   -moz-align-items: center;
@@ -211,53 +192,6 @@ section.header nav ul li {
 section.header nav ul li:hover {
   color: #111111;
 }
-@media (min-width: 600px) {
-  section.header {
-    background-color: transparent;
-  }
-  section.header .container {
-    -webkit-justify-content: flex-start;
-    -moz-justify-content: flex-start;
-    -ms-justify-content: flex-start;
-    justify-content: flex-start;
-  }
-  section.header .container .logo {
-    margin: 0;
-  }
-  section.header-home .container .logo {
-    max-width: 180px;
-    margin-left: 20px;
-  }
-  section.header-home .name-home {
-    padding-top: 30px;
-    font-size: 40px;
-  }
-  section.header-home nav ul li {
-    font-size: 18px;
-  }
-  section.header .content {
-    -webkit-align-items: flex-start;
-    -moz-align-items: flex-start;
-    -ms-align-items: flex-start;
-    align-items: flex-start;
-  }
-  section.header .name {
-    color: #333333;
-  }
-  section.header nav {
-    font-size: 14px;
-    margin-bottom: 0;
-  }
-  section.header nav ul {
-    text-align: left;
-  }
-  section.header nav ul li {
-    color: #666666;
-  }
-  section.header nav ul li:hover {
-    color: #333333;
-  }
-}
 section.footer .container {
   -webkit-align-items: center;
   -moz-align-items: center;
@@ -302,28 +236,6 @@ section.footer .container .icons {
   flex-grow: 0.5;
   text-align: end;
 }
-@media (min-width: 600px) {
-  section.footer {
-    background-color: transparent;
-  }
-  section.footer .container {
-    flex-direction: row;
-  }
-  section.footer .container a {
-    margin-left: 3px;
-    margin-right: 3px;
-    color: #666666;
-  }
-  section.footer .container a:hover {
-    color: #333333;
-  }
-  section.footer .container a .icon {
-    font-size: 18px;
-  }
-  section.footer .container a .icon.larger {
-    font-size: 20px;
-  }
-}
 section.main .container {
   -webkit-align-items: center;
   -moz-align-items: center;
@@ -420,15 +332,6 @@ section.main .content .front-matter .tags ul li:hover {
 section.main .content .front-matter .tags ul li a {
   color: #666666;
 }
-@media (min-width: 600px) {
-  section.main .content .front-matter .date,
-  section.main .content .front-matter .author,
-  section.main .content .front-matter .tags,
-  section.main .content .front-matter .word-count,
-  section.main .content .front-matter .reading-time .middot {
-    display: initial;
-  }
-}
 section.main .container.f04 {
   -webkit-justify-content: center;
   -moz-justify-content: center;
@@ -459,27 +362,6 @@ section.main .container.f04 .content .num {
 section.main .container.f04 .content .detail {
   margin-bottom: 40px;
 }
-@media (min-width: 600px) {
-  section.main .container.f04 {
-    -webkit-justify-content: flex-start;
-    -moz-justify-content: flex-start;
-    -ms-justify-content: flex-start;
-    justify-content: flex-start;
-  }
-  section.main .container.f04 .content {
-    -webkit-align-items: flex-start;
-    -moz-align-items: flex-start;
-    -ms-align-items: flex-start;
-    align-items: flex-start;
-  }
-  section.main .container.f04 .content .num {
-    margin: 0 0 10px 0;
-    font-size: 32px;
-  }
-  section.main .container.f04 .content .detail {
-    margin-bottom: 30px;
-  }
-}
 section.main .container .content .groupby {
   margin-top: 1em;
   padding-left: 0.5em;
@@ -532,34 +414,6 @@ section.main .container .content .post-item {
     display: flex;
     list-style: none;
 }
-@media (min-width: 600px) {
-  .container {
-    padding: 0 30px;
-  }
-  section.header {
-    padding-top: 60px;
-    padding-bottom: 60px;
-  }
-  section.footer {
-    padding-top: 30px;
-    padding-bottom: 60px;
-  }
-  section.main {
-    padding-top: 0;
-  }
-  section.main .container .content .post-item {
-    display: flex;
-    list-style: none;
-    padding-left: 1.5em;
-  }
-  section.main .container .content .post-item .meta {
-    display: block;
-  }
-  section.main.post {
-    padding-top: 60px;
-    padding-bottom: 60px;
-  }
-}
 a {
   color: #428bca;
   -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
@@ -719,12 +573,6 @@ section.main .content .markdown blockquote {
 section.main .content .markdown blockquote p:last-child {
   margin-bottom: 0;
 }
-@media (min-width: 550px) {
-  section.main .content .markdown blockquote {
-    padding-right: 5rem;
-    padding-left: 1.25rem;
-  }
-}
 section.main .content .markdown figure {
   width: 100%;
   background: #fff;
@@ -738,17 +586,6 @@ section.main .content .markdown figure img {
   position: static;
   margin: auto;
 }
-@media (min-width: 769px) {
-  section.main .content .markdown figure {
-    width: 110%;
-    margin-left: -4%;
-  }
-  section.main .content .markdown img {
-    max-width: 110%;
-    width: 110%;
-    margin-left: -4%;
-  }
-}
 section.main .content .markdown table {
   margin-bottom: 1rem;
   width: 100%;
@@ -815,15 +652,4 @@ section.main .content .navigation a {
   text-align: center;
   font-style: italic;
   color: #313537;
-}
-@media (min-width: 570px) {
-  section.main .content .navigation {
-    -webkit-flex-direction: row;
-    -moz-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-  }
-  section.main .content .navigation div {
-    margin-top: 0em;
-  }
 }
\ No newline at end of file
diff --git a/static/css/min600px.v1.0.0.css b/static/css/min600px.v1.0.0.css
new file mode 100644
index 0000000..4a69a77
--- /dev/null
+++ b/static/css/min600px.v1.0.0.css
@@ -0,0 +1,145 @@
+body {
+-webkit-justify-content: center;
+-moz-justify-content: center;
+-ms-justify-content: center;
+justify-content: center;
+}
+.non-narrow.zero-top-spacing {
+padding-top: 0 !important;
+}
+section {
+padding: 0 16px;
+margin-left: 100px;
+margin-right: 100px;
+max-width: 750px;
+}
+section.header {
+background-color: transparent;
+}
+section.header .container {
+-webkit-justify-content: flex-start;
+-moz-justify-content: flex-start;
+-ms-justify-content: flex-start;
+justify-content: flex-start;
+}
+section.header .container .logo {
+margin: 0;
+}
+section.header-home .container .logo {
+max-width: 180px;
+margin-left: 20px;
+}
+section.header-home .name-home {
+padding-top: 30px;
+font-size: 40px;
+}
+section.header-home nav ul li {
+font-size: 18px;
+}
+section.header .content {
+-webkit-align-items: flex-start;
+-moz-align-items: flex-start;
+-ms-align-items: flex-start;
+align-items: flex-start;
+}
+section.header .name {
+color: #333333;
+}
+section.header nav {
+font-size: 14px;
+margin-bottom: 0;
+}
+section.header nav ul {
+text-align: left;
+}
+section.header nav ul li {
+color: #666666;
+}
+section.header nav ul li:hover {
+color: #333333;
+}
+section.footer {
+background-color: transparent;
+}
+section.footer .container {
+flex-direction: row;
+}
+section.footer .container a {
+margin-left: 3px;
+margin-right: 3px;
+color: #666666;
+}
+section.footer .container a:hover {
+color: #333333;
+}
+section.footer .container a .icon {
+font-size: 18px;
+}
+section.footer .container a .icon.larger {
+font-size: 20px;
+}
+section.main .content .front-matter .date,
+section.main .content .front-matter .author,
+section.main .content .front-matter .tags,
+section.main .content .front-matter .word-count,
+section.main .content .front-matter .reading-time .middot {
+display: initial;
+}
+section.main .container.f04 {
+-webkit-justify-content: flex-start;
+-moz-justify-content: flex-start;
+-ms-justify-content: flex-start;
+justify-content: flex-start;
+}
+section.main .container.f04 .content {
+-webkit-align-items: flex-start;
+-moz-align-items: flex-start;
+-ms-align-items: flex-start;
+align-items: flex-start;
+}
+section.main .container.f04 .content .num {
+margin: 0 0 10px 0;
+font-size: 32px;
+}
+section.main .container.f04 .content .detail {
+margin-bottom: 30px;
+}
+.container {
+padding: 0 30px;
+}
+section.header {
+padding-top: 60px;
+padding-bottom: 60px;
+}
+section.footer {
+padding-top: 30px;
+padding-bottom: 60px;
+}
+section.main {
+padding-top: 0;
+}
+section.main .container .content .post-item {
+display: flex;
+list-style: none;
+padding-left: 1.5em;
+}
+section.main .container .content .post-item .meta {
+display: block;
+}
+section.main.post {
+padding-top: 60px;
+padding-bottom: 60px;
+}
+section.main .content .markdown blockquote {
+padding-right: 5rem;
+padding-left: 1.25rem;
+}
+section.main .content .navigation {
+-webkit-flex-direction: row;
+-moz-flex-direction: row;
+-ms-flex-direction: row;
+flex-direction: row;
+}
+section.main .content .navigation div {
+margin-top: 0em;
+}
\ No newline at end of file
diff --git a/static/css/min769px.v1.0.0.css b/static/css/min769px.v1.0.0.css
new file mode 100644
index 0000000..77b9031
--- /dev/null
+++ b/static/css/min769px.v1.0.0.css
@@ -0,0 +1,9 @@
+section.main .content .markdown figure {
+width: 110%;
+margin-left: -4%;
+}
+section.main .content .markdown img {
+max-width: 110%;
+width: 110%;
+margin-left: -4%;
+}
\ No newline at end of file