2016-01-07 11:28:15 +08:00
parent a8dcc45d56
commit 620029e52b
9 changed files with 340 additions and 189 deletions
--- a/convert.html
+++ b/convert.html
@@ -14,6 +14,7 @@
            <h1 class="project-name">RedKale</h1>
            <h2 class="project-tagline"></h2>
            <a href="index.html" class="btn">RedKale</a> 
+            <a href="redkale.html" class="btn">RedKale入门</a> 
            <a href="convert.html" class="btn">Convert 组件</a> 
            <a href="service.html" class="btn">Service 组件</a> 
            <a href="source.html" class="btn">Source 组件</a> 
@@ -96,7 +97,7 @@
        <span class="n">user</span><span class="o">.</span><span class="na">setUserid</span><span class="o">(</span><span class="mi">100</span><span class="o">);</span>
        <span class="n">user</span><span class="o">.</span><span class="na">setUsername</span><span class="o">(</span><span class="s">&quot;redkalename&quot;</span><span class="o">);</span>
        <span class="n">user</span><span class="o">.</span><span class="na">setPassword</span><span class="o">(</span><span class="s">&quot;123456&quot;</span><span class="o">);</span>
-        <span class="kd">final</span> <span class="n">JsonConvert</span> <span class="n">convert</span> <span class="o">=</span> <span class="n">JsonFactory</span><span class="o">.</span><span class="na">root</span><span class="o">().</span><span class="na">getConvert</span><span class="o">();</span>
+        <span class="kd">final</span> <span class="n">JsonConvert</span> <span class="n">convert</span> <span class="o">=</span> <span class="n">JsonConvert</span><span class="o">.</span><span class="na">root</span><span class="o">();</span>
        <span class="n">String</span> <span class="n">json</span> <span class="o">=</span> <span class="n">convert</span><span class="o">.</span><span class="na">convertTo</span><span class="o">(</span><span class="n">user</span><span class="o">);</span>
        <span class="n">System</span><span class="o">.</span><span class="na">out</span><span class="o">.</span><span class="na">println</span><span class="o">(</span><span class="n">json</span><span class="o">);</span>  <span class="c1">//应该是 {&quot;password&quot;:&quot;123456&quot;,&quot;userid&quot;:100,&quot;username&quot;:&quot;redkalename&quot;}</span>
        <span class="n">UserRecord</span> <span class="n">user2</span> <span class="o">=</span> <span class="n">convert</span><span class="o">.</span><span class="na">convertFrom</span><span class="o">(</span><span class="n">UserRecord</span><span class="o">.</span><span class="k">class</span><span class="o">,</span> <span class="n">json</span><span class="o">);</span>
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
            <h1 class="project-name">RedKale</h1>
            <h2 class="project-tagline"></h2>
            <a href="index.html" class="btn">RedKale</a> 
+            <a href="redkale.html" class="btn">RedKale入门</a> 
            <a href="convert.html" class="btn">Convert 组件</a> 
            <a href="service.html" class="btn">Service 组件</a> 
            <a href="source.html" class="btn">Source 组件</a> 
@@ -30,30 +31,30 @@
                其功能相当于 Tomcat + Mina + Struts + Spring + Hibernate + RMI + Json + Memcached 的综合体。 <br/>
                RedKale 有如下主要特点： <br/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、大量使用Java 8新特性（接口默认值、Stream、Lambda、JDk8内置的ASM包） <br/>
-                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、HTTP层内置json功能与限时缓存功能 <br/>
-                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3、TCP层使用NIO.2，TCP与UDP提供统一接口 <br/>
-                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4、分布式与集中式可以无缝切换 <br/>
-                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5、数据缓存自动同步与简洁的数据层操作接口 <br/>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、提供HTTP服务，同时内置JSON功能与限时缓存功能 <br/>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3、TCP层完全使用NIO.2，并统一TCP与UDP的接口 <br/>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4、提供分布式与集中式部署的无缝切换 <br/>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5、提供类似JPA功能，并包含数据缓存自动同步与简洁的数据层操作接口 <br/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6、功能强大 但体积不到1.5M，且不依赖任何第三方包 <br/>
            </p>

            <h3>
