Commit 20a8ae8c authored by gijs's avatar gijs
Browse files

Different font

parent 0d431f77
@font-face {
/* font-family: 'TsukurimashouMaruPS'; */
font-family: sans;
src: url("../fonts/TsukurimashouMaruPS.otf");
font-family: 'HKGrotesk';
/* font-family: sans; */
src: url("../fonts/HKGrotesk-SemiBold.woff");
/* src: url("../fonts/TsukurimashouMaruPS.otf"); */
}
a {
......@@ -13,14 +13,13 @@ a {
}
body {
font-family: 'TsukurimashouMaruPS', sans-serif;
font-family: 'HKGrotesk', sans-serif;
font-size: 19px;
line-height: 21px;
}
.outer-wrapper {
display: flex;
box-sizing: border-box;
width: 100vw;
height: 100vh;
......@@ -29,29 +28,27 @@ body {
.main-header {
position: relative;
left: 0;
box-sizing: border-box;
width: 300px;
padding: 30px;
transition: all .2s;
color: white;
background-color: darkgray;
}
.main-header--collapsed { left: -300px; }
.main-header--collapsed {
left: -300px;
}
.main-header--collapsed + .main-area { margin-left: -300px; }
.main-header--collapsed+.main-area {
margin-left: -300px;
}
.main-area {
overflow: auto;
margin-left: 0;
padding: 30px 30px;
transition: all .2s;
flex: 1;
}
......@@ -59,9 +56,7 @@ body {
position: absolute;
top: 10px;
right: 10px;
color: grey;
font-family: Sans-Serif;
font-size: 16px;
font-weight: bold;
......@@ -69,7 +64,6 @@ body {
.btn-hamburger:hover {
cursor: pointer;
color: black;
}
......@@ -88,14 +82,13 @@ body {
text-decoration: none;
}
.logo { margin: 21px 0 42px 0; }
.logo {
margin: 21px 0 42px 0;
}
/* about */
.body-text p + p,
.body-text p + ul,
.body-text ul + p {
.body-text p+p, .body-text p+ul, .body-text ul+p {
margin-top: 21px;
}
......@@ -111,94 +104,90 @@ body {
max-width: 35em;
}
/* Score */
#score {
display: flex;
flex-direction: row;
box-sizing: border-box;
outline: 0;
height: calc(100vh - 60px);
}
#score::-moz-focus-inner { border: 0; } /* firefox */
#score:focus { outline: none; }
#score::-moz-focus-inner {
border: 0;
}
/* firefox */
#score:focus {
outline: none;
}
#sidebar {
position: relative;
overflow-y: auto;
width: 300px;
padding-left: 2em;
font-size: 85%;
flex: auto 0 0;
}
#main-area {
position: relative;
display: flex;
flex-direction: column;
flex: auto 1 1;
}
#axis-wrapper {
overflow: auto;
padding: 2em 0;
flex: 1;
}
#score h1 {
margin-bottom: 0.5em;
padding-bottom: 0.5em;
border-bottom: 2px solid;
font-size: 2em;
line-height: 1em;
}
li.axis { position: relative; }
li.axis {
position: relative;
}
li li { margin-left: 3em; }
li li {
margin-left: 3em;
}
fieldset {
margin-bottom: 2em;
padding-left: 1em;
}
fieldset legend { margin-left: -1em; }
fieldset legend {
margin-left: -1em;
}
.fieldgroup { display: block; }
.fieldgroup {
display: block;
}
label {
display: block;
margin-bottom: .5em;
}
label.inline,
section.inline { display: inline-block; }
label.inline, section.inline {
display: inline-block;
}
label .label-text {
display: inline-block;
width: 9em;
margin-right: .25em;
text-align: left;
}
......@@ -208,12 +197,10 @@ label .label-text {
z-index: 2;
top: 30px;
left: 50px;
width: calc(70vw - 50px - 2em);
margin-left: calc(-.25em - 2px);
padding: .25em;
padding-top: 1.25em;
border-width: 2px 2px 2px 2px;
border-style: solid;
background: white;
......@@ -221,138 +208,138 @@ label .label-text {
.alt-infos {
position: absolute;
display: none;
padding: 5px;
border: 1px solid blue;
background: white;
/*width: 450px;*/
}
#alt_mode { display: none; }
#alt_mode {
display: none;
}
#alt_n,
#alt_p,
#boucle_n,
#boucle_p { width: 10px; }
#alt_n, #alt_p, #boucle_n, #boucle_p {
width: 10px;
}
.axis-infos {
position: absolute;
display: none;
width: 450px;
padding: 5px;
border: 1px solid blue;
background: white;
}
.axis-infos-vue {
z-index: 1000;
color: black;
border: 1px solid black !important;
}
.axis-title {
position: relative;
margin: 0.25em;
padding: 0.25em;
border: 2px solid;
outline: 0;
}
/* http://www.lessanvaezi.com/how-to-hide-the-dotted-border-outline-on-focused-elements-in-html-using-css/ */
/* hide the dotted lines around an element when it receives focus */
.axis-title::-moz-focus-inner { border: 0; } /* firefox */
.axis-title:focus { outline: none; } /* ie8, chrome, etc */
.axis-title .options,
.axis-title .handle {
display: inline-block;
.axis-title::-moz-focus-inner {
border: 0;
}
padding-left: 10px;
/* firefox */
.axis-title:focus {
outline: none;
}
/* ie8, chrome, etc */
.axis-title .options, .axis-title .handle {
display: inline-block;
padding-left: 10px;
/*display: none; */
color: black;
}
.axis-title-edit { text-transform: uppercase; }
.axis-title-edit {
text-transform: uppercase;
}
.axis-title-view {
margin: 0 !important;
border: none !important;
}
.axis-focus { display: inline-block !important; }
.axis-focus {
display: inline-block !important;
}
.boucle-infos {
position: absolute;
display: none;
padding: 5px;
border: 1px solid blue;
background: white;
}
.terme { font-size: 75%; }
.terme {
font-size: 75%;
}
.terme .full { font-size: 133%; }
.terme .full {
font-size: 133%;
}
.condition,
.indications,
.terme { position: relative; }
.condition, .indications, .terme {
position: relative;
}
.condition .full,
.indications .full,
.terme .full {
.condition .full, .indications .full, .terme .full {
position: absolute;
z-index: 2;
top: .5em;
left: .5em;
display: none;
max-width: 500px;
padding: 5px;
color: black;
border: 1px solid black;
background: white;
}
.condition:hover .full,
.indications:hover .full,
.terme:hover .full { display: inline-block; }
.condition:hover .full, .indications:hover .full, .terme:hover .full {
display: inline-block;
}
.handle {
width: 1em;
height: 1em;
cursor: move;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
}
.axis-title-view .handle { visibility: hidden; }
.axis-title-view .handle {
visibility: hidden;
}
.axis-title-view:hover .handle { visibility: visible; }
.axis-title-view:hover .handle {
visibility: visible;
}
.invis_root,
.invis { display: none; }
.invis_root, .invis {
display: none;
}
.prefix {
position: relative;
text-decoration: none !important;
}
......@@ -360,30 +347,26 @@ label .label-text {
* Insert a block before the line without changing the position
* of the line.
*/
.header {
position: absolute;
right: 100%; /* Position it before the line, irregardless of the header width */
right: 100%;
/* Position it before the line, irregardless of the header width */
white-space: nowrap;
font-size: 80%;
}
.header .handle,
.header .prefix,
.header .condition,
.header .tag { color: black; }
.header .handle, .header .prefix, .header .condition, .header .tag {
color: black;
}
sub,
sup {
sub, sup {
/* Where the magic happens: makes all browsers position
the sup/sup properly, relative to the surrounding text */
position: relative;
/* Note that if you're using Eric Meyer's reset.css, this
is already set and you can remove this rule */
vertical-align: baseline;
/* Specified in % so that the sup/sup is the
right size relative to the surrounding text */
font-size: 65%;
......@@ -403,11 +386,12 @@ sub {
bottom: -0.25em;
}
.view_tag { color: black; }
.view_tag {
color: black;
}
.trigger_infos {
cursor: pointer;
border: 0;
background: white;
}
......@@ -418,67 +402,158 @@ sub {
position: relative;
/* Move the superscripted text up */
top: -0.5em;
cursor: pointer;
/* Note that if you're using Eric Meyer's reset.css, this
is already set and you can remove this rule */
vertical-align: baseline;
color: black;
border: 0;
background: white;
font-size: 85%;
/* Zero out the line-height so that it doesn't
interfere with the positioning that follows */
line-height: 0;
}
.trigger_conditions_vue,
.trigger_terme_vue { cursor: pointer; }
.trigger_conditions_vue, .trigger_terme_vue {
cursor: pointer;
}
.vis { /* display: inline; */ }
.vis {
/* display: inline; */
}
.vis_box { display: block; }
.vis_box {
display: block;
}
/* subaxis colors, according to the level of nesting */
li .axis-title { color: rgb(114, 147, 203); }
li li .axis-title { color: rgb(225, 151, 76); }
li li li .axis-title { color: rgb(132, 186, 91); }
li li li li .axis-title { color: rgb(211, 94, 96); }
li li li li li .axis-title { color: rgb(128, 133, 133); }
li li li li li li .axis-title { color: rgb(144, 103, 167); }
li li li li li li li .axis-title { color: rgb(171, 104, 87); }
li li li li li li li li .axis-title { color: rgb(204, 194, 16); }
li li li li li li li li li .axis-title { color: rgb(252, 151, 218); }
li li li li li li li li li li .axis-title { color: rgb(87, 204, 188); }
li li li li li li li li li li li .axis-title { color: rgb(235, 151, 55); }
li li li li li li li li li li li li .axis-title { color: rgb(181, 221, 162); }
li li li li li li li li li li li li li .axis-title { color: rgb(211, 86, 149); }
li li li li li li li li li li li li li li .axis-title { color: rgb(224, 206, 40); }
li form { color: rgb(114, 147, 203); }
li li form { color: rgb(225, 151, 76); }
li li li form { color: rgb(132, 186, 91); }
li li li li form { color: rgb(211, 94, 96); }
li li li li li form { color: rgb(128, 133, 133); }
li li li li li li form { color: rgb(144, 103, 167); }
li li li li li li li form { color: rgb(171, 104, 87); }
li li li li li li li li form { color: rgb(204, 194, 16); }
li li li li li li li li li form { color: rgb(252, 151, 218); }
li li li li li li li li li li form { color: rgb(87, 204, 188); }
li li li li li li li li li li li form { color: rgb(235, 151, 55); }
li li li li li li li li li li li li form { color: rgb(181, 221, 162); }
li li li li li li li li li li li li li form { color: rgb(211, 86, 149); }
li li li li li li li li li li li li li li form { color: rgb(224, 206, 40); }
li .axis-title {
color: rgb(114, 147, 203);
}
li li .axis-title {
color: rgb(225, 151, 76);
}
li li li .axis-title {
color: rgb(132, 186, 91);
}
li li li li .axis-title {
color: rgb(211, 94, 96);
}
li li li li li .axis-title {
color: rgb(128, 133, 133);
}
li li li li li li .axis-title {
color: rgb(144, 103, 167);
}
li li li li li li li .axis-title {
color: rgb(171, 104, 87);
}
li li li li li li li li .axis-title {
color: rgb(204, 194, 16);
}
li li li li li li li li li .axis-title {
color: rgb(252, 151, 218);
}
li li li li li li li li li li .axis-title {
color: rgb(87, 204, 188);
}
li li li li li li li li li li li .axis-title {
color: rgb(235, 151, 55);
}
li li li li li li li li li li li li .axis-title {
color: rgb(181, 221, 162);
}
li li li li li li li li li li li li li .axis-title {
color: rgb(211, 86, 149);
}
li li li li li li li li li li li li li li .axis-title {
color: rgb(224, 206, 40);
}
li form {
color: rgb(114, 147, 203);
}
li li form {
color: rgb(225, 151, 76);
}
li li li form {
color: rgb(132, 186, 91);
}
li li li li form {
color: rgb(211, 94, 96);
}
li li li li li form {
color: rgb(128, 133, 133);
}
li li li li li li form {
color: rgb(144, 103, 167);
}
li li li li li li li form {
color: rgb(171, 104, 87);
}