path: root/style.scss

@import "typey/font-stacks";
@import "partials/base";

@import "normalize";

@import "typey";
@import "../shared/themes/default/ikiwiki";
@import "compass/reset/utilities";
@import "compass/typography";
@import "breakpoint";

@include normalize;

@media print {
@import "gutenberg";
}

@include ikiwiki-style;

body {
    @include breakpoint($wide) {
        background-image: url(cloud.jpg), url(grass.jpg), url(stream.jpg), url(birds.jpg);
        background-repeat: no-repeat;
        background-position: right 5% top 8%, right 5% bottom 5%, left 5% bottom 5%, left 5% top 8%;
        background-size: 23%, 23%, 23%, 23%;
    }
}

h1 {
    @include typeset(heading-1);
}

#branding-logo {
    width: 94%;
    margin: 2em 3% 0;
    text-align: right;
    @include breakpoint($wide) {
        z-index: -1;
        position: absolute;
        margin-top: 8em;
        img {
            max-width: 18%;
        }
    }
}

.pageheader {
    padding: 0;
    header {
        padding: 1em 2%;
    }
}

a {
    @include hover-link;
    @include link-colors($linkColor, $linkHoverColor, $linkColor, $linkColor, $linkHoverColor);
    font-weight: bold;
}
.selflink {
    color: $linkHoverColor;
}

.header,
.author,
.recentchanges,
.committype,
#footer,
.inlinefooter {
    font-size: 80%;
}

.topbar {
    padding: 1em 2%;
    text-align: center;
}

.topbar ul {
    @include inline-list;
    li {
        margin-right: 2em;
        font-variant: all-petite-caps;
    }
}

.sidebar {
    float: left;
    padding: 0;
    border: none;
    margin-top: -400px;
    margin-right: 2%;
    margin-bottom: 1em;
    margin-left: 2%;
    width: 21%;
    background: transparent;
}

.sidebar ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.sidebar ul li .selflink {
    color: $linkHoverColor;
}

#content {
    width: 96%;
    max-width: 32em;
    min-height: 480px;
    margin: 0 auto;
    padding: 2em 2%;
}

#backlinks {
    display: none;
}

img {
    vertical-align: top;
    margin: 0 1em 1em 0;
    padding: 0;
    max-width: 100%;
    height: auto;
}

img.solo {
    float: none;
    display: block;
    clear: both;
}

th {
    text-align: left;
}

#pageinfo {
    border-top: none;
    padding-left: 2em;
    bottom: 0;
    @include breakpoint($wide) {
        position: fixed;
    }
}