-                <a id="designer-templates" class="anchor" href="#designer-templates" aria-hidden="true"><span class="octicon octicon-link"></span></a>亮点一. 轻量级HTTP</h3>
+                <a class="anchor" href="#designer-templates" aria-hidden="true"><span class="octicon octicon-link"></span></a>亮点一. 轻量级HTTP</h3>

            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RedKale 的HTTP是基于异步NIO.2实现的，所提供的HttpResponse的输出接口也是异步的，因此并不遵循JSR 340规范(Servlet 3.1)且也没有实现Jsp规范。 HTTP只提供四个对象：HttpContext、HttpRequest、HttpResponse、HttpServlet。 传统Session则由数据层实现。RedKale提倡http+json接口(无论网站、PC客户端、APP移动端、第三方接口都可使用统一接口)， 因此HTTP层内置了json解析与序列化接口，同时内置http缓存机制。</p>

            <h3>
-                <a id="creating-pages-manually" class="anchor" href="#creating-pages-manually" aria-hidden="true"><span class="octicon octicon-link"></span></a>亮点二. 分布式WebSocket</h3>
+                <a class="anchor" href="#creating-pages-manually" aria-hidden="true"><span class="octicon octicon-link"></span></a>亮点二. 分布式WebSocket</h3>

            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RedKale 的WebSocket接口不同于JSR 340(Servlet 3.1)， 除了提供基本的WebSocket功能， 还提供分布式与集中式部署， 当部署多个WebSocket进程时，通过配置文件可以实现WebSocket之间连接信息的数据同步。</p>

            <h3>
-                <a id="authors-and-contributors" class="anchor" href="#authors-and-contributors" aria-hidden="true"><span class="octicon octicon-link"></span></a>亮点三. SNCP协议</h3>
+                <a class="anchor" href="#authors-and-contributors" aria-hidden="true"><span class="octicon octicon-link"></span></a>亮点三. SNCP协议</h3>

            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SNCP(Service Node Communicate Protocol)是RedKale独有的协议， 类似RMI与WebService的功能结合，主要用于进程间的数据传输。使用者通过配置文件可以轻易的将Service由本地模式变成远程模式。远程模式的Service使用SNCP协议与其他进程的Service通信。使用者无需对远程通信接口使用类似mina的第三方包自行开发。</p>

            <h3>
-                <a id="support-or-contact" class="anchor" href="#support-or-contact" aria-hidden="true"><span class="octicon octicon-link"></span></a>亮点四. DataSource</h3>
+                <a class="anchor" href="#support-or-contact" aria-hidden="true"><span class="octicon octicon-link"></span></a>亮点四. DataSource</h3>

            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RedKale提供DataSource类对数据层进行操作，其功能类似JPA+Memcached。与JPA相比各有优缺点。 <br/>
                优点：  <br/>
--- a/net.html
+++ b/net.html
@@ -13,6 +13,7 @@
            <h1 class="project-name">RedKale</h1>
            <h2 class="project-tagline"></h2>
            <a href="index.html" class="btn">RedKale</a> 
+            <a href="redkale.html" class="btn">RedKale入门</a> 
            <a href="convert.html" class="btn">Convert 组件</a> 
            <a href="service.html" class="btn">Service 组件</a> 
            <a href="source.html" class="btn">Source 组件</a> 
--- a/net_http.html
+++ b/net_http.html
@@ -13,6 +13,7 @@
            <h1 class="project-name">RedKale</h1>
            <h2 class="project-tagline"></h2>
            <a href="index.html" class="btn">RedKale</a> 
+            <a href="redkale.html" class="btn">RedKale入门</a> 
            <a href="convert.html" class="btn">Convert 组件</a> 
            <a href="service.html" class="btn">Service 组件</a> 
            <a href="source.html" class="btn">Source 组件</a> 
