diff --git a/docs/app/components/layout/home/index.jsx b/docs/app/components/layout/home/index.jsx index 92ceeecd..20121ebc 100644 --- a/docs/app/components/layout/home/index.jsx +++ b/docs/app/components/layout/home/index.jsx @@ -12,7 +12,7 @@ import readme from './modules/readme.md'; const Home = () => { return (
-
+

React Toolbox

Bootstrap your application with beautiful Material Design Components

@@ -25,8 +25,8 @@ const Home = () => { { authors.map((author, index) => { return ; }) } -
); diff --git a/docs/app/components/layout/home/style.scss b/docs/app/components/layout/home/style.scss index 57fc4ee5..bd705562 100644 --- a/docs/app/components/layout/home/style.scss +++ b/docs/app/components/layout/home/style.scss @@ -4,60 +4,60 @@ $content-offset: 4.8 * $unit; $content-width: 740px; -.hero { +.header { padding: 0 calc((100% - #{$hero-max-width}) / 2); color: $hero-text-color; text-align: center; background: linear-gradient(45deg, $hero-gradient-dark 0%, $hero-gradient-light 100%); background-position: top right; background-size: 120%; -} -.logo { - width: $hero-logo-size; - height: $hero-logo-size; - margin-top: $hero-item-spacing; - opacity: $hero-logo-opacity; - fill: $hero-text-color; -} + .logo { + width: $hero-logo-size; + height: $hero-logo-size; + margin-top: $hero-item-spacing; + opacity: $hero-logo-opacity; + fill: $hero-text-color; + } -.title { - @include typo-display-2; - margin-top: $hero-item-spacing; -} + .title { + @include typo-display-3; + margin-top: $hero-item-spacing; + } -.subtitle { - @include typo-headline; - margin-top: 10px; - font-weight: 400; - line-height: 1.2; - opacity: $hero-text-secondary-opacity; -} + .subtitle { + @include typo-headline; + margin-top: 10px; + font-weight: 400; + line-height: 1.2; + opacity: $hero-text-secondary-opacity; + } -.navigation > ul { - margin-top: $hero-item-spacing; - list-style: none; - 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; + .navigation > ul { + margin-top: $hero-item-spacing; + list-style: none; + li { 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; + &:not(:last-child) > a:after { + display: inline-block; + margin: 0 10px; + font-size: 50px; + vertical-align: middle; + content: "·"; + } + > 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; margin: 0 ($content-offset / 4); } -} - -.authors { - display: flex; - justify-content: center; - > * { - margin: 0 $unit; + .authors { + display: flex; + justify-content: center; + > * { + margin: 0 $unit; + } } } + +.footer { + background-color: darken($color-content, 2.5%); + text-align: center; + padding: $unit 0; +} diff --git a/docs/app/components/layout/main/components/navigation.jsx b/docs/app/components/layout/main/components/navigation.jsx index acbda510..868816e6 100644 --- a/docs/app/components/layout/main/components/navigation.jsx +++ b/docs/app/components/layout/main/components/navigation.jsx @@ -43,9 +43,6 @@ const MainNavigation = React.createClass({ );