Download raw (24.1 KB)

@import "fonts.less";

////////////////////////////////////////  V A R I A B L E S  /////////////////////////////////////////////////

@font-main: 'Tex Gyre Termes';
@font-manual: "Karla", sans-serif;
@font-mono: "AX28", monospace;
@font-script: "Pacifico", script;
@font-size: 17px;
@line-height: 1.31em;
@color: SeaGreen;
@color-light: #E7FFED;
@blue: #1E90FF;

////////////////////////////////////////  M I X I N S  /////////////////////////////////////////////////
.box-sizing (@type: border-box) {
    -webkit-box-sizing: @type;
       -moz-box-sizing: @type;
        -ms-box-sizing: @type;
            box-sizing: @type;
}

.column-width(@column-width: 10em){
    -webkit-column-width: @column-width;
       -moz-column-width: @column-width;
            column-width: @column-width;
}

.column-count(@column-count: 2){
    -webkit-column-count: @column-count;
       -moz-column-count: @column-count;
            column-count: @column-count;
}

.column-gap(@column-gap: 30px){
    -webkit-column-gap: @column-gap;
       -moz-column-gap: @column-gap;
            column-gap: @column-gap;
}

.column-rule(@column-rule: 1px solid black){
    -webkit-column-rule: @column-rule;
       -moz-column-rule: @column-rule;
            column-rule: @column-rule;
}

.transition (@prop: all, @time: 1s, @ease: linear, @delay: 0s) {
    -webkit-transition: @prop @time @ease @delay;
       -moz-transition: @prop @time @ease @delay;
         -o-transition: @prop @time @ease @delay;
        -ms-transition: @prop @time @ease @delay;
            transition: @prop @time @ease @delay;
}

////////////////////////////////////////  R E D E F I N E     T A G S  /////////////////////////////////////////////////

*, 
html, 
body {
    font-family: @font-main;
    font-size: @font-size;
    line-height: @line-height;
    .box-sizing;
}

html, 
body {
    height: 100%;
}



#content {
    padding: @line-height;
    padding-top: 230px;
    padding-bottom: @line-height * 10;
}

.active {
    outline: 2px solid black;
}

.tabs {
    text-align: center;
}

.tabs li {
    display: inline-block;
    margin-left: 0 !important;
    text-indent: 0 !important;
    margin-right: 16px;
}

.ui-tabs-active {
    margin-bottom: 16px;
    border-bottom: 2px solid black;
}

.ui-tabs-active a {
    outline: none;
}

.ui-tabs-anchor:hover {
    text-decoration: none !important;
}

/*.panels > div {*/
    /*display: none;*/
/*}*/

/*.panels > div:target {*/
    /*display: initial;*/
/*}*/


form#URLbar {

    * {
        font-size: 14px;
        font-family: Karla;
        font-weight: bold;
    }

    & > div {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
form#URLbar + div#infos.edition {
    padding-top: 2em;
}

.button {
    outline: 2px solid black;
    padding: 0 @line-height / 2;
    margin: 0 @line-height / 2;

    &:hover {
        outline-color: @color;
        background-color: white;
    }

    a {
        color: inherit;
        text-decoration: none;

        &:hover {
            text-decoration: none;
        }
    }
}

#content h1, 
#content h2, 
#content h3, 
#content h4, 
#content h5, 
#content h6 {
}

#content h1 {
    font-size: 2em;
    line-height: 1.6em;
    margin-top: 0;
    margin-bottom: @line-height;
    text-align: center;
}

#content h2 {
    font-size: 1.5em;
    line-height: 1.6em;
    text-align: center;
    font-family: @font-manual;
    margin-top: @line-height;
}
#content h3 {
    font-family: @font-manual;
    margin-top: @line-height;
}

a {
    color: @color;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
    img:hover {
        z-index: 100;
        position: relative;
    }
}

a.external-link {
    color: @blue;
}

a:visited {
    color: default;
}

i, 
em {
    font-style: italic;
    letter-spacing: 0.2px;
}

sup {
    font-size: 0.5em;
    line-height: 0;
    vertical-align: 0.65em;
}

strong {
    font-weight: bold;
}

p + p {
    margin-top: @line-height;
}

pre, 
code {
    font-family: @font-mono;
}

pre {
    white-space: pre-wrap;
    outline: 1px solid @color;
    padding: @line-height;
    margin: @line-height auto;
    width: 75%;
}

ul {
    margin-bottom: @line-height;


    p {
        display: inline;
    }
}

.annotation li:before {
    content: "– ";
}


ul.inline {
    display: inline;
    margin-left: 0;

    li {
        display: inline;
        
        &:before {
            content: ", ";
        }
    
        &:first-child:before {
            content: "";
        }
    }
}


th {
    text-align: right;
    padding-right: 0.5em;
}

input {
    border: 2px solid black;
    padding: 0 @line-height / 2;
    cursor: pointer;
    margin: 0 @line-height / 2;
    background-color: transparent;
    height: 26px;

    &:focus {
        color: @color !important;
        background-color: white;
    }

    &:hover {
        color: inherit;
        border-color: @color;
        background-color: white;
    }
}



#content img {
    max-width: 100%;
    min-width: 80px;
    min-height: 100px;
}


////////////////////////////////////////  D E T A I L S  /////////////////////////////////////////////////

#menu {
    border-bottom: 3px solid black;
    .transition(margin-top, 500ms, ease-out, 0s);
    background-color: @color-light;
    position: fixed;
    right: 0;
    left: 0;
    top: 0px;
    padding: @line-height;
    padding-bottom: 0;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    font-family: @font-manual;
    text-align: center;
    display: flex;
    flex-flow: row wrap;
    margin-top: -330px;
    z-index: 10000;

    &:hover {
        margin-top: 0 !important;
    }

    a {
        color: black;
    }
}
#kavanland #menu {
    margin-top: -360px;
}

#logo {
   order: 3;
    flex: 1 100%;
    font-size: 14px;
    line-height: 16px;
    font-family: @font-manual;
    font-weight: bold;
    padding: @line-height / 2;
    text-align: center;
    display: inline-block;
    position: relative;
    top: -@line-height/2;
    letter-spacing: 0.5px;
}

section#sidebar {
   height: 100%;
   width: 100%;
   font-size: 14px;
   font-weight: bold;
   line-height: 16px;
   order: 2;
   display: flex;
   flex-flow: row wrap;



   nav#icons {
       margin-top: @line-height *2;
       order: 1;
       flex: 1 100%;
   }
   nav#icons ul {
       display: flex;
       justify-content: space-around;
       align-items: center;

   }

   nav {
       clear: none;
       padding-top: 11px;

   }

   nav li {
       float: left;
       margin-right: @line-height;

        &:before {
            content: "";
        }

        a { 
            color: inherit;
            text-decoration: none;
        }
        &:hover {
            border-bottom: 2px solid black;
        }
    }
}


#index {
    text-align: center;
    order: 1;
    flex: 1 100%;

    h2 {
        margin-bottom: 16px;
    }

    ul {
        margin-bottom: 0;
    }

    li {
        margin-left: 16px;
        text-indent: -16px;

        a:hover {
            text-decoration: none;
            border-bottom: 2px solid black;
        }
    }
}

.index {
    font-family: @font-manual;
    font-weight: bold;
    .column-gap(16px);
    margin-top: @line-height / 2;
    clear: both;
    text-align: left;
}

#index-works {
    .column-width(20em);
    .column-gap(16px);
}

#index-locations,
#index-characters,
#index-bigrams,
#index-oracle {
    .column-width(10em);
}

#index-bigrams {
    text-transform: lowercase;
}

#index-all{
    .column-width(12em);
}


