初步的off-canvas样式
This commit is contained in:
yafeilee
parent
f9af63d308
commit
79e1c87bb1
|
|
@ -2,3 +2,7 @@
|
|||
//= require foundation_and_overrides
|
||||
|
||||
//= require_tree .
|
||||
|
||||
.inner-wrap {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1 @@
|
|||
.container {
|
||||
width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 10px 0 5px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,48 +1,3 @@
|
|||
div.head {
|
||||
margin-bottom: 2em;
|
||||
background-color: #EFEFEF;
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
margin: 0 auto 1em;
|
||||
div.container {
|
||||
.descrip {
|
||||
margin-left: 2em;
|
||||
font-size: 13px;
|
||||
}
|
||||
#about {
|
||||
font-size: 13px;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
ul.nav {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 0.3em;
|
||||
width: 78px;
|
||||
a {
|
||||
display: block;
|
||||
padding: 40px 0 10px 10px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
strong {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
a#home {
|
||||
background-color: #333;
|
||||
}
|
||||
a#tech {
|
||||
background-color: #224b8f;
|
||||
}
|
||||
a#life {
|
||||
background-color: #f15b6c;
|
||||
}
|
||||
a#creator {
|
||||
background-color: #78cdd1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
// Place all the styles related to the home controller here.
|
||||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// Place all the styles related to the photos controller here.
|
||||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
div.slide {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 400px;
|
||||
.subscribe {
|
||||
margin-bottom: 19px;
|
||||
padding: 9px 0 16px 9px;
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 3px;
|
||||
background-color: #E9F2F5;
|
||||
clear: both;
|
||||
.subscribe_descrip {
|
||||
width: 290px;
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
a {
|
||||
img {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,40 +10,45 @@ html
|
|||
= yield :js
|
||||
= csrf_meta_tags
|
||||
body
|
||||
.head
|
||||
.container
|
||||
ul.nav
|
||||
li
|
||||
a#home href="/"
|
||||
= t('head.home')
|
||||
strong Home
|
||||
li
|
||||
a#tech href="/tech"
|
||||
= t('head.tech')
|
||||
strong Tech
|
||||
li
|
||||
a#life href="/life"
|
||||
= t('head.life')
|
||||
strong Life
|
||||
li
|
||||
a#creator href="creator"
|
||||
= t('head.creator')
|
||||
strong Creator
|
||||
strong.descrip
|
||||
= t('head_description')
|
||||
a#about href="/about"
|
||||
= t('head.about_me')
|
||||
.container
|
||||
= yield
|
||||
= render "common/slide"
|
||||
.off-canvas-wrap
|
||||
.inner-wrap
|
||||
nav.tab-bar
|
||||
section.left-small
|
||||
a.left-off-canvas-toggle.menu-icon href="#"
|
||||
span
|
||||
section.middle.tab-bar-section
|
||||
h1.title.middle-text WinDy
|
||||
aslide.left-off-canvas-menu
|
||||
ul.off-canvas-list
|
||||
li
|
||||
label Menu
|
||||
li
|
||||
a href="#" 技术
|
||||
li
|
||||
a href="#" 生活
|
||||
li
|
||||
a href="#" 创业
|
||||
li
|
||||
label 归档
|
||||
li
|
||||
a href="#" 归档
|
||||
li
|
||||
label AboutMe
|
||||
a href="#" 关于我
|
||||
section.main-section
|
||||
- 5.times do
|
||||
p helo
|
||||
a.exit-off-canvas
|
||||
|
||||
javascript:
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-32883596-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
|
||||
javascript:
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-32883596-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue