diff --git a/website/static/css/custom.css b/website/static/css/custom.css index 7d038338c..86025f479 100644 --- a/website/static/css/custom.css +++ b/website/static/css/custom.css @@ -8,15 +8,6 @@ header.postHeader:empty + article h1 { margin-top: 0; } -.homeContainer .homeWrapper { - padding-bottom: 1em; -} - -.mainContainer { - padding-top: 24px; - padding-bottom: 24px; -} - .post article a { /* add underlines to links in blocks of text for a11y */ color: $primaryColor; @@ -25,6 +16,7 @@ header.postHeader:empty + article h1 { position: relative; transition: outline-offset 0.2s ease-in-out; } + .post article a:hover, .post article a:focus, .post article a:active { @@ -38,6 +30,7 @@ header.postHeader:empty + article h1 { position: relative; transition: outline-offset 0.2s ease-in-out; } + .post article blockquote { color: black; background-color: $accentColor4; @@ -63,11 +56,13 @@ header.postHeader:empty + article h1 { outline: none; text-decoration: underline; } + .post article blockquote { color: black; background-color: $accentColor4; border-left: 8px solid $accentColor5; } + .post article blockquote a { /* add underlines to links in blocks of text for a11y */ color: black; @@ -76,6 +71,7 @@ header.postHeader:empty + article h1 { position: relative; transition: outline-offset 0.2s ease-in-out; } + .post article blockquote a:hover, .post article blockquote a:focus, .post article blockquote a:active { @@ -86,12 +82,14 @@ header.postHeader:empty + article h1 { outline: none; text-decoration: underline; } + .post article .hash-link { /* add underlines to links in blocks of text for a11y */ color: $accentColor1; transition: outline-offset 0.2s ease-in-out; opacity: 1; } + .post article .hash-link:hover, .post article .hash-link:focus, .post article .hash-link:active { @@ -101,57 +99,72 @@ header.postHeader:empty + article h1 { box-shadow: 0 0 0 0 $accentColor6; transition: outline-offset 0.2s ease-in-out; } + .hash-link .hash-link-icon { fill: currentColor; } + .fixedHeaderContainer header .headerTitleWithLogo { - color : white; + color: white; display: block !important; } + .navigationSlider .slidingNav ul.nav-site a { - color : white; + color: white; font-weight: 400; } + .navigationSlider .slidingNav ul.nav-site a:hover, .navigationSlider .slidingNav ul.nav-site a:focus, .navigationSlider .slidingNav ul.nav-site a:active { - color : white; + color: white; font-weight: 400; text-decoration: underline; } -.navigationSlider .slidingNav ul a[href*="github"] { + +.navigationSlider .slidingNav ul a[href*='github'] { font-size: 0; } -.navigationSlider .slidingNav ul a[href*="github"]::before { - content : ""; - width : 32px; - height : 32px; - background: url("/img/github-brands.svg"); + +.navigationSlider .slidingNav ul a[href*='github']::before { + content: ''; + width: 32px; + height: 32px; + background: url('/img/github-brands.svg'); } + .nav-footer .copyright, .nav-footer .sitemap a { /* increase link contrast */ color: white; } + .button.hero { background: $primaryColor; color: #fff; font-size: 30px; - padding: .5em 1.25em; + padding: 0.5em 1.25em; font-weight: bold; } + .button.hero:visited { background: $primaryColor; color: #fff; } + .button.hero:hover { background: #fff; color: $primaryColor; } -.productShowcaseSection .rowContainer { - padding-top: 30px; - padding-bottom: 30px; + +.homeContainer .homeWrapper { + padding-bottom: 0; } + +.productShowcaseSection .featureBlock { + padding: 40px 0; +} + .productShowcaseSection .featureBlock img { width: 60px; height: 60px; @@ -166,13 +179,15 @@ header.postHeader:empty + article h1 { .libBlock > div p { text-align: center; } + .libBlock h2 a, .libBlock h2 a:visited { - color : black; + color: black; display: flex; justify-content: center; align-items: center; } + .libBlock img { margin-left: 5px; max-width: 16px !important; @@ -184,15 +199,10 @@ header.postHeader:empty + article h1 { margin-bottom: 5px; } -.libsContainer { - display: flex; - justify-content: center; -} - @media only screen and (max-device-width: 480px) { .productShowcaseSection .featureBlock { - padding-top: 0; - padding-bottom: 0; + padding-top: 30px; + padding-bottom: 5px; } .featureBlock .imageAlignTop .blockImage { @@ -207,10 +217,10 @@ header.postHeader:empty + article h1 { .featureBlock .blockContent { margin-bottom: 25px; } - + .homeSplashFade img { - width : 60px; - height : 60px; + width: 60px; + height: 60px; } .homeSplashFade h1 { @@ -251,9 +261,6 @@ header.postHeader:empty + article h1 { .navSearchWrapper:after { left: 35px; } - .libsContainer { - flex-direction: column; - } } @media only screen and (min-width: 1400px) {