stylesheets/oj9.css

/*
* Copyright (c) 2017, 2021 IBM Corp. and others
*
* This program and the accompanying materials are made
* available under the terms of the Eclipse Public License 2.0
* which accompanies this distribution and is available at
* https://www.eclipse.org/legal/epl-2.0/ or the Apache
* License, Version 2.0 which accompanies this distribution and
* is available at https://www.apache.org/licenses/LICENSE-2.0.
*
* This Source Code may also be made available under the
* following Secondary Licenses when the conditions for such
* availability set forth in the Eclipse Public License, v. 2.0
* are satisfied: GNU General Public License, version 2 with
* the GNU Classpath Exception [1] and GNU General Public
* License, version 2 with the OpenJDK Assembly Exception [2].
*
* [1] https://www.gnu.org/software/classpath/license.html
* [2] http://openjdk.java.net/legal/assembly-exception.html
*
* SPDX-License-Identifier: EPL-2.0 OR Apache-2.0 OR GPL-2.0 WITH
* Classpath-exception-2.0 OR LicenseRef-GPL-2.0 WITH Assembly-exception
*/


/* text for screen readers only */

.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

/* prevent code wrapping in first column of tables */

tr td:first-of-type code {
  white-space: nowrap;
}


/* Add colour to fontawesome icons */

/*
Five icons are currently used (old syntax -> new syntax):

<i class="fa fa-pencil-square-o" aria-hidden="true"></i>       -> :fontawesome-solid-pencil-alt:{: .note aria-hidden="true"}
<i class="fa fa-check" aria-hidden="true"></i>                 -> :fontawesome-solid-check:{: .yes aria-hidden="true"}
<i class="fa fa-times" aria-hidden="true"></i>                 -> :fontawesome-solid-times:{: .no aria-hidden="true"}
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>  -> :fontawesome-solid-exclamation-triangle:{: .warn aria-hidden="true"}
<i class="fa fa-bell" aria-hidden="true"></i>                  -> :fontawesome-solid-bell:{: .warn aria-hidden="true"}

Icon format (e.g. :fontawesome-solid-check: ) can be chosen from bundled icons in material theme in Python directory (e.g. ...Python\Python37-32\Lib\site-packages\material\.icons\fontawesome\solid\check ). Note partial directory structure replicated in link.

Colour added by enabling attr_list under markdown_extensions: in mkdocs.yml, and adding a class attribute to each icon (e.g. {: .yes}, then adding colours here in oj9.css (colours therefore easy to change).
*/

.yes  { color: #009485; }
.no   { color: #da7a08; }
.note { color: #009485; }
.warn { color: #da7a08; }


/* LH navigation: prevent text from wrapping */

.md-nav__item {
  white-space: nowrap;
}


/* Header */

.md-header {
  background-color: #555555;
}

.md-header__button.md-logo img, .md-header__button.md-logo svg {
  width: 5rem;
  height: 2.1rem;
}


/* Footer */

.md-footer {
  background-color: #777777;
}

.md-footer a:hover {
  color: #00bad6;
}
.horizontal-line{
  height: 2px;
  background-color: var(--theme-ui-colors-secondary,#5DA7A3);
  width: 100%;
  padding: 0 2.5rem 0 2.5rem;
}

.below-line {
  display: flex;
  flex: 80%;
  justify-content: flex-start;
  padding-left: 1rem;
}

.below-line-links {
  padding: 1rem 0.35rem;
  font-size: 0.8rem;
  padding-bottom: 0;
}

.below-line-social-media-icons {
  display: flex;
  flex: 20%;
  justify-content: flex-end;
}

.social-media-link {
  margin: 1rem 0.7rem;
  padding-right: 1rem;
}

.md-footer-social__link svg {
  max-height: 99rem;
  height: 1.2rem;
}


.above-line {
  display: flex;
  flex: 80%;
  justify-content: flex-start;
}

.above-line-links {
  display: flex;
  flex-direction: row;
  padding-left: 1rem;
}

.column {
  display: flex;
  flex-direction: column;
  padding: 1rem 0.5rem;
  padding-right: 5rem;
  font-size: 0.8rem;
}

.column h3 {
  font-size: 0.9rem;
  margin: 0;
}

.column-incubator h3 {
  font-size: 0.9rem;
  margin: 0;
  margin-bottom: 1rem ;
}

.column-incubator {
  display: flex;
  flex: 20%;
  justify-content: flex-end;
  padding: 1rem 0;
  padding-right: 1rem;
}

.arrange-column {
  display: flex;
  flex-direction: column;
}

.incubator-image {
  margin-left: calc(100% - 2.5rem);
}

.footer-link {
  padding: 0.1rem 0;
}

@media only screen and (max-width: 1040px), (min-device-width: 768px) and (max-device-width: 1024px) { 
  .column-incubator h3 {
    font-size: 0.8rem;
  }
  
  .column h3 {
    font-size: 0.8rem;
  }

  .column {
    font-size: 0.7rem;
    padding-right: 1rem;
  }

  .below-line-links {
    font-size: 0.65rem;
  }
}

@media only screen and (max-width: 767px) {
  .above-line {
    display: flex;
    flex:"100%";
    flex-direction: column-reverse;
    justify-content: center;
  }

  .above-line-links {
    display: flex;
    flex-direction: column;
  }

  .below-line {
    display: flex;
    flex:"100%";
    flex-direction: column;
    justify-content: center;
  }

  .column-incubator {
    display: flex;
    flex: 100%;
    justify-content: center;
    padding: 1rem 0;
  }

  .incubator-image {
    margin-left: 0;
    margin-bottom: 1rem;
  }

  .arrange-column {
    align-items: center;
    display: flex;
    flex-direction: column-reverse;
  }

  .below-line-social-media-icons {
    display: flex;
    flex: 20%;
    justify-content: center;
  }

  .column h3 {
    font-size: 1rem;
  }

  .column a {
    font-size: 0.8rem;
  }
}