From ca23ccc75fb376d91f5ed93caad0acb09c90d822 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sun, 22 Jan 2017 06:36:03 +0300 Subject: [PATCH] + accessibility styles --- gulpfile.babel.js | 19 ++- src/style-accessibility/album.scss | 134 ++++++++++++++++++ src/style-accessibility/body-wrapper.scss | 32 +++++ .../components/album-collection.scss | 15 ++ src/style-accessibility/components/album.scss | 48 +++++++ .../components/article-page-control.scss | 21 +++ .../components/article.scss | 80 +++++++++++ .../components/breadcrumbs.scss | 45 ++++++ .../components/cloud-page.scss | 68 +++++++++ .../components/document.scss | 34 +++++ .../components/documents-container.scss | 13 ++ .../components/footer-links.scss | 21 +++ .../components/gallery-item.scss | 39 +++++ .../components/main-menu.scss | 48 +++++++ .../components/navigation.scss | 44 ++++++ .../components/page-collective.scss | 25 ++++ .../components/page-schedule.scss | 12 ++ .../components/parallax.scss | 24 ++++ .../components/schedule-table.scss | 132 +++++++++++++++++ .../components/teacher-proifile.scss | 75 ++++++++++ .../components/timeline-record-instagram.scss | 53 +++++++ .../components/timeline-record.scss | 9 ++ .../components/timeline.scss | 33 +++++ src/style-accessibility/content.scss | 99 +++++++++++++ src/style-accessibility/error-404.scss | 14 ++ src/style-accessibility/footer.scss | 58 ++++++++ src/style-accessibility/hudozka-title.scss | 26 ++++ src/style-accessibility/kazimir/video.scss | 16 +++ src/style-accessibility/main-image.scss | 24 ++++ src/style-accessibility/main.scss | 61 ++++++++ src/style-accessibility/page-animation.scss | 56 ++++++++ src/style-accessibility/page.scss | 6 + src/style-accessibility/schedule-mobile.scss | 61 ++++++++ .../schedule-selector.scss | 10 ++ src/style-accessibility/style.scss | 39 +++++ src/style-accessibility/tape-viewer.scss | 88 ++++++++++++ src/style-accessibility/variables.scss | 73 ++++++++++ src/style-accessibility/vertical-image.scss | 28 ++++ 38 files changed, 1682 insertions(+), 1 deletion(-) create mode 100644 src/style-accessibility/album.scss create mode 100644 src/style-accessibility/body-wrapper.scss create mode 100644 src/style-accessibility/components/album-collection.scss create mode 100644 src/style-accessibility/components/album.scss create mode 100644 src/style-accessibility/components/article-page-control.scss create mode 100644 src/style-accessibility/components/article.scss create mode 100644 src/style-accessibility/components/breadcrumbs.scss create mode 100644 src/style-accessibility/components/cloud-page.scss create mode 100644 src/style-accessibility/components/document.scss create mode 100644 src/style-accessibility/components/documents-container.scss create mode 100644 src/style-accessibility/components/footer-links.scss create mode 100644 src/style-accessibility/components/gallery-item.scss create mode 100644 src/style-accessibility/components/main-menu.scss create mode 100644 src/style-accessibility/components/navigation.scss create mode 100644 src/style-accessibility/components/page-collective.scss create mode 100644 src/style-accessibility/components/page-schedule.scss create mode 100644 src/style-accessibility/components/parallax.scss create mode 100644 src/style-accessibility/components/schedule-table.scss create mode 100644 src/style-accessibility/components/teacher-proifile.scss create mode 100644 src/style-accessibility/components/timeline-record-instagram.scss create mode 100644 src/style-accessibility/components/timeline-record.scss create mode 100644 src/style-accessibility/components/timeline.scss create mode 100644 src/style-accessibility/content.scss create mode 100644 src/style-accessibility/error-404.scss create mode 100644 src/style-accessibility/footer.scss create mode 100644 src/style-accessibility/hudozka-title.scss create mode 100644 src/style-accessibility/kazimir/video.scss create mode 100644 src/style-accessibility/main-image.scss create mode 100644 src/style-accessibility/main.scss create mode 100644 src/style-accessibility/page-animation.scss create mode 100644 src/style-accessibility/page.scss create mode 100644 src/style-accessibility/schedule-mobile.scss create mode 100644 src/style-accessibility/schedule-selector.scss create mode 100644 src/style-accessibility/style.scss create mode 100644 src/style-accessibility/tape-viewer.scss create mode 100644 src/style-accessibility/variables.scss create mode 100644 src/style-accessibility/vertical-image.scss diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 7499d92b..e3494279 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -51,6 +51,23 @@ gulp.task('style', () => { .pipe(gulp.dest('./public')); }); +gulp.task('style-accessibility', () => { + const processors = [ + autoprefixer({ + browsers: ['last 1 version'] + }), + cssnano({ + zindex: false + }) + ]; + + return gulp.src('./src/style-accessibility/style.scss') + .pipe(sass()) + .pipe(postcss(processors)) + .pipe(concat('style-accessibility.css')) + .pipe(gulp.dest('./public')); +}); + gulp.task('copy fonts', () => { return gulp.src('./src/assets/fonts/*/*') .pipe(gulp.dest('./public/fonts')); @@ -120,7 +137,7 @@ gulp.task('production', () => { isProduction = true; }); -gulp.task('default', ['style', 'compile']); +gulp.task('default', ['style', 'style-accessibility', 'compile']); gulp.task('copy', ['copy templates', 'copy fonts', 'copy graphics', 'copy 3rdparty', 'copy robots.txt']); gulp.task('deploy', ['default', 'copy', 'compile 3rdparty', 'imagemin']); gulp.task('compile production', ['production', 'compile']); diff --git a/src/style-accessibility/album.scss b/src/style-accessibility/album.scss new file mode 100644 index 00000000..93368807 --- /dev/null +++ b/src/style-accessibility/album.scss @@ -0,0 +1,134 @@ +@import "variables"; + +.album-block { + //margin: 1em auto 2em; + + h3 { + text-align: center; + margin: 1.5em 0 1em; + } + + .album { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + } + + .album-info { + width: 80%; + margin: 0 0 3em; + } + + .album-info p { + margin: 0 0 .5em; + } + + .album-item { + width: 80%; + box-sizing: border-box; + margin: 0 0 4em; + position: relative; + background-color: white; + padding: 6em; + box-shadow: 0 4px 14px -10px rgba(0,0,0, .85); + + &.vertical { + width: 47%; + min-width: 30em; + max-width: 35em; + } + + img{ + width: 100%; + box-sizing: border-box; + border: .25em solid #eee; + border-top-color: #bbb; + border-left-color: #ddd; + } + } + + .product-info{ + text-align: center; + position: absolute; + width: 100%; + left: 0; + bottom: 1em; + + & > div { + display: inline-block; + padding: .5em 1em; + background-color: white; + border: 1px solid #f5f5f5; + border-radius: .25em; + box-shadow: 0 5p/x 4px -4px rgba(0,0,0, .5); + } + + p { + font-size: 0.75em; + } + + .title { + font-weight: bold; + } + } +} + +@media screen and (max-width: $mobile-width) { + .album-block { + width: 100%; + margin: 1em auto 2em; + + h3 { + text-align: left; + margin: 1em 0 0.5em; + } + + .album-info{ + width: 100%; + margin: 0 0 2em; + } + + .album-item { + width: 100%; + padding: 1em 1em 5em; + margin: 0 0 2em; + + img{ + border: .1em solid #eee; + border-top-color: #bbb; + border-left-color: #ddd; + } + } + + .product-info { + bottom: .5em; + } + } +} + +@media screen and (min-width: $mobile-width) and (max-width: $desktop-width){ + .album-block { + .album-info{ + width: 100%; + margin: 0 0 2em; + font-size: 0.75em; + } + + .album-item { + width: 100%; + padding: 2em 2em 5em; + margin: 0 0 2em; + + img{ + border: .15em solid #eee; + border-top-color: #bbb; + border-left-color: #ddd; + } + } + + .product-info { + bottom: .5em; + } + } +} \ No newline at end of file diff --git a/src/style-accessibility/body-wrapper.scss b/src/style-accessibility/body-wrapper.scss new file mode 100644 index 00000000..434a5ef5 --- /dev/null +++ b/src/style-accessibility/body-wrapper.scss @@ -0,0 +1,32 @@ +@import "variables"; + +.body-wrapper { + background-color: white; + + font-family: $text-font; + font-size: $default-font-size; +} + +.body-wrapper__content { + margin: 0 auto 0; + + a { + color: $dark-color; + text-decoration: none; + border-bottom: 1px solid $dark-color; + + &:hover { + border-width: 2px; + } + + &.invisible { + border-bottom: none; + } + } +} + +@media (max-width: $mobile-width) { + .body-wrapper__content { + margin: $menu-thickness auto 0; + } +} diff --git a/src/style-accessibility/components/album-collection.scss b/src/style-accessibility/components/album-collection.scss new file mode 100644 index 00000000..92321171 --- /dev/null +++ b/src/style-accessibility/components/album-collection.scss @@ -0,0 +1,15 @@ +@import "../variables"; + +.album-collection{ + &__body{ + display: flex; + flex-wrap: wrap; + position: relative; + justify-content: center; + align-items:flex-start; + } + + &__title{ + + } +} diff --git a/src/style-accessibility/components/album.scss b/src/style-accessibility/components/album.scss new file mode 100644 index 00000000..6a1458c0 --- /dev/null +++ b/src/style-accessibility/components/album.scss @@ -0,0 +1,48 @@ +@import "../variables"; + +.album { + margin-bottom: $double-margin; + + &__head { + margin-bottom: 1.25em; + + h3 { + font-size: $biggest-font-size; + text-align: center; + } + + .date { + text-align: center; + color: #aaa; + } + + a { + color: $dark-color; + border-bottom: none; + } + } + + &__body{ + img { + max-width: 100%; + max-height: 40em; + + display: block; + margin: 1.25em auto $small-margin; + } + + p{ + margin-bottom: 1.25em; + } + } +} + +@media (max-width: $mobile-width) { + .album { + &__body { + img { + max-height: 20em; + } + } + } +} \ No newline at end of file diff --git a/src/style-accessibility/components/article-page-control.scss b/src/style-accessibility/components/article-page-control.scss new file mode 100644 index 00000000..58eddef7 --- /dev/null +++ b/src/style-accessibility/components/article-page-control.scss @@ -0,0 +1,21 @@ +@import "../variables"; + +.article-page-control{ + text-align: center; + + a{ + color: #aaa; + } + + &__top { + //padding: $single-margin 0 0; + //margin: $single-margin 0 0; + padding: 0 0 $single-margin; + margin: 0 0 $single-margin; + } + + &__bottom { + padding: 0 0 $single-margin; + margin: 0 0 $single-margin; + } +} diff --git a/src/style-accessibility/components/article.scss b/src/style-accessibility/components/article.scss new file mode 100644 index 00000000..09d3f0af --- /dev/null +++ b/src/style-accessibility/components/article.scss @@ -0,0 +1,80 @@ +@import "../variables"; + +.article { + margin-bottom: $post-margin; + + &__head { + margin-bottom: 1.25em; + + h3 { + font-size: $biggest-font-size; + text-align: center; + } + + .date { + text-align: center; + color: $dark-color + } + + a { + color: $dark-color; + border-bottom: none; + } + } + + &__body{ + img { + max-width: 100%; + //max-height: 100%; + + max-height: 40em; + + display: block; + margin: 1.25em auto $small-margin; + } + + ul, ol{ + margin-left: $half-margin; + margin-bottom: $single-margin; + padding-left: $single-margin; + } + + ul{ + list-style: disc; + } + + p{ + margin-bottom: 1.25em; + } + + blockquote { + background-color: hsl(215, 10%, 96%); + padding: 1em 1em .5em; + margin: $single-margin 0; + font-family: $title-font; + font-style: italic; + font-weight: normal; + font-size: 1.25em; + + cite { + margin-top: $single-margin; + display: block; + color: #aaa; + font-size: initial; + font-family: $text-font; + text-align: right; + margin-right: $single-margin; + } + } + } +} + +@media (max-width: $mobile-width) { + .article { + &__body { + img { + max-height: 20em; + } + } + } +} diff --git a/src/style-accessibility/components/breadcrumbs.scss b/src/style-accessibility/components/breadcrumbs.scss new file mode 100644 index 00000000..79ca74b9 --- /dev/null +++ b/src/style-accessibility/components/breadcrumbs.scss @@ -0,0 +1,45 @@ +@import "../variables"; + +$font-size: 0.75em; +$item-active-color: $link-color; +$item-inactive-color: $inactive-link-color; +$separator: '⟶'; +$mobile-separator: '>'; + +breadcrumbs{ + padding: .35em 0 0; + color: $item-inactive-color; + + a { + color: $item-active-color; + } + + ul{ + list-style: none; + + li { + display: inline-block; + + &:not(:first-child):before{ + content: $separator; + margin-left: .4em; + } + } + } +} + +@media screen and (max-width: $mobile-width) { + breadcrumbs{ + margin: 0; + font-size: $font-size; + + ul{ + li { + &:not(:first-child):before{ + content: $mobile-separator; + margin-left: .2em; + } + } + } + } +} diff --git a/src/style-accessibility/components/cloud-page.scss b/src/style-accessibility/components/cloud-page.scss new file mode 100644 index 00000000..5d58f69d --- /dev/null +++ b/src/style-accessibility/components/cloud-page.scss @@ -0,0 +1,68 @@ +@import "../variables"; + +.cloud-page { + margin-bottom: $post-margin; + + &__body{ + h1{ + text-align: center; + margin-bottom: $single-margin; + + font-size: $biggest-font-size; + } + + h2 { + text-align: left; + margin-top: $double-margin; + font-family: $text-font; + } + + ul, ol{ + margin-left: $half-margin; + margin-bottom: $single-margin; + padding-left: $single-margin; + } + + ul{ + list-style: disc; + } + + p{ + margin-bottom: 1.25em; + } + + img { + width: 100%; + } + + blockquote { + background-color: hsl(215, 10%, 96%); + padding: 1em 1em .5em; + margin: $single-margin 0; + font-family: $title-font; + font-style: italic; + font-weight: normal; + font-size: 1.25em; + + cite { + margin-top: $single-margin; + display: block; + color: #aaa; + font-size: initial; + font-family: $text-font; + text-align: right; + margin-right: $single-margin; + } + } + } +} + +@media (max-width: $mobile-width) { + .cloud-page { + &__body { + img { + max-height: 20em; + } + } + } +} diff --git a/src/style-accessibility/components/document.scss b/src/style-accessibility/components/document.scss new file mode 100644 index 00000000..30d86a77 --- /dev/null +++ b/src/style-accessibility/components/document.scss @@ -0,0 +1,34 @@ +@import "../variables"; + +.document { + display: flex; + flex-direction: column; + align-items: center; + padding: 0; + margin: 0 $single-margin $double-margin; + + p { + text-align: center; + } +} + +.document__image{ + img { + width: 100%; + box-shadow: $white-shadow; + } +} + +.document__image--medium{ + max-width: 7.5em; +} + +.document__image--big{ + max-width: 20em; +} + +@media (max-width: $mobile-width) { + .document { + margin: 0 $single-margin/2 $single-margin; + } +} diff --git a/src/style-accessibility/components/documents-container.scss b/src/style-accessibility/components/documents-container.scss new file mode 100644 index 00000000..42d1ac73 --- /dev/null +++ b/src/style-accessibility/components/documents-container.scss @@ -0,0 +1,13 @@ +@import "../variables"; + +.documents-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: baseline; +} + +@media (max-width: $mobile-width) { + .documents-container { + } +} diff --git a/src/style-accessibility/components/footer-links.scss b/src/style-accessibility/components/footer-links.scss new file mode 100644 index 00000000..60b13ba2 --- /dev/null +++ b/src/style-accessibility/components/footer-links.scss @@ -0,0 +1,21 @@ +@import "../variables"; + +.footer-links { + &__header { + margin-bottom: $single-margin; + font-size: $bigger-font-size; + color: $light-color; + } + + &__link { + margin-bottom: $half-margin; + // + // a { + // border-bottom: 1px solid darken($link-color, 40%); + // } + } + + ul { + list-style: none; + } +} diff --git a/src/style-accessibility/components/gallery-item.scss b/src/style-accessibility/components/gallery-item.scss new file mode 100644 index 00000000..aacb524f --- /dev/null +++ b/src/style-accessibility/components/gallery-item.scss @@ -0,0 +1,39 @@ +@import "../variables"; + +$img-max-width: 500px; +$double-margin-half: $double-margin / 2; +$percentage: 25%; + +.gallery-item { + box-sizing: padding-box; + padding: 0; + + width: 13em; + height: 15em; + margin: 0 $single-margin $double-margin; + overflow: hidden; + + h3 { + text-align: center; + } + + a { + color: $dark-color; + border-bottom: none; + + &:hover { + border-bottom: none; + color: $blue-color; + } + } + + img { + width: 100%; + } +} + +@media screen and (max-width: $mobile-width) { + .gallery-item { + margin: 0 0 $double-margin; + } +} diff --git a/src/style-accessibility/components/main-menu.scss b/src/style-accessibility/components/main-menu.scss new file mode 100644 index 00000000..c9b74c22 --- /dev/null +++ b/src/style-accessibility/components/main-menu.scss @@ -0,0 +1,48 @@ +@import "../variables"; + +.main-menu { + white-space: nowrap; + + font-size: $normal-font-size; + color: $menu-inactive-item-color; + + list-style: none; + + li { + display: inline-block; + padding: 0.3em 0.2em 0.5em; + margin: 0 0.5em; + + &:first-child { + margin-left: 1em; + } + } + + a { + text-decoration: none; + + color: $dark-color; + border-bottom: 1px solid $dark-color; + } + + a:hover { + border-width: 2px; + } + + .selected { + font-weight: bold; + border-top: $menu-colored-mark-thickness solid $dark-color; + + a:link, a:visited { + color: $dark-color; + text-decoration: none; + border-bottom: none; + } + } +} + +@media (max-width: $mobile-width) { + .main-menu{ + font-size: 1em; + } +} diff --git a/src/style-accessibility/components/navigation.scss b/src/style-accessibility/components/navigation.scss new file mode 100644 index 00000000..2bbc13a1 --- /dev/null +++ b/src/style-accessibility/components/navigation.scss @@ -0,0 +1,44 @@ +@import "../variables"; + +.navigation { + -webkit-overflow-scrolling: touch; + + width: 100%; + z-index: 100; + overflow-x: scroll; + position: fixed; + top: 0; + white-space: nowrap; + + background-color: rgb(255, 255, 255); + + display: flex; + justify-content: space-between; + align-items: center; +} + +.navigation__right { + color: $dark-color; + font-size: $normal-font-size; + margin-right: 1em; + + z-index: 1000; +} + +@media (max-width: $mobile-width) { + .navigation { + background-color: white; + } + + .navigation__right { + display: none; + } +} + +@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) { + @media screen and (orientation: portrait) { + .navigation__right { + display: none; + } + } +} diff --git a/src/style-accessibility/components/page-collective.scss b/src/style-accessibility/components/page-collective.scss new file mode 100644 index 00000000..f7007e75 --- /dev/null +++ b/src/style-accessibility/components/page-collective.scss @@ -0,0 +1,25 @@ +@import "../variables"; + +.page-collective { + &.ng-leave { + animation: slideOutLeft $short-duration both ease-in; + } + + &.ng-enter { + animation: slideInRight $short-duration both ease-in; + } +} + +.page-collective { + &__collective-image { + //min-height: 40em; + } +} + +@media (max-width: $mobile-width) { + .page-collective { + &__collective-image { + display: none; + } + } +} \ No newline at end of file diff --git a/src/style-accessibility/components/page-schedule.scss b/src/style-accessibility/components/page-schedule.scss new file mode 100644 index 00000000..edc51fbe --- /dev/null +++ b/src/style-accessibility/components/page-schedule.scss @@ -0,0 +1,12 @@ +@import "../variables"; + +.page-schedule { + &.ng-leave { + transform-origin: 0% 0%; + animation: rotateFall $short-duration both ease-in; + } + + &.ng-enter { + animation: scaleUp $short-duration both ease-in; + } +} \ No newline at end of file diff --git a/src/style-accessibility/components/parallax.scss b/src/style-accessibility/components/parallax.scss new file mode 100644 index 00000000..67826870 --- /dev/null +++ b/src/style-accessibility/components/parallax.scss @@ -0,0 +1,24 @@ +@import "../variables"; + +.parallax { + min-width: 1280px; + width: 1280px; + height: 1000px; + overflow: hidden; + position: relative; + + //&__container { + // + //} + + &__layer { + position: absolute; + } + + &__end { + position: absolute; + width: 100%; + background-color: white; + bottom: 0; + } +} \ No newline at end of file diff --git a/src/style-accessibility/components/schedule-table.scss b/src/style-accessibility/components/schedule-table.scss new file mode 100644 index 00000000..f99dbd20 --- /dev/null +++ b/src/style-accessibility/components/schedule-table.scss @@ -0,0 +1,132 @@ +@import "../variables"; + +$current-week-day-color: $blue-color; + +$cell-width: 9em; +$cell-tablet-width: 7.5em; + +$group-cell-width: 4em; +$group-cell-tablet-width: 3em; + +$current-week-day-color: $blue-color; +$row-padding: $single-margin 0; +$current-day-column-border-thickness: 3px; + +.schedule-table { + margin-bottom: $double-margin; + + a{ + color: $dark-color; + } + + .lesson { + font-size: 1.1em; + font-weight: bold; + } + + .teacher { + font-style: italic; + } + + .current { + border-left: $current-day-column-border-thickness solid $current-week-day-color; + border-right: $current-day-column-border-thickness solid $current-week-day-color; + } + + &__head{ + display: flex; + + .date { + margin: .5em 0 0; + font-size: 1.5em; + } + + .group { + color: #666; + } + + & > div{ + min-width: $cell-width; + text-align: center; + } + + & > .group{ + min-width: $group-cell-width; + } + } + + &__body { + display: flex; + flex-direction: column; + } + + &__body-row{ + display: flex; + justify-content: space-between; + + &:nth-child(even) { + background-color: $schedule-row-color; + } + } + + &__body-group{ + min-width: $group-cell-width; + padding: $row-padding; + + text-align: center; + + p.name { + font-size: 1.25em; + font-weight: 800; + } + } + + &__record{ + min-width: $cell-width; + padding: $row-padding; + + text-align: center; + } + + &__course{ + margin-bottom: $half-margin; + } +} + +@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) { + .schedule-table { + min-width: 900px; + + .lesson { + font-size: .9em; + font-weight: normal; + } + + .teacher { + font-size: .9em; + font-weight: normal; + } + + &__head{ + & > div{ + min-width: $cell-tablet-width; + } + + & > .group{ + min-width: $group-cell-tablet-width; + } + } + + &__body-group{ + min-width: $group-cell-tablet-width; + + p.name { + font-size: 1em; + } + } + + &__record{ + min-width: $cell-tablet-width; + } + } +} diff --git a/src/style-accessibility/components/teacher-proifile.scss b/src/style-accessibility/components/teacher-proifile.scss new file mode 100644 index 00000000..54258f7d --- /dev/null +++ b/src/style-accessibility/components/teacher-proifile.scss @@ -0,0 +1,75 @@ +@import "../variables"; + +$picture-width: 30%; +$info-width: 100% - $picture-width; + +.teacher-profile { + margin: 0 auto $double-margin; + + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + &__picture { + width: $picture-width; + max-width: 15em; + min-width: 12em; + + img { + width: 100%; + } + } + + &__info { + width: $info-width; + + padding-left: $single-margin; + box-sizing: border-box; + + h2 { + font-size: $big-font-size; + font-weight: 200; + text-align: left; + + strong { + font-weight: 600; + } + + //a { + // color: $dark-color; + // + // &:hover{ + // border-bottom-color: lighten($dark-color, 40%); + // } + //} + } + } + + &__position { + font-size: $bigger-font-size; + } + + &__biography { + margin-top: $double-margin; + + p { + margin-bottom: $single-margin; + } + } +} + +@media (max-width: $mobile-width) { + .teacher-profile { + margin: 0 auto $double-margin; + + &__picture { + width: 100%; + max-width: $mobile-width; + } + + &__info { + width: 100%; + padding-left: 0; + } + } +} diff --git a/src/style-accessibility/components/timeline-record-instagram.scss b/src/style-accessibility/components/timeline-record-instagram.scss new file mode 100644 index 00000000..6e0954e5 --- /dev/null +++ b/src/style-accessibility/components/timeline-record-instagram.scss @@ -0,0 +1,53 @@ +@import "../variables"; + +$user-size: 40px; +$half-margin: $single-margin/2; +$image-border-radius: .35em; +$image-border-thickness: $half-margin; + +.timeline-record-instagram { +} + +.timeline-record-instagram__head { + margin-bottom: 1.25em; + //margin-bottom: $single-margin; + + .date { + text-align: center; + color: #aaa; + } +} + +.timeline-record-instagram__body { + img { + max-width: 640px; + width: 100%; + height: auto; + box-sizing: border-box; + border: $image-border-thickness solid white; + box-shadow: $white-shadow; + border-radius: $image-border-radius; + margin: 0 auto $single-margin; + display: block; + } +} + +.timeline-record-instagram__user { + padding-top: $half-margin; + + span { + margin-left: $half-margin; + + line-height: $user-size; + vertical-align: top; + } + + img { + display: inline; + width: $user-size; + height: $user-size; + border-radius: 50%; + border: none; + box-shadow: none; + } +} \ No newline at end of file diff --git a/src/style-accessibility/components/timeline-record.scss b/src/style-accessibility/components/timeline-record.scss new file mode 100644 index 00000000..6d64a020 --- /dev/null +++ b/src/style-accessibility/components/timeline-record.scss @@ -0,0 +1,9 @@ +@import "../variables"; + +.timeline__record { + margin: 0 0 $post-margin; + + .date { + color: $light-color; + } +} diff --git a/src/style-accessibility/components/timeline.scss b/src/style-accessibility/components/timeline.scss new file mode 100644 index 00000000..f3012069 --- /dev/null +++ b/src/style-accessibility/components/timeline.scss @@ -0,0 +1,33 @@ +@import "../variables"; + +.timeline{ + display: flex; + flex-direction: column; + margin: $double-margin auto; +} + +.timeline__footer{ + display: flex; + justify-content: center; + + button.more { + position: relative; + top: -2px; + + width: 100px; + height: 40px; + border: 2px solid $dark-color; + padding: 0 10px; + background: none; + + font-size: $normal-font-size; + + &:hover { + background: gainsboro; + } + + &:active { + top: 0; + } + } +} diff --git a/src/style-accessibility/content.scss b/src/style-accessibility/content.scss new file mode 100644 index 00000000..da765cad --- /dev/null +++ b/src/style-accessibility/content.scss @@ -0,0 +1,99 @@ +@import "variables"; + +.content { + margin: 0 auto; + + &.content_full{ + width: $content-full; + } + + &.content_wide{ + width: $content-wide; + } + + &.content_semi-wide{ + width: $content-semi-wide; + } + + &.content_thin{ + width: $content-thin; + } + + &.content--padding-top--double{ + padding-top: $double-margin; + padding-bottom: $single-margin; + } + + &.content--padding-top--menu{ + padding-top: $menu-thickness + $double-margin; + padding-bottom: $single-margin; + } +} + +@media screen and (max-width: $mobile-width) { + $content-mobile: 90%; + + .content { + &.content_wide{ + width: $content-mobile; + } + + &.content_semi-wide{ + width: $content-mobile; + } + + &.content_thin{ + width: $content-mobile; + } + + &.content--padding-top--menu{ + padding-top: $double-margin; + } + } +} + +@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) { + $thin-value: 70%; + $wide-value: 95%; + $semi-wide-value: 80%; + + .content { + overflow-x: scroll; + + &.content_wide { + width: $wide-value; + } + + &.content_semi-wide { + width: $semi-wide-value; + } + + &.content_thin { + width: $thin-value; + } + + &.content--padding-top--menu { + padding-top: $menu-thickness + $double-margin; + } + } + + @media screen and (orientation: portrait) { + $wide-value: 100%; + $thin-value: 80%; + $semi-wide-value: 95%; + + .content { + &.content_wide { + width: $wide-value; + } + + &.content_semi-wide { + width: $semi-wide-value; + } + + &.content_thin { + width: $thin-value; + } + } + } +} diff --git a/src/style-accessibility/error-404.scss b/src/style-accessibility/error-404.scss new file mode 100644 index 00000000..d4e9caa5 --- /dev/null +++ b/src/style-accessibility/error-404.scss @@ -0,0 +1,14 @@ +.error-404{ + text-align: center; + + h1{ + font-size: 16pt; + font-weight: normal; + } + + img{ + margin: 20px; + width: 40%; + max-width: 800px; + } +} \ No newline at end of file diff --git a/src/style-accessibility/footer.scss b/src/style-accessibility/footer.scss new file mode 100644 index 00000000..a55b7441 --- /dev/null +++ b/src/style-accessibility/footer.scss @@ -0,0 +1,58 @@ +@import "variables"; + +$uri: '/graphics/rawline.png'; + +footer { + //width: 100%; + color: $light-color; + padding: 0 $half-margin $half-margin; + position: relative; + background-color: $darker-color; + + font-size: $normal-font-size; + + a { + color: $light-color; + text-decoration: none; + border-bottom: 1px solid $light-color; + + &:hover { + border-bottom: 2px solid $light-color; + } + + &.invisible { + border-bottom: none; + } + } + + .footer-info { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + padding: $double-margin $single-margin 0; + margin-bottom: $double-margin; + } + + .contacts { + & > div { + padding: 0 1em; + } + + p { + margin: 0.5em 1em; + } + } + + .copyright { + display: flex; + flex-wrap: wrap; + align-items: baseline; + justify-content: space-between; + + span { + padding: 1.5em 1em 0.25em; + box-sizing: padding-box; + } + } +} \ No newline at end of file diff --git a/src/style-accessibility/hudozka-title.scss b/src/style-accessibility/hudozka-title.scss new file mode 100644 index 00000000..36fbe03f --- /dev/null +++ b/src/style-accessibility/hudozka-title.scss @@ -0,0 +1,26 @@ +@import "variables"; + +.hudozka-title { + padding: $double-margin 0; + + text-align: center; + + p { + color: $dark-color; + margin-bottom: $single-margin; + font-size: $normal-font-size; + } + + h1 { + margin-top: $single-margin; + font-size: $biggest-font-size; + } +} + +@media (max-width: $mobile-width) { + .hudozka-title { + h1 { + font-size: $big-font-size; + } + } +} diff --git a/src/style-accessibility/kazimir/video.scss b/src/style-accessibility/kazimir/video.scss new file mode 100644 index 00000000..205085d9 --- /dev/null +++ b/src/style-accessibility/kazimir/video.scss @@ -0,0 +1,16 @@ +@import "../variables"; + +.kazimir-video { + width: 100%; + height: 0; + position: relative; + padding-bottom: $embed-video-ratio; + + margin-bottom: $single-margin; + + iframe { + width: 100%; + height: 100%; + position: absolute; + } +} diff --git a/src/style-accessibility/main-image.scss b/src/style-accessibility/main-image.scss new file mode 100644 index 00000000..eb6af9b4 --- /dev/null +++ b/src/style-accessibility/main-image.scss @@ -0,0 +1,24 @@ +@import "variables"; + +.main-image{ + width: 100%; + display: flex; + justify-content: center; + overflow: hidden; + + img { + width: 100%; + max-width: 1280px; + } + + &__content { + min-width: 1280px; + width: 1280px; + } +} + +@media (max-width: $mobile-width) { + .main-image { + display: none; + } +} diff --git a/src/style-accessibility/main.scss b/src/style-accessibility/main.scss new file mode 100644 index 00000000..d94eb431 --- /dev/null +++ b/src/style-accessibility/main.scss @@ -0,0 +1,61 @@ +@import "variables"; + +* { + margin: 0; + padding: 0; +} + +html, body { + height: 100%; +} + +body { + min-width: 320px; +} + +h2{ + text-align: center; + margin-bottom: $single-margin; + + //background-color: hsl(0, 0, 95%); +} + +h1, h2{ + font-family: $title-font; +} + +h3{ + margin-bottom: $single-margin / 2; + + a { + color: $dark-color; + text-decoration: none; + border-bottom: 1px solid $dark-color; + + &:hover { + border-width: 2px; + } + + //&:active { + // border-bottom: 1px solid $dark-color; + //} + } +} + +a { + color: $blue-color; + text-decoration: none; + border-bottom: 1px solid lighten($blue-color, 25%); + + &:hover { + border-bottom: 1px solid lighten($blue-color, 10%); + } + + &:active { + border-bottom: 1px solid $blue-color; + } + + &.invisible { + border-bottom: none; + } +} diff --git a/src/style-accessibility/page-animation.scss b/src/style-accessibility/page-animation.scss new file mode 100644 index 00000000..29496bad --- /dev/null +++ b/src/style-accessibility/page-animation.scss @@ -0,0 +1,56 @@ +@keyframes rotateFall { + 0% { + transform: rotateZ(0deg); + } + 20% { + transform: rotateZ(10deg); + animation-timing-function: ease-out; + } + 40% { + transform: rotateZ(17deg); + } + 60% { + transform: rotateZ(16deg); + } + 100% { + transform: translateY(100%) rotateZ(17deg); + } +} + +@keyframes scaleUp { + from { + opacity: 0.0; + transform: scale(0.5); + } +} + +@keyframes slideInRight { + from { + transform: translateX(100%); + } + to { + transform: translateX(0); + } +} + +@keyframes slideInUp { + from { + transform: translateY(100%); + } + to { + transform: translateY(0); + } +} + +@keyframes slideOutLeft { + to { + transform: translateX(-100%); + } +} + +@keyframes rotateOutNewspaper { + to { + transform: translateZ(-3000px) rotateZ(360deg); + opacity: 0; + } +} \ No newline at end of file diff --git a/src/style-accessibility/page.scss b/src/style-accessibility/page.scss new file mode 100644 index 00000000..8e2fcda6 --- /dev/null +++ b/src/style-accessibility/page.scss @@ -0,0 +1,6 @@ +.page { + width: 100%; + + &.ng-leave {} + &.ng-enter {} +} \ No newline at end of file diff --git a/src/style-accessibility/schedule-mobile.scss b/src/style-accessibility/schedule-mobile.scss new file mode 100644 index 00000000..3c18a57f --- /dev/null +++ b/src/style-accessibility/schedule-mobile.scss @@ -0,0 +1,61 @@ +.schedule-slider { + width: 100%; + max-width: 30em; + //width: 90%; + //margin: 0 auto; +} + +.schedule-slider__slide { + height: 100%; + overflow-y: auto; + + &.current { + border-left: .3em solid #4b8ff3; + border-right: .3em solid #4b8ff3; + } +} + +.schedule-slider__body { +} + +.schedule-slider__head { + text-align: center; + font-size: 2em; + margin: 0 0 .5em; +} + +.schedule-record { + min-height: 10em; + text-align: center; + + &.even{ + background-color: #f3f3fd; + } + + &.empty { + .schedule-record__head{ + color: #bbb; + } + } + + p { + margin: .2em 0; + } +} + +.schedule-record__head { + padding: .25em 0; + font-size: 1.2em; +} + +.schedule-record__main { +} + +.schedule-record__name { + font-weight: bold; + font-size: 1.2em; +} + +.schedule-record__group { + position: absolute; +} \ No newline at end of file diff --git a/src/style-accessibility/schedule-selector.scss b/src/style-accessibility/schedule-selector.scss new file mode 100644 index 00000000..777d4987 --- /dev/null +++ b/src/style-accessibility/schedule-selector.scss @@ -0,0 +1,10 @@ +@import "variables"; + +.schedule-selector { + text-align: center; + margin-bottom: $single-margin; + + label{ + margin: 0 .5em; + } +} \ No newline at end of file diff --git a/src/style-accessibility/style.scss b/src/style-accessibility/style.scss new file mode 100644 index 00000000..81d6982a --- /dev/null +++ b/src/style-accessibility/style.scss @@ -0,0 +1,39 @@ +@import "components/album-collection"; +@import "components/gallery-item"; +@import "components/document"; +@import "components/documents-container"; +@import "components/teacher-proifile"; +@import "components/main-menu"; +@import "components/navigation"; +@import "components/breadcrumbs"; +@import "components/timeline"; +@import "components/timeline-record"; +@import "components/timeline-record-instagram"; +@import "components/schedule-table"; +@import "components/footer-links"; +@import "components/cloud-page"; +@import "components/article"; +@import "components/article-page-control"; +@import "components/album"; +@import "components/parallax"; + +@import "components/page-schedule"; +@import "components/page-collective"; + +@import "main"; +@import "body-wrapper"; +@import "page"; +@import "content"; +@import "page-animation"; +@import "main-image"; +@import "hudozka-title"; +//@import "vertical-image"; + +@import "schedule-selector"; +@import "schedule-mobile"; +@import "error-404"; + +@import "tape-viewer"; +@import "footer"; + +@import "kazimir/video"; diff --git a/src/style-accessibility/tape-viewer.scss b/src/style-accessibility/tape-viewer.scss new file mode 100644 index 00000000..f1b1dc11 --- /dev/null +++ b/src/style-accessibility/tape-viewer.scss @@ -0,0 +1,88 @@ +.tape-block{ + max-width: 1000px; + + margin: 2em auto; + + &.simplified{ + .tape{ + display: none; + } + } +} + +.tape-block__body{ + position: relative; + width: 100%; + + .tape { + width: 98px; + height: 98px; + position: absolute; + z-index: 10; + } + + .tape-tl { + top: -25px; + left: -25px; + background-image: url(/graphics/tape-tl.png); + } + + .tape-tr { + top: -25px; + right: -25px; + background-image: url(/graphics/tape-tr.png); + } + + .tape-bl { + bottom: 0; + left: -25px; + background-image: url(/graphics/tape-lb.png); + } + + .tape-br { + bottom: 0; + right: -25px; + background-image: url(/graphics/tape-rb.png); + } +} + +@media screen and (max-device-width: 31.25em) { + .tape-block { + width: 90%; + margin: 1.5em auto; + } + + .tape-block__body { + .tape { + width: 62px; + height: 62px; + position: absolute; + z-index: 10; + } + + .tape-tl { + top: -20px; + left: -20px; + background-image: url(/graphics/m-tape-tl.png); + background-size: 100%; + } + + .tape-tr { + top: -20px; + right: -20px; + background-image: url(/graphics/m-tape-tr.png); + } + + .tape-bl { + bottom: 10px; + left: -20px; + background-image: url(/graphics/m-tape-bl.png); + } + + .tape-br { + bottom: 10px; + right: -20px; + background-image: url(/graphics/m-tape-br.png); + } + } +} \ No newline at end of file diff --git a/src/style-accessibility/variables.scss b/src/style-accessibility/variables.scss new file mode 100644 index 00000000..d8a82bdc --- /dev/null +++ b/src/style-accessibility/variables.scss @@ -0,0 +1,73 @@ +//SIZE +$mobile-width: 31.25em; +$desktop-width: 59.99999em; + +$tablet-min-width: 31.25em; +$tablet-max-width: 64em; + +$content-full: 100%; +$content-wide: 80%; +$content-semi-wide: 70%; +$content-thin: 60%; + +$embed-video-ratio: 56.25%; + +//MARGINS +$small-margin: .2em; +$half-margin: .5em; +$single-margin: 1.0em; +$double-margin: 2.0em; +$post-margin: 5.0em; + +//COLOR +$dark-color: #1a1a1a; +$darker-color: #1a1a1a; +$light-color: #fff; +$lighter-color: #fff; + +$blue-color: $dark-color; +$orange-color: $dark-color; +$green-color: $dark-color; +$yellow-color: $dark-color; +$pink-color: $dark-color; +$magenta-color: $dark-color; +$red-color: $dark-color; +$gray-color: $dark-color; + +$link-color: $blue-color; +$inactive-link-color: $light-color; + +$schedule-row-color: #fff; + +//SHADOW +$white-shadow: 0 .1em 0.3em rgba(0, 0, 0, 0.2); + +//FONTS +$title-font: "PT Serif", Georgia, serif; +$text-font: "PT Sans", Arial, sans-serif; + +$default-font-size: 14pt; +$smaller-font-size: 0.9rem; +$normal-font-size: 1.0rem; +$bigger-font-size: 1.2rem; +$big-font-size: 1.5rem; +$biggest-font-size: 3rem; + +//MENU +$menu-thickness: 2.5em; +$menu-colored-mark-thickness: 4px; +$menu-inactive-item-color: $dark-color; + +//ANIMATION +$short-duration: 0.3s; + + +@media (max-width: $mobile-width) { + //FONTS + $default-font-size: 14pt; + $smaller-font-size: 0.9rem; + $normal-font-size: 1.0rem; + $bigger-font-size: 1.1rem; + $big-font-size: 1.3rem; + $biggest-font-size: 2.0rem; +} diff --git a/src/style-accessibility/vertical-image.scss b/src/style-accessibility/vertical-image.scss new file mode 100644 index 00000000..98c2f10b --- /dev/null +++ b/src/style-accessibility/vertical-image.scss @@ -0,0 +1,28 @@ +@import "variables"; + +.vertical-image { + position: relative; + width: 100%; + overflow: hidden; + + & > img { + position: relative; + z-index: 1; + width: 100%; + display: block; + margin: 0 auto; + } + + &__back { + position: absolute; + filter: blur(15px) grayscale(0) opacity(.75); + + top: -50%; + + & > img { + width: 105%; + display: block; + margin: 0 auto; + } + } +} \ No newline at end of file