#node {
    position: fixed;
    top: 58px;
    left: 0;
    width: 100%;
    background-color: white;
    text-align: center;
    font-size: 51px;
    line-height: 1em;
    letter-spacing: -1px;
    padding: 22px;
    font-family: @font-manual;
    z-index: 1000;
    color: @color;
}

#node h1 {
    font-size: 51px;
    line-height: 85px;
    margin-bottom: 0;
}
#node h2 {
    font-size: 25px;
    color: black;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.rawdata {

    font-size: 0.8em;
    line-height: @line-height;
    width: auto;
    text-align: center;
    position: relative;


    h2 {
        font-size: 3em !important;
        text-align: center;
        text-transform: uppercase;
        margin-top: @line-height *2;
    }

    dt a {
        cursor: help;
        color: inherit;
        display: inline-block;
    }

    dt {
        h2 {
            font-family: @font-manual;
            line-height: @line-height;
        }
    }


    dd + dt {
        margin-top: @line-height * 5;
    }


    dt a, td a {
        color: @color;
    }

    dd {
        display: inline-block;
        margin: @line-height / 2;
        vertical-align: middle;

        border-bottom: 10px solid @color-light;
        border-right: 10px solid @color-light;
        border-left: 10px solid @color-light;
        border-top: 10px solid @color-light;

        &:hover {
            border-bottom: 10px solid @color;
            border-right: 10px solid @color;
        }

        a.default-cover {
            border: none;
        }
        a:hover {
            text-decoration: none;
        }

        .work {
            text-transform: uppercase;
            text-align: center;
            display: block;
            min-height: 200px;
            min-width: 200px;
            background-color: @color-light;
            font-family: @font-manual;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

section.annotation {
    font-family: @font-main;
    clear: both;
    margin: 3 * @line-height;

    .edit {
        position: absolute;
        right: @line-height;
    }
}

.box {
    width: 50%;
    outline: 10px solid @color-light;
    outline-offset: -@line-height;
    padding: 2* @line-height;
    float: left;

    h1 {
        text-align: left !important;
    }
}

div#infos {
    display: flex;
    flex-flow: row wrap;

    &.edition {
        align-items: flex-start;
    }
    &.work {
        align-items: baseline;
    }

    h1, 
    section {
        flex: 1 100%;
    }
    section#infobox {
        flex: 1 30%;
    }
    section#description {
        flex: 1 70%;
    }

    #toc {
        position: fixed;
        background-color: white;
        top: 58px;
        width: 100%;
        padding: @line-height;
        margin-bottom: 0;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;

        a:hover {
            text-decoration: none;
        }
        

        h1 {
            font-size: 3em;
            text-transform: uppercase;
            margin-bottom: 0;
            flex: 1 100%;
        }

        ul {
            font-family: Karla;
            font-weight: bold;
            font-size: 14px;
        }
        li {
            padding: 0 @line-height/2;

            &:hover {
                outline: 2px solid @color;
            }
        }
    }
}

section#infobox {
    float: left;
    width: 30%;

    dt {
        margin-top: 0;
        float: left;
        margin-right: 1em;

        &:after {
            content: ": ";
        }
    }
    dd:before {
        content: "";
    }

    &.edition {
        th {
            min-width: 150px;
        }
    }
}

div#apropos {
    margin-top: @line-height;

    p + p {
        margin-top: 0;
        text-indent: @line-height;
    }
}

section#description {
    font-size: 1.5em;
    line-height: @line-height;
    padding: 2 * @line-height;
    float: left;
    width: 70%;
}

section#bigrams {
    ul {
        display: flex;
        justify-content: space-around;
        flex-flow: row wrap;
    }
    li {
        margin: 0.5em;
        outline: 1px solid seagreen;
        padding: 0.5em 1em;
        font-family: Karla;
    }
    li:before {
        content: "";
    }
}

