Fixed tutorial design
diff --git a/public/scss/logos.scss b/public/scss/logos.scss
index 715bf71..e9058ae 100644
--- a/public/scss/logos.scss
+++ b/public/scss/logos.scss
@@ -26,6 +26,7 @@
width: 175%;
top: 0;
z-index: -5000;
+ opacity: .1;
background: {
image:url('#{$img-path}/korap-bg-kalamar.svg');
size: 50%;
@@ -64,7 +65,7 @@
width: (910 / 60) + em;
height: (176 / 60) + em;
background: {
- image:url('#{$img-path}/ids-institute-for-german-language.svg');
+ image:url('#{$img-path}/ids-institute-for-the-german-language.svg');
}
}
diff --git a/public/scss/menu.scss b/public/scss/menu.scss
index 2c3f24d..5e2d084 100644
--- a/public/scss/menu.scss
+++ b/public/scss/menu.scss
@@ -27,7 +27,7 @@
}
@include choose-item;
cursor: pointer;
- padding: 3px 10px;
+ padding: $item-padding;
white-space: normal;
}
diff --git a/public/scss/sidebar.scss b/public/scss/sidebar.scss
index 3920ef5..5829600 100644
--- a/public/scss/sidebar.scss
+++ b/public/scss/sidebar.scss
@@ -1,11 +1,11 @@
@charset "utf-8";
@import "util";
+$border-size: 2px;
+
#sidebar {
-/*
- box-shadow: 2px 2px 5px darken($dark-green, 15%);
-*/
-// box-shadow: $choose-box-shadow;
+ // box-shadow: 2px 2px 5px darken($dark-green, 15%);
+ // box-shadow: $choose-box-shadow;
outline: none;
display: block;
background-color: $dark-green;
@@ -18,7 +18,11 @@
height: 100%;
padding-top: 80px;
transition: all .3s ease-in-out;
-
+ > div {
+ overflow-y: auto;
+ overflow-x: visible;
+ max-height: 100%;
+ }
> * {
opacity: 1;
}
@@ -38,11 +42,92 @@
padding: 6pt;
border-top-right-radius: $standard-border-radius;
}
+ h2 {
+ font: {
+ size: 100%;
+ weight: bold;
+ }
+ line-height: 2em;
+ text-align: center;
+ padding: 0;
+ margin: 0;
+ }
+
+ ul {
+ list-style-type: none;
+/*
+ background-color: $light-green;
+*/
+ margin: 0;
+ font-size: 10pt;
+ text-indent: 0;
+ padding: 0;
+ li {
+ padding: 0;
+ > a {
+ @include choose-item;
+ padding: $item-padding;
+
+ border-right: {
+ width: $border-size;
+ style: solid;
+ }
+
+ display: block;
+ &:link, &:visited {
+ color: inherited;
+ }
+ &:hover {
+ color: inherit;
+ transition: none;
+ @include choose-hover;
+ }
+ &.active, &:active {
+ @include choose-active;
+ }
+ }
+ h3 {
+ font: {
+ weight: bold;
+ size: 100%;
+ }
+ padding: 0;
+ margin: 0;
+ }
+/*
+ &.active {
+ text-shadow: none;
+ h3 {
+ margin-bottom: 2pt;
+ padding-bottom: 2pt;
+ border-bottom: 1px solid black;
+ }
+ }
+*/
+ > a {
+ padding-left: 6pt;
+ }
+ li > a {
+ padding-left: 18pt;
+ }
+ li li > a {
+ padding-left: 36pt;
+ }
+ }
+ }
+ nav > ul > li > a {
+ font-weight: bold;
+ }
}
+
#sidebar:not(:focus):not(.active) {
margin-left: -1 * ($logo-left-distance - 15px);
// box-shadow: none;
+/*
+ overflow-y: hidden;
+ overflow-x: visible;
+*/
&::after {
opacity: 1;
}
@@ -83,43 +168,6 @@
left: 0;
border-top-right-radius: 5pt;
}
- h2 {
- font: {
- size: 100%;
- weight: bold;
- }
- text-align: center;
- padding: 0;
- margin: 0 0 5pt 0;
- }
- ul {
- list-style-type: none;
- margin: 0;
- font-size: 10pt;
- text-indent: 0;
- padding: 0;
- li {
- padding: 4pt 10pt;
- h3 {
- font: {
- weight: bold;
- size: 100%;
- }
- padding: 0;
- margin: 0;
- }
- &.active {
- background-color: $light-green;
-// text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
- text-shadow: none;
- h3 {
- margin-bottom: 2pt;
- padding-bottom: 2pt;
- border-bottom: 1px solid black;
- }
- }
- }
- }
dl.info {
font-size: 9pt;
padding: 0 10pt;
diff --git a/public/scss/tutorial.scss b/public/scss/tutorial.scss
index 74937fc..0b03cd0 100644
--- a/public/scss/tutorial.scss
+++ b/public/scss/tutorial.scss
@@ -1,11 +1,7 @@
@charset "utf-8";
@import "util";
-$border-size: 3px;
-
-body.embedded {
- background-color: $nearly-white;
-}
+$border-size: 2px;
#tutorial {
position: fixed;
@@ -15,22 +11,28 @@
left: 2%;
right: 2%;
padding-right: $right-match-distance;
+/*
+ padding: 0;
+ margin: 0;
+*/
background-color: $nearly-white;
ul.action {
+ background-color: $middle-grey;
display: block;
}
border: {
- width: $border-size;
- color: $dark-orange;
+ width: 2 * $border-size;
+// color: $dark-orange;
+ color: $dark-grey;
style: solid;
radius: $standard-border-radius;
}
box-shadow: $choose-box-shadow;
iframe {
- margin: 0;
- width: 100%;
- min-height: 100%;
border-width: 0;
+ width: 100%;
+ // Hack for a Firefox bug
+ min-height: 100.1%;
background: {
image:url('#{$img-path}/korap-bg-kalamar.svg');
repeat: no-repeat;
@@ -40,6 +42,29 @@
}
}
+body.embedded {
+ background-color: $nearly-white;
+ #sidebar {
+/*
+ border-right: {
+ width: $border-size;
+ style: solid;
+ }
+*/
+ padding-top: 0;
+ // @include choose-item;
+ background-color: $middle-grey;
+ > div {
+ position: relative;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ // margin-right: -1 * $border-size;
+ }
+ }
+}
+
main.tutorial {
margin-left: $logo-left-distance + 15px;
}
diff --git a/public/scss/util.scss b/public/scss/util.scss
index d81b7f9..a4971c4 100644
--- a/public/scss/util.scss
+++ b/public/scss/util.scss
@@ -28,22 +28,23 @@
*/
$dark-green: $ids-green-1; // #496000;
$middle-green: lighten($ids-green-1, 5%); // $ids-green-1; // #688704;
-$light-green: lighten($ids-green-1, 10%); // #7ba400;
+$light-green: lighten($ids-green-1, 13%); // #7ba400;
/**
* Blue Colors
*/
-$light-blue: #cfe6f4;
-$dark-blue: #73b2f4;
+$light-blue: $ids-blue-2; // #cfe6f4;
+$dark-blue: $ids-blue-1; // #73b2f4;
$darkest-blue: darken($dark-blue, 40%);
/*
* Grey
*/
+$middle-grey: $ids-grey-1; // #999;
$light-grey: $ids-grey-2; // #ddd;
-$dark-grey: #555;
-$middle-grey: #999;
+// $dark-grey: darken($light-grey, 55%); // #555;
+$dark-grey: darken($middle-grey, 15%); // #555;
// $nearly-white: #f5f5f5;
$nearly-white: #fff;
@@ -77,6 +78,7 @@
$choose-blind-color: $middle-grey;
$choose-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
$standard-border-radius: 6px;
+$item-padding: 3pt 6pt;
/**
* Path information