Home page variables

Desktop screenshot

Tablet screenshot

Mobile screenshot

Variables

@splash-container-base-color

Default value: @highlight-color  

Definition: The color that the splash container background gradient is based on. Defaults to site's highlight color.

@splash-container-background-color

Default value: fade(@splash-container-base-color, 35%)  

Definition: This is the background color underneath the semi-transparent gradient.

@splash-container-background-color-lighter

Default value: fade(lighten(@splash-container-base-color, 37%), 75%)  

Definition: A lighter version of the splash container's base color.

@splash-container-background-color-darker

Default value: fade(darken(@splash-container-base-color, 15%), 50%)  

Definition: A darker version of the splash container's base color.

@splash-container-border-color

Default value: @splash-container-base-color  

Definition: The color of the border around the splash container.

@splash-container-color

Default value: contrast(@splash-container-background-color);  

Definition: The font color for any text added to the splash container.

@splash-container-color-h1

Default value: contrast(@splash-container-background-color-lighter);  

Definition: An override for the <h1> font color found inside the splash container. This text color will change from white to black to get the most contrast between it and the background gradient.

@splash-container-font-family

Default value: @default-font-family

Definition: The typeface used inside the splash container.

@splash-container-link-color

Default value: @splash-container-base-color  

Definition: The color of links inside the splash container.

@splash-container-link-color-visited

Default value: @splash-container-base-color  

Definition: The color of a link in the splash container that has previously been clicked.

@splash-container-link-color-hover

Default value: darken(@splash-container-base-color, 15%)  

Definition: The color of a link in the splash container when a user moves their mouse over it.

@splash-container-link-color-active

Default value: darken(@splash-container-base-color, 15%)  

Definition: The color of a link in the splash container when a user clicks on it or hits enter after tabbing to it with their keyboard.

@splash-container-link-color-focus

Default value: darken(@splash-container-base-color, 15%)  

Definition: The color of a link in the splash container when a user has tabbed to it.

Mixin

The splash container has a mixin that will calculate the background gradient, generate styles for links and headers, and sets a color for the border and text.

.mt-splash-container {
    background: radial-gradient(ellipse at 50% 65%,@splash-container-background-color-lighter 35%,@splash-container-background-color 75%, @splash-container-background-color-darker 100%) @splash-container-background-color;
    border: solid @splash-container-border-color;
    border-width: 1px 0;
    color: @splash-container-color;
    font-family: @splash-container-font-family;
    .columbia-browser-safari & {
        background: radial-gradient(ellipse at 50% 65%,fade(@splash-container-background-color-lighter, 5%) 45%,fade(@splash-container-background-color, 35%) 75%, fade(@splash-container-background-color-darker, 35%) 100%) @splash-container-background-color-lighter;
    }
    & a {
        color: @splash-container-link-color;
        &:visited {
            color: @splash-container-link-color-visited;
        }
        .no-touch &:hover {
            color: @splash-container-link-color-hover;
        }
        &:active,
        .no-touch &:active {
            color: @splash-container-link-color-active;
        }
        &:focus {
            color: @splash-container-link-color-focus;
        }
    }
    & h1 {
        color: @splash-container-color-h1;
        text-shadow: 1px 1px 1px contrast(@splash-container-color-h1);
    }
}