--- a/net_sncp.html
+++ b/net_sncp.html
@@ -13,6 +13,7 @@
            <h1 class="project-name">RedKale</h1>
            <h2 class="project-tagline"></h2>
            <a href="index.html" class="btn">RedKale</a> 
+            <a href="redkale.html" class="btn">RedKale入门</a> 
            <a href="convert.html" class="btn">Convert 组件</a> 
            <a href="service.html" class="btn">Service 组件</a> 
            <a href="source.html" class="btn">Source 组件</a> 
--- a/redkale.html
+++ b/redkale.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en-us">
+    <head>
+        <meta charset="UTF-8">
+        <title>RedKale - Java 开源框架</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
+        <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
+        <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
+    </head>
+    <body>
+        <section class="page-header">
+            <h1 class="project-name">RedKale</h1>
+            <h2 class="project-tagline"></h2>
+            <a href="index.html" class="btn">RedKale</a> 
+            <a href="redkale.html" class="btn">RedKale入门</a> 
+            <a href="convert.html" class="btn">Convert 组件</a> 
+            <a href="service.html" class="btn">Service 组件</a> 
+            <a href="source.html" class="btn">Source 组件</a> 
+            <a href="net.html" class="btn">Net 组件</a> 
+            <a href="net_http.html" class="btn">HTTP 协议</a> 
+            <a href="net_sncp.html" class="btn">SNCP 协议</a> 
+            <a href="https://github.com/wentch/redkale" class="btn">Github 源码</a>
+        </section>
+
+        <section class="main-content">
+            <h3>
+                <a id="welcome-to-github-pages" class="anchor" href="#welcome-to-github-pages" aria-hidden="true"><span class="octicon octicon-link"></span></a>RedKale 入门介绍</h3>
+
+            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RedKale既可以作为服务器使用，可以当工具包使用。</p>
+
+            <footer class="site-footer">
+                <span class="site-footer-owner"><a href="https://github.com/wentch/redkale">RedKale</a> © <a href="https://github.com/wentch">wentch</a> &nbsp;&nbsp;&nbsp;&nbsp;欢迎加入RedKale技术交流QQ群: 527523235</span>
+            </footer>
+
+        </section>
+
+    </body>
+</html>
--- a/service.html
+++ b/service.html
@@ -14,6 +14,7 @@
            <h1 class="project-name">RedKale</h1>
            <h2 class="project-tagline"></h2>
            <a href="index.html" class="btn">RedKale</a> 
+            <a href="redkale.html" class="btn">RedKale入门</a> 
            <a href="convert.html" class="btn">Convert 组件</a> 
            <a href="service.html" class="btn">Service 组件</a> 
            <a href="source.html" class="btn">Source 组件</a> 
--- a/source.html
+++ b/source.html
@@ -13,6 +13,7 @@
            <h1 class="project-name">RedKale</h1>
            <h2 class="project-tagline"></h2>
            <a href="index.html" class="btn">RedKale</a> 
+            <a href="redkale.html" class="btn">RedKale入门</a> 
            <a href="convert.html" class="btn">Convert 组件</a> 
            <a href="service.html" class="btn">Service 组件</a> 
            <a href="source.html" class="btn">Source 组件</a> 
@@ -26,7 +27,7 @@
            <h3>
                <a id="welcome-to-github-pages" class="anchor" href="#welcome-to-github-pages" aria-hidden="true"><span class="octicon octicon-link"></span></a>Source 组件介绍</h3>

-            <p>敬请期待………… <br/>
+            <p>敬请期待…… <br/>
            </p>

            <footer class="site-footer">