section#cover {
    flex: 1 auto !important;
    margin-right: @line-height;
    text-align: center;

    img {
        background-color: black;
        border-bottom: 10px solid @color-light;
        border-right: 10px solid @color-light;
        border-left: 10px solid @color-light;
        border-top: 10px solid @color-light;
    }
}

#edition-list {
    padding-right: 0;
    margin-bottom: 200px;
    
    ul {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-flow: row wrap;
        padding: 2em;
    }

    li:before {
        content: "";
    }

    li {
        display: inline-block;
        vertical-align: bottom;
        max-height: 100px;
        margin-right: 1em;
    }

    img {
        background-color: black;
        border-bottom: 10px solid @color-light;
        border-right: 10px solid @color-light;
        border-left: 10px solid @color-light;
        border-top: 10px solid @color-light;

        &:hover {
            border-bottom: 10px solid @color;
            border-right: 10px solid @color;
        }
    }
}
#book-list {
    li {
        float: left;
        margin: @line-height / 2;
    }
    img {
        background-color: black;
        border-bottom: 10px solid @color-light;
        border-right: 10px solid @color-light;
        border-left: 10px solid @color-light;
        border-top: 10px solid @color-light;

        &:hover {
            border-bottom: 10px solid @color;
            border-right: 10px solid @color;
        }
    }
}


.default-cover {
    font-family: @font-manual;
    font-weight: bold;
    min-height: 280px;
    width: 200px;
    display: block;
    border-bottom: 10px solid @color-light;
    border-right: 10px solid @color-light;
    border-left: 10px solid @color-light;
    border-top: 10px solid @color-light;
    background-color: black;
    color: @color-light;
    padding: @line-height / 3;
    font-size: @font-size * 2 + 1;
    line-height: 1em;
    text-align: left;

    &:hover {
        text-decoration: none;
        border-bottom: 10px solid @color;
        border-right: 10px solid @color;
    }

    span.year {
        display: block;
        font-size: @font-size;
    }
}


