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

reactjs style

Browse Source
This commit is contained in:
krircc 2018-01-21 12:32:56 +08:00
parent 71eef4c755
commit 855ac44557
4 changed files with 59 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/header.liquid
View File

@ -1,6 +1,5 @@
<div id="mnav">
<div id="lnav">
<div id="line"></div>
<h1><a href="/"><img src="/public/imgs/ACTIX.png"/></a><a id="home" href="/">Actix</a></h1>
<label ><a href="#" id="menu">menu</a></label>
</div>

2
_layouts/docs.liquid
View File

@ -25,7 +25,7 @@
</ul>
<p>API</p>
<ul>
<li><a {%if page.permalink == "API-example"%}class="active"{%endif%} href="/docs/API/API-example.html">Misc Example</a></li>
<li><a {%if page.permalink == "API-example"%}class="active"{%endif%} href="/docs/API/API-example.html">API Example</a></li>
</ul>
</aside>
<hr id="hr">

9
index.liquid
View File

@ -2,9 +2,8 @@ title: Actix-web framework
layout: default.liquid
permalink: /index.html
---
<section class="introduction">
<div>
<div id="top">
<div id="top">
<h1>Actix-web framework</h1>
<p>Actix-web is a fast, down-to-earth, open source rust web framework.</p>
<div>
@ -12,6 +11,8 @@ permalink: /index.html
<button><a href="/docs" >Learn</a></button>
</div>
</div>
<div id="index">
<div>
<div id="Features">
<div id="feature" class="columns three">
<article>
@ -57,4 +58,4 @@ permalink: /index.html
</div>
</div>
</div>
</section>
</div>

90
public/css/styles.css
View File

@ -36,23 +36,16 @@ ul, ol, li {
line-height: 60px;
zoom:1;
display: flex;
background-color: white;
justify-content: space-between;
border-bottom: 1px solid #dfdcdc;
box-shadow: 0 3px 3px rgba(200, 216, 206, 0.12), 0 3px 3px rgba(97, 107, 100, 0.24);
}
#line {
position: fixed;
zoom:1;
display: flex;
width: 100%;
height: 4px;
background-color: var(--black);
justify-content: space-between;
/* border-bottom: 1px solid #dfdcdc;
box-shadow: 0 3px 3px rgba(200, 216, 206, 0.12), 0 3px 3px rgba(97, 107, 100, 0.24); */
}
#lnav h1 #home {
font-size: 33px;
margin: auto 1vw;
font-weight: bold;
color: var(--grey);
}
#lnav label {
float: right;
@ -60,9 +53,18 @@ ul, ol, li {
font-weight: bold;
margin: auto 2vw;
}
#lnav label a {
color: var(--grey);
}
#lnav h1 img {
width: 2.8rem;
height: 2.8rem;
margin-top: -0.25rem;
vertical-align:middle;
}
/* ----------------------------------------section----------------------------------------*/
section {
section, #index {
min-height: 100vh;
}
section.docs aside ul li a, section.blog aside ul li a {
@ -141,29 +143,32 @@ footer p {
/* ----------------------------------------home page----------------------------------------*/
#top {
padding: 2rem;
text-align: center;
line-height: 3rem;
background-color: var(--grey);
margin: 0 auto;
padding: 7.5rem 2rem 5rem 2rem;
text-align: center;
line-height: 3rem;
background-color: var(--black);
}
#top h1 {
font-size: 2.2rem;
font-size: 2.2rem;
color: var(--white);
}
#top p {
font-size: 1.1rem;
font-size: 1.1rem;
color: var(--grey);
}
#top button {
margin-right: 15px;
font-size: 18px;
padding: 8px 30px;
background-color: rgb(190, 241, 211);
border: none;
margin-right: 18px;
font-size: 18px;
padding: 8px 22px;
background-color: var(--grey);
border: none;
}
#Features {
margin: 2rem auto;
padding: 1rem 2rem;
background-color: var(--grey);
border: 2px solid var(--grey);
}
#Features #feature {
padding-bottom: 1rem;
@ -180,28 +185,36 @@ footer p {
/* ----------------------------------------mobile----------------------------------------*/
@media only screen and (max-width: 600px) {
#lnav h1 img {
width: 3rem;
height: 3rem;
vertical-align:middle;
margin-left: 1vw;
}
#rnav {
padding-top: 4rem;
padding-top: 3.6rem;
height: 0;
display: block;
overflow: hidden;
background-color: var(--black);
}
#rnav li a {
display:block;
font-weight: bold;
border-bottom: 1px solid #d8d8d8;
border-bottom: 1px solid var(--grey);
padding: 0.5rem 1rem;
color: var(--white);
}
#top {
margin: 0 auto;
padding: 3.5rem 2rem 5rem 2rem;
}
section {
margin: 0 auto ;
padding-top: 1rem;
width: 94%;
}
#index {
margin: 0 auto;
width: 94%;
}
width: 85%;
#hr {
width: 100%;
height: 0.25rem;
@ -215,9 +228,6 @@ footer p {
display: none;
}
#lnav h1 img {
width: 3rem;
height: 3rem;
vertical-align:middle;
margin-left: 5vw;
}
@ -235,12 +245,17 @@ footer p {
font-size: 20px;
font-weight: bold;
padding-left: 2vw;
color: var(--grey);
}
section {
margin: 0 auto;
padding-top: 5rem;
width: 85%;
}
#index {
margin: 0 auto;
width: 85%;
}
section.docs .inner, section.blog .inner {
display: flex;
}
@ -274,9 +289,6 @@ footer p {
display: none;
}
#lnav h1 img {
width: 3rem;
height: 3rem;
vertical-align:middle;
margin-left: 11vw;
}
#rnav {
@ -293,13 +305,17 @@ footer p {
font-size: 20px;
font-weight: bold;
padding-left: 2vw;
color: var(--grey);
}
section {
margin: 0 auto;
padding-top: 5.5rem;
width: 75%;
}
#index {
margin: 0 auto;
width: 75%;
}
section.docs .inner, section.blog .inner {
display: flex;
}