| /* Set line height */ |
| body table { |
| line-height: 1.5; |
| } |
| |
| /* Home page CSS grid */ |
| .grid-container { |
| display: grid; |
| grid-template-columns: 3fr 1fr; |
| max-width: 1320px;; |
| padding-right: 15px; |
| padding-left: 15px; |
| margin-right: auto; |
| margin-left: auto; |
| } |
| |
| .grid-item { |
| padding: 0 15px; |
| } |
| |
| /* Home page banner */ |
| .druid-masthead { |
| padding: 50px 20px 50px 20px; |
| margin-bottom: 10px; |
| background-color: #3b3b50; |
| text-align: center; |
| color: white; |
| overflow: hidden; |
| background-image: url("/img/watermark-dark.png"); |
| background-size: 800px auto; |
| background-repeat: no-repeat; |
| background-position: 26% -76px; |
| } |
| |
| /* Banner button */ |
| .druid-masthead .button { |
| display: inline-block; |
| min-width: 155px; |
| margin: 6px; |
| font-size: 1.1em; |
| line-height: 1.4em; |
| font-weight: 600; |
| padding: 9px 12px; |
| border-radius: 2px; |
| background: #9caeff; |
| color: #1C1C26; |
| transition: background-color 0.1s ease; |
| } |
| |
| .druid-masthead .button .fa, .druid-masthead .button .fab { |
| font-size: 16px; |
| margin-right: 3px; |
| } |
| |
| .druid-masthead .button:hover, .druid-masthead .button:active { |
| background: white; |
| text-decoration: none; |
| } |
| |
| .druid-masthead .lead { |
| font-size: 1.7em; |
| line-height: 1.7em; |
| font-weight: 600; |
| margin-top: 8px; |
| margin-bottom: 26px; |
| max-width: 910px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| .druid-masthead b { |
| font-weight: 700; |
| } |
| |
| .druid-masthead sup { |
| vertical-align: super; |
| font-size: 0.5em; |
| } |
| |
| /* Use font styling from Docusaurus 1 */ |
| code { |
| background-color: rgba(27,31,35,.05) !important; |
| border-radius: 3px !important; |
| color: inherit !important; |
| font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace !important; |
| font-size: 85% !important; |
| margin: 0 !important; |
| padding: 3.2px 6.4px !important; |
| } |
| |
| /* Add padding to navbar logo */ |
| .navbar__logo { |
| padding-left: 15px; |
| } |
| |
| /* Add padding to navbar */ |
| .navbar { |
| padding-right: 15px; |
| } |
| |
| /* Style navbar items */ |
| .navbar__items--right{ |
| padding-right: 15px; |
| } |
| |
| .navbar__item { |
| color: #9caeff; |
| padding-left: 8px; |
| padding-right: 8px; |
| } |
| .navbar__item:hover { |
| color: white; |
| } |
| |
| /* Style navbar links */ |
| .navbar__link { |
| color: #9caeff; |
| } |
| |
| .navbar__link:hover { |
| color: white; |
| } |
| |
| /* Ensure that dropdown stays open when clicked */ |
| .dropdown__menu { |
| margin-top: 0; |
| } |
| |
| /* Individual key feature */ |
| .druid-feature { |
| background-color: white; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| border-radius: 5px; |
| padding: 20px; |
| } |
| |
| /* Grid system for key features */ |
| .druid-feature-container { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); /* Three columns, each taking up 1/3 of the width */ |
| gap: 20px; /* Space between the cards */ |
| } |
| |
| /* Call to action button */ |
| .button { |
| position: relative; |
| background-color:#4460de; |
| border-color: #4460de; |
| color: #fff; |
| display: inline-block; |
| margin-top: 10px; |
| margin-bottom: 10px; |
| padding:3px 8px; |
| width: fit-content; |
| } |
| |
| /* Widget container CSS*/ |
| .widget-container { |
| margin-top: 6px; |
| padding: 0 10px; |
| } |
| |
| .widget-container a { |
| display: block; |
| line-height: 1.5em; |
| } |
| |
| .widget-container a:hover { |
| text-decoration: underline; |
| } |
| |
| .cal-icon { |
| padding-right: 7px; |
| } |
| |
| /* Change font color in footer */ |
| .footer__copyright{ |
| margin-top: 12px; |
| font-size: 14px; |
| line-height: normal; |
| color: #aaa; |
| } |
| |
| @media (max-width: 500px) { |
| .druid-masthead { |
| .lead { |
| font-size: 1.4em; |
| } |
| |
| .button { |
| min-width: 130px; |
| } |
| } |
| } |
| |
| @media (min-width: 992px) { |
| .card { |
| min-height: 294px; |
| } |
| } |
| |
| @media (min-width: 1200px) { |
| .card { |
| min-height: 230px; |
| } |
| } |