.zItem {
    //max-width: 25%;
    text-align: left;
    padding: @line-height;
    font-family: @font-manual;
    position: relative;

    &:hover {
        border-color: @color;
    }

    a {
        color: black;
    }

    h3 {
        margin-top: 0 !important;
        margin-bottom: 4px;
        font-size: 2em;
        line-height: 24px;
    }

    p {
        margin-top: @line-height;
        color: black;
    }

    &.webpage,
    &.blogPost,
    &.forumPost {
       overflow-y: scroll;
       border-width: 1px !important;
    }
    &.webpage,
    &.blogPost {
       width: 1280px * 2.5 / 10;
       height: 800px * 2.5 / 10;
    }
    &.forumPost {
       width: 1024px * 2.5 / 10;
       height: 768px * 2.5 / 10;
    }

    &.book {
        min-width: 300px;
        max-width: 350px;
        min-height: 450px;
        max-height: 500px;
        font-family: @font-main;
        border-width: 1px !important;
        border-right-width: 10px !important;
        border-bottom-width: 10px !important;
        border-radius: 0 10px 15px 10px;
        
        h3 {
            font-family: @font-main !important;
            margin-left: 30px;
            max-width: 8em;
        }
        
        .type {
            display: none;
        }
        .date {
            display: none;
        }
        .abstract {
            font-size: 11px;
            line-height: 12px;
            font-style: italic;
            position: absolute;
            bottom: 2em;
            left: 2em;
            right: 2em;
        }
    }
    &.journalArticle,
    &.newspaperArticle {
        min-width: 200px;
        max-width: 300px;
        min-height: 200px;
        max-height: 400px;
        font-family: @font-main;
        border-width: 2px !important;
        border-top-style: dashed; 
        border-bottom-style: dashed !important; 


        h3 {
            font-family: @font-main !important;
            text-align: center;
        }
        .type {
            display: none;
        }
        .date {
            display: block;
            text-align: center;
        }
        .abstract {
            -moz-column-count: 2;
            -moz-column-rule: 1px solid black;
            -webkit-column-count: 2;
            -webkit-column-rule: 1px solid black;
            column-count: 2;
            column-rule: 1px solid black;
        }
    }
    &.magazineArticle {
        column-rule: 2px solid @color-light;
        column-count: 2;
        column-gap: 1em;
        -webkit-column-rule: 2px solid @color-light;
        -webkit-column-count: 2;
        -webkit-column-gap: 1em;
        -moz-column-rule: 2px solid @color-light;
        -moz-column-count: 2;
        -moz-column-gap: 1em;
        padding: 0;
        border-top-width: 1px;
        border-bottom-width: 1px !important;        
        min-width: 250px;
        max-width: 450px;
        min-height: 200px;
        max-height: 400px;

        h3 {
            padding: 1em;
            padding-bottom: 0;
        }

        .type {
            display: none;
        }
        .date {
            padding-left: 27px;
        }

        .abstract {
            display: block;
            padding: 1em;
        }
    }
    &.encyclopediaArticle {
        width: 260px;
        height: 280px;
        border-width: 1px !important;        

        padding: 0;

        font-family: @font-main;
        font-size: 11px;
        line-height: 12px;

        //background:
        //radial-gradient(circle at 0% 50%, rgba(0, 0, 0, 0) 3px, #000 4px, rgba(0, 0, 0, 0) 3px) 0px 10px,
        //radial-gradient(at 100% 100%,     rgba(0, 0, 0, 0) 3px, #000 4px, rgba(0, 0, 0, 0) 3px),
        //#FFF;
        //background-size: 7px 8px;


        a {
            width: 100%;
            height: 100%;
            background-color: white;
            padding: 1em;
            display: inline-block;
            -moz-column-count: 2;
            -moz-column-fill: auto;
            -moz-column-rule: 1px solid black; 
            -webkit-column-count: 2;
            -webkit-column-fill: auto;
            -webkit-column-rule: 1px solid black; 
            column-count: 2;
            column-fill: auto;
            column-rule: 1px solid black; 
            border-left: 2px solid @color-light;
        }

        h3 {

            font-family: @font-main !important;
            font-size: 11px;
            line-height: 12px;
            text-transform: uppercase;
            text-align: center;
            page-break-before: always;
            padding-bottom: 1em;
            border-bottom: 1px solid black;
        }

        .type,
        .date {
            display: none;
        }
    }

    &.audioRecording {
        width: 300px;
        height: 300px;
        border: 3px solid @color-light !important;
        font-size: 11px;
        line-height: 15px;
        text-align: center;
        overflow: hidden;

        a {
            height: 100%;
        }
        h3 {
            padding: 0 1em;
        }
        .type {
            display: none;
        }
        .abstract {
            margin: 0;
            padding: 1em;
        }

        &:hover a,
        &:hover .abstract {
            border-color: @color;
        }
    }

    &.videoRecording {
        border-width: 1px !important;
        width: 160px * 2.5;
        height: 90px * 2.5;
        text-align: center;
        .type { display: none;}
    }

    &.thesis {
        width: 210px * 1.5;
        height: 297px * 1.5;
        font-family: @font-main;
        border: 1px solid @color-light !important;
        text-align: center;

        h3 {
            font-family: @font-main !important;
            font-size: 16px;
            line-height: 18px;
            border-bottom: 1px solid black;
            max-width: 80%;
            padding-bottom: 9px;
            margin: auto;
        }
        .abstract {
            text-align: left;
        }
    }
    &.attachment {
        width: 300px;
        height: 300px;
        border-top-width: 1px !important;
        border-left-width: 1px !important;
        border-style: double;

        .type {
            display: none;
        }
    }
}
.zTable {
    max-width: 50%;
    th {
        min-width: 110px;
    }
}
.zFrame {
    margin-left: @line-height;
    width: 45%;
    height: 800px;
    float: left;
    border: 10px solid @color-light;
}


