_sass/main.scss

@use "taiga/settings";
@use "taiga/mixins";
@use "taiga/grid";
@use "taiga/base";
@use "taiga/layout";
@use "taiga/states";
@use "taiga/button";
@use "taiga/print";

@use "modules/syntax";
@use "modules/logo";
@use "modules/jumbotron";
@use "modules/mainmenu";
@use "modules/toc";
@use "modules/builtwithwicket";
@use "modules/quickstart";
@use "modules/wicket8";

code, pre, code > span, pre > span { 
    font-family: 'Source Code Pro', 'courier new', monospace; 
    font-size: settings.$font-size-20; 
}

a {
	border-color: settings.$color-brand-50;
    border-style: none none dotted none;
    border-width: 0 0 1px 0;
    cursor: pointer;
    font-weight:400;
    text-decoration: none;

    &:hover { color: settings.$color-brand-60; }
}

h1 a, h2 a, h3 a {
    border: none;
}

div.header {
    background-color: white;
    border-bottom: 1px solid #e1e1e1;
    box-shadow: 0 .5rem 3rem #f0f0f0;
    color: settings.$color-brand-50;
    display:block;
    position:relative;
    width:100%;
}

.default {
    nav.mainmenu {
        margin:0;
        padding-right:1em;
        display:flex;
        
        @include mixins.breakpoint(settings.$breakpoint-20, 'max-width') {
            display:block;
        }
    }
    a, a:hover, a:active, a:visited {
        border:none;
    }
}

.preamble {
    font-weight:300;
    line-height:2;
    text-align:center;

    h1 { 
        font-weight:300;
    }
    h2 {
        color:settings.$color-brand-50;
        font-weight:300;
    }
    h1 + *, 
    h2 + *, 
    img + * {
        padding-top:1rem;
    }
    h1:last-child,
    h2:last-child,
    img:last-child {
        margin-bottom:2rem;
    }
    p {
        font-size: settings.$font-size-50;
        text-align: left;
    }
}
.index .preamble {
    margin-bottom: 2rem;

    p {
        text-align: center;
    }
}
.news {
    ul {
        list-style:none;
        margin-left:0;
        padding-left:0;
    }
    li {
        display:block;
        margin-left:0;
        margin-bottom:2rem;
        padding-left:0;
    }
}
.l-full, 
.l-half,
.l-one-third,
.l-one-sixth,
.l-one-quarter,
.l-one-eigth,
.l-two-third {
    hr { margin-left:0; margin-right:0; }
}

pre {
    margin: 1rem 0;
}

article+article {
    border-top: 1px solid settings.$color-neutral-30;
    clear: both;
    margin-top: 2rem;
    padding-top: 2rem;
}

.button-bar {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    margin-bottom: 2rem;
    width:100%;


    .button {
        -webkit-flex: 1;
        flex: 1;
        padding: 1rem;
        text-align:center;

        & + .button {
            margin-left: 0.5rem;
        }

        i {
            font-size: 3rem;
        }
    }
}

th { 
	text-align: left; 
}

.media-bar {
	clear: both;
	a {
		border: none;

		> img {
			width: 100%;
		}
	}
}

.color-brand {
	color:settings.$color-brand-70;
}

.wicket7.header {
    background-color: settings.$color-brand-50;
    background-image: url(/img/wicket-7-bg.jpg);
	margin-bottom : 0;
    text-align:center;
	a { border:none; margin:0; padding:0; height:0; }
	img { min-width: 240px; width:33%; margin: 0 auto; padding: 6rem 0 4rem; }

	nav.mainmenu { 
        background-color: settings.$color-brand-50; 
        line-height:3em;
        margin-top:1rem; 
        margin-bottom:0;
        padding-right:1em;
        ul {
            margin-bottom:0;
        }
        @media screen and (orientation: portrait) {
        	padding-bottom:0.25rem;
        }
    }
    .submenu {
        background-color: white;
        color: black;
        display:block;
        font-size:10pt;
        margin:0 auto 0rem auto;
        padding-top: 0.5rem; 
        padding-right:1em;
        text-align:center;

        ul {
            list-style:none;
        }
        li {
            display:inline-block;
            font-size:12px;

            &.active { border-bottom: 2px solid;}
        }
        li+li {
            margin-left:1*grid.$grid-column;
        }

        a, a:active, a:hover {
            border:none;
            font-weight:400;
            text-decoration: none;
            text-transform: uppercase;
        }
    }
}