--- a/stylesheets/stylesheet.css
+++ b/stylesheets/stylesheet.css
@@ -1,145 +1,200 @@
 * {
-  box-sizing: border-box; }
+    box-sizing: border-box;
+}

 body {
-  padding: 0;
-  margin: 0;
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-  color: #606c71; }
+    padding: 0;
+    margin: 0;
+    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #606c71;
+}

 a {
-  color: #1e6bb8;
-  text-decoration: none; }
-  a:hover {
-    text-decoration: underline; }
+    color: #1e6bb8;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}

 .btn {
-  display: inline-block;
-  margin-bottom: 1rem;
-  color: rgba(255, 255, 255, 0.7);
-  background-color: rgba(255, 255, 255, 0.08);
-  border-color: rgba(255, 255, 255, 0.2);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: 0.3rem;
-  transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
-  .btn + .btn {
-    margin-left: 1rem; }
+    display: inline-block;
+    margin-bottom: 1rem;
+    color: rgba(255, 255, 255, 0.7);
+    background-color: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.2);
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 0.3rem;
+    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
+}
+
+.btn + .btn {
+    margin-left: 1rem;
+}

 .btn:hover {
-  color: rgba(255, 255, 255, 0.8);
-  text-decoration: none;
-  background-color: rgba(255, 255, 255, 0.2);
-  border-color: rgba(255, 255, 255, 0.3); }
+    color: rgba(255, 255, 255, 0.8);
+    text-decoration: none;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+}

@media screen and (min-width: 64em) {
-  .btn {
-    padding: 0.75rem 1rem; } }
-
-@media screen and (min-width: 42em) and (max-width: 64em) {
-  .btn {
-    padding: 0.6rem 0.9rem;
-    font-size: 0.9rem; } }
-
-@media screen and (max-width: 42em) {
-  .btn {
-    display: block;
-    width: 100%;
-    padding: 0.75rem;
-    font-size: 0.9rem; }
-    .btn + .btn {
-      margin-top: 1rem;
-      margin-left: 0; } }
-
-.page-header {
-  color: #fff;
-  text-align: center;
-  background-color: #159957;
-  background-image: linear-gradient(120deg, #155799, #159957); }
-
-@media screen and (min-width: 64em) {
-  .page-header {
-    padding: 1rem 1rem; 
-  } 
+    .btn {
+        padding: 0.75rem 1rem;
+    }
 }

@media screen and (min-width: 42em) and (max-width: 64em) {
-  .page-header {
-    padding: 3rem 3rem; } }
+    .btn {
+        padding: 0.6rem 0.9rem;
+        font-size: 0.9rem;
+    }
+}

@media screen and (max-width: 42em) {
-  .page-header {
-    padding: 2rem 2rem; 
-  } 
+    .btn {
+        display: block;
+        width: 100%;
+        padding: 0.75rem;
+        font-size: 0.9rem;
+    }
+
+    .btn + .btn {
+        margin-top: 1rem;
+        margin-left: 0;
+    }
+}
+
+.page-header {
+    color: #fff;
+    text-align: center;
+    /* background-image: linear-gradient(120deg, #155799, #159957); */
+    background-image: linear-gradient(350deg, #330335, #AB5D7C);
+}
+
+@media screen and (min-width: 64em) {
+    .page-header {
+        padding: 1rem 1rem;
+    }
+}
+
+@media screen and (min-width: 42em) and (max-width: 64em) {
+    .page-header {
+        padding: 3rem 3rem;
+    }
+}
+
+@media screen and (max-width: 42em) {
+    .page-header {
+        padding: 2rem 2rem;
+    }
 }

 .project-name {
-  margin-top: 0;
-  margin-left: 2em;
-  margin-bottom: 0; }
+    margin-top: 0;
+    left:1em;
+    margin-right: 1em;
+    margin-bottom: 0;
+    display: inline-block;
+    width: 4em;
+}

@media screen and (min-width: 64em) {
-  .project-name {
-    font-size: 3.25rem; } }
+    .project-name {
+        font-size: 3.25rem;
+    }
+}

@media screen and (min-width: 42em) and (max-width: 64em) {
-  .project-name {
-    font-size: 2.25rem; } }
+    .project-name {
+        font-size: 2.25rem;
+    }
+}

@media screen and (max-width: 42em) {
-  .project-name {
-    font-size: 1.75rem; 
-  } 
+    .project-name {
+        font-size: 1.75rem;
+    }
 }

 .project-tagline {
-  margin-bottom: 2rem;
-  font-weight: normal;
-  opacity: 0.7; }
+    margin-bottom: 2rem;
+    font-weight: normal;
+    opacity: 0.7;
+}