/* TWITBLR */
section#tumblr,
section#twitter {
        float: left;
        width: 50%;

        .annotation {
            float: none;
            margin: 0;
            width: auto;
        }
    dl,
    p.twitblr-infos,
    p.twitblr-infos * {
        font-family: @font-manual !important;
    }
    dl,
    p.twitblr-infos {
        margin-top: @line-height;
    }
    dt {
        text-transform: uppercase;
    }
    dt,
    dd {
        display: inline;
    }
    dd + dd:before {
        content: ", ";
    }
    dt:after {
        content: ": ";
    }
}
#twitter .annotation {
    font-family: @font-manual;
}


/* HOMEPAGE */
body#kavanland {

    #menu {
        margin-top: -330px;
    }
    #content {
        padding-top: 70px;
        height: 100%;
    }
    
    .annotation {
        //float: left;
        //width: 50%;
        margin: 0;
        padding: @line-height;
        padding-top: 0;
        clear: none;
        margin-top: 44px !important;
    }
    .annotation + .annotation {
        margin-top: 0 !important;
    }
    #home-oracle {
        height: 100%;
        font-family: @font-manual;
        font-size: @font-size * 4.5;
        line-height: 1.2em;
        text-align: center;
        letter-spacing: -1px;
        padding-left: 0;
        padding-right: 0;

        ul {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        li { 
            display: none;
            max-width: 80%;
        }
        li:first-child {
            display: block;
        }   
        li:before {
            content: "";
        }
        a {
            display: block;
            padding: 2em 1em;
        }
        a:hover {
            text-decoration: none;
            outline: 3px solid @color;
        }
    }
    #intro {
        font-size: 13px;
        line-height: 17px;
        position: absolute;
        bottom: @line-height;
        left: 0;

        #logo-hyx {
            margin-bottom: 2 * 17px;
        }

        div {
            float: left;
            width: 50%;
            padding: 0 @line-height;
        }
    }
    #content h2 {
        clear: both;
        margin-top: 0;
        margin-bottom: @line-height; 
    }
    #twitter {
        clear: both;
        width: 100%;
        margin: auto;
        font-family: @font-manual;
        float: none;
        padding: @line-height *2;
    }
    #tumblr {
        clear: both;
        width: 100%;
        margin: auto;
        float: none;
        padding: @line-height *2;
    }
    .twitblr-infos {
        margin-top: 0 !important;
        margin-bottom: @line-height;
    }
}

//@media screen and (min-height: 700px) {
//    #home-oracle {
//        font-size: 81px;
//    }
//}

#logo-hyx {
   width: 100% !important;
   text-align: center;
   color: seagreen;
   margin-top: @line-height *2;
   font-size: @font-size;
}
#logo-hyx img {
    min-height: 16px !important;
    max-width: none !important;
}


/* ABOUT AND SOURCE*/

#annotation-71 {
    clear: both;
}

body#about,
body#materiautheque {

    #content p, 
    #content ul {
    }
    #content a {
        color: @color;
    }
}

body#about #content,
body#materiautheque #content {
    h2 {
        text-align: left;
    }

    section.annotation {
        float: left;
        width: 50%;
        margin: 0;
        clear: none;
        font-size: @font-size;
        padding: @line-height;
    }
    ul {
        margin-top: @line-height;
    }
}
body#materiautheque p {
    font-family: @font-manual;
}

    

body#hfak {
    p {
        font-size: 23px;
        line-height: 1.3em;
        text-align: left;
        padding: 0 @line-height;
    }
    h2 {
        margin-bottom: 0 @line-height;
    }
}

/*PAGE AK*/
body#ol200810a {
    #annotation-54 {
        width: 60%;
        clear:none;
        float: left;
        margin: 0;
        padding: @line-height;
    }
    #annotation-97 {
        width: 40%;
        clear:none;
        float: left;
        margin: 0;
        padding: @line-height;
    }

    .rawdata {
        display: none;
    }
}