| header.frontpage { |
| font-size: 1.5rem; |
| display: flex; |
| flex-flow: column; |
| align-items: center; |
| margin: 0 auto; |
| max-width: 60rem; |
| } |
| |
| header.frontpage h1 { |
| font-size: 5rem; |
| font-weight: bolder; |
| color: var(--heading-font-color); |
| margin-top: 3rem; |
| text-align: center; |
| text-transform: none; |
| text-shadow: -1px -1px 1px #fff5, 1px -1px 1px #fff5, -1px 1px 1px #fff5, 1px 1px 1px #fff5; |
| } |
| |
| header.frontpage p { |
| hyphens: none; |
| margin-top: 3rem; |
| text-align: center; |
| line-height: 1.5; |
| color: var(--body-font-color); |
| } |
| |
| header.frontpage a { |
| color: var(--heading-font-color); |
| text-decoration: underline; |
| } |
| |
| header.frontpage a:hover { |
| color: var(--heading-font-color); |
| text-decoration: underline; |
| } |
| |
| header.frontpage a:active { |
| color: var(--heading-font-color); |
| } |
| |
| .frontpage a:hover { |
| color: var(--color-white); |
| text-decoration: none; |
| } |
| |
| .frontpage a:active { |
| color: var(--color-white); |
| } |
| |
| .frontpage a.significant { |
| margin: 1rem; |
| padding: 0.8rem 1.5rem; |
| background: var(--color-camel-orange); |
| color: var(--color-white); |
| border-radius: 8px; |
| font-size: 1.2rem; |
| font-weight: bold; |
| outline: none; |
| display: inline-block; |
| box-shadow: 0 4px #8e480b; |
| } |
| |
| .frontpage a.significant:hover { |
| color: var(--color-white); |
| box-shadow: 0 3px #8e480b; |
| transform: translateY(2px); |
| } |
| |
| .frontpage a.significant:active { |
| color: var(--color-white); |
| box-shadow: 0 3px #8e480b; |
| transform: translateY(2px); |
| } |
| |
| header.frontpage svg { |
| position: absolute; |
| top: 4rem; |
| left: 0; |
| width: 100%; |
| height: 14rem; |
| z-index: -1; |
| } |
| |
| header.frontpage svg path { |
| fill: none; |
| animation: sparkle 2s ease alternate infinite; |
| } |
| |
| header.frontpage svg path:nth-child(1) { |
| stroke: #ffebcc; |
| stroke-width: 10; |
| stroke-opacity: 0.9; |
| } |
| |
| header.frontpage svg path:nth-child(2) { |
| stroke: #911408; |
| stroke-width: 10; |
| stroke-opacity: 0.3; |
| animation-delay: -1s; |
| } |
| |
| header.frontpage svg path:nth-child(3) { |
| stroke: #f1b35b; |
| stroke-width: 15; |
| stroke-opacity: 0.6; |
| animation-delay: -3.5s; |
| } |
| |
| header.frontpage svg path:nth-child(4) { |
| stroke: #f28a40; |
| stroke-width: 5; |
| stroke-opacity: 0.4; |
| animation-delay: -3s; |
| } |
| |
| header.frontpage svg path:nth-child(5) { |
| stroke: #ee6d11; |
| stroke-width: 5; |
| stroke-opacity: 0.6; |
| animation-delay: -6s; |
| } |
| |
| @keyframes sparkle { |
| 0% { |
| stroke-opacity: 0.2; |
| } |
| |
| 100% { |
| stroke-opacity: 0.6; |
| } |
| } |
| |
| section.frontpage { |
| color: var(--doc-font-color); |
| font-size: var(--doc-font-size); |
| line-height: var(--doc-line-height); |
| margin: 0 auto; |
| margin-top: 4rem; |
| max-width: var(--frontpage-max-width); |
| } |
| |
| section.frontpage.columns, |
| section.frontpage.projects, |
| section.frontpage.apache { |
| display: flex; |
| flex-wrap: wrap; |
| border-top: 1px solid var(--color-smoke-50); |
| padding: 2rem 1rem 1rem 1rem; |
| } |
| |
| section.frontpage.projects .project { |
| width: calc(33% - 3rem); |
| padding: 1%; |
| } |
| |
| section.frontpage h1, |
| section.frontpage h2, |
| section.frontpage h3, |
| section.frontpage h4, |
| section.frontpage h5, |
| section.frontpage h6 { |
| font-weight: var(--heading-font-weight); |
| color: var(--heading-font-color); |
| line-height: 1.3; |
| margin: 1rem 0 0; |
| text-transform: uppercase; |
| word-wrap: break-word; |
| } |
| |
| section.frontpage a { |
| color: var(--link-font-color); |
| } |
| |
| section.frontpage a:hover { |
| color: var(--link_hover-font-color); |
| } |
| |
| section.frontpage h1 { |
| width: 100%; |
| text-align: center; |
| margin-bottom: 1rem; |
| } |
| |
| section.frontpage h2 { |
| text-align: center; |
| } |
| |
| section.frontpage.columns .box { |
| width: calc(50% - 3rem); |
| flex-direction: column; |
| align-items: center; |
| text-align: center; |
| padding: 2rem; |
| margin: 1.5rem; |
| border: 1px solid var(--color-smoke-90); |
| } |
| |
| .section.frontpage.columns .box img { |
| width: 27rem; |
| } |
| |
| section.frontpage.columns .box .feature-icon { |
| width: 3.75rem; |
| height: 3.75rem; |
| filter: invert(24%) sepia(38%) saturate(1353%) hue-rotate(200deg) brightness(89%) contrast(99%); |
| } |
| |
| .split { |
| flex: 50%; |
| padding: 1rem 0 2rem 0; |
| } |
| |
| .split img { |
| max-width: 100%; |
| } |
| |
| @media screen and (max-width: 626px) { |
| section.frontpage.columns, |
| section.frontpage.apache, |
| section.frontpage.projects { |
| padding-top: 1rem; |
| } |
| |
| section.frontpage.projects .project { |
| width: 100%; |
| } |
| } |
| |
| @media screen and (max-width: 1023px) { |
| header.frontpage h1 { |
| font-size: 9vw; |
| } |
| |
| header.frontpage svg { |
| height: 10rem; |
| top: 8rem; |
| } |
| |
| .split { |
| margin: 0 1rem; |
| flex: 100%; |
| } |
| |
| .split img { |
| max-width: 70%; |
| display: block; |
| margin: auto; |
| } |
| |
| section.frontpage.columns .box { |
| width: 100%; |
| } |
| |
| @media screen and (min-width: 627px) { |
| section.frontpage.projects .project { |
| width: calc(50% - 3rem); |
| } |
| } |
| } |