| /* |
| * 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; |
| } |
| |
| .section__items a::after { |
| border-bottom: none; |
| } |
| |
| .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--samza-intro { |
| max-width: 1200px; |
| margin: auto; |
| padding: 20px; |
| line-height: 25px; |
| display: flex; |
| align-items: center; |
| } |
| |
| .content--samza-intro p { |
| font-size: 18px; |
| 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: 15px 15px; |
| color: #fff; |
| font-weight: bold; |
| text-transform: uppercase; |
| font-size: 18px; |
| margin: 20px auto; |
| display: inline-block; |
| /* border-radius:15px; */ |
| 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; |
| text-transform: uppercase; |
| font-size: 15px; |
| padding: 20px 0; |
| margin: 0 20px; |
| position: relative; |
| cursor: pointer; |
| } |
| |
| .main-navigation__item::after { |
| display: block; |
| content: ""; |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: 15px; |
| 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; */ |
| margin-top: 17px; |
| } |
| |
| |
| .main-navigation__item--group::after { |
| content: ''; |
| border: none; |
| } |
| |
| .main-navigation__item--group:hover::after { |
| content: ''; |
| border: none; |
| } |
| |
| .main-navigation__item-group-list { |
| margin-top: 20px; |
| border-left: 2px solid #eee; |
| margin-left: 10px; |
| } |
| |
| .main-navigation__item-group-title i { |
| margin-left: 20px; |
| } |
| |
| @media only screen and (min-width: 768px) { |
| |
| .main-navigation__item--group { |
| position: relative; |
| } |
| |
| .main-navigation__item--group:hover .main-navigation__item-group-list { |
| display: block; |
| } |
| |
| .main-navigation__item-group-title { |
| display: flex; |
| justify-content: space-between; |
| } |
| |
| .main-navigation__item-group-title i { |
| margin-left: 10px; |
| } |
| |
| .main-navigation__item-group-list { |
| display: none; |
| position: absolute; |
| right: 0; |
| box-shadow: 0 5px 10px -9px; |
| z-index: 10; |
| background: #fff; |
| top: 100%; |
| width: 200px; |
| padding-bottom: 10px; |
| |
| margin: 0; |
| border-left: unset; |
| } |
| |
| .main-navigation__item-group-list a { |
| font-size: 12px; |
| width: auto; |
| display: inline-block; |
| padding: 15px 0; |
| } |
| |
| .main-navigation__item-group-list a:after { |
| bottom: 7px; |
| } |
| |
| } |
| |
| /******************************************************************** |
| * |
| * 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; |
| margin-top: 40px; |
| background: #eee; |
| background: #313131; |
| } |
| |
| footer a { |
| color: #eee; |
| } |
| |
| 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; |
| color: #eee; |
| } |
| |
| .footer__heading::after { |
| content: ''; |
| position: absolute; |
| left: 0; |
| width: 150px; |
| bottom: -5px; |
| border-bottom: 2px solid #282828; |
| } |
| |
| .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__item:hover::before { |
| left: -25px; |
| } |
| |
| 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: #fbfbfb; |
| background: #111; |
| background-color: #111; |
| background-image: linear-gradient(to bottom, #3f3f3f, transparent 50%); |
| background-image: -webkit-radial-gradient(top, circle cover, #3f3f3f 0%, transparent 80%); |
| background-image: radial-gradient(top, circle cover, #3f3f3f 0%, transparent 80%); |
| } |
| |
| .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 1px 1px; |
| } |
| |
| .section--hero { |
| padding: 50px 20px; |
| z-index: 10; |
| } |
| |
| .hero-inner { |
| max-width: 1200px; |
| margin: auto; |
| } |
| |
| .section--hero .button { |
| text-align: center; |
| margin: 10px auto; |
| display: block; |
| width: 200px; |
| } |
| |
| @media only screen and (min-width:768px) { |
| .section--hero .button { |
| width: unset; |
| display: inline-block; |
| margin: unset; |
| margin-right: 15px; |
| margin-top: 20px; |
| margin-bottom: 30px; |
| } |
| |
| .hero-inner { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .hero-inner > * { |
| width: 45%; |
| } |
| } |
| |
| .hero-inner .content { |
| padding: 0 10px; |
| } |
| |
| .hero-inner h3 { |
| font-weight: normal; |
| margin-bottom: 15px; |
| font-size: 20px; |
| margin-left: 10px; |
| } |
| |
| .blog-posts { |
| display: flex; |
| flex-wrap: wrap; |
| } |
| |
| .blog-post { |
| display: block; |
| box-sizing: border-box; |
| font-size: 15px; |
| flex-grow: 1; |
| flex-basis: 0; |
| background: #999; |
| background: rgba(0,0,0, .4); |
| margin: 10px; |
| color: #fff; |
| padding: 10px; |
| } |
| |
| .blog-posts .blog-post::after { |
| border: none; |
| } |
| |
| .blog-post:hover { |
| background: #eb1c23; |
| background: rgba(255, 0, 8, 0.9); |
| } |
| |
| .blog-post__title { |
| font-size: 18px; |
| margin-bottom: 10px; |
| } |
| |
| .blog-post__date { |
| text-transform: uppercase; |
| text-align: right; |
| font-size: 12px; |
| } |
| |
| .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: 15px; |
| } |
| |
| .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: #fbfbfb; |
| } |
| |
| .section--highlight .section__item-title { |
| color: #ec1c23; |
| } |
| |
| .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: 16.5px; |
| position: relative; |
| margin-left: 30px; |
| } |
| |
| /* .section__item-feature::before { |
| } */ |
| |
| .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; |
| } |
| |
| .section__item-logo-bg:hover { |
| opacity: 1; |
| } |
| |
| /******************************************************************** |
| * |
| * SECTION - HOME PAGE - BRANDS |
| * |
| *******************************************************************/ |
| .section.section--brands { |
| background: #fff; |
| } |
| |
| .section--brands .section__items { |
| justify-content: center; |
| margin-bottom: 100px; |
| font-size: 0; |
| } |
| |
| .section--brands .section__item { |
| width: 128px; |
| margin: 20px; |
| padding: 0; |
| transition: transform .3s ease 0s; |
| border-radius: 100%; |
| transform: scale(.8); |
| } |
| |
| .section--brands .section__item:hover, .section--brands .section__item.is-selected { |
| transform: scale(1.2); |
| border-radius: 4px; |
| } |
| |
| .is-selected .section__item-logo-bg, |
| .section--brands .section__item:hover .section__item-logo-bg { |
| border-radius: 4px; |
| } |
| |
| .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-submenus .side-navigation__group-item { |
| font-size: 13px; |
| } |
| |
| .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; |
| padding-left: 5px; |
| } |
| |
| .side-navigation__group-title.active { |
| background: #444; |
| color: #fff; |
| padding: 5px; |
| border-radius: 2px; |
| } |
| |
| .side-navigation__group-title.active::after { |
| border: none; |
| } |
| |
| 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; |
| padding-left: 5px; |
| } |
| |
| .side-navigation__group-items h4 { |
| font-size: 13px; |
| text-transform: uppercase; |
| font-weight: bold; |
| margin-top: 10px; |
| } |
| |
| .side-navigation__group-item.active { |
| background: #444; |
| /* text-decoration: underline; */ |
| font-weight: bold; |
| color: #fff; |
| padding: 5px; |
| border-radius: 2px; |
| } |
| |
| .side-navigation__group-item.active:hover { |
| color: #fff; |
| background: #eb1c23; |
| } |
| |
| .side-navigation__group-item:hover { |
| color: #7a2c68; |
| } |
| |
| /**** |
| * |
| * 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 { |
| border-collapse: collapse; |
| margin: 1em 0; |
| border:1px solid #000000; |
| font-size : 12px; |
| font-family : "Myriad Web",Verdana,Helvetica,Arial,sans-serif; |
| } |
| |
| table th, table td { |
| text-align: left; |
| vertical-align: top; |
| padding: 5px; |
| border-bottom: 1px solid #ccc; |
| border-top: 1px solid #ccc; |
| border-left: 1px solid #ccc; |
| border-right: 1px solid #ccc; |
| } |
| |
| 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); |
| } |
| |
| .case-study-header { |
| display: flex; |
| border-bottom: 1px solid #eee; |
| margin-bottom: 30px; |
| } |
| |
| .case-study-header__img { |
| width: 128px; |
| height: 128px; |
| background-size: contain; |
| background-repeat: no-repeat; |
| background-position: center; |
| margin-right: 20px; |
| margin-bottom: 10px; |
| border-radius: 4px; |
| } |
| |
| .case-study-header__headings { |
| border-left: 1px solid #eee; |
| padding-left: 20px; |
| padding-top: 20px; |
| } |
| |
| .case-study-header__headings h2 { |
| margin: 0; |
| font-size: 20px; |
| margin-bottom: 20px; |
| } |
| |
| .page.page--case-study h3 { |
| text-transform: uppercase; |
| margin: 10px auto 20px; |
| } |
| |
| .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 { |
| margin: 20px; |
| padding: 0; |
| transition: transform .3s ease 0s; |
| border-radius: 100%; |
| transform: scale(.6); |
| } |
| |
| .case-studies-list__item.is-selected { |
| transform: scale(1); |
| border-radius: 4px; |
| } |
| |
| .case-studies-list__item:hover { |
| transform: scale(1); |
| border-radius: 4px; |
| } |
| |
| .case-studies-list__item.is-selected .case-studies-list__item-logo-bg { |
| border-radius: 4px; |
| } |
| |
| .case-studies-list__item:hover .case-studies-list__item-logo-bg { |
| border-radius: 4px; |
| } |
| |
| .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; */ |
| border-radius: 100%; |
| } |
| |
| .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 { |
| border: 1px solid #eee; |
| padding: 20px; |
| color: #333; |
| 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 { |
| } |
| |
| .news-end-action:hover { |
| color: #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-smoosh-content { |
| |
| } |
| |
| @media only screen and (min-width:768px) { |
| .meet-smoosh-content { |
| display: flex; |
| } |
| |
| .meet-description-and-actions { |
| width: 45%; |
| margin-left: 5%; |
| } |
| |
| .meet-name-date-host-info { |
| width: 50%; |
| } |
| |
| } |
| |
| |
| .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; |
| border-bottom: 1px solid #eee; |
| /* 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; |
| line-height: 40px; |
| } |
| |
| .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: 100px; |
| 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: 5px 10px; |
| 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; |
| line-height: 30px; |
| } |
| |
| |
| |
| /** |
| * |
| * Pagination |
| * |
| **/ |
| |
| .pagination { |
| } |
| |
| .pagination.hide { |
| display: none; |
| } |
| |
| .pagination-inner { |
| display: flex; |
| } |
| |
| .paginate-action { |
| cursor: pointer; |
| flex-grow: 1; |
| padding: 10px 20px; |
| color: #333; |
| border: 2px solid #eee; |
| 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 { |
| color: #eb1c23; |
| } |
| |
| .paginate-previous { |
| |
| } |
| |
| .paginate-next { |
| } |
| |
| .paginate-previous:not(.hide) + * { |
| border-left: none; |
| } |
| |
| /**** |
| * |
| * 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; |
| } |