102 lines
2.3 KiB
SCSS
102 lines
2.3 KiB
SCSS
/* Husky color palette */
|
|
$husky-light-dark: #252E3C;
|
|
$husky-dark: #182230;
|
|
$husky-accent: #D8A070;
|
|
$husky-foreground: white;
|
|
$husky-red: #d87073;
|
|
|
|
/* Material Design Lite variables*/
|
|
$color-primary: 37, 46, 60;
|
|
$color-primary-dark: 24, 34, 48;
|
|
$color-accent: 216, 160, 112;
|
|
$color-primary-contrast: 255, 255, 255;
|
|
$color-accent-contrast: 0, 0, 0;
|
|
$footer-bg-color: darken($husky-dark, 1.5);
|
|
$button-secondary-color: $husky-foreground;
|
|
$input-text-highlight-color: $husky-accent;
|
|
$input-text-label-color: opacify(white, 0.26);
|
|
$input-text-bottom-border-color: opacify(white, 0.12);
|
|
$text-color-primary: transparentize($husky-foreground, 0.13);
|
|
$input-text-error-color: $husky-red;
|
|
|
|
@import "material-design-lite.scss";
|
|
|
|
body { background-color: $husky-dark; }
|
|
hr { border-top-color: darken($husky-dark, 3.5); }
|
|
|
|
.inline-image { height: 2rem; }
|
|
|
|
/* Fade out credits, as they're secondary information, even in the footer. */
|
|
.credit {
|
|
transition: opacity 250ms;
|
|
|
|
&:not(:hover) {
|
|
opacity: .5;
|
|
}
|
|
}
|
|
|
|
.landing-section {
|
|
background: $husky-light-dark;
|
|
height: 100vh;
|
|
/* with header
|
|
padding-bottom: 64px;
|
|
height: calc(100vh - 128px);
|
|
*/
|
|
|
|
@media screen and (max-width: $grid-desktop-breakpoint) {
|
|
text-align: center;
|
|
}
|
|
|
|
.landing-title {
|
|
font-family: "Noto Serif", serif;
|
|
font-size: 32pt;
|
|
}
|
|
|
|
.landing-content { height: 90%; }
|
|
.landing-image { width: 80%; }
|
|
|
|
.app-icon { margin-bottom: 24px; }
|
|
|
|
.scroll-hint {
|
|
text-align: center;
|
|
height: 10%;
|
|
color: transparentize($husky-foreground, .5);
|
|
font-size: 48px;
|
|
}
|
|
}
|
|
|
|
.section-icon {
|
|
$iconSize: 48px;
|
|
$padding: 12px;
|
|
$size: $iconSize + ($padding * 2);
|
|
|
|
background-color: $husky-accent;
|
|
color: black;
|
|
|
|
border-radius: $size;
|
|
padding: $padding;
|
|
|
|
margin-right: 24px;
|
|
|
|
margin-top: 1em;
|
|
|
|
width: $size;
|
|
height: $size;
|
|
|
|
font-size: $iconSize;
|
|
line-height: $iconSize;
|
|
}
|
|
|
|
#followForm .mdl-textfield {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Remove this, if more content is added to the footer. */
|
|
.mdl-mini-footer {
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Undo Fontello's margin, as we don't need and aren't incorporating it in any text */
|
|
[class^="icon-"]:before, [class*=" icon-"]:before {
|
|
margin: 0 !important;
|
|
} |