actix/actix-website
1
0
Fork 0
mirror of https://github.com/actix/actix-website synced 2024-11-30 11:12:57 +01:00
Code Issues Releases Wiki Activity

new design

Browse Source
This commit is contained in:
krircc 2018-01-08 11:21:33 +08:00
parent fee27fbc3c
commit e0b52a45e9
4 changed files with 55 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_layouts/blog.liquid
View File

@ -16,6 +16,7 @@
<li><a {%if route == "Blog-example"%}class="active"{%endif%} href="/blog/Blog-example.html">Blog Example</a></li> <li><a {%if route == "Blog-example"%}class="active"{%endif%} href="/blog/Blog-example.html">Blog Example</a></li>
</ul> </ul>
</aside> </aside>
<hr id="hr">
<main> <main>
{{ content }} {{ content }}
</main> </main>

7
_layouts/docs.liquid
View File

@ -13,21 +13,22 @@
<aside> <aside>
<p>Basics</p> <p>Basics</p>
<ul> <ul>
<li><a {%if route == "Basics-example"%}class="active"{%endif%} href="/blog/Basics-example.html">Basics Example</a></li> <li><a {%if route == "Basics-example"%}class="active"{%endif%} href="/docs/Basics-example.html">Basics Example</a></li>
</ul> </ul>
<p>Reference</p> <p>Reference</p>
<ul> <ul>
<li><a {%if route == "Reference-example"%}class="active"{%endif%} href="/blog/Reference-example.html">Reference Example</a></li> <li><a {%if route == "Reference-example"%}class="active"{%endif%} href="/docs/Reference-example.html">Reference Example</a></li>
</ul> </ul>
<p>Advance</p> <p>Advance</p>
<ul> <ul>
<li><a {%if route == "Advance-example"%}class="active"{%endif%} href="/blog/Advance-example.html">Advance Example</a></li> <li><a {%if route == "Advance-example"%}class="active"{%endif%} href="/docs/Advance-example.html">Advance Example</a></li>
</ul> </ul>
<p>Misc</p> <p>Misc</p>
<ul> <ul>
<li><a {%if route == "Misc-example"%}class="active"{%endif%} href="/docs/Misc-example.html">Misc Example</a></li> <li><a {%if route == "Misc-example"%}class="active"{%endif%} href="/docs/Misc-example.html">Misc Example</a></li>
</ul> </ul>
</aside> </aside>
<hr id="hr">
<main> <main>
{{ content }} {{ content }}
</main> </main>

8
index.liquid
View File

@ -28,7 +28,7 @@ title: Actix-web framework
</div> </div>
<div id="feature" class="columns three"> <div id="feature" class="columns three">
<article> <article>
<h3>Async Everything</h3> <h3>Easy To Use</h3>
<p>The words is comming.</p> <p>The words is comming.</p>
</article> </article>
<article> <article>
@ -36,13 +36,13 @@ title: Actix-web framework
<p>The words is comming.</p> <p>The words is comming.</p>
</article> </article>
<article> <article>
<h3>Easy To Use</h3> <h3>Async Everything</h3>
<p>The words is comming.</p> <p>The words is comming.</p>
</article> </article>
</div> </div>
<div id="feature" class="columns three"> <div id="feature" class="columns three">
<article> <article>
<h3>HTTP/1.x and HTTP/2.0</h3> <h3>WebSockets</h3>
<p>The words is comming.</p> <p>The words is comming.</p>
</article> </article>
<article> <article>
@ -50,7 +50,7 @@ title: Actix-web framework
<p>The words is comming.</p> <p>The words is comming.</p>
</article> </article>
<article> <article>
<h3>WebSockets</h3> <h3>HTTP/1.x and HTTP/2.0</h3>
<p>The words is comming.</p> <p>The words is comming.</p>
</article> </article>
</div> </div>

96
public/css/styles.css
View File

