You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@samza.apache.org by bo...@apache.org on 2018/09/26 00:23:16 UTC
[17/29] samza git commit: SAMZA-1898: New UI layout for the Samza
website
http://git-wip-us.apache.org/repos/asf/samza/blob/b8058af0/docs/css/main.new.css
----------------------------------------------------------------------
diff --git a/docs/css/main.new.css b/docs/css/main.new.css
new file mode 100644
index 0000000..7b35809
--- /dev/null
+++ b/docs/css/main.new.css
@@ -0,0 +1,2262 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/********************************************************************
+ *
+ * REFERENCE
+ *
+ *******************************************************************/
+
+ /*
+
+ font-family: 'Barlow', sans-serif;
+
+ logo color red: #eb1c23
+ logo color grey: #4f4f4f
+ apache logo feather purple: #7a2c68
+
+ */
+
+/********************************************************************
+ *
+ * GLOBAL
+ *
+ *******************************************************************/
+
+body {
+ font-family: 'Barlow', sans-serif;
+ font-size: 22px;
+ color: #444;
+ padding: 0px;
+ margin: 0px;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+ position: relative;
+ color: #eb1c23;
+}
+
+a:hover {
+ text-decoration: none;
+}
+
+hr {
+ border: none;
+ border-top: 3px solid #eee;
+ margin: 60px auto;
+}
+
+hr::before {
+ height: 0px;
+ border-top: 3px solid #F1F1F1;
+ content: '';
+ display: block;
+ margin-top: 2px;
+}
+
+.content a::after,
+.section a::after,
+a.side-navigation__group-title::after {
+ display: block;
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: -5px;
+ border-bottom: solid 2px #693b6a;
+ transform: scaleX(0);
+ transition: transform 250ms ease-in-out;
+}
+
+.content a:hover::after,
+.section a:hover::after,
+.content a.active::after,
+.section a.active::after,
+a.side-navigation__group-title:hover::after {
+ transform: scaleX(1);
+}
+
+.content {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+ line-height: 25px;
+}
+
+.content p {
+ font-size: 18px;
+ line-height: 25px;
+}
+
+.side-by-side {
+ display: flex;
+}
+
+.side-by-side > * {
+ width: 50%;
+ box-sizing: border-box;
+}
+
+.button {
+ background: #eb1c23;
+ padding: 20px 40px;
+ color: #fff;
+ font-weight: bold;
+ text-transform: uppercase;
+ font-size: 18px;
+ margin: 20px auto;
+ display: inline-block;
+ transition: background .3s ease 0s;
+}
+
+.button::after, .section .button::after {
+ border: none;
+}
+
+.button:hover {
+ background: #7a2c68;
+}
+
+/********************************************************************
+ *
+ * NAVIGATION - MAIN
+ *
+ *******************************************************************/
+
+.main-navigation {
+ background: #fff;
+ box-shadow: 0px -30px 49px 0px rgba(0,0,0,0.4);
+ z-index: 40;
+ padding: 0 15px;
+}
+
+.home .main-navigation {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+}
+
+.main-navigation__toggle {
+ position: absolute;
+ right: 10px;
+ top: 0;
+ font-size: 30px;
+ transform: translate(-50%, 25%);
+ transition: color .3s ease 0s;
+ cursor: pointer;
+ color: #eb1c23;
+}
+
+.main-navigation__toggle--opened {
+ display: none;
+}
+
+.main-navigation__toggle:hover {
+ color: #7a2c68;
+}
+
+@media only screen and (min-width: 768px) {
+ .main-navigation__toggle {
+ display: none;
+ }
+}
+
+.main-navigation__inner {
+ max-width: 1200px;
+ margin: auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: left;
+ flex-direction: column;
+}
+
+@media only screen and (min-width: 768px) {
+ .main-navigation__inner {
+ flex-direction: row;
+ align-items: center;
+ }
+}
+
+.main-navigation__items {
+ display: flex;
+ justify-content: flex-end;
+ align-items: left;
+ flex-direction: column;
+ padding-bottom: 30px;
+ display: none;
+}
+
+@media only screen and (min-width: 768px) {
+ .main-navigation__items {
+ align-items: center;
+ flex-direction: row;
+ padding-bottom: 0px;
+ display: flex;
+ flex-grow: 1;
+ flex-basis: 0;
+ }
+}
+
+.main-navigation__item {
+ color: #693b6a;
+ display: block;
+ padding: 5px;
+ text-transform: uppercase;
+ font-size: 15px;
+ margin: 15px 20px 15px;
+ position: relative;
+ cursor: pointer;
+}
+
+.main-navigation__item::after {
+ display: block;
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: -2px;
+ border-bottom: solid 2px #eb1c23;
+ transform: scaleX(0);
+ transition: transform 250ms ease-in-out;
+}
+
+.main-navigation__item:hover::after {
+ transform: scaleX(1);
+}
+
+.main-navigation__logo-img {
+ height: 25px;
+ width: auto;
+ padding: 20px 0 15px;
+}
+
+/********************************************************************
+ *
+ * QUICK LINKS
+ *
+ *******************************************************************/
+
+.quick-links {
+ max-width: 1200px;
+ margin: auto;
+ display: flex;
+ justify-content: left;
+ margin-bottom: 20px;
+}
+
+.quick-link {
+ width: 40px;
+ cursor: pointer;
+ color: rgba(0,0,0,.4);
+ transition: color .3s ease 0s;
+}
+
+.quick-link:hover {
+ color: #693b6a;
+}
+.quick-link i {
+ font-size: 30px;
+}
+
+/********************************************************************
+ *
+ * FOOTER
+ *
+ *******************************************************************/
+
+footer {
+ padding: 70px 20px 100px;
+ color: #777;
+}
+
+footer p {
+ font-size: 15px;
+}
+
+.footer-inner {
+ max-width: 1200px;
+ margin: auto;
+ padding: 0 20px;
+}
+
+.footer__heading {
+ text-transform: uppercase;
+ padding-bottom: 5px;
+ position: relative;
+ margin-bottom: 30px;
+}
+
+.footer__heading::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ width: 150px;
+ bottom: -5px;
+ border-bottom: 2px solid #999;
+}
+
+.footer__items {
+
+}
+
+.footer__item {
+ display: block;
+ font-size: 15px;
+ margin-left: 30px;
+}
+
+.footer__item:hover {
+ color: #7a2c68;
+}
+
+.footer__item::before {
+ content: '»';
+ position: absolute;
+ left: -30px;
+}
+
+footer .side-by-side {
+ flex-direction: column;
+}
+
+@media only screen and (min-width: 768px) {
+ footer .side-by-side {
+ flex-direction: row;
+ }
+}
+
+footer .side-by-side > * {
+ width: 100%;
+ box-sizing: border-box;
+ margin-bottom: 20px;
+}
+
+@media only screen and (min-width: 768px) {
+ footer .side-by-side > * {
+ width: 30%;
+ margin: 0px;
+ }
+}
+
+/********************************************************************
+ *
+ * SECTION - HOME PAGE
+ *
+ *******************************************************************/
+
+.section {
+ background: #efefef;
+ align-items: center;
+ font-size: 30px;
+ padding: 20px 20px;
+ position: relative;
+ background-image: linear-gradient(to bottom, #ffffff, #fbfbfb, #f6f6f6, #f2f2f2, #eeeeee);
+}
+
+.section--highlight {
+ color: #fff;
+ background: #111;
+}
+
+.section--bottom-flare::after {
+ content: '';
+ position: absolute;
+ bottom: 0px;
+ left: 50%;
+ transform: translate(-50%, 50%);
+ border-left: 30px solid transparent;
+ border-right: 30px solid transparent;
+ border-top: 40px solid #eee;
+ width: 1px;
+ height: 1px;
+ z-index: 20;
+}
+
+.section--highlight.section--bottom-flare::after {
+ border-top-color: #111;
+}
+
+.section--what-is-samza {
+ padding: 0px 20px 100px;
+}
+
+.section--hero {
+ padding: 100px 20px;
+ z-index: 10;
+}
+
+.section--highlight.section--features {
+ padding-bottom: 100px;
+}
+
+.section__title {
+ padding: 10px;
+ padding-top: 100px;
+ text-align: left;
+ font-size: 40px;
+ margin: auto;
+ max-width: 1200px;
+ font-weight: normal;
+}
+
+.section__title--right {
+ text-align: right;
+}
+
+.section__title--center {
+ text-align: center;
+}
+
+.section__title--sub {
+ padding-top: 10px;
+ font-size: 25px;
+ margin-bottom: 30px;
+}
+
+.section__items {
+ color: #999;
+ display: flex;
+ justify-content: center;
+ max-width: 1200px;
+ margin: auto;
+ margin-top: 50px;
+ flex-wrap: wrap;
+}
+
+@media only screen and (min-width: 768px) {
+ .section__items {
+ justify-content: space-between;
+ }
+}
+
+.section__item {
+ padding: 20px;
+ /* width: 100; */
+ margin: 10px;
+ margin-bottom: 40px;
+ box-sizing: border-box;
+ text-align: center;
+}
+
+@media only screen and (min-width: 768px) {
+ .section__item {
+ width: 30%;
+ }
+}
+
+.section--highlight .section__item {
+ color: #fff;
+}
+
+.section--highlight .section__item-title {
+ color: #fff;
+}
+
+.section__item-title {
+ text-transform: uppercase;
+ font-weight: bold;
+ margin-bottom: 20px;
+ font-size: 20px;
+ color: #444;
+}
+
+.section__item-icon {
+ color: #fff;
+ font-size: 55px;
+ border-radius: 100%;
+ width: 55px;
+ height: 55px;
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: auto;
+ margin-bottom: 20px;
+ background: linear-gradient(45deg, #ff4747 0%,#eb1c23 50%,#7a2c68 51%,#333333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+}
+
+.section__item-features {
+ text-align: left;
+}
+
+.section__item-feature {
+ font-size: 18px;
+ position: relative;
+ margin-left: 30px;
+}
+
+.section__item-feature::before {
+ content: '»';
+ position: absolute;
+ left: -30px;
+}
+
+.section__item-logo {
+ display: inline-block;
+}
+
+.section__item-logo-bg {
+ width: 128px;
+ height: 128px;
+ transition: all .3s ease 0s;
+ opacity: .8;
+ background-color: #fff;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-blend-mode: luminosity;
+}
+
+.section__item-logo-bg:hover {
+ opacity: 1;
+ background-blend-mode: unset;
+}
+
+/********************************************************************
+ *
+ * SECTION - HOME PAGE - BRANDS
+ *
+ *******************************************************************/
+.section--brands .section__items {
+ justify-content: center;
+ margin-bottom: 100px;
+ font-size: 0;
+}
+
+.section--brands .section__item {
+ width: 128px;
+ margin: 0;
+ padding: 0;
+}
+
+.section.section--brands .section__item-logo::after {
+ border: none;
+}
+
+/********************************************************************
+ *
+ * WEIRD MESH NODE CSS THING
+ *
+ *******************************************************************/
+
+#canvas {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ pointer-events: none;
+ z-index: -1;
+}
+
+
+/********************************************************************
+ *
+ * PAGE & SIDE NAVIGATION
+ *
+ *******************************************************************/
+
+.page .container {
+ max-width: 1200px;
+ margin: auto;
+ margin-top: 30px;
+ display: flex;
+ position: relative;
+}
+
+.page .container .container__toggle {
+ position: absolute;
+ left: 300px;
+ top: 100px;
+ height: 40px;
+ width: 40px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #fff;
+ border-radius: 100%;
+ background: #eb1c23;
+ z-index: 20;
+ transform: translateX(-50%);
+ transition: all .3s ease 0s;
+}
+
+@media only screen and (min-width: 768px) {
+ .page .container .container__toggle {
+ display: none;
+ }
+}
+
+.page .container.container--opened .container__toggle {
+ width: 70px;
+ height: 70px;
+ left: 5px;
+ font-size: 30px;
+}
+
+.page .container .container__toggle-icon--opened {
+ display: none;
+}
+
+.page .container.container--opened .container__toggle-icon {
+ display: none;
+}
+
+.page .container.container--opened .container__toggle-icon--opened {
+ display: block;
+}
+
+.page .side-navigation {
+ box-sizing: border-box;
+ width: 300px;
+ padding: 20px;
+ padding-right: 30px;
+ border-right: 3px solid #eee;
+ transition: width, transform .3s ease 0s;
+}
+
+
+
+.page .section {
+ box-sizing: border-box;
+ padding: 20px;
+ padding-top: 0px;
+ background: #fff;
+ width: calc(100% - 300px);
+ transition: width, transform .3s ease 0s;
+ overflow-x: hidden;
+ font-size: 22px;
+}
+
+@media only screen and (min-width:768px) {
+ .page .section {
+ font-size: 30px;
+ }
+}
+
+@media only screen and (max-width: 768px) {
+
+ .page .container.container--opened .container__toggle {
+ width: 70px;
+ height: 70px;
+ left: 5px;
+ font-size: 30px;
+ }
+
+ .page .container .container__toggle-icon--opened {
+ display: none;
+ }
+
+ .page .container.container--opened .container__toggle-icon {
+ display: none;
+ }
+
+ .page .container.container--opened .container__toggle-icon--opened {
+ display: block;
+ }
+
+ .page .container.container--opened .side-navigation {
+ transform: translateX(-330px);
+ width: 0;
+ }
+
+ .page .container.container--opened .section {
+ width: 100%;
+ transform: translateX(-20px);
+ }
+}
+
+
+.page .section .content {
+ max-width: unset;
+ margin: 0;
+ padding-top: 0px;
+ min-width: 500px;
+}
+
+.page .container.container--opened .content {
+ min-width: unset;
+}
+
+.page .section .content > h2:first-child {
+ margin-top: 15px;
+}
+
+.side-navigation hr {
+ margin: 5px auto;
+ margin-bottom: 5px;
+ border-top-width: 1px;
+ margin-bottom: 10px;
+}
+
+.side-navigation hr::before {
+ border: none;
+}
+
+.side-navigation__group {
+ margin-bottom: 20px;
+}
+
+.side-navigation__group--has-nested {
+ cursor: pointer;
+}
+
+.side-navigation__group--has-nested > .side-navigation__group-title {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: space-between;
+}
+
+.side-navigation__group--has-nested > .side-navigation__group-title .side-navigation__group-title-icon {
+}
+
+.side-navigation__group--has-nested > .side-navigation__group-items {
+ display: none;
+}
+
+.side-navigation__group--has-nested .side-navigation__group-items {
+ border-left: 2px solid #eee;
+ padding-left: 10px;
+}
+
+.side-navigation__group-has-submenus {
+ /* background: #f4f4f4; */
+ padding: 15px;
+ padding-top: 0px;
+ margin-left: 20px;
+ border-radius: 2px;
+ margin-top: 30px;
+}
+
+.side-navigation__group--has-nested-visible > .side-navigation__group-title {
+ font-weight: bold;
+ position: relative;
+}
+.side-navigation__group--has-nested-visible > .side-navigation__group-items {
+ display: block;
+ margin-left: 10px;
+}
+
+.side-navigation__group-title {
+ margin-bottom: 15px;
+ text-transform: uppercase;
+ display: block;
+ font-size: 18px;
+}
+
+a.side-navigation__group-title::after {
+ bottom: -6px;
+ border-bottom-color: #999;
+ right: unset;
+ width: 100px;
+}
+
+.side-navigation__group-item {
+ font-size: 15px;
+ display: block;
+ margin-bottom: 10px;
+ transition: color .3s ease 0s;
+}
+
+.side-navigation__group-items h4 {
+ font-size: 13px;
+ text-transform: uppercase;
+ font-weight: bold;
+ margin-top: 10px;
+}
+
+.side-navigation__group-item.active {
+ color: #7a2c68;
+ /* text-decoration: underline; */
+ font-weight: bold;
+}
+
+.side-navigation__group-item:hover {
+ color: #7a2c68;
+}
+
+.page footer {
+ margin-top: 40px;
+ background: #eee;
+}
+
+/****
+ *
+ * Markdown stuff
+ *
+ ****/
+
+.page > .container {
+ min-height: calc(100vh - 437px);
+}
+
+.page h1, .page h2, .page h3, .page h4, .page h5, .page h6 {
+ font-weight: normal;
+ line-height: 1em;
+}
+
+.page ul, .page ol {
+ font-size: 15px;
+}
+
+.page li {
+ padding-left: 10px;
+}
+
+table {
+ font-size: 15px;
+}
+
+pre {
+ padding: 20px;
+ font-size: 15px;
+}
+
+p code {
+ background: #e5e5e5;
+ background: #ffffc9;
+ padding: 0px 2px;
+ margin: 0 5px;
+ font-size: .9em;
+}
+
+figure, .page .content div.highlight {
+ margin: 0;
+ display: block;
+ box-sizing: border-box;
+ overflow: auto;
+ /* max-width: 100%; */
+}
+
+.page .content img {
+ max-width: 100%;
+}
+
+.table {
+ border-collapse: collapse;
+}
+
+.table td, .table th {
+ padding: 20px;
+}
+
+.table.table-condensed td,
+.table.table-condensed th {
+ padding: 10px;
+}
+
+.table.table-striped tbody tr:nth-child(odd) {
+ background-color: #eee;
+}
+
+.table.table-bordered tbody td {
+ border: none;
+ border-top: 1px solid #888;
+ border-right: 1px solid #888;
+}
+.table.table-bordered tbody td:first-child {
+ border-left: 1px solid #888;
+}
+
+.table.table-bordered tbody tr:last-child {
+ border-bottom: 1px solid #888;
+}
+
+.table.table-bordered tbody tr:first-child {
+ border-top: 1px solid #888;
+}
+
+
+/****
+ *
+ * Releases List on Docs
+ *
+ ****/
+
+.releases-list-divider {
+ margin: 10px auto 40px;
+}
+
+.releases-list-container {
+ display: flex;
+ flex-direction: column;
+}
+
+@media only screen and (min-width: 768px) {
+ .releases-list-container {
+ flex-direction: row;
+ }
+}
+
+.releases-list-container span {
+ font-size: 15px;
+ text-transform: uppercase;
+ font-weight: bold;
+ color: #777;
+ padding-bottom: 10px;
+}
+
+@media only screen and (min-width: 768px) {
+ .releases-list-container span {
+ padding-right: 10px;
+ padding-bottom: 0px;
+ border-right: 2px solid #eee;
+ }
+}
+
+.releases-list {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+
+@media only screen and (min-width: 768px) {
+ .releases-list {
+ padding-left: 10px;
+ }
+}
+
+.releases-list li {
+ display: inline-block;
+ margin-right: 10px;
+ text-transform: uppercase;
+ padding-left: 0px;
+}
+
+.releases-list li.hide {
+ display: none;
+}
+
+.releases-list li a {
+ color: #999;
+}
+
+/****
+ *
+ * Breadcrumbs List, same as releases
+ *
+ ****/
+
+.breadcrumbs-list-divider {
+ margin: 10px auto 40px;
+}
+
+.breadcrumbs-list-container {
+ display: flex;
+ flex-direction: column;
+}
+
+@media only screen and (min-width: 768px) {
+ .breadcrumbs-list-container {
+ flex-direction: row;
+ }
+}
+
+.breadcrumbs-list-container span {
+ font-size: 15px;
+ text-transform: uppercase;
+ font-weight: bold;
+ color: #777;
+ padding-bottom: 10px;
+}
+
+.breadcrumbs-list-container span a {
+ color: inherit;
+}
+
+@media only screen and (min-width: 768px) {
+ .breadcrumbs-list-container span {
+ padding-right: 10px;
+ padding-bottom: 0px;
+ border-right: 2px solid #eee;
+ }
+}
+
+.breadcrumbs-list {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ flex-grow: 1;
+}
+
+@media only screen and (min-width: 768px) {
+ .breadcrumbs-list {
+ padding-left: 10px;
+ }
+}
+
+.breadcrumbs-list li {
+ display: inline-block;
+ margin-right: 10px;
+ text-transform: uppercase;
+ padding-left: 0px;
+}
+
+.breadcrumbs-list li.divider {
+ width: 0px;
+ font-size: 0px;
+ height: 20px;
+ border-left: 2px solid #eee;
+ vertical-align: middle;
+}
+
+.breadcrumbs-list li.hide {
+ display: none;
+}
+
+.breadcrumbs-list li a {
+ color: #999;
+}
+
+/****
+ *
+ * CASE STUDIES
+ *
+ ****/
+
+ul.case-studies {
+ padding: 0;
+ margin: 0;
+ margin-top: 30px;
+}
+
+.case-studies li {
+ list-style-type: none;
+ display: flex;
+ padding-left: 0;
+ margin-bottom: 50px;
+}
+
+.case-studies li > a {
+ padding: 20px;
+ padding-left: 0px;
+}
+
+.case-studies li > a:after {
+ border: none;
+}
+
+.case-studies li .study-description {
+ margin: 40px 0 10px;
+ margin-left: -90px;
+}
+
+@media only screen and (min-width:768px) {
+ .case-studies li .study-description {
+ margin: 20px 0;
+ }
+}
+
+.case-studies li .study-detail {
+ padding: 20px;
+ width: 100%;
+ margin-right: -20px;
+}
+
+.case-studies li:nth-child(odd) .study-detail {
+}
+
+.case-studies li .study-detail > a {
+ text-transform: uppercase;
+ font-size: 17px;
+ color: #999;
+ transition: color .3s ease 0s;
+}
+
+@media only screen and (min-width:768px) {
+ .case-studies li .study-detail > a {
+ font-size: 22px;
+ }
+}
+
+.case-studies li .study-detail > a:after {
+ border: none;
+}
+.case-studies li .study-detail > a:hover {
+ color: #7a2c68;
+}
+
+.case-studies li a span {
+ display: block;
+ width: 50px;
+ height: 50px;
+ transition: all .3s ease 0s;
+ opacity: .8;
+ background-color: #fff;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-blend-mode: luminosity;
+}
+
+@media only screen and (min-width: 768px) {
+ .case-studies li a span {
+ width: 128px;
+ height: 128px;
+ }
+}
+
+.case-studies li a:hover span {
+ opacity: 1;
+ background-blend-mode: unset;
+}
+
+.case-studies li p {
+
+}
+
+.case-studies li div a.btn {
+ padding: 15px 40px;
+ background: #eb1c23;
+ color: #fff;
+ font-weight: bold;
+ font-size: 15px;
+ display: block;
+ text-align: center;
+ margin: 20px 0;
+ margin-left: -90px;
+ transition: background .3s ease 0s;
+ width: 100%;
+}
+
+@media only screen and (min-width:768px) {
+ .case-studies li div a.btn {
+ margin: 20px 0;
+ text-align: left;
+ display: inline-block;
+ width: auto;
+ }
+}
+
+.case-studies li div a.btn:hover {
+ background: #7a2c68;
+ color: #fff;
+}
+
+.case-studies li div a.btn::after {
+ border: none;
+}
+
+/****
+ *
+ * CASE STUDY
+ *
+ ****/
+
+.case-study-hero {
+ display: flex;
+ align-items: center;
+ min-height: 300px;
+ background-size: 110px;
+ flex-direction: column;
+ justify-content: center;
+ margin: 0px;
+ position: relative;
+ padding: 50px 10px;
+}
+
+.case-study-hero > * {
+ padding: 20px;
+ /* box-shadow: 0 0 50px -21px #333; */
+ margin: 0;
+ max-width: 80%;
+ margin-bottom: 10px;
+ /* box-shadow: 5px 5px #9C4E8A, 10px 10px #7a2c68, 15px 15px #999, 20px 20px #eee */
+}
+
+.case-study-hero img {
+ width: 50vw;
+ height: 50vw;
+ max-width: 256px;
+ max-height: 256px;
+ border-radius:100%;
+ border: 3px solid #fff;
+ box-sizing: border-box;
+}
+
+.page.page--case-study .section--hero {
+ width: unset;
+ overflow: unset;
+ background-image: linear-gradient(to bottom, #ffffff, #fbfbfb, #f6f6f6, #f2f2f2, #eeeeee);
+}
+
+.page.page--case-study h3 {
+ text-transform: uppercase;
+}
+
+.case-studies-list {
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: 40px;
+ justify-content: center;
+}
+
+@media only screen and (min-width: 768px) {
+ .case-studies-list {
+ justify-content: start;
+ }
+}
+
+
+.case-studies-list_item a {
+
+}
+
+.case-studies-list__item-logo-bg {
+ width: 30vw;
+ height: 30vw;
+ max-width: 128px;
+ max-height: 128px;
+ transition: all .3s ease 0s;
+ opacity: .8;
+ background-color: #fff;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-blend-mode: luminosity;
+}
+
+.case-studies-list__item-logo-bg:hover {
+ opacity: 1;
+ background-blend-mode: unset;
+}
+
+/****
+ *
+ * POWERED BY
+ *
+ ****/
+
+ ul.powered-by {
+ padding: 0;
+ margin: 0;
+ margin-top: 30px;
+}
+
+.powered-by li {
+ list-style-type: none;
+ display: flex;
+ padding-left: 0;
+}
+
+.powered-by li > span {
+ padding: 20px;
+ padding-left: 0px;
+}
+
+.powered-by li div {
+ padding: 20px;
+}
+
+.powered-by li:nth-child(odd) div {
+}
+
+.powered-by li div > a {
+ text-transform: uppercase;
+ font-size: 22px;
+ color: #999;
+ transition: color .3s ease 0s;
+}
+
+.powered-by li div > a:after {
+ border: none;
+}
+.powered-by li div > a:hover {
+ color: #7a2c68;
+}
+
+.powered-by li span span {
+ display: block;
+ width: 50px;
+ height: 50px;
+ transition: all .3s ease 0s;
+ opacity: .8;
+ background-color: #fff;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-blend-mode: luminosity;
+}
+
+@media only screen and (min-width: 768px) {
+ .powered-by li span span {
+ width: 128px;
+ height: 128px;
+ }
+}
+
+.powered-by li span:hover span {
+ opacity: 1;
+ background-blend-mode: unset;
+}
+
+.powered-by li p {
+
+}
+
+.powered-by li div a.btn {
+ padding: 15px 40px;
+ background: #eb1c23;
+ color: #fff;
+ font-weight: bold;
+ font-size: 15px;
+ display: inline-block;
+ margin: 20px 0;
+ transition: background .3s ease 0s;
+}
+
+.powered-by li div a.btn:hover {
+ background: #7a2c68;
+}
+
+.powered-by li div a.btn::after {
+ border: none;
+}
+
+/**
+ *
+ * News
+ *
+ **/
+
+.news__cards {
+ display: flex;
+}
+
+.news__card {
+ display: block;
+ flex-grow: 1;
+ font-weight: normal;
+ padding: 40px;
+ box-sizing: 20px;
+ margin: 50px 0px;
+ position: relative;
+ padding-left: 90px;
+}
+
+@media only screen and (min-width: 768px) {
+ .news_card {
+ padding-left: 120px;
+ }
+}
+
+.news__card:hover {
+ background: #eee;
+}
+
+.news_cards .news__card::after {
+ border: none;
+}
+
+.news__card-title {
+ margin-top: 50px;
+ margin-left: -67px;
+ margin-right: -10px;
+}
+
+@media only screen and (min-width: 768px) {
+ .news__card-title {
+ margin: 10px 0;
+ }
+}
+
+.news__card-date {
+ font-size: 20px;
+ margin-top: 10px;
+ margin-bottom: 20px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #ddd;
+ text-transform: uppercase;
+ color: #444;
+}
+
+.news__card-description {
+ font-size: 18px;
+ color: #555;
+ margin: 10px 0;
+}
+
+.news__card-description {
+ margin-left: -67px;
+ margin-right: -10px;
+}
+
+@media only screen and (min-width: 768px) {
+ .news__card-description {
+ margin: 10px 0;
+ }
+}
+
+.news__card-button {
+ padding: 15px 40px;
+ background: #eb1c23;
+ color: #fff;
+ font-weight: bold;
+ font-size: 15px;
+ display: block;
+ width: 100%;
+ transition: background .3s ease 0s;
+ margin-left: -67px;
+ margin-right: -10px;
+ text-align: center;
+}
+
+@media only screen and (min-width: 768px) {
+ .news__card-button {
+ display: inline-block;
+ width: auto;
+ margin: 20px 0;
+ text-align: left;
+ }
+}
+
+
+.news__card-button:hover {
+ background: #7a2c68;
+}
+
+.news__card-button::after {
+ border: none;
+}
+
+
+.news__card-icon {
+ position: absolute;
+ left: 20px;
+ top: 50px;
+ color: #fff;
+ font-size: 20px;
+ border-radius: 100%;
+ width: 35px;
+ height: 35px;
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: auto;
+ margin-bottom: 20px;
+ background: linear-gradient(45deg, #ff4747 0%,#eb1c23 50%,#7a2c68 51%,#333333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+}
+
+@media only screen and (min-width: 768px) {
+ .news_card-icon {
+ width: 55px;
+ height: 55px;
+ font-size: 30px;
+ }
+}
+
+.news-end {
+ display: flex;
+}
+
+.news-end-action {
+ background: #7a2c68;
+ padding: 20px;
+ color: #fff;
+ font-size: 15px;
+ flex-grow: 1;
+ display: block;
+ transition: background .3s ease 0s;
+ box-sizing: border-box;
+}
+
+@media only screen and (min-width:768px) {
+ .news-end-action {
+ padding: 40px;
+ }
+}
+
+.news-previous {
+ text-align: right;
+}
+
+.news-next {
+ background: #9C4E8A;
+}
+
+.news-end-action:hover {
+ background: #eb1c23;
+}
+
+.news-end .news-end-action:after {
+ border: none;
+}
+
+.news-end-action-title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: column;
+ box-sizing: border-box;
+ text-align: right;
+}
+
+.news-next .news-end-action-title {
+ flex-direction: column-reverse;
+ text-align: left;
+ /* align-items: flex-end; */
+}
+
+@media only screen and (min-width:768px) {
+ .news-end .news-end-action-title {
+ flex-direction: row;
+ align-items: center;
+ font-size: 20px;
+ }
+}
+
+.news-end-action-title i {
+ margin: 10px;
+ font-size: 40px;
+}
+
+
+/**
+ *
+ * Talks
+ *
+ **/
+.talks {
+ margin-top: 50px;
+}
+
+.talk {
+ margin-bottom: 30px;
+ position: relative;
+ padding: 20px;
+ padding-left: 55px;
+ transition: background .3s ease 0s;
+ filter: opacity(.8) grayscale(1);
+}
+
+@media only screen and (min-width: 768px) {
+ .talk {
+ padding-left: 90px;
+ }
+}
+
+.talk.hide {
+ display: none;
+}
+
+.talk--upcoming {
+ filter: none;
+}
+
+.talk--upcoming + .talk:not(.talk--upcoming) {
+ margin-top: 100px;
+}
+
+.talk--upcoming + .talk:not(.talk--upcoming)::before {
+ content: 'Past Events';
+ border-bottom: 4px solid #eee;
+ width: 100%;
+ display: block;
+ position: absolute;
+ left: 0px;
+ top: -70px;
+ padding-bottom: 20px;
+}
+
+.talk-upcoming-tag {
+ color: #eb1c23;
+ padding: 5px 21px;
+ text-transform: uppercase;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: bold;
+ border: 2px solid #eee;
+ font-size: 12px;
+ margin-bottom: 20px;
+ margin-left: 25px;
+}
+
+@media only screen and (min-width: 900px) {
+ .talk-upcoming-tag {
+ border: none;
+ font-size: 15px;
+ }
+}
+
+
+.talk-upcoming-tag i {
+ margin-right: 20px;
+ font-size: 20px;
+}
+
+.talk-upcoming-section {
+ display: none;
+
+}
+
+@media only screen and (min-width: 900px) {
+ .talk-upcoming-section {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ }
+}
+
+.talk--upcoming .talk-upcoming-section {
+ display: block;
+}
+
+
+.talk:hover {
+ background: #efefef;
+ filter: none;
+}
+
+.talk * {
+ box-sizing: border-box;
+}
+
+.talk-icon {
+ position: absolute;
+ left: 20px;
+ top: 30px;
+ color: #fff;
+ font-size: 20px;
+ border-radius: 100%;
+ width: 35px;
+ height: 35px;
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: auto;
+ margin-bottom: 20px;
+ background: linear-gradient(45deg, #ff4747 0%,#eb1c23 50%,#7a2c68 51%,#333333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+}
+
+
+@media only screen and (min-width: 768px) {
+ .talk-icon {
+ width: 75px;
+ height: 75px;
+ font-size: 30px;
+ }
+}
+
+.talk-info {
+}
+
+.talk-date {
+ padding: 10px;
+ padding-left: 0;
+ margin-left: 25px;
+ text-transform: uppercase;
+ margin-bottom: 20px;
+ font-size: 20px;
+ border-bottom: 1px solid #ddd;
+}
+
+.talk-event {
+ padding: 10px;
+ margin-left: -50px;
+ margin-right: -30px;
+}
+
+@media only screen and (min-width: 768px) {
+ .talk-event {
+ margin-left: 20px;
+ margin-right: 0px;
+ }
+}
+
+.talk-event-link {
+
+}
+
+.talk-event-name {
+ margin-bottom: 10px;
+}
+
+.talk-event-image {
+ height: 300px;
+ width: 100%;
+ background-color: #ddd;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.talk-event-host {
+ font-size: 15px;
+ color: #999;
+ text-transform: uppercase;
+ margin-bottom: 10px;
+ margin-top: 40px;
+}
+
+.talk-event-by {
+ font-size: 15px;
+ color: #999;
+ text-transform: uppercase;
+ margin-bottom: 10px;
+}
+
+.talk-video {
+ display: block;
+ height: 300px;
+ width: 100%;
+ background-color: #ddd;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ position: relative;
+}
+
+.talk-video-icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: rgba(0,0,0,.4);
+ font-size: 100px;
+ transition: color .3s ease 0s;
+}
+
+.talk-video:hover .talk-video-icon {
+ color: #eb1c23;
+}
+
+.talks .talk-video::after {
+ border: none;
+}
+
+.talk--upcoming .talk-action {
+ background: #eb1c23;
+}
+
+.talk-action {
+ padding: 15px 40px;
+ background: #eb1c23;
+ color: #fff;
+ font-weight: bold;
+ font-size: 15px;
+ display: block;
+ text-align: center;
+ margin: 20px 0;
+ width: 100%;
+ transition: background .3s ease 0s;
+}
+
+@media only screen and (min-width: 768px) {
+ .talk-action {
+ width: auto;
+ text-align: left;
+ display: inline-block;
+ }
+}
+
+.talk-action:hover {
+ background: #7a2c68;
+}
+
+.talk-actions .talk-action::after {
+ border: none;
+}
+
+.talk-actions {
+ margin-left: -35px;
+}
+
+@media only screen and (min-width: 768px) {
+ .talk-actions {
+ margin-left: 30px;
+ margin-right: 0px;
+ }
+}
+
+.talk-description {
+ margin-left: -35px;
+}
+
+@media only screen and (min-width: 768px) {
+ .talk-description {
+ margin-left: 30px;
+ margin-right: 0px;
+ }
+}
+
+/**
+ *
+ * Meetups
+ *
+ **/
+
+.meetups {
+ margin-top: 50px;
+}
+
+.meetup {
+ margin-bottom: 30px;
+ position: relative;
+ padding: 20px;
+ padding-left: 55px;
+ transition: background .3s ease 0s;
+ filter: opacity(.8) grayscale(1);
+}
+
+@media only screen and (min-width: 768px) {
+ .meetup {
+ padding-left: 90px;
+ }
+}
+
+.meet.hide {
+ display: none;
+}
+
+.meetup.hide {
+ display: none;
+}
+
+.meet--upcoming, .meetup--upcoming {
+ filter: none;
+}
+
+.meetup--upcoming + .meetup:not(.meetup--upcoming) {
+ margin-top: 100px;
+}
+
+.meetup--upcoming + .meetup:not(.meetup--upcoming)::before {
+ content: 'Past Events';
+ border-bottom: 4px solid #eee;
+ width: 100%;
+ display: block;
+ position: absolute;
+ left: 0px;
+ top: -70px;
+ padding-bottom: 20px;
+}
+
+.meet-upcoming-tag {
+ color: #eb1c23;
+ padding: 5px 21px;
+ text-transform: uppercase;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: bold;
+ border: 2px solid #eee;
+ font-size: 12px;
+ margin-bottom: 20px;
+}
+
+
+.meet-upcoming-tag i {
+ margin-right: 20px;
+ font-size: 20px;
+}
+
+.meet-upcoming-section {
+ display: none;
+
+}
+
+.meet--upcoming .meet-upcoming-section {
+ display: block;
+}
+
+.meetup:hover {
+ filter: none;
+}
+
+.meet:hover {
+ filter: none;
+ background-image: linear-gradient(to bottom, #ffffff, #fbfbfb, #f6f6f6, #f2f2f2, #ddd);
+}
+
+.meetup * {
+ box-sizing: border-box;
+}
+
+.meetup-icon {
+ position: absolute;
+ left: 20px;
+ top: 30px;
+ color: #fff;
+ font-size: 20px;
+ border-radius: 100%;
+ width: 35px;
+ height: 35px;
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: auto;
+ margin-bottom: 20px;
+ background: linear-gradient(45deg, #ff4747 0%,#eb1c23 50%,#7a2c68 51%,#333333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+}
+
+
+@media only screen and (min-width: 768px) {
+ .meetup-icon {
+ width: 75px;
+ height: 75px;
+ font-size: 30px;
+ }
+}
+
+.meetup-info {
+}
+
+.meetup-date-group {
+ padding: 10px;
+ padding-left: 0;
+ margin-left: 25px;
+ text-transform: uppercase;
+ margin-bottom: 20px;
+ font-size: 20px;
+}
+
+@media only screen and (min-width: 768px) {
+ .meetup-date-group {
+ font-size: 25px;
+ padding-top: 30px;
+ }
+}
+
+.meet {
+ padding: 10px;
+ margin-left: 20px;
+ margin-bottom: 40px;
+ padding: 10px 20px;
+ margin-left: -80px;
+ margin-right: -40px;
+ background-image: linear-gradient(to bottom, #ffffff, #fbfbfb, #f6f6f6, #f2f2f2, #eeeeee);
+}
+
+@media only screen and (min-width: 768px) {
+ .meet {
+ padding: 20px 40px;
+ margin-left: 30px;
+ margin-right: 0px;
+ }
+}
+
+.meet-link {
+
+}
+
+.meet-name {
+ margin-bottom: 10px;
+}
+
+.meet-image {
+ height: 300px;
+ width: 100%;
+ background-color: #ddd;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.meet-host {
+ font-size: 15px;
+ color: #999;
+ text-transform: uppercase;
+ margin-bottom: 10px;
+}
+
+.meet-date {
+ font-size: 15px;
+ color: #999;
+ text-transform: uppercase;
+ margin-bottom: 10px;
+ margin-top: 40px;
+}
+
+.meet-presenter {
+ font-size: 15px;
+ color: #999;
+ text-transform: uppercase;
+ margin-bottom: 10px;
+}
+
+.meet-presenter span > span::before {
+ content: '& '
+}
+
+.meet-presenter span > span:first-child::before {
+ content: ''
+}
+
+.meet-video {
+ display: block;
+ height: 300px;
+ width: 100%;
+ background-color: #ddd;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ position: relative;
+}
+
+.meet-video-icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: rgba(0,0,0,.4);
+ font-size: 100px;
+ transition: color .3s ease 0s;
+}
+
+.meet-video:hover .meet-video-icon {
+ color: #eb1c23;
+}
+
+.meetups .meet-video::after {
+ border: none;
+}
+
+.meet--upcoming .meet-action {
+ background: #eb1c23;
+}
+
+.meet-action {
+ padding: 15px 40px;
+ background: #eb1c23;
+ color: #fff;
+ font-weight: bold;
+ font-size: 15px;
+ display: block;
+ text-align: center;
+ margin: 20px 0;
+ width: 100%;
+ transition: background .3s ease 0s;
+}
+
+@media only screen and (min-width: 768px) {
+ .meet-action {
+ width: auto;
+ text-align: left;
+ display: inline-block;
+ }
+}
+
+.meet-action:hover {
+ background: #7a2c68;
+}
+
+.meet-actions .meet-action::after {
+ border: none;
+}
+
+.meet-actions {
+}
+
+.meet-description {
+ margin-top: 30px;
+ font-size: 20px;
+}
+
+
+
+/**
+ *
+ * Pagination
+ *
+ **/
+
+.pagination {
+
+}
+
+.pagination.hide {
+ display: none;
+}
+
+.pagination-inner {
+ display: flex;
+}
+
+.paginate-action {
+ cursor: pointer;
+ flex-grow: 1;
+ padding: 40px;
+ background: #7a2c68;
+ color: #fff;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ transition: background .3s ease 0;
+ font-size: 25px;
+}
+
+.paginate-action.hide {
+ display: none;
+}
+
+.paginate-action i {
+ font-size: 50px;
+}
+
+.paginate-action:hover {
+ background: #eb1c23;
+}
+
+.paginate-previous {
+
+}
+
+.paginate-next {
+ background: #9C4E8A;
+}
+
+/****
+ *
+ * Committers
+ *
+ ****/
+
+.committers {
+ padding: 0;
+ margin: 0;
+ list-style-type: none;
+ display: flex;
+ flex-direction: column;
+}
+
+@media only screen and (min-width: 768px) {
+ .committers {
+ flex-wrap: wrap;
+ justify-content: space-between;
+ flex-direction: row;
+ }
+}
+
+.committers-hr {
+ margin-bottom: 20px;
+}
+
+.committer {
+ /* background: #eee; */
+ padding: 20px;
+ margin: 20px 0;
+ display: flex;
+ border-radius: 4px;
+}
+
+@media only screen and (min-width: 768px) {
+ .committer {
+ width: 40%;
+ }
+}
+
+.committer * {
+ box-sizing: border-box;
+}
+
+.committer:hover {
+ background: #eee;
+}
+
+.committer:hover .committer-image span {
+ background-blend-mode: unset;
+}
+
+.committer-name {
+ font-size: 25px;
+ margin-bottom: 10px;
+}
+
+@media only screen and (min-width: 768px) {
+ .committer-name {
+ font-size: 30px;
+ }
+}
+
+.committer-icon {
+ font-size: 30px;
+ margin-right: 10px;
+}
+
+.committer-link {
+ color: #999;
+ transition: color .3s ease 0s;
+}
+
+.committer-link:hover {
+ color: #7a2c68;
+}
+
+.committer .committer-link:after {
+ border: none;
+}
+
+.committer-roles {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 10px;
+}
+
+.committer-roles span::before {
+ content: '» '
+}
+
+.committer-image {
+ margin-right: 30px;
+ box-sizing: content-box;
+ display: block;
+}
+
+.committer-image span {
+ width: 32px;
+ height: 32px;
+ background-color: #fff;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-blend-mode: luminosity;
+ display: block;
+ transition: background .3s ease 0s;
+ border-radius: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+ .committer-image span {
+ width: 64px;
+ height: 64px;
+ }
+}
+
+.committer-image a {
+ border: 3px solid #eee;
+ transition: border .3s ease 0s;
+ display: block;
+ border-radius: 100%;
+}
+
+.committer-image a::after {
+ border: none;
+}
+
+.committer-image a:hover {
+ border: 3px solid #fff;
+}
http://git-wip-us.apache.org/repos/asf/samza/blob/b8058af0/docs/css/ropa-sans.css
----------------------------------------------------------------------
diff --git a/docs/css/ropa-sans.css b/docs/css/ropa-sans.css
deleted file mode 100644
index 4c93c19..0000000
--- a/docs/css/ropa-sans.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-@font-face {
- font-family: 'Ropa Sans';
- font-style: normal;
- font-weight: 400;
- src: local('Ropa Sans'), local('RopaSans-Regular'), url('../fonts/RopaSans-Regular-webfont.woff') format('woff');
-}
http://git-wip-us.apache.org/repos/asf/samza/blob/b8058af0/docs/fonts/ionicons.eot
----------------------------------------------------------------------
diff --git a/docs/fonts/ionicons.eot b/docs/fonts/ionicons.eot
new file mode 100644
index 0000000..4b1fd0f
Binary files /dev/null and b/docs/fonts/ionicons.eot differ