| /* common css for sections */ |
| |
| section.frontpage h1, |
| section.frontpage h2 { |
| 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 { |
| color: var(--doc-font-color); |
| font-size: var(--doc-font-size); |
| line-height: var(--doc-line-height); |
| margin: 0 auto; |
| max-width: var(--frontpage-max-width); |
| } |
| |
| section.frontpage a { |
| color: var(--link-font-color); |
| text-decoration: none; |
| background-image: linear-gradient(to right, #583ac2 50%, transparent 50%); |
| background-position: 0 1.1em; |
| background-repeat: repeat-x; |
| background-size: 7px 1px; |
| } |
| |
| section.frontpage a:hover { |
| color: var(--link_hover-font-color); |
| } |
| |
| section.frontpage h1 { |
| width: 100%; |
| text-align: center; |
| margin-bottom: 1rem; |
| font-size: 2.5rem; |
| } |
| |
| section.frontpage h2 { |
| text-align: center; |
| } |
| |
| /* css for header section */ |
| |
| header.frontpage { |
| display: flex; |
| flex-direction: row; |
| margin: 2rem 3rem 2.5rem; |
| } |
| |
| header.frontpage img { |
| width: 45vw; |
| max-height: 50vh; |
| } |
| |
| header.frontpage .main-heading { |
| width: 50vw; |
| display: flex; |
| flex-direction: column; |
| margin-left: 2rem; |
| } |
| |
| header.frontpage h1 { |
| font-size: 5vw; |
| color: var(--color-asf-dark-blue); |
| margin-bottom: 0.5rem; |
| } |
| |
| header.frontpage p { |
| font-size: 1.2rem; |
| margin-bottom: 2rem; |
| line-height: 1.7rem; |
| } |
| |
| a.button, |
| section.frontpage a.button { |
| white-space: nowrap; |
| margin-right: 0.5rem; |
| background-image: none; |
| border-radius: 3rem; |
| font-weight: bold; |
| padding: 0.4rem 1rem; |
| } |
| |
| header.frontpage a.button { |
| padding: 0.7rem 1rem; |
| } |
| |
| a.button.dark, |
| section.frontpage a.button.dark, |
| section.frontpage a.button.dark:hover, |
| a.button.dark:hover { |
| background-color: var(--color-camel-orange); |
| color: white; |
| } |
| |
| a.button.light, |
| a.button.light:hover { |
| border: 1px solid var(--color-gray-70); |
| color: var(--color-gray-70); |
| } |
| |
| /* css for blog section */ |
| |
| div.frontpage.news { |
| padding: 0.2rem 0; |
| width: 20%; |
| text-align: center; |
| margin-left: 3rem; |
| background-color: var(--color-smoke-50); |
| border-radius: 1rem 1rem 0 0; |
| } |
| |
| div.frontpage.news h2 { |
| margin-bottom: 0.5rem; |
| } |
| |
| section.frontpage.columns.blog-posts { |
| margin: 0; |
| display: flex; |
| flex-direction: row; |
| padding: 1rem 1rem 1rem 3rem; |
| max-width: none; |
| border-top: none; |
| background-color: var(--color-smoke-50); |
| } |
| |
| section.frontpage.blog-posts ul { |
| display: flex; |
| flex-wrap: wrap; |
| margin: 0; |
| padding: 0; |
| } |
| |
| li.blog-post .content { |
| padding: 1rem; |
| padding-right: 0.5rem; |
| } |
| |
| li.blog-post .content h2 { |
| text-align: left; |
| margin: 0; |
| } |
| |
| li.blog-post .content p { |
| margin: 0.2rem 0; |
| } |
| |
| li.blog-post .content a { |
| font-weight: bold; |
| white-space: nowrap; |
| background: none; |
| } |
| |
| li.blog-post { |
| display: flex; |
| width: 30vw; |
| margin: 0; |
| padding-right: 1rem; |
| } |
| |
| li.blog-post:last-child { |
| padding-right: 0; |
| } |
| |
| li.blog-post time.date { |
| margin-top: 1rem; |
| text-align: center; |
| color: var(--color-asf-dark-blue); |
| text-transform: uppercase; |
| } |
| |
| li.blog-post time.date .day { |
| font-size: 3.2rem; |
| font-weight: bold; |
| padding: 0; |
| line-height: 1; |
| display: block; |
| } |
| |
| li.blog-post time.date .month { |
| font-size: 1.5rem; |
| font-weight: bold; |
| line-height: 1.2; |
| display: block; |
| } |
| |
| /* common css for columns section */ |
| |
| section.frontpage.columns.functionalities p, |
| section.frontpage.projects .project .content p { |
| margin-bottom: 1.5rem; |
| } |
| |
| section.frontpage.projects, |
| section.frontpage.apache, |
| section.frontpage.functionalities { |
| display: flex; |
| flex-wrap: wrap; |
| border-top: 1px solid var(--color-smoke-50); |
| padding: 2rem 1rem 1rem 1rem; |
| } |
| |
| section.frontpage.columns.functionalities { |
| border: none; |
| } |
| |
| section.frontpage.columns.functionalities h2, |
| section.frontpage.projects .project .content h2, |
| section.frontpage.projects .project .content p { |
| text-align: left; |
| text-transform: none; |
| } |
| |
| /* css for functionalities section */ |
| |
| section.frontpage.columns.functionalities .box { |
| width: 70%; |
| display: flex; |
| margin: 2vw auto; |
| } |
| |
| section.frontpage.columns.functionalities .box .content { |
| width: 55vw; |
| margin: 0 1vw; |
| } |
| |
| section.frontpage.columns.functionalities .box .icon { |
| width: 30vw; |
| text-align: center; |
| } |
| |
| section.frontpage.columns.functionalities img { |
| height: 12rem; |
| margin: 0 1vw; |
| } |
| |
| /* css for projects section */ |
| section.frontpage.projects { |
| width: 80%; |
| max-width: none; |
| margin: 0 auto; |
| } |
| |
| section.frontpage.projects .project { |
| display: flex; |
| width: 50%; |
| padding: 1rem; |
| } |
| |
| section.frontpage.projects .project .icon { |
| min-width: 8rem; |
| margin-right: 1rem; |
| text-align: center; |
| } |
| |
| section.frontpage.projects .project img { |
| height: 6rem; |
| margin-top: 2rem; |
| } |
| |
| /* css for apache section */ |
| |
| .split { |
| flex: 50%; |
| padding: 1rem 0 2rem 0; |
| } |
| |
| .split img { |
| max-width: 100%; |
| } |
| |
| /* css for tablet view */ |
| |
| @media screen and (max-width: 1024px) { |
| header.frontpage h1 { |
| font-size: 3rem; |
| text-align: center; |
| } |
| |
| section.frontpage h1 { |
| font-size: 2.5rem; |
| } |
| |
| .split { |
| margin: 0 1rem; |
| flex: 100%; |
| } |
| |
| .split img { |
| display: block; |
| margin: auto; |
| } |
| |
| header.frontpage .main-heading, |
| section.frontpage.columns.functionalities, |
| section.frontpage.columns.projects, |
| section.frontpage.apache, |
| section.frontpage.blog-posts .blog-post { |
| width: 90%; |
| margin: 0 auto; |
| } |
| |
| section.frontpage.columns.blog-posts ul { |
| flex-direction: column; |
| } |
| |
| section.frontpage.blog-posts .blog-post .date, |
| section.frontpage.projects .project .icon { |
| min-width: 25%; |
| } |
| |
| section.frontpage.projects .project, |
| section.frontpage.columns.functionalities .box { |
| width: 100%; |
| } |
| |
| section.frontpage.functionalities .icon img, |
| section.frontpage.projects .icon img { |
| max-width: 25vw; |
| margin: 2vw; |
| } |
| |
| section.frontpage.functionalities .content { |
| width: 70vw; |
| } |
| |
| header.frontpage p { |
| font-size: inherit; |
| text-align: center; |
| } |
| |
| header.frontpage { |
| flex-direction: column-reverse; |
| margin: 0; |
| } |
| |
| header.frontpage img { |
| width: 60%; |
| max-height: 45vh; |
| margin: 0 auto; |
| } |
| |
| div.frontpage.news { |
| width: 100%; |
| margin: 1.5rem 0 0; |
| text-transform: uppercase; |
| border-radius: 0; |
| } |
| |
| a.button, |
| section.frontpage a.button { |
| line-height: 3rem; |
| } |
| } |
| |
| /* css for mobile view */ |
| |
| @media screen and (max-width: 626px) { |
| header.frontpage .main-heading, |
| section.frontpage.columns.functionalities, |
| section.frontpage.columns.blog-posts, |
| section.frontpage.projects, |
| section.frontpage.apache { |
| width: 100%; |
| margin: 0; |
| padding: 1rem; |
| } |
| |
| header.frontpage a.button-light { |
| line-height: 5rem; |
| } |
| |
| section.frontpage.projects .project, |
| section.frontpage.columns.functionalities .box.left { |
| flex-direction: column; |
| margin: 0; |
| padding: 0; |
| } |
| |
| section.frontpage.columns.functionalities .box.right { |
| flex-direction: column-reverse; |
| margin: 0; |
| padding: 0; |
| } |
| |
| section.frontpage.projects .project .content h2, |
| section.frontpage.projects .project .icon, |
| section.frontpage.columns.functionalities .box .content h2, |
| section.frontpage.columns.functionalities .box .content, |
| section.frontpage.columns.functionalities .box .icon, |
| section.frontpage.columns.functionalities p, |
| section.frontpage.projects .project .content p { |
| text-align: center; |
| margin: 0; |
| width: 100%; |
| } |
| |
| section.frontpage.columns.functionalities .box .content p, |
| section.frontpage.projects .project .content p { |
| margin: 1rem 0 1.5rem; |
| } |
| |
| section.frontpage.columns.functionalities .box .icon img { |
| max-width: 50%; |
| height: auto; |
| margin-top: 2rem; |
| } |
| |
| section.frontpage h1 { |
| font-size: 2rem; |
| } |
| |
| header.frontpage h1 { |
| font-size: 2.5rem; |
| } |
| } |