@ -1,19 +1,9 @@
:root { :root {
--orange: #F1592A; --grey: #f5f5f5;
--dark-orange: #A12700;
--light-orange: #FF9C7C;
--dark-grey: #58585A;
--med-grey: #818285;
--light-grey: #D1D2D4;
--med-dark-grey: #6D6E71;
--black: #000; --black: #000;
--white: #fff; --white: #fff;
--new: rgb(82, 29, 79);
--font-stack: helvetica, arial, sans-serif; --font-stack: helvetica, arial, sans-serif;
--breakpoint: 55rem;
} }
*, *:before, *:after { *, *:before, *:after {
@ -27,11 +17,10 @@ body {
} }
a { a {
color: var(--orange); color: var(--black);
/* color: inherit; */
text-decoration: none; text-decoration: none;
} }
a:hover { color:#067a1f;text-decoration:underline; } a:hover { color: var(--new) ;text-decoration:none; }
ul, ol, li { ul, ol, li {
list-style: none; list-style: none;
@ -55,7 +44,7 @@ ul, ol, li {
display: flex; display: flex;
width: 100%; width: 100%;
height: 4px; height: 4px;
background-color: var(--orange); background-color: var(--black);
} }
#lnav h1 #home { #lnav h1 #home {
font-size: 33px; font-size: 33px;
@ -70,9 +59,12 @@ ul, ol, li {
} }
/* ----------------------------------------section----------------------------------------*/ /* ----------------------------------------section----------------------------------------*/
section {
min-height: 100vh;
}
section.docs aside ul li a, section.blog aside ul li a { section.docs aside ul li a, section.blog aside ul li a {
display: inline-block; display: inline-block;
margin-bottom: 0.25rem; margin-left: 0.8rem;
text-decoration: none; text-decoration: none;
transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;
} }
@ -85,11 +77,13 @@ section.blog aside ul li a.active,
section.blog aside ul li a:hover, section.blog aside ul li a:hover,
section.blog aside ul li a:active, section.blog aside ul li a:active,
section.blog aside ul li a:focus { section.blog aside ul li a:focus {
font-weight: bold; color: var(--new);
background: var(--orange); border-left: 3px solid var(--new);
color: var(--white);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 3px; }
section.docs aside p, section.blog aside p {
font-size: 1.2rem;
font-weight: bold;
} }
pre { pre {
@ -98,7 +92,7 @@ pre {
margin: 0 0 10px; margin: 0 0 10px;
font-size: 13px; font-size: 13px;
line-height: 1.42857143; line-height: 1.42857143;
color: var(--dark-grey); color: var(--new);
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
background-color: #f5f5f5; background-color: #f5f5f5;
@ -112,7 +106,7 @@ code {
background-color: #f5f5f5; background-color: #f5f5f5;
border-radius: 4px; border-radius: 4px;
border: 1px solid #ccc; border: 1px solid #ccc;
color: var(--dark-grey); color: var(--new);
text-shadow: none; text-shadow: none;
} }
@ -129,8 +123,8 @@ pre code {
/* ----------------------------------------footer----------------------------------------*/ /* ----------------------------------------footer----------------------------------------*/
footer { footer {
text-align: center; text-align: center;
background-color: #f9f9f9;
justify-content: center; justify-content: center;
border-top: 2px solid var(--new);
} }
footer p { footer p {
@ -141,41 +135,40 @@ footer p {
/* ----------------------------------------home page----------------------------------------*/ /* ----------------------------------------home page----------------------------------------*/
#top { #top {
background-color: rgb(243, 225, 123);
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
line-height: 3rem; line-height: 3rem;
background-color: var(--grey);
} }
#top h1 { #top h1 {
font-size: 3rem; font-size: 2.2rem;
color: #b71fdd; color: var(--new);
} }
#top p { #top p {
font-size: 1.5rem; font-size: 1.1rem;
color: rgb(240, 105, 60); color: var(--new);
} }
#top button { #top button {
margin-right: 15px; margin-right: 15px;
font-size: 18px; font-size: 18px;
padding: 8px 30px; padding: 8px 30px;
background-color: rgb(21, 233, 109); background-color: rgb(190, 241, 211);
border: none; border: none;
} }
#Features { #Features {
margin-top: 2rem; margin-top: 2rem;
padding: 0 1rem; padding: 2rem 2rem 0 2rem;
background-color: var(--grey);
} }
#Features #feature { #Features #feature {
margin-bottom: 2rem; padding-bottom: 2rem;
}
#Features article h3 {
font-size: 1.5rem;
color: #b71fdd;
} }
#Features article p { #Features article h3 {
padding: 1rem 0; font-size: 1.3rem;
color: var(--black);
padding-bottom: 1rem;
} }
@ -194,7 +187,7 @@ footer p {
overflow: hidden; overflow: hidden;
} }
#rnav li a { #rnav li a {
color: var(--orange); color: var(--black);
display:block; display:block;
font-weight: bold; font-weight: bold;
border-bottom: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;
@ -205,6 +198,12 @@ footer p {
padding-top: 1rem; padding-top: 1rem;
width: 94%; width: 94%;
} }
#hr {
width: 100%;
height: 0.25rem;
margin: 0.6rem 0;
background-color: var(--black);
}
} }
/* ----------------------------------------table----------------------------------------*/ /* ----------------------------------------table----------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 1000px) { @media only screen and (min-width: 600px) and (max-width: 1000px) {
@ -236,7 +235,7 @@ footer p {
section { section {
margin: 0 auto; margin: 0 auto;
padding-top: 5rem; padding-top: 5rem;
width: 88%; width: 85%;
} }
section.docs .inner, section.blog .inner { section.docs .inner, section.blog .inner {
display: flex; display: flex;
@ -245,14 +244,12 @@ footer p {
flex: 0 1 30%; flex: 0 1 30%;
} }
section.docs aside p, section.blog aside p {
font-size: 1.3rem;
}
section.docs main, section.blog main { section.docs main, section.blog main {
flex: 0 1 70%; flex: 0 1 70%;
} }
#hr {
display: none;
}
.columns { .columns {
display: flex; display: flex;
} }
@ -296,7 +293,7 @@ footer p {
section { section {
margin: 0 auto; margin: 0 auto;
padding-top: 5.5rem; padding-top: 5.5rem;
width: 77%; width: 75%;
} }
section.docs .inner, section.blog .inner { section.docs .inner, section.blog .inner {
@ -305,13 +302,12 @@ footer p {
section.docs aside, section.blog aside { section.docs aside, section.blog aside {
flex: 0 1 30%; flex: 0 1 30%;
} }
section.docs aside p, section.blog aside p {
font-size: 1.3rem;
}
section.docs main, section.blog main { section.docs main, section.blog main {
flex: 0 1 70%; flex: 0 1 70%;
} }
#hr {
display: none;
}
.columns { .columns {
display: flex; display: flex;
} }