Skip to main content
MindTouch Success Center

Home page variables

Applies to:
MindTouch (current)
Role required:
N/A
The MindTouch custom homepage allows site owners to brand their site faster with LESS variables and mixin associated with the custom home template.

 

Desktop screenshot

 

custom-home-desktop.png

Tablet screenshot

custom-home-tablet.png

Mobile screenshot

custom-home-mobile.png

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);
    }
}
  • Was this article helpful?