vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

<footer> in home

old
@soyjavi 2015-11-01 23:06:17 +07:00
parent 1e47f031a1
commit bd277a00f7
3 changed files with 57 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/app/components/layout/home/index.jsx
View File

@ -12,7 +12,7 @@ import readme from './modules/readme.md';
const Home = () => { const Home = () => {
return ( return (
<article> <article>
<header className={style.hero}> <header className={style.header}>
<Logo className={style.logo} /> <Logo className={style.logo} />
<h2 className={style.title}>React Toolbox</h2> <h2 className={style.title}>React Toolbox</h2>
<h4 className={style.subtitle}>Bootstrap your application with beautiful Material Design Components</h4> <h4 className={style.subtitle}>Bootstrap your application with beautiful Material Design Components</h4>
@ -25,8 +25,8 @@ const Home = () => {
{ authors.map((author, index) => { return <Card key={index} {...author} />; }) } { authors.map((author, index) => { return <Card key={index} {...author} />; }) }
</ul> </ul>
</section> </section>
<footer> <footer className={style.footer}>
Copyright <small>React Toolbox ©</small>
</footer> </footer>
</article> </article>
); );

103
docs/app/components/layout/home/style.scss
View File

@ -4,60 +4,60 @@
$content-offset: 4.8 * $unit; $content-offset: 4.8 * $unit;
$content-width: 740px; $content-width: 740px;
.hero { .header {
padding: 0 calc((100% - #{$hero-max-width}) / 2); padding: 0 calc((100% - #{$hero-max-width}) / 2);
color: $hero-text-color; color: $hero-text-color;
text-align: center; text-align: center;
background: linear-gradient(45deg, $hero-gradient-dark 0%, $hero-gradient-light 100%); background: linear-gradient(45deg, $hero-gradient-dark 0%, $hero-gradient-light 100%);
background-position: top right; background-position: top right;
background-size: 120%; background-size: 120%;
}
.logo { .logo {
width: $hero-logo-size; width: $hero-logo-size;
height: $hero-logo-size; height: $hero-logo-size;
margin-top: $hero-item-spacing; margin-top: $hero-item-spacing;
opacity: $hero-logo-opacity; opacity: $hero-logo-opacity;
fill: $hero-text-color; fill: $hero-text-color;
} }
.title { .title {
@include typo-display-2; @include typo-display-3;
margin-top: $hero-item-spacing; margin-top: $hero-item-spacing;
} }
.subtitle { .subtitle {
@include typo-headline; @include typo-headline;
margin-top: 10px; margin-top: 10px;
font-weight: 400; font-weight: 400;
line-height: 1.2; line-height: 1.2;
opacity: $hero-text-secondary-opacity; opacity: $hero-text-secondary-opacity;
} }
.navigation > ul { .navigation > ul {
margin-top: $hero-item-spacing; margin-top: $hero-item-spacing;
list-style: none; list-style: none;
li { li {
position: relative;
display: inline-block;
&:not(:last-child) > a:after {
display: inline-block;
margin: 0 10px;
font-size: 50px;
vertical-align: middle;
content: "·";
}
> a {
@include typo-title;
position: relative; position: relative;
display: inline-block; display: inline-block;
font-weight: 400; &:not(:last-child) > a:after {
line-height: 1.2; display: inline-block;
color: $hero-text-color; margin: 0 10px;
vertical-align: middle; font-size: 50px;
opacity: $hero-text-secondary-opacity; vertical-align: middle;
&:hover { content: "·";
opacity: 1; }
> a {
@include typo-title;
position: relative;
display: inline-block;
font-weight: 400;
line-height: 1.2;
color: $hero-text-color;
vertical-align: middle;
opacity: $hero-text-secondary-opacity;
&:hover {
opacity: 1;
}
} }
} }
} }
@ -74,12 +74,17 @@ $content-width: 740px;
max-width: $content-width; max-width: $content-width;
margin: 0 ($content-offset / 4); margin: 0 ($content-offset / 4);
} }
} .authors {
display: flex;
.authors { justify-content: center;
display: flex; > * {
justify-content: center; margin: 0 $unit;
> * { }
margin: 0 $unit;
} }
} }
.footer {
background-color: darken($color-content, 2.5%);
text-align: center;
padding: $unit 0;
}

3
docs/app/components/layout/main/components/navigation.jsx
View File

@ -43,9 +43,6 @@ const MainNavigation = React.createClass({
</List> </List>
<footer className={style.footer}> <footer className={style.footer}>
<span>React Toolbox ©</span> <span>React Toolbox ©</span>
<span>
<a href=''>Privacy</a> & <a href=''>Terms</a>
</span>
</footer> </footer>
</aside> </aside>
); );