landing-pages/site/assets/scss/_community-page.scss

/**
 * 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.
 */
 @import "media";
 @import "fonts";

 .list-link {
   @extend .bodytext__medium--greyish-brown;
   text-decoration: underline;
 }

 .community {
   &--header-container {
     max-width: 100%;
     margin: 0 auto;
   }

   &--header-join {
     @extend .header__small--greyish-brown;
     text-align: center;
   }

   &--header-persona {
     @extend .header__xsmall--greyish-brown;
     text-align: center;
     margin-bottom: 2.5vh;
   }

   &--accordion-container {
     margin: 60px 18px;
   }

   &--accordion-container .dev-list {
     @extend .bodytext__medium--brownish-grey;
     margin-left: auto;
   }

   &--committers-header {
     @extend .header__small--greyish-brown;
     text-align: center;
     margin-top: 70px;
     margin-bottom: 40px;

     &.large-margin {
       margin-top: 100px;
       margin-bottom: 40px;
     }
   }

   &--resources-header {
     @extend .header__small--greyish-brown;
     text-align: center;
     margin-top: 50px;
   }

   .section::before {
     display: block;
     content: " ";
     margin-top: -160px;
     height: 160px;
     visibility: hidden;
   }

   @media(max-width:1280px) {
     .roadmap main {
       padding-left: 0
     }

     .roadmap .td-sidebar {
       position: static;
       background-color: transparent;
       padding: 0;
       margin: 0;
       max-width: unset;
       height: 530px
     }
   }

   .wy-nav-side-toc {
     position: sticky;
     top: 263px;
     overflow-x: auto;
     overflow-y: auto;
     border-left: 1px solid rgba(211, 211, 211, 0.128);
     height: 100px;
     padding-left: 30px;
     max-height: -webkit-calc(100vh - 163px);
     max-height: calc(100vh - 163px);
     font-size: 14px;
     line-height: 1.43;
   }


   @media (min-width: $tablet) {
     .community {
       &--grid {
         display: grid;
         grid-template-columns: 50% 50%;
         grid-template-areas:
           "dev user";
       }
     }
   }

   @media (min-width: $tablet) {
    .resources {
      &--grid {
        display: grid;
        grid-template-areas:
          "dev user";
      }
    }
  }


   .col-12 {
     -webkit-box-flex: 0;
     -webkit-flex: 0 0 100%;
     -ms-flex: 0 0 100%;
     flex: 0 0 80%;
     max-width: 100%;
   }

   &--dev {
     grid-area: dev;
   }

   &--user {
     grid-area: user;
   }
 }

 @media (min-width: $fullhd) {
   .community {
     .list-items {
       max-width: 1220px;
       margin-right: auto;
       margin-left: auto;
     }

     .list-item {
       width: 25%;
     }
   }
 }

 *,
 *::before,
 *::after {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }

 @media (max-width: $tablet) {
   .community {
     &--header-container {
       max-width: 580px;
     }

     &--header-join {
       font-family: $primary-font !important;
       font-size: 24px !important;
       line-height: 1.5 !important;
     }

     &--accordion-container {
       margin: 40px 0;
     }

     &--committers-header {
       font-size: 36px !important;
       line-height: 1.22 !important;
       margin-top: 60px;

       &.large-margin {
         margin-top: 60px;
         margin-bottom: 40px;
       }
     }

     &--button-container {
       margin-top: 20px;
     }
   }
 }

 .desktop-only {
   @media (max-width: $tablet) {
     display: none;
   }

   .base-layout {
     padding: 0px 0 60px;
   }
 }

 .no-desktop {
   @media (min-width: calc(#{$tablet} + 1px)) {
     display: none;
   }
 }


 .mobile-only {
   @media(min-width:calc(640px + 1px)) {
     display: none
   }
 }

 @media (min-width: 768px) {
   .td-main main {
     padding-top: 0rem;
   }
 }

 .d-flex {
   justify-content: flex-end;
 }

 .roadmap .wy-nav-side-toc {
   top: 263px !important;
 }