website update
This commit is contained in:
Rasmus Andersson
parent
360916d1ec
commit
a9e87c52d5
43 changed files with 819 additions and 211 deletions
281
docs/index.css
281
docs/index.css
|
|
@ -18,10 +18,10 @@ body {
|
|||
scroll-behavior: smooth;
|
||||
|
||||
font-kerning: normal;
|
||||
-moz-font-feature-settings:"kern" 1, "liga" 1;
|
||||
-ms-font-feature-settings:"kern" 1, "liga" 1;
|
||||
-o-font-feature-settings:"kern" 1, "liga" 1;
|
||||
-webkit-font-feature-settings:"kern" 1, "liga" 1;
|
||||
-moz-font-feature-settings:"kern" 1, "liga" 1;
|
||||
-ms-font-feature-settings:"kern" 1, "liga" 1;
|
||||
-o-font-feature-settings:"kern" 1, "liga" 1;
|
||||
-webkit-font-feature-settings:"kern" 1, "liga" 1;
|
||||
font-feature-settings:"kern" 1, "liga" 1;
|
||||
}
|
||||
|
||||
|
|
@ -43,7 +43,7 @@ a.fat {
|
|||
color: #333;
|
||||
}
|
||||
a:hover {
|
||||
color: rgba(3, 102, 214, 1);
|
||||
color: rgb(3, 102, 214);
|
||||
text-decoration: underline rgba(3, 102, 214, 0.6);
|
||||
}
|
||||
a.plain, a.fat {
|
||||
|
|
@ -83,6 +83,10 @@ q:after {
|
|||
content: "";
|
||||
}
|
||||
kbd {
|
||||
-moz-font-feature-settings: 'kern' 1, 'case' 1;
|
||||
-ms-font-feature-settings: 'kern' 1, 'case' 1;
|
||||
-o-font-feature-settings: 'kern' 1, 'case' 1;
|
||||
-webkit-font-feature-settings: 'kern' 1, 'case' 1;
|
||||
font-feature-settings: 'kern' 1, 'case' 1;
|
||||
border: 1px solid rgba(0,0,0,0.18);
|
||||
border-radius: 3px;
|
||||
|
|
@ -94,6 +98,10 @@ dem { /* de-emphasize */
|
|||
opacity: 0.7;
|
||||
}
|
||||
num { /* number */
|
||||
-moz-font-feature-settings: 'calt' 1, 'ss01' 1;
|
||||
-ms-font-feature-settings: 'calt' 1, 'ss01' 1;
|
||||
-o-font-feature-settings: 'calt' 1, 'ss01' 1;
|
||||
-webkit-font-feature-settings: 'calt' 1, 'ss01' 1;
|
||||
font-feature-settings: 'calt' 1, 'ss01' 1;
|
||||
white-space: pre;
|
||||
}
|
||||
|
|
@ -135,6 +143,23 @@ h2.back a:hover {
|
|||
h2.back a:hover::before {
|
||||
content: "<- ";
|
||||
}
|
||||
h2.banner {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
h2.banner > * {
|
||||
flex: 0 1 auto;
|
||||
padding: 0.8em 1.2em;
|
||||
border-radius: 4em;
|
||||
display: block;
|
||||
background: white;
|
||||
}
|
||||
h2.banner > a:hover {
|
||||
color: black;
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
|
@ -143,7 +168,7 @@ h1 > a, h2 > a, h3 > a {
|
|||
color: inherit;
|
||||
text-decoration: none !important;
|
||||
text-shadow: none;
|
||||
background: none !important;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.row {
|
||||
|
|
@ -192,14 +217,19 @@ h1 > a, h2 > a, h3 > a {
|
|||
transition: 300ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93);
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
.row.menu ul li > a:hover {
|
||||
.row.menu ul li > a:hover, .row.menu ul li > a.active {
|
||||
color: black;
|
||||
border-bottom-color: black;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.row.menu ul li.home > a {
|
||||
font-weight: 500;
|
||||
color: black;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* narrow windows */
|
||||
@media only screen and (max-width: 500px) {
|
||||
@media only screen and (max-width: 565px) {
|
||||
.row.menu ul {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
@ -209,7 +239,28 @@ h1 > a, h2 > a, h3 > a {
|
|||
.row.menu ul li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.row.menu ul li.home {
|
||||
/*color: red;
|
||||
clear: both;*/
|
||||
/*display: block;*/
|
||||
text-align:center;
|
||||
margin:0 0 -12px 0;
|
||||
width: 100%;
|
||||
}
|
||||
.row.menu ul li.home > a {
|
||||
border-bottom: none;
|
||||
padding: 0 1em;
|
||||
margin: 0.5em 0;
|
||||
line-height:34px;
|
||||
border-radius: 90px;
|
||||
|
||||
/*color: white;
|
||||
background-color: rgba(3, 102, 214, 1);*/
|
||||
}
|
||||
.row.menu ul li.home > a:hover {
|
||||
color: white;
|
||||
background-color: #222;
|
||||
}
|
||||
}
|
||||
|
||||
/* small devices (<= iPhone 6+) */
|
||||
|
|
@ -294,6 +345,16 @@ a > img {
|
|||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.sample-images {}
|
||||
.sample-images > img, .sample-images > svg {
|
||||
display: block;
|
||||
margin:100px 0;
|
||||
width:100%;
|
||||
}
|
||||
.sample-images > img:first-child, .sample-images > svg:first-child {
|
||||
margin-top:50px;
|
||||
}
|
||||
|
||||
|
||||
/* FAQ */
|
||||
ul.faq {
|
||||
|
|
@ -357,6 +418,10 @@ tablex {
|
|||
width:0;
|
||||
}*/
|
||||
tablex to::after {
|
||||
-moz-font-feature-settings: 'calt' 1, 'case' 1;
|
||||
-ms-font-feature-settings: 'calt' 1, 'case' 1;
|
||||
-o-font-feature-settings: 'calt' 1, 'case' 1;
|
||||
-webkit-font-feature-settings: 'calt' 1, 'case' 1;
|
||||
font-feature-settings: 'calt' 1, 'case' 1;
|
||||
content: " → ";
|
||||
color: rgba(0,0,0,0.2);
|
||||
|
|
@ -365,16 +430,54 @@ tablex {
|
|||
color: rgba(0,0,0,0.8);
|
||||
}
|
||||
tablex in {
|
||||
-moz-font-feature-settings: 'calt' 0;
|
||||
-ms-font-feature-settings: 'calt' 0;
|
||||
-o-font-feature-settings: 'calt' 0;
|
||||
-webkit-font-feature-settings: 'calt' 0;
|
||||
font-feature-settings: 'calt' 0;
|
||||
}
|
||||
tablex out {
|
||||
-moz-font-feature-settings: 'calt' 1;
|
||||
-ms-font-feature-settings: 'calt' 1;
|
||||
-o-font-feature-settings: 'calt' 1;
|
||||
-webkit-font-feature-settings: 'calt' 1;
|
||||
font-feature-settings: 'calt' 1;
|
||||
}
|
||||
tablex out.zero { font-feature-settings: 'calt' 1, 'zero' 1; }
|
||||
tablex out.tnum { font-feature-settings: 'calt' 1, 'tnum' 1; }
|
||||
tablex out.case { font-feature-settings: 'calt' 1, 'case' 1; }
|
||||
tablex out.frac { font-feature-settings: 'calt' 1, 'frac' 1; }
|
||||
tablex out.ss01 { font-feature-settings: 'calt' 1, 'ss01' 1; }
|
||||
tablex out.zero {
|
||||
-moz-font-feature-settings: 'calt' 1, 'zero' 1;
|
||||
-ms-font-feature-settings: 'calt' 1, 'zero' 1;
|
||||
-o-font-feature-settings: 'calt' 1, 'zero' 1;
|
||||
-webkit-font-feature-settings: 'calt' 1, 'zero' 1;
|
||||
font-feature-settings: 'calt' 1, 'zero' 1;
|
||||
}
|
||||
tablex out.tnum {
|
||||
-moz-font-feature-settings: 'calt' 1, 'tnum' 1;
|
||||
-ms-font-feature-settings: 'calt' 1, 'tnum' 1;
|
||||
-o-font-feature-settings: 'calt' 1, 'tnum' 1;
|
||||
-webkit-font-feature-settings: 'calt' 1, 'tnum' 1;
|
||||
font-feature-settings: 'calt' 1, 'tnum' 1;
|
||||
}
|
||||
tablex out.case {
|
||||
-moz-font-feature-settings: 'calt' 1, 'case' 1;
|
||||
-ms-font-feature-settings: 'calt' 1, 'case' 1;
|
||||
-o-font-feature-settings: 'calt' 1, 'case' 1;
|
||||
-webkit-font-feature-settings: 'calt' 1, 'case' 1;
|
||||
font-feature-settings: 'calt' 1, 'case' 1;
|
||||
}
|
||||
tablex out.frac {
|
||||
-moz-font-feature-settings: 'calt' 1, 'frac' 1;
|
||||
-ms-font-feature-settings: 'calt' 1, 'frac' 1;
|
||||
-o-font-feature-settings: 'calt' 1, 'frac' 1;
|
||||
-webkit-font-feature-settings: 'calt' 1, 'frac' 1;
|
||||
font-feature-settings: 'calt' 1, 'frac' 1;
|
||||
}
|
||||
tablex out.ss01 {
|
||||
-moz-font-feature-settings: 'calt' 1, 'ss01' 1;
|
||||
-ms-font-feature-settings: 'calt' 1, 'ss01' 1;
|
||||
-o-font-feature-settings: 'calt' 1, 'ss01' 1;
|
||||
-webkit-font-feature-settings: 'calt' 1, 'ss01' 1;
|
||||
font-feature-settings: 'calt' 1, 'ss01' 1;
|
||||
}
|
||||
tablex em {
|
||||
font-style: inherit;
|
||||
background: #FBE9A3;
|
||||
|
|
@ -411,153 +514,3 @@ box:first-child {
|
|||
box h3 {
|
||||
margin-bottom:0.8em;
|
||||
}
|
||||
|
||||
.glyph-repertoire {
|
||||
position: relative;
|
||||
background: white;
|
||||
margin-bottom:0;
|
||||
border-top-left-radius:3px;
|
||||
border-top-right-radius:3px;
|
||||
padding-top:3px;
|
||||
}
|
||||
.glyph-repertoire-link {
|
||||
margin-top:0;
|
||||
background: white;
|
||||
border-bottom-left-radius:3px;
|
||||
border-bottom-right-radius:3px;
|
||||
}
|
||||
.glyph-repertoire-link a {
|
||||
display: block;
|
||||
padding: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
.glyph-repertoire .fade {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left:0; bottom:0; right:0;
|
||||
height:50px;
|
||||
pointer-events: none;
|
||||
|
||||
background-image:
|
||||
linear-gradient(to bottom,
|
||||
rgba(255,255,255,0) 0%,
|
||||
rgba(255,255,255,1) 100%);
|
||||
background-repeat: repeat-x;
|
||||
background-size: 2px 50px;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.glyph-repertoire a {
|
||||
display: block;
|
||||
font-feature-settings: 'case' 1;
|
||||
}
|
||||
.glyph-repertoire iframe {
|
||||
pointer-events: none;
|
||||
|
||||
/*width: 100%;
|
||||
height: 100px;*/
|
||||
/*height: 0.5vh;*/
|
||||
height: 330px;
|
||||
|
||||
width: 1px;
|
||||
min-width: 100%;
|
||||
*width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.carousel, .carousel * {
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.carousel .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
/*background:#eee;*/
|
||||
}
|
||||
.carousel .header h2 {
|
||||
margin: 0 0 1px 0;
|
||||
}
|
||||
.carousel .dots {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
/*background:salmon;*/
|
||||
height: 40px;
|
||||
}
|
||||
.carousel .dots > .dot {
|
||||
width: 14px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.carousel .dot > .graphic {
|
||||
box-sizing: border-box;
|
||||
border-radius: 100%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.carousel .dots > .dot:hover > .graphic {
|
||||
border-color:#111;
|
||||
}
|
||||
.carousel .dots > .dot.active > .graphic {
|
||||
background: #222;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.carousel .preload {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.carousel .items {
|
||||
margin-bottom: 0;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
height:780px;
|
||||
/*width: 100vw;*/
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.carousel .items > * {
|
||||
flex: 1 0 auto;
|
||||
margin-right: 20vw;
|
||||
width: 80vw;
|
||||
max-width: 888px;
|
||||
cursor: e-resize;
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
.carousel .items > .loading {
|
||||
opacity: 0.6;
|
||||
-webkit-filter: url('#blur');
|
||||
filter: url('#blur');
|
||||
-webkit-filter: blur(20px);
|
||||
filter: blur(20px);
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-device-width: 780px) and (orientation: portrait) {
|
||||
.carousel .items {
|
||||
height: auto !important;
|
||||
max-height: 90vw;
|
||||
}
|
||||
.carousel .items img {
|
||||
max-height: 90vw;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-device-width: 780px) and (orientation: landscape) {
|
||||
.carousel .items {
|
||||
height: auto !important;
|
||||
width: 90vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.carousel .items > * {
|
||||
width: 90vh;
|
||||
max-height: 90vh;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue