| 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: 5rem; |
| 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); |
| } |
| |
| .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; |
| white-space: nowrap; |
| } |
| |
| .frontpage a.significant:hover { |
| color: var(--color-white); |
| box-shadow: 0 0 1.5rem var(--color-glow); |
| } |
| |
| .frontpage a.significant:active { |
| color: var(--color-white); |
| } |
| |
| header.frontpage svg { |
| position: absolute; |
| top: 4rem; |
| left: 0; |
| width: 100%; |
| height: 14rem; |
| z-index: -1; |
| } |
| |
| header.frontpage svg path { |
| fill: none; |
| animation: sparkle 5s ease alternate infinite; |
| } |
| |
| header.frontpage svg path:nth-child(1) { |
| stroke: #ffddab; |
| stroke-width: 10; |
| stroke-opacity: 0.6; |
| } |
| |
| header.frontpage svg path:nth-child(2) { |
| stroke: #9d1609; |
| 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: -2.5s; |
| } |
| |
| header.frontpage svg path:nth-child(4) { |
| stroke: #641a00; |
| stroke-width: 5; |
| stroke-opacity: 0.3; |
| animation-delay: -3s; |
| } |
| |
| header.frontpage svg path:nth-child(5) { |
| stroke: #e26810; |
| stroke-width: 5; |
| stroke-opacity: 0.6; |
| animation-delay: -6s; |
| } |
| |
| @keyframes sparkle { |
| 0% { |
| stroke-opacity: 0.3; |
| } |
| |
| 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 { |
| display: flex; |
| flex-wrap: wrap; |
| border-top: 1px solid var(--color-smoke-50); |
| } |
| |
| section.frontpage.projects { |
| display: flex; |
| flex-direction: column; |
| border-top: 1px solid var(--color-smoke-50); |
| } |
| |
| section.frontpage.projects .project { |
| display: flex; |
| flex-direction: row; |
| } |
| |
| section.frontpage.projects .project h1 { |
| white-space: nowrap; |
| padding: 1rem 0; |
| flex: 1; |
| } |
| |
| section.frontpage.projects .project p { |
| flex: 1; |
| margin: 1rem; |
| } |
| |
| section.frontpage.projects .project a.significant { |
| margin: 0.5rem 0; |
| padding: 0.4rem 1rem; |
| font-size: 0.8rem; |
| } |
| |
| section.frontpage.apache { |
| padding: 1rem; |
| } |
| |
| 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; |
| } |
| |
| 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; |
| } |
| |
| .box { |
| flex: 50%; |
| padding: 1rem 0; |
| } |
| |
| .box div { |
| padding: 1rem; |
| margin: 1rem; |
| border: 1px solid var(--color-smoke-50); |
| height: 100%; |
| } |
| |
| .box div img { |
| width: 27rem; |
| } |
| |
| .split { |
| flex: 50%; |
| padding: 1rem 0; |
| } |
| |
| .split img { |
| max-width: 100%; |
| } |
| |
| @media screen and (max-width: 1023px) { |
| header.frontpage h1 { |
| font-size: 15vw; |
| } |
| |
| header.frontpage svg { |
| display: none; |
| } |
| |
| .box { |
| min-width: 51vw; |
| } |
| |
| section.frontpage.projects .project { |
| flex-direction: column; |
| } |
| |
| section.frontpage.projects .project p:nth-child(3) { |
| text-align: center; |
| } |
| } |