[BEAM-501] Large visual refresh of Apache Beam website homepage
Project: http://git-wip-us.apache.org/repos/asf/beam-site/repo Commit: http://git-wip-us.apache.org/repos/asf/beam-site/commit/9151d669 Tree: http://git-wip-us.apache.org/repos/asf/beam-site/tree/9151d669 Diff: http://git-wip-us.apache.org/repos/asf/beam-site/diff/9151d669 Branch: refs/heads/asf-site Commit: 9151d66916526b75321112b2c82c260e3fd01d46 Parents: 9ffe5ec Author: Jeremy Weinstein <[email protected]> Authored: Thu May 4 16:36:30 2017 -0700 Committer: Dan Halperin <[email protected]> Committed: Tue May 16 21:41:35 2017 -0400 ---------------------------------------------------------------------- src/_includes/footer.html | 64 +- src/_includes/head.html | 10 +- src/_includes/header.html | 165 +- src/_layouts/default.html | 18 +- src/_sass/_base.scss | 206 --- src/_sass/_breakpoints.sass | 43 + src/_sass/_button.sass | 28 + src/_sass/_cards.sass | 52 + src/_sass/_ctas.sass | 11 + src/_sass/_footer.sass | 44 + src/_sass/_global.sass | 31 + src/_sass/_graphic.sass | 10 + src/_sass/_header.sass | 3 + src/_sass/_hero.sass | 139 ++ src/_sass/_logos.sass | 19 + src/_sass/_navbar.sass | 26 + src/_sass/_pillars.sass | 26 + src/_sass/_type.sass | 40 + src/_sass/_vars.sass | 12 + src/css/main.scss | 53 - src/css/site.scss | 27 + src/css/theme.css | 21 - src/images/apache_logo_circle.svg | 17 + src/images/beam_architecture.png | Bin 0 -> 26931 bytes src/images/beam_logo_circle.svg | 45 + src/images/card_border.svg | 19 + src/images/cards_bg.svg | 20 + src/images/hero_bg.svg | 33 + src/images/hero_bg_flat.svg | 46 + src/images/logo_apex.png | Bin 0 -> 8061 bytes src/images/logo_flink.png | Bin 0 -> 18261 bytes src/images/logo_google_cloud.png | Bin 0 -> 13665 bytes src/images/logo_spark.png | Bin 0 -> 13788 bytes src/index.md | 163 +- src/styles/site.scss | 7 - src/v2/css/beam.css | 563 ------- src/v2/images/apache-feather-tm.png | Bin 3318 -> 0 bytes src/v2/images/apache.png | Bin 41489 -> 0 bytes src/v2/images/beam_logo_navbar.png | Bin 2898 -> 0 bytes src/v2/images/beam_logo_s.png | Bin 11564 -> 0 bytes src/v2/images/bg.png | Bin 244 -> 0 bytes src/v2/images/book.png | Bin 17534 -> 0 bytes src/v2/images/check.gif | Bin 604 -> 0 bytes src/v2/images/cloud.png | Bin 13120 -> 0 bytes src/v2/images/container.png | Bin 16295 -> 0 bytes src/v2/images/enterprise.png | Bin 30546 -> 0 bytes src/v2/images/favicon.ico | Bin 370070 -> 0 bytes src/v2/images/homepage-bg.jpg | Bin 17973 -> 0 bytes src/v2/images/puzzle.png | Bin 11762 -> 0 bytes src/v2/slick/ajax-loader.gif | Bin 4178 -> 0 bytes src/v2/slick/config.rb | 10 - src/v2/slick/fonts/slick.eot | Bin 2048 -> 0 bytes src/v2/slick/fonts/slick.svg | 14 - src/v2/slick/fonts/slick.ttf | Bin 1892 -> 0 bytes src/v2/slick/fonts/slick.woff | Bin 1380 -> 0 bytes src/v2/slick/slick-theme.css | 203 --- src/v2/slick/slick-theme.less | 168 -- src/v2/slick/slick-theme.scss | 190 --- src/v2/slick/slick.css | 119 -- src/v2/slick/slick.js | 2670 ------------------------------ src/v2/slick/slick.less | 99 -- src/v2/slick/slick.min.js | 18 - src/v2/slick/slick.scss | 99 -- 63 files changed, 965 insertions(+), 4586 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_includes/footer.html ---------------------------------------------------------------------- diff --git a/src/_includes/footer.html b/src/_includes/footer.html index 8f7798f..e2786ab 100644 --- a/src/_includes/footer.html +++ b/src/_includes/footer.html @@ -1,18 +1,50 @@ -<hr> - <div class="row"> - <div class="col-xs-12"> - <footer> - <p class="text-center"> - © Copyright - <a href="http://www.apache.org";>The Apache Software Foundation</a>, - {{ 'now' | date: "%Y" }}. All Rights Reserved. - </p> - <p class="text-center"> - <a href="{{ site.baseurl }}/privacy_policy">Privacy Policy</a> | - <a href="{{ "/feed.xml" | prepend: site.baseurl }}">RSS Feed</a> - </p> - </footer> +<footer class="footer"> + <div class="footer__contained"> + <div class="footer__cols"> + <div class="footer__cols__col"> + <div class="footer__cols__col__logo"> + <img src="{{'/images/beam_logo_circle.svg'|prepend:site.baseurl}}" class="footer__logo" alt="Beam logo"> + </div> + <div class="footer__cols__col__logo"> + <img src="{{'/images/apache_logo_circle.svg'|prepend:site.baseurl}}" class="footer__logo" alt="Apache logo"> + </div> </div> + <div class="footer__cols__col footer__cols__col--md"> + <div class="footer__cols__col__title">Start</div> + <div class="footer__cols__col__link"><a href="{{'/get-started/beam-overview/'|prepend:site.baseurl}}">Overview</a></div> + <div class="footer__cols__col__link"><a href="{{'/get-started/quickstart-java/'|prepend:site.baseurl}}">Quickstart (Java)</a></div> + <div class="footer__cols__col__link"><a href="{{'/get-started/quickstart-py/'|prepend:site.baseurl}}">Quickstart (Python)</a></div> + <div class="footer__cols__col__link"><a href="{{'/get-started/downloads/'|prepend:site.baseurl}}">Downloads</a></div> + </div> + <div class="footer__cols__col footer__cols__col--md"> + <div class="footer__cols__col__title">Docs</div> + <div class="footer__cols__col__link"><a href="{{'/documentation/programming-guide/'|prepend:site.baseurl}}">Concepts</a></div> + <div class="footer__cols__col__link"><a href="{{'/documentation/pipelines/design-your-pipeline/'|prepend:site.baseurl}}">Pipelines</a></div> + <div class="footer__cols__col__link"><a href="{{'/documentation/runners/capability-matrix/'|prepend:site.baseurl}}">Runners</a></div> + </div> + <div class="footer__cols__col footer__cols__col--md"> + <div class="footer__cols__col__title">Community</div> + <div class="footer__cols__col__link"><a href="{{'/contribute/'|prepend:site.baseurl}}">Contribute</a></div> + <div class="footer__cols__col__link"><a href="{{'/contribute/team/'|prepend:site.baseurl}}">Team</a></div> + <div class="footer__cols__col__link"><a href="{{'/contribute/presentation-materials/'|prepend:site.baseurl}}">Media</a></div> + </div> + <div class="footer__cols__col footer__cols__col--md"> + <div class="footer__cols__col__title">Resources</div> + <div class="footer__cols__col__link"><a href="{{'/blog/'|prepend:site.baseurl}}">Blog</a></div> + <div class="footer__cols__col__link"><a href="{{'/get-started/support/'|prepend:site.baseurl}}">Support</a></div> + <div class="footer__cols__col__link"><a href="https://github.com/apache/beam";>GitHub</a></div> + </div> + </div> + </div> + <div class="footer__bottom"> + © + <a href="http://www.apache.org";>The Apache Software Foundation</a> + | <a href="{{ site.baseurl }}/privacy_policy">Privacy Policy</a> + | <a href="{{ "/feed.xml" | prepend: site.baseurl }}">RSS Feed</a> + <br><br> + Apache Beam, Apache, Beam, the Beam logo, and the Apache feather logo are + either registered trademarks or trademarks of The Apache Software + Foundation. All other products or name brands are trademarks of their + respective holders, including The Apache Software Foundation. </div> - <!-- container div end --> -</div> +</footer> http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_includes/head.html ---------------------------------------------------------------------- diff --git a/src/_includes/head.html b/src/_includes/head.html index 80f1f20..6d21742 100644 --- a/src/_includes/head.html +++ b/src/_includes/head.html @@ -2,26 +2,22 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title> <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}"> - - <link rel="stylesheet" href="{{ "/styles/site.css" | prepend: site.baseurl }}"> - <link rel="stylesheet" href="{{ "/css/theme.css" | prepend: site.baseurl }}"> + <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400"; rel="stylesheet"> + <link rel="stylesheet" href="{{ "/css/site.css" | prepend: site.baseurl }}"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js";></script> <script src="{{ "/js/bootstrap.min.js" | prepend: site.baseurl }}"></script> <script src="{{ "/js/language-switch.js" | prepend: site.baseurl }}"></script> <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" data-proofer-ignore> + <link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/images/favicon.ico"> <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); - ga('create', 'UA-73650088-1', 'auto'); ga('send', 'pageview'); - </script> - <link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/images/favicon.ico"> </head> http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_includes/header.html ---------------------------------------------------------------------- diff --git a/src/_includes/header.html b/src/_includes/header.html index 1ea3496..69027d2 100644 --- a/src/_includes/header.html +++ b/src/_includes/header.html @@ -1,100 +1,99 @@ -<nav class="navbar navbar-default navbar-fixed-top"> - <div class="container"> +<nav class="header navbar navbar-fixed-top"> <div class="navbar-header"> <a href="{{ site.baseurl }}/" class="navbar-brand" > <img alt="Brand" style="height: 25px" src="{{ "/images/beam_logo_navbar.png" | prepend: site.baseurl }}"> </a> - <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Get Started <span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="{{ site.baseurl }}/get-started/beam-overview/">Beam Overview</a></li> - <li><a href="{{ site.baseurl }}/get-started/quickstart-java/">Quickstart - Java</a></li> - <li><a href="{{ site.baseurl }}/get-started/quickstart-py/">Quickstart - Python</a></li> - <li role="separator" class="divider"></li> - <li class="dropdown-header">Example Walkthroughs</li> - <li><a href="{{ site.baseurl }}/get-started/wordcount-example/">WordCount</a></li> - <li><a href="{{ site.baseurl }}/get-started/mobile-gaming-example/">Mobile Gaming</a></li> - <li role="separator" class="divider"></li> - <li class="dropdown-header">Resources</li> - <li><a href="{{ site.baseurl }}/get-started/downloads">Downloads</a></li> - <li><a href="{{ site.baseurl }}/get-started/support">Support</a></li> - </ul> - </li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Documentation <span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="{{ site.baseurl }}/documentation">Using the Documentation</a></li> - <li role="separator" class="divider"></li> - <li class="dropdown-header">Beam Concepts</li> - <li><a href="{{ site.baseurl }}/documentation/programming-guide/">Programming Guide</a></li> - <li><a href="{{ site.baseurl }}/documentation/resources/">Additional Resources</a></li> - <li role="separator" class="divider"></li> - <li class="dropdown-header">Pipeline Fundamentals</li> - <li><a href="{{ site.baseurl }}/documentation/pipelines/design-your-pipeline/">Design Your Pipeline</a></li> - <li><a href="{{ site.baseurl }}/documentation/pipelines/create-your-pipeline/">Create Your Pipeline</a></li> - <li><a href="{{ site.baseurl }}/documentation/pipelines/test-your-pipeline/">Test Your Pipeline</a></li> - <li><a href="{{ site.baseurl }}/documentation/io/io-toc/">Pipeline I/O</a></li> - <li role="separator" class="divider"></li> - <li class="dropdown-header">SDKs</li> - <li><a href="{{ site.baseurl }}/documentation/sdks/java/">Java SDK</a></li> - <li><a href="{{ site.baseurl }}/documentation/sdks/javadoc/{{ site.release_latest }}/" target="_blank">Java SDK API Reference <img src="{{ site.baseurl }}/images/external-link-icon.png" - width="14" height="14" - alt="External link."></a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Get Started <span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="{{ site.baseurl }}/get-started/beam-overview/">Beam Overview</a></li> + <li><a href="{{ site.baseurl }}/get-started/quickstart-java/">Quickstart - Java</a></li> + <li><a href="{{ site.baseurl }}/get-started/quickstart-py/">Quickstart - Python</a></li> + <li role="separator" class="divider"></li> + <li class="dropdown-header">Example Walkthroughs</li> + <li><a href="{{ site.baseurl }}/get-started/wordcount-example/">WordCount</a></li> + <li><a href="{{ site.baseurl }}/get-started/mobile-gaming-example/">Mobile Gaming</a></li> + <li role="separator" class="divider"></li> + <li class="dropdown-header">Resources</li> + <li><a href="{{ site.baseurl }}/get-started/downloads">Downloads</a></li> + <li><a href="{{ site.baseurl }}/get-started/support">Support</a></li> + </ul> </li> - <li><a href="{{ site.baseurl }}/documentation/sdks/python/">Python SDK</a></li> - <li><a href="{{ site.baseurl }}/documentation/sdks/pydoc/{{ site.release_latest }}/" target="_blank">Python SDK API Reference <img src="{{ site.baseurl }}/images/external-link-icon.png" - width="14" height="14" - alt="External link."></a> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Documentation <span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="{{ site.baseurl }}/documentation">Using the Documentation</a></li> + <li role="separator" class="divider"></li> + <li class="dropdown-header">Beam Concepts</li> + <li><a href="{{ site.baseurl }}/documentation/programming-guide/">Programming Guide</a></li> + <li><a href="{{ site.baseurl }}/documentation/resources/">Additional Resources</a></li> + <li role="separator" class="divider"></li> + <li class="dropdown-header">Pipeline Fundamentals</li> + <li><a href="{{ site.baseurl }}/documentation/pipelines/design-your-pipeline/">Design Your Pipeline</a></li> + <li><a href="{{ site.baseurl }}/documentation/pipelines/create-your-pipeline/">Create Your Pipeline</a></li> + <li><a href="{{ site.baseurl }}/documentation/pipelines/test-your-pipeline/">Test Your Pipeline</a></li> + <li><a href="{{ site.baseurl }}/documentation/io/io-toc/">Pipeline I/O</a></li> + <li role="separator" class="divider"></li> + <li class="dropdown-header">SDKs</li> + <li><a href="{{ site.baseurl }}/documentation/sdks/java/">Java SDK</a></li> + <li><a href="{{ site.baseurl }}/documentation/sdks/javadoc/{{ site.release_latest }}/" target="_blank">Java SDK API Reference <img src="{{ site.baseurl }}/images/external-link-icon.png" + width="14" height="14" + alt="External link."></a> + </li> + <li><a href="{{ site.baseurl }}/documentation/sdks/python/">Python SDK</a></li> + <li><a href="{{ site.baseurl }}/documentation/sdks/pydoc/{{ site.release_latest }}/" target="_blank">Python SDK API Reference <img src="{{ site.baseurl }}/images/external-link-icon.png" + width="14" height="14" + alt="External link."></a> + </li> + <li role="separator" class="divider"></li> + <li class="dropdown-header">Runners</li> + <li><a href="{{ site.baseurl }}/documentation/runners/capability-matrix/">Capability Matrix</a></li> + <li><a href="{{ site.baseurl }}/documentation/runners/direct/">Direct Runner</a></li> + <li><a href="{{ site.baseurl }}/documentation/runners/apex/">Apache Apex Runner</a></li> + <li><a href="{{ site.baseurl }}/documentation/runners/flink/">Apache Flink Runner</a></li> + <li><a href="{{ site.baseurl }}/documentation/runners/spark/">Apache Spark Runner</a></li> + <li><a href="{{ site.baseurl }}/documentation/runners/dataflow/">Cloud Dataflow Runner</a></li> + </ul> </li> - <li role="separator" class="divider"></li> - <li class="dropdown-header">Runners</li> - <li><a href="{{ site.baseurl }}/documentation/runners/capability-matrix/">Capability Matrix</a></li> - <li><a href="{{ site.baseurl }}/documentation/runners/direct/">Direct Runner</a></li> - <li><a href="{{ site.baseurl }}/documentation/runners/apex/">Apache Apex Runner</a></li> - <li><a href="{{ site.baseurl }}/documentation/runners/flink/">Apache Flink Runner</a></li> - <li><a href="{{ site.baseurl }}/documentation/runners/spark/">Apache Spark Runner</a></li> - <li><a href="{{ site.baseurl }}/documentation/runners/dataflow/">Cloud Dataflow Runner</a></li> - </ul> - </li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Contribute <span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="{{ site.baseurl }}/contribute">Get Started Contributing</a></li> - <li role="separator" class="divider"></li> - <li class="dropdown-header">Guides</li> - <li><a href="{{ site.baseurl }}/contribute/contribution-guide/">Contribution Guide</a></li> - <li><a href="{{ site.baseurl }}/contribute/testing/">Testing Guide</a></li> - <li><a href="{{ site.baseurl }}/contribute/release-guide/">Release Guide</a></li> - <li><a href="{{ site.baseurl }}/contribute/ptransform-style-guide/">PTransform Style Guide</a></li> - <li role="separator" class="divider"></li> - <li class="dropdown-header">Technical References</li> - <li><a href="{{ site.baseurl }}/contribute/design-principles/">Design Principles</a></li> - <li><a href="{{ site.baseurl }}/contribute/work-in-progress/">Ongoing Projects</a></li> - <li><a href="{{ site.baseurl }}/contribute/source-repository/">Source Repository</a></li> - <li role="separator" class="divider"></li> - <li class="dropdown-header">Promotion</li> - <li><a href="{{ site.baseurl }}/contribute/presentation-materials/">Presentation Materials</a></li> - <li><a href="{{ site.baseurl }}/contribute/logos/">Logos and Design</a></li> - <li role="separator" class="divider"></li> - <li><a href="{{ site.baseurl }}/contribute/maturity-model/">Maturity Model</a></li> - <li><a href="{{ site.baseurl }}/contribute/team/">Team</a></li> - </ul> - </li> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Contribute <span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="{{ site.baseurl }}/contribute">Get Started Contributing</a></li> + <li role="separator" class="divider"></li> + <li class="dropdown-header">Guides</li> + <li><a href="{{ site.baseurl }}/contribute/contribution-guide/">Contribution Guide</a></li> + <li><a href="{{ site.baseurl }}/contribute/testing/">Testing Guide</a></li> + <li><a href="{{ site.baseurl }}/contribute/release-guide/">Release Guide</a></li> + <li><a href="{{ site.baseurl }}/contribute/ptransform-style-guide/">PTransform Style Guide</a></li> + <li role="separator" class="divider"></li> + <li class="dropdown-header">Technical References</li> + <li><a href="{{ site.baseurl }}/contribute/design-principles/">Design Principles</a></li> + <li><a href="{{ site.baseurl }}/contribute/work-in-progress/">Ongoing Projects</a></li> + <li><a href="{{ site.baseurl }}/contribute/source-repository/">Source Repository</a></li> + <li role="separator" class="divider"></li> + <li class="dropdown-header">Promotion</li> + <li><a href="{{ site.baseurl }}/contribute/presentation-materials/">Presentation Materials</a></li> + <li><a href="{{ site.baseurl }}/contribute/logos/">Logos and Design</a></li> + <li role="separator" class="divider"></li> + <li><a href="{{ site.baseurl }}/contribute/maturity-model/">Maturity Model</a></li> + <li><a href="{{ site.baseurl }}/contribute/team/">Team</a></li> + </ul> + </li> <li><a href="{{ site.baseurl }}/blog">Blog</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="https://www.apache.org/foundation/press/kit/feather_small.png"; alt="Apache Logo" style="height:24px;">Apache Software Foundation<span class="caret"></span></a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="https://www.apache.org/foundation/press/kit/feather_small.png"; alt="Apache Logo" style="height:20px;"><span class="caret"></span></a> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="http://www.apache.org/";>ASF Homepage</a></li> <li><a href="http://www.apache.org/licenses/";>License</a></li> @@ -106,8 +105,4 @@ </li> </ul> </div><!--/.nav-collapse --> - </div> </nav> - - -<link rel="stylesheet" href=""> http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_layouts/default.html ---------------------------------------------------------------------- diff --git a/src/_layouts/default.html b/src/_layouts/default.html index b7b9c90..d0d2d17 100644 --- a/src/_layouts/default.html +++ b/src/_layouts/default.html @@ -1,21 +1,11 @@ <!DOCTYPE html> <html lang="en"> - {% include head.html %} - - <body role="document"> - + <body class="body {% if page.body_class %}{{page.body_class}}{% endif %}"> {% include header.html %} - - <div class="container" role="main"> - - <div class="row"> - {{ content }} - </div> - - + <div class="body__contained"> + {{ content }} + </div> {% include footer.html %} - </body> - </html> http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_sass/_base.scss ---------------------------------------------------------------------- diff --git a/src/_sass/_base.scss b/src/_sass/_base.scss deleted file mode 100644 index 0883c3c..0000000 --- a/src/_sass/_base.scss +++ /dev/null @@ -1,206 +0,0 @@ -/** - * Reset some basic elements - */ -body, h1, h2, h3, h4, h5, h6, -p, blockquote, pre, hr, -dl, dd, ol, ul, figure { - margin: 0; - padding: 0; -} - - - -/** - * Basic styling - */ -body { - font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; - color: $text-color; - background-color: $background-color; - -webkit-text-size-adjust: 100%; - -webkit-font-feature-settings: "kern" 1; - -moz-font-feature-settings: "kern" 1; - -o-font-feature-settings: "kern" 1; - font-feature-settings: "kern" 1; - font-kerning: normal; -} - - - -/** - * Set `margin-bottom` to maintain vertical rhythm - */ -h1, h2, h3, h4, h5, h6, -p, blockquote, pre, -ul, ol, dl, figure, -%vertical-rhythm { - margin-bottom: $spacing-unit / 2; -} - - - -/** - * Images - */ -img { - max-width: 100%; - vertical-align: middle; -} - - - -/** - * Figures - */ -figure > img { - display: block; -} - -figcaption { - font-size: $small-font-size; -} - - - -/** - * Lists - */ -ul, ol { - margin-left: $spacing-unit; -} - -li { - > ul, - > ol { - margin-bottom: 0; - } -} - - - -/** - * Headings - */ -h1, h2, h3, h4, h5, h6 { - font-weight: $base-font-weight; -} - - - -/** - * Links - */ -a { - color: $brand-color; - text-decoration: none; - - &:visited { - color: darken($brand-color, 15%); - } - - &:hover { - color: $text-color; - text-decoration: underline; - } -} - - - -/** - * Blockquotes - */ -blockquote { - color: $grey-color; - border-left: 4px solid $grey-color-light; - padding-left: $spacing-unit / 2; - font-size: 18px; - letter-spacing: -1px; - font-style: italic; - - > :last-child { - margin-bottom: 0; - } -} - - - -/** - * Code formatting - */ -pre, -code { - font-size: 15px; - border: 1px solid $grey-color-light; - border-radius: 3px; - background-color: #eef; -} - -code { - padding: 1px 5px; -} - -pre { - padding: 8px 12px; - overflow-x: auto; - - > code { - border: 0; - padding-right: 0; - padding-left: 0; - } -} - - - -/** - * Wrapper - */ -.wrapper { - max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2)); - max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); - margin-right: auto; - margin-left: auto; - padding-right: $spacing-unit; - padding-left: $spacing-unit; - @extend %clearfix; - - @include media-query($on-laptop) { - max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit})); - max-width: calc(#{$content-width} - (#{$spacing-unit})); - padding-right: $spacing-unit / 2; - padding-left: $spacing-unit / 2; - } -} - - - -/** - * Clearfix - */ -%clearfix { - - &:after { - content: ""; - display: table; - clear: both; - } -} - - - -/** - * Icons - */ -.icon { - - > svg { - display: inline-block; - width: 16px; - height: 16px; - vertical-align: middle; - - path { - fill: $grey-color; - } - } -} http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_sass/_breakpoints.sass ---------------------------------------------------------------------- diff --git a/src/_sass/_breakpoints.sass b/src/_sass/_breakpoints.sass new file mode 100644 index 0000000..d500ba8 --- /dev/null +++ b/src/_sass/_breakpoints.sass @@ -0,0 +1,43 @@ +$ak-breakpoint-xs: 374px !default +$ak-breakpoint-sm: 480px !default +$ak-breakpoint-md: 718px !default +$ak-breakpoint-lg: 1024px !default +$ak-breakpoint-xl: 1292px !default + +// Only override the `ak-breakpoint-map` var to define custom size names. +$ak-breakpoint-map: (xs: $ak-breakpoint-xs, sm: $ak-breakpoint-sm, md: $ak-breakpoint-md, lg: $ak-breakpoint-lg, xl: $ak-breakpoint-xl) !default + +@mixin ak-breakpoint-gt($size) + $width: map-get($ak-breakpoint-map, $size) + @media (min-width: $width) + @content + +@mixin ak-breakpoint-rule-gt($sizes: (sm, md, lg), $include-root: true) + @if $include-root + @content + + @each $size in $sizes + &--gt-#{$size} + @include ak-breakpoint-gt($size) + @content + +=xs + +ak-breakpoint-gt(xs) + @content +=sm + +ak-breakpoint-gt(sm) + @content +=md + +ak-breakpoint-gt(lg) + @content +=lg + +ak-breakpoint-gt(lg) + @content +=xl + +ak-breakpoint-gt(xl) + @content + +=contained + padding: 0 $pad + max-width: 1280px + margin: 0 auto http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_sass/_button.sass ---------------------------------------------------------------------- diff --git a/src/_sass/_button.sass b/src/_sass/_button.sass new file mode 100644 index 0000000..33da9ea --- /dev/null +++ b/src/_sass/_button.sass @@ -0,0 +1,28 @@ +.button + -webkit-transition: background-color 0.3s + background-color: #fff + border-radius: 5px + box-shadow: $box-shadow + cursor: pointer + display: inline-block + font-weight: $font-weight-bold + padding: 13px 20px + position: relative + text-decoration: none + letter-spacing: 1px + text-transform: uppercase + transition: background-color 0.3s ease, box-shadow 0.25s ease + color: $color-dark + + &--primary + background-color: $color-brand + color: #fff !important + &:hover + color: #fff !important + + &:hover + text-decoration: none + box-shadow: 0 0 6px 0 rgba(0,0,0,0.12), 0 3px 6px 0 rgba(0,0,0,0.18) + + & + .button + margin-left: $pad / 2 http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_sass/_cards.sass ---------------------------------------------------------------------- diff --git a/src/_sass/_cards.sass b/src/_sass/_cards.sass new file mode 100644 index 0000000..282bc2b --- /dev/null +++ b/src/_sass/_cards.sass @@ -0,0 +1,52 @@ +.cards + background-image: url(../images/cards_bg.svg) + background-size: 100% + background-repeat: no-repeat + background-position: top + text-align: center + margin-bottom: $pad*2 + + .cards__title + +type-h2 + color: #fff + padding-top: $pad-md + margin-bottom: $pad + + .cards__body + max-width: 550px + +type-body + margin: 0 auto + + .cards__cards + margin-bottom: $pad*2 + +md + display: flex + justify-content: center + align-items: center + + .cards__cards__card + background: #fff + box-shadow: $box-shadow + max-width: 300px + margin: 0 auto $pad + padding: $pad*1.5 + +md + margin: 0 $pad/2 + + .cards__cards__card__body + margin-bottom: $pad + +type-h3 + + .cards__cards__card__user + display: flex + justify-content: center + align-items: center + + .cards__cards__card__user__icon + border-radius: 100% + background: #efefef + width: 40px + height: 40px + + .cards__cards__card__user__name + margin-left: $pad/2 http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_sass/_ctas.sass ---------------------------------------------------------------------- diff --git a/src/_sass/_ctas.sass b/src/_sass/_ctas.sass new file mode 100644 index 0000000..86cb0e5 --- /dev/null +++ b/src/_sass/_ctas.sass @@ -0,0 +1,11 @@ +.ctas + text-align: center + margin: $pad-xl 0 + + .ctas__ctas + &--top + margin-bottom: $pad + + .ctas__title + +type-h2 + margin-bottom: $pad http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_sass/_footer.sass ---------------------------------------------------------------------- diff --git a/src/_sass/_footer.sass b/src/_sass/_footer.sass new file mode 100644 index 0000000..6f49df7 --- /dev/null +++ b/src/_sass/_footer.sass @@ -0,0 +1,44 @@ +.footer + background: $color-dark + padding: 40px 0 + margin-top: 70px + @at-root .body--index & + margin-top: 0 + + color: #fff + .footer__contained + +contained + + a + color: #fff + + .footer__cols + display: flex + justify-content: space-around + + .footer__cols__col + padding: 5px + box-sizing: border-box + + &:first-child + +md + width: 20% + + &--md + +md + width: 20% + + .footer__cols__col__title + color: #fff + font-weight: $font-weight-bold + margin-bottom: $pad + + .footer__cols__col__link + margin-bottom: 4px + + .footer__cols__col__logo + margin-bottom: $pad + + .footer__bottom + margin-top: $pad-md + text-align: center http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_sass/_global.sass ---------------------------------------------------------------------- diff --git a/src/_sass/_global.sass b/src/_sass/_global.sass new file mode 100644 index 0000000..ac8e34c --- /dev/null +++ b/src/_sass/_global.sass @@ -0,0 +1,31 @@ +html, +body + -webkit-font-smoothing: antialiased + font-family: 'Roboto', arial, sans-serif + background: #efefef + margin: 0 + padding: 0 + +.body + background: #fff + max-width: 1440px + margin: 0 auto + padding-top: 130px + + &:not(.body--index) + .body__contained + +contained + +.section + &:not(.section--wide) + padding-right: $pad + padding-left: $pad + max-width: 1280px + margin-right: auto + margin-left: auto + + .section__contained + +contained + + a + color: $color-brand http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_sass/_graphic.sass ---------------------------------------------------------------------- diff --git a/src/_sass/_graphic.sass b/src/_sass/_graphic.sass new file mode 100644 index 0000000..ad1e653 --- /dev/null +++ b/src/_sass/_graphic.sass @@ -0,0 +1,10 @@ +.graphic + .graphic__image + text-align: center + line-height: 0 + + img + max-width: 100% + margin: 0 auto + max-height: 500px + border: 1px solid #efefef http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_sass/_header.sass ---------------------------------------------------------------------- diff --git a/src/_sass/_header.sass b/src/_sass/_header.sass new file mode 100644 index 0000000..239545a --- /dev/null +++ b/src/_sass/_header.sass @@ -0,0 +1,3 @@ +.header + box-shadow: 0 0 40px 0 rgba(0,0,0,0.1) + background: #fff http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_sass/_hero.sass ---------------------------------------------------------------------- diff --git a/src/_sass/_hero.sass b/src/_sass/_hero.sass new file mode 100644 index 0000000..fc73b58 --- /dev/null +++ b/src/_sass/_hero.sass @@ -0,0 +1,139 @@ +.hero-bg + background-image: url(../images/hero_bg_flat.svg) + background-repeat: no-repeat + background-size: contain + background-position: top center + margin-top: -50px + +md + background-size: 100% + padding-bottom: $pad + +.hero + padding-top: $pad-xl + margin-bottom: $pad-md + position: relative + z-index: 1 + +md + padding-top: $pad-sm + margin-bottom: $pad-xl + + .hero__content + position: relative + z-index: 1 + + .hero__image + bottom: 0 + content: '' + left: 0 + line-height: 0 + position: absolute + right: 0 + top: 0 + z-index: 0 + img + position: absolute + bottom: 0 + width: 100% + + .hero__title + +type-h1 + color: #fff + max-width: 500px + margin: 0 auto $pad + text-align: center + +md + margin: 0 0 $pad + text-align: left + + .hero__ctas + text-align: center + margin-bottom: $pad-md + +md + margin-bottom: 0 + text-align: left + + &--first + margin-bottom: $pad + +md + margin-bottom: $pad-sm + + .hero__subtitle + +type-h3 + color: #fff + max-width: 540px + margin: 0 auto $pad + font-weight: $font-weight-semibold + text-align: center + +md + margin: 0 0 $pad-md + text-align: left + + .hero__blog + .hero__blog__title + +type-h4 + font-weight: $font-weight-bold + margin-bottom: $pad + text-align: center + +md + color: #fff + text-align: left + margin-bottom: $pad/2 + + .hero__blog__cards + +md + display: flex + margin: 0 -10px + + .hero__blog__cards__card + background-color: #fff + color: inherit + box-shadow: $box-shadow + padding: 20px + display: block + transition: transform 300ms ease, box-shadow 300ms ease + position: relative + max-width: 300px + margin: 0 auto $pad + +md + margin: 0 10px + + &:before + background-image: url(../images/card_border.svg) + background-position: top + background-repeat: no-repeat + background-size: cover + content: ' ' + display: block + height: 2px + position: absolute + width: 100% + left: 0 + top: 0 + + &:hover + text-decoration: none + transform: translateY(-8px) + box-shadow: $box-shadow-hover + + .hero__blog__cards__card__title + +type-body + margin-bottom: $pad + + .hero__blog__cards__card__date + +type-body-sm + font-weight: $font-weight-semibold + text-transform: uppercase + letter-spacing: 1px + + .hero__cols + +md + display: flex + min-height: 500px + + .hero__cols__col + width: 50% + display: flex + align-items: flex-end + + &:first-child + align-items: center http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_sass/_logos.sass ---------------------------------------------------------------------- diff --git a/src/_sass/_logos.sass b/src/_sass/_logos.sass new file mode 100644 index 0000000..8e58515 --- /dev/null +++ b/src/_sass/_logos.sass @@ -0,0 +1,19 @@ +.logos + text-align: center + margin: $pad-xl 0 + + .logos__title + +type-h2 + margin-bottom: $pad-md + + .logos__logos + display: flex + justify-content: center + + .logos__logos__logo + line-height: 0 + margin: 0 $pad + +md + margin: 0 $pad-md + img + max-height: 70px http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_sass/_navbar.sass ---------------------------------------------------------------------- diff --git a/src/_sass/_navbar.sass b/src/_sass/_navbar.sass new file mode 100644 index 0000000..4383de6 --- /dev/null +++ b/src/_sass/_navbar.sass @@ -0,0 +1,26 @@ +.navbar + padding: 15px 0 + + .navbar-nav > li > a + text-transform: uppercase + + .navbar-header + margin-left: $pad + + .navbar-brand + +md + margin-right: $pad + + .navbar-right + margin-right: $pad + a + color: #555 + &:hover + color: $color-brand + span + color: $color-brand + span + color: #555 + + .navbar-toggle .icon-bar + background-color: #555 http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_sass/_pillars.sass ---------------------------------------------------------------------- diff --git a/src/_sass/_pillars.sass b/src/_sass/_pillars.sass new file mode 100644 index 0000000..84edaf0 --- /dev/null +++ b/src/_sass/_pillars.sass @@ -0,0 +1,26 @@ +.pillars + margin: $pad-xl 0 + text-align: center + + .pillars__title + +type-h2 + margin-bottom: $pad + + .pillars__cols + +type-body + +md + display: flex + justify-content: center + + .pillars__cols__col + .pillars__cols__col__title + font-weight: 600 + margin-bottom: $pad/2 + + .pillars__cols__col__body + max-width: 350px + margin: 0 auto $pad-sm + + +md + padding: 0 $pad + margin: 0 auto http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_sass/_type.sass ---------------------------------------------------------------------- diff --git a/src/_sass/_type.sass b/src/_sass/_type.sass new file mode 100644 index 0000000..cf92fe1 --- /dev/null +++ b/src/_sass/_type.sass @@ -0,0 +1,40 @@ +=type-h1 + font-weight: 500 + font-size: 35px + line-height: 44px + +md + font-size: 35px + line-height: 44px + +=type-h2 + font-size: 26px + line-height: 40px + font-weight: 300 + +md + font-size: 40px + line-height: 50px + font-weight: 300 + +=type-h3 + font-size: 20px + line-height: 30px + font-weight: 300 + +md + font-size: 25px + line-height: 30px + +=type-h4 + font-size: 18px + line-height: 25px + font-weight: 300 + +md + font-size: 20px + line-height: 25px + +=type-body + font-size: 16px + line-height: 26px + +=type-body-sm + font-size: 13px + line-height: 20px http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/_sass/_vars.sass ---------------------------------------------------------------------- diff --git a/src/_sass/_vars.sass b/src/_sass/_vars.sass new file mode 100644 index 0000000..f0a7d65 --- /dev/null +++ b/src/_sass/_vars.sass @@ -0,0 +1,12 @@ +$color-brand: #FF6D00 +$color-dark: #37424B + +$pad-sm: 15px +$pad: 30px +$pad-md: 60px +$pad-xl: 100px + +$box-shadow: 0px 3px 20px 0 rgba(0,0,0,0.075) +$box-shadow-hover: 0px 3px 50px 0 rgba(0,0,0,0.075) +$font-weight-semibold: 500 +$font-weight-bold: 600 http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/css/main.scss ---------------------------------------------------------------------- diff --git a/src/css/main.scss b/src/css/main.scss deleted file mode 100644 index f2e566e..0000000 --- a/src/css/main.scss +++ /dev/null @@ -1,53 +0,0 @@ ---- -# Only the main Sass file needs front matter (the dashes are enough) ---- -@charset "utf-8"; - - - -// Our variables -$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -$base-font-size: 16px; -$base-font-weight: 400; -$small-font-size: $base-font-size * 0.875; -$base-line-height: 1.5; - -$spacing-unit: 30px; - -$text-color: #111; -$background-color: #fdfdfd; -$brand-color: #2a7ae2; - -$grey-color: #828282; -$grey-color-light: lighten($grey-color, 40%); -$grey-color-dark: darken($grey-color, 25%); - -// Width of the content area -$content-width: 800px; - -$on-palm: 600px; -$on-laptop: 800px; - - - -// Use media queries like this: -// @include media-query($on-palm) { -// .wrapper { -// padding-right: $spacing-unit / 2; -// padding-left: $spacing-unit / 2; -// } -// } -@mixin media-query($device) { - @media screen and (max-width: $device) { - @content; - } -} - - - -// Import partials from `sass_dir` (defaults to `_sass`) -@import - "base", - "layout", - "syntax-highlighting" -; http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/css/site.scss ---------------------------------------------------------------------- diff --git a/src/css/site.scss b/src/css/site.scss new file mode 100644 index 0000000..cce10ac --- /dev/null +++ b/src/css/site.scss @@ -0,0 +1,27 @@ +--- +--- +// Legacy. +@import "bootstrap"; +@import "capability-matrix"; +@import "_syntax-highlighting"; +@import "_toggler-nav"; + +// Globals. +@import "_vars.sass"; +@import "_breakpoints.sass"; +@import "_type.sass"; +@import "_global.sass"; +@import "_navbar.sass"; + +// Components. +@import "_button.sass"; + +// Modules. +@import "_cards.sass"; +@import "_ctas.sass"; +@import "_footer.sass"; +@import "_graphic.sass"; +@import "_header.sass"; +@import "_hero.sass"; +@import "_logos.sass"; +@import "_pillars.sass"; http://git-wip-us.apache.org/repos/asf/beam-site/blob/9151d669/src/css/theme.css ---------------------------------------------------------------------- diff --git a/src/css/theme.css b/src/css/theme.css deleted file mode 100644 index c0dd5a4..0000000 --- a/src/css/theme.css +++ /dev/null @@ -1,21 +0,0 @@ -body { - padding-top: 70px; - padding-bottom: 30px; - font-family: 'Roboto', sans-serif; -} - -.theme-dropdown .dropdown-menu { - position: static; - display: block; - margin-bottom: 20px; -} - -.theme-showcase > p > .btn { - margin: 5px 0; -} - -.theme-showcase .navbar .container { - width: auto; -} - -@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
![https://www.apache.org/foundation/press/kit/feather_small.png"](https://www.apache.org/foundation/press/kit/feather_small.png"){kind=link}