-@media screen and (min-width: 64em) {
-  .project-tagline {
-    font-size: 1.25rem; } }
+@media screen and (min-width: 81em) {
+    .project-tagline {
+        display: none;
+        font-size: 1.25rem;
+    }
+}
+
+@media screen and (min-width: 64em) and (max-width: 80em) {
+    .project-tagline {
+        font-size: 1.25rem;
+    }
+}

@media screen and (min-width: 42em) and (max-width: 64em) {
-  .project-tagline {
-    font-size: 1.15rem; } }
+    .project-tagline {
+        font-size: 1.15rem;
+    }
+}

@media screen and (max-width: 42em) {
-  .project-tagline {
-    font-size: 1rem; } }
+    .project-tagline {
+        font-size: 1rem;
+    }
+}

 .main-content :first-child {
-  margin-top: 0; }
+    margin-top: 0;
+}
+
 .main-content img {
-  max-width: 100%; }
+    max-width: 100%;
+}
+
 .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-  font-weight: normal;
-  color: #159957; }
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-weight: normal;
+    /* color: #159957; */
+    color: #90139E;
+}
+
 .main-content p {
-  margin-bottom: 1em; }
+    margin-bottom: 1em;
+}
+
 .main-content code {
-  padding: 2px 4px;
-  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  font-size: 0.9rem;
-  color: #383e41;
-  background-color: #f3f6fa;
-  border-radius: 0.3rem; }
+    padding: 2px 4px;
+    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-size: 0.9rem;
+    color: #383e41;
+    background-color: #f3f6fa;
+    border-radius: 0.3rem;
+}
+
 .main-content pre {
-  padding: 0.8rem;
-  margin-top: 0;
-  margin-bottom: 1rem;
-  font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  color: #567482;
-  word-wrap: normal;
-  background-color: #f3f6fa;
-  border: solid 1px #dce6f0;
-  border-radius: 0.3rem; }
-  .main-content pre > code {
+    padding: 0.8rem;
+    margin-top: 0;
+    margin-bottom: 1rem;
+    font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    color: #567482;
+    word-wrap: normal;
+    background-color: #f3f6fa;
+    border: solid 1px #dce6f0;
+    border-radius: 0.3rem;
+}
+
+.main-content pre > code {
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
@@ -147,114 +202,164 @@ a {
    word-break: normal;
    white-space: pre;
    background: transparent;
-    border: 0; }
+    border: 0;
+}
+
 .main-content .highlight {
-  margin-bottom: 1rem; }
-  .main-content .highlight pre {
+    margin-bottom: 1rem;
+}
+
+.main-content .highlight pre {
    margin-bottom: 0;
-    word-break: normal; }
+    word-break: normal;
+}
+
 .main-content .highlight pre, .main-content pre {
-  padding: 0.8rem;
-  overflow: auto;
-  font-size: 0.9rem;
-  line-height: 1.45;
-  border-radius: 0.3rem; }
+    padding: 0.8rem;
+    overflow: auto;
+    font-size: 0.9rem;
+    line-height: 1.45;
+    border-radius: 0.3rem;
+}
+
 .main-content pre code, .main-content pre tt {
-  display: inline;
-  max-width: initial;
-  padding: 0;
-  margin: 0;
-  overflow: initial;
-  line-height: inherit;
-  word-wrap: normal;
-  background-color: transparent;
-  border: 0; }
-  .main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after {
-    content: normal; }
+    display: inline;
+    max-width: initial;
+    padding: 0;
+    margin: 0;
+    overflow: initial;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0;
+}
+
+.main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after {
+    content: normal;
+}
+
 .main-content ul, .main-content ol {
-  margin-top: 0; }
+    margin-top: 0;
+}
+
 .main-content blockquote {
-  padding: 0 1rem;
-  margin-left: 0;
-  color: #819198;
-  border-left: 0.3rem solid #dce6f0; }
-  .main-content blockquote > :first-child {
-    margin-top: 0; }
-  .main-content blockquote > :last-child {
-    margin-bottom: 0; }
+    padding: 0 1rem;
+    margin-left: 0;
+    color: #819198;
+    border-left: 0.3rem solid #dce6f0;
+}
+
+.main-content blockquote > :first-child {
+    margin-top: 0;
+}
+
+.main-content blockquote > :last-child {
+    margin-bottom: 0;
+}
+
 .main-content table {
-  display: block;
-  width: 100%;
-  overflow: auto;
-  word-break: normal;
-  word-break: keep-all; }
-  .main-content table th {
-    font-weight: bold; }
-  .main-content table th, .main-content table td {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: normal;
+    word-break: keep-all;
+}
+
+.main-content table th {
+    font-weight: bold;
+}
+
+.main-content table th, .main-content table td {
    padding: 0.5rem 1rem;
-    border: 1px solid #e9ebec; }
+    border: 1px solid #e9ebec;
+}
+
 .main-content dl {
-  padding: 0; }
-  .main-content dl dt {
+    padding: 0;
+}
+
+.main-content dl dt {
    padding: 0;
    margin-top: 1rem;
    font-size: 1rem;
-    font-weight: bold; }
-  .main-content dl dd {
+    font-weight: bold;
+}
+
+.main-content dl dd {
    padding: 0;
-    margin-bottom: 1rem; }
+    margin-bottom: 1rem;
+}
+
 .main-content hr {
-  height: 2px;
-  padding: 0;
-  margin: 1rem 0;
-  background-color: #eff0f1;
-  border: 0; }
+    height: 2px;
+    padding: 0;
+    margin: 1rem 0;
+    background-color: #eff0f1;
+    border: 0;
+}

@media screen and (min-width: 96em) {
-  .main-content {
-    max-width: 96rem;
-    padding: 2rem 6rem;
-    margin: 0 auto;
-    font-size: 1.1rem; } }
+    .main-content {
+        max-width: 96rem;
+        padding: 2rem 6rem;
+        margin: 0 auto;
+        font-size: 1.1rem;
+    }
+}

@media screen and (min-width: 64em)  and (max-width: 96em) {
-  .main-content {
-    max-width: 64rem;
-    padding: 2rem 6rem;
-    margin: 0 auto;
-    font-size: 1.1rem; } }
+    .main-content {
+        max-width: 64rem;
+        padding: 2rem 6rem;
+        margin: 0 auto;
+        font-size: 1.1rem;
+    }
+}

@media screen and (min-width: 42em) and (max-width: 64em) {
-  .main-content {
-    padding: 2rem 4rem;
-    font-size: 1.1rem; } }
+    .main-content {
+        padding: 2rem 4rem;
+        font-size: 1.1rem;
+    }
+}

@media screen and (max-width: 42em) {
-  .main-content {
-    padding: 2rem 1rem;
-    font-size: 1rem; } }
+    .main-content {
+        padding: 2rem 1rem;
+        font-size: 1rem;
+    }
+}

 .site-footer {
-  padding-top: 2rem;
-  margin-top: 2rem;
-  border-top: solid 1px #eff0f1; }
+    padding-top: 2rem;
+    margin-top: 2rem;
+    border-top: solid 1px #eff0f1;
+}

 .site-footer-owner {
-  display: block;
-  font-size: 0.9rem;
-  font-weight: bold; }
+    display: block;
+    font-size: 0.9rem;
+    font-weight: bold;
+}

 .site-footer-credits {
-  color: #819198; }
+    color: #819198;
+}

@media screen and (min-width: 64em) {
-  .site-footer {
-    font-size: 1rem; } }
+    .site-footer {
+        font-size: 1rem;
+    }
+}

@media screen and (min-width: 42em) and (max-width: 64em) {
-  .site-footer {
-    font-size: 1rem; } }
+    .site-footer {
+        font-size: 1rem;
+    }
+}

@media screen and (max-width: 42em) {
-  .site-footer {
-    font-size: 0.9rem; } }
+    .site-footer {
+        font-size: 0.9rem;
+    }
+}