diff --git a/gulpfile.babel.js b/gulpfile.babel.js index c1ac72aa..2b0fdc9d 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -49,23 +49,6 @@ 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')) @@ -133,7 +116,7 @@ gulp.task('production', () => { isProduction = true }) -gulp.task('default', ['style', 'style-accessibility', 'compile']) +gulp.task('default', ['style', '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/client/app.js b/src/client/app.js index f66098d4..17587dcd 100644 --- a/src/client/app.js +++ b/src/client/app.js @@ -21,6 +21,7 @@ import ArticlePageControl from './components/ArticlePageControl' import Album from './components/Album' import Parallax from './components/Parallax' import ThemeSelector from './components/ThemeSelector' +import AccessibilityControl from './components/AccessibilityControl' import Page from './components/CloudPage' import PageSchool from './components/PageSchool' @@ -313,5 +314,6 @@ app.run(($location, $rootScope, $http) => { ScheduleSlide, ScheduleRecord, FooterLinks, - ThemeSelector + ThemeSelector, + AccessibilityControl, ].map(i => i(app)) diff --git a/src/client/components/AccessibilityControl.js b/src/client/components/AccessibilityControl.js new file mode 100644 index 00000000..29ac3e2f --- /dev/null +++ b/src/client/components/AccessibilityControl.js @@ -0,0 +1,19 @@ +import template from '../../templates/components/accessibility-control.html' + +export default function (app) { + app.component('accessibilityControl', { + template, + controller: ($scope, theme) => { + //const update = () => { + // $scope.isMainTheme = theme.currentTheme === theme.mainTheme + //} + // + //$scope.toggleTheme = () => { + // theme.toggle() + // update() + //} + // + //update() + }, + }) +} diff --git a/src/client/services/theme.js b/src/client/services/theme.js index c3b80004..2ce8d776 100644 --- a/src/client/services/theme.js +++ b/src/client/services/theme.js @@ -1,6 +1,6 @@ const themes = { - main: 'style.css', - accessibility: 'style-accessibility.css', + main: 'theme-default', + accessibility: 'accessibility theme-accessibility-bw', } const defaultTheme = 'main' diff --git a/src/style-accessibility/album.scss b/src/style-accessibility/album.scss deleted file mode 100644 index 93368807..00000000 --- a/src/style-accessibility/album.scss +++ /dev/null @@ -1,134 +0,0 @@ -@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 deleted file mode 100644 index 434a5ef5..00000000 --- a/src/style-accessibility/body-wrapper.scss +++ /dev/null @@ -1,32 +0,0 @@ -@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 deleted file mode 100644 index 92321171..00000000 --- a/src/style-accessibility/components/album-collection.scss +++ /dev/null @@ -1,15 +0,0 @@ -@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 deleted file mode 100644 index 6a1458c0..00000000 --- a/src/style-accessibility/components/album.scss +++ /dev/null @@ -1,48 +0,0 @@ -@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 deleted file mode 100644 index 58eddef7..00000000 --- a/src/style-accessibility/components/article-page-control.scss +++ /dev/null @@ -1,21 +0,0 @@ -@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 deleted file mode 100644 index 09d3f0af..00000000 --- a/src/style-accessibility/components/article.scss +++ /dev/null @@ -1,80 +0,0 @@ -@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 deleted file mode 100644 index 79ca74b9..00000000 --- a/src/style-accessibility/components/breadcrumbs.scss +++ /dev/null @@ -1,45 +0,0 @@ -@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 deleted file mode 100644 index 5d58f69d..00000000 --- a/src/style-accessibility/components/cloud-page.scss +++ /dev/null @@ -1,68 +0,0 @@ -@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 deleted file mode 100644 index 30d86a77..00000000 --- a/src/style-accessibility/components/document.scss +++ /dev/null @@ -1,34 +0,0 @@ -@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 deleted file mode 100644 index 42d1ac73..00000000 --- a/src/style-accessibility/components/documents-container.scss +++ /dev/null @@ -1,13 +0,0 @@ -@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 deleted file mode 100644 index 60b13ba2..00000000 --- a/src/style-accessibility/components/footer-links.scss +++ /dev/null @@ -1,21 +0,0 @@ -@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 deleted file mode 100644 index aacb524f..00000000 --- a/src/style-accessibility/components/gallery-item.scss +++ /dev/null @@ -1,39 +0,0 @@ -@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 deleted file mode 100644 index c9b74c22..00000000 --- a/src/style-accessibility/components/main-menu.scss +++ /dev/null @@ -1,48 +0,0 @@ -@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 deleted file mode 100644 index 2bbc13a1..00000000 --- a/src/style-accessibility/components/navigation.scss +++ /dev/null @@ -1,44 +0,0 @@ -@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 deleted file mode 100644 index f7007e75..00000000 --- a/src/style-accessibility/components/page-collective.scss +++ /dev/null @@ -1,25 +0,0 @@ -@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 deleted file mode 100644 index edc51fbe..00000000 --- a/src/style-accessibility/components/page-schedule.scss +++ /dev/null @@ -1,12 +0,0 @@ -@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 deleted file mode 100644 index 67826870..00000000 --- a/src/style-accessibility/components/parallax.scss +++ /dev/null @@ -1,24 +0,0 @@ -@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 deleted file mode 100644 index f99dbd20..00000000 --- a/src/style-accessibility/components/schedule-table.scss +++ /dev/null @@ -1,132 +0,0 @@ -@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 deleted file mode 100644 index 54258f7d..00000000 --- a/src/style-accessibility/components/teacher-proifile.scss +++ /dev/null @@ -1,75 +0,0 @@ -@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 deleted file mode 100644 index 6e0954e5..00000000 --- a/src/style-accessibility/components/timeline-record-instagram.scss +++ /dev/null @@ -1,53 +0,0 @@ -@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 deleted file mode 100644 index 6d64a020..00000000 --- a/src/style-accessibility/components/timeline-record.scss +++ /dev/null @@ -1,9 +0,0 @@ -@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 deleted file mode 100644 index f3012069..00000000 --- a/src/style-accessibility/components/timeline.scss +++ /dev/null @@ -1,33 +0,0 @@ -@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 deleted file mode 100644 index da765cad..00000000 --- a/src/style-accessibility/content.scss +++ /dev/null @@ -1,99 +0,0 @@ -@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 deleted file mode 100644 index d4e9caa5..00000000 --- a/src/style-accessibility/error-404.scss +++ /dev/null @@ -1,14 +0,0 @@ -.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 deleted file mode 100644 index a55b7441..00000000 --- a/src/style-accessibility/footer.scss +++ /dev/null @@ -1,58 +0,0 @@ -@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 deleted file mode 100644 index 36fbe03f..00000000 --- a/src/style-accessibility/hudozka-title.scss +++ /dev/null @@ -1,26 +0,0 @@ -@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 deleted file mode 100644 index 205085d9..00000000 --- a/src/style-accessibility/kazimir/video.scss +++ /dev/null @@ -1,16 +0,0 @@ -@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 deleted file mode 100644 index eb6af9b4..00000000 --- a/src/style-accessibility/main-image.scss +++ /dev/null @@ -1,24 +0,0 @@ -@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 deleted file mode 100644 index d94eb431..00000000 --- a/src/style-accessibility/main.scss +++ /dev/null @@ -1,61 +0,0 @@ -@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 deleted file mode 100644 index 29496bad..00000000 --- a/src/style-accessibility/page-animation.scss +++ /dev/null @@ -1,56 +0,0 @@ -@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 deleted file mode 100644 index 8e2fcda6..00000000 --- a/src/style-accessibility/page.scss +++ /dev/null @@ -1,6 +0,0 @@ -.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 deleted file mode 100644 index 3c18a57f..00000000 --- a/src/style-accessibility/schedule-mobile.scss +++ /dev/null @@ -1,61 +0,0 @@ -.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 deleted file mode 100644 index 777d4987..00000000 --- a/src/style-accessibility/schedule-selector.scss +++ /dev/null @@ -1,10 +0,0 @@ -@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 deleted file mode 100644 index 81d6982a..00000000 --- a/src/style-accessibility/style.scss +++ /dev/null @@ -1,39 +0,0 @@ -@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 deleted file mode 100644 index f1b1dc11..00000000 --- a/src/style-accessibility/tape-viewer.scss +++ /dev/null @@ -1,88 +0,0 @@ -.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 deleted file mode 100644 index d8a82bdc..00000000 --- a/src/style-accessibility/variables.scss +++ /dev/null @@ -1,73 +0,0 @@ -//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 deleted file mode 100644 index 98c2f10b..00000000 --- a/src/style-accessibility/vertical-image.scss +++ /dev/null @@ -1,28 +0,0 @@ -@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 diff --git a/src/style/body-wrapper.scss b/src/style/body-wrapper.scss index a3e1de1c..a61f0073 100644 --- a/src/style/body-wrapper.scss +++ b/src/style/body-wrapper.scss @@ -9,24 +9,6 @@ .body-wrapper__content { margin: 0 auto 0; - - a { - color: $dark-color; - text-decoration: none; - border-bottom: 1px solid lighten($dark-color, 10%); - - &:hover { - border-bottom: 1px solid lighten($dark-color, 25%); - } - - &:active { - border-bottom: 1px solid $dark-color; - } - - &.invisible { - border-bottom: none; - } - } } @media (max-width: $mobile-width) { diff --git a/src/style/components/accessibility-control.scss b/src/style/components/accessibility-control.scss new file mode 100644 index 00000000..97697756 --- /dev/null +++ b/src/style/components/accessibility-control.scss @@ -0,0 +1,9 @@ +@import "../variables"; + +.accessibility-control{ + //display: none; + + background-color: gold; + height: 100px; + width: 100%; +} diff --git a/src/style/components/article.scss b/src/style/components/article.scss index a64a730b..021b1f3a 100644 --- a/src/style/components/article.scss +++ b/src/style/components/article.scss @@ -15,11 +15,6 @@ text-align: center; color: #aaa; } - - a { - color: $dark-color; - border-bottom: none; - } } &__body{ diff --git a/src/style/components/footer-links.scss b/src/style/components/footer-links.scss index 98166f75..f3ccceb5 100644 --- a/src/style/components/footer-links.scss +++ b/src/style/components/footer-links.scss @@ -3,16 +3,10 @@ .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 { diff --git a/src/style/components/main-menu.scss b/src/style/components/main-menu.scss index 87b71925..dea266f7 100644 --- a/src/style/components/main-menu.scss +++ b/src/style/components/main-menu.scss @@ -19,10 +19,12 @@ } a { - text-decoration: none; - color: $dark-color; - border-bottom: 1px solid lighten($dark-color, 60%); + border-color: lighten($dark-color, 60%); + + &:hover { + border-color: lighten($dark-color, 30%); + } } .selected { diff --git a/src/style/components/navigation.scss b/src/style/components/navigation.scss index 28845560..1e6d2639 100644 --- a/src/style/components/navigation.scss +++ b/src/style/components/navigation.scss @@ -12,9 +12,11 @@ background-color: rgba(255, 255, 255, 0.95); - display: flex; - justify-content: space-between; - align-items: center; + &__body { + display: flex; + justify-content: space-between; + align-items: center; + } } .navigation__right { diff --git a/src/style/footer.scss b/src/style/footer.scss index cf234f8e..f0be882b 100644 --- a/src/style/footer.scss +++ b/src/style/footer.scss @@ -1,28 +1,8 @@ @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: $smaller-font-size; - - &:before { - $s: 3px; - - content: ''; - position: absolute; - top: -$s; - left: 0; - width: 100%; - height: $s; - z-index: 100; - background-image: url($uri); - } .footer-info { display: flex; diff --git a/src/style/main.scss b/src/style/main.scss index e5bc6ef4..df6a9284 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -27,35 +27,17 @@ h1, h2{ h3{ margin-bottom: $single-margin / 2; - a { - color: $dark-color; - text-decoration: none; - border-bottom: 1px solid lighten($dark-color, 10%); - - &:hover { - border-bottom: 1px solid lighten($dark-color, 25%); - } - - &: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; - } + //a { + // color: $dark-color; + // text-decoration: none; + // border-bottom: 1px solid lighten($dark-color, 10%); + // + // &:hover { + // border-bottom: 1px solid lighten($dark-color, 25%); + // } + // + // &:active { + // border-bottom: 1px solid $dark-color; + // } + //} } diff --git a/src/style/style.scss b/src/style/style.scss index 81d6982a..47c89f16 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -16,6 +16,7 @@ @import "components/article-page-control"; @import "components/album"; @import "components/parallax"; +@import "components/accessibility-control"; @import "components/page-schedule"; @import "components/page-collective"; @@ -37,3 +38,8 @@ @import "footer"; @import "kazimir/video"; + +// THEMES + +@import "themes/theme-default"; +@import "themes/theme-accessibility-bw"; \ No newline at end of file diff --git a/src/style/themes/theme-accessibility-bw.scss b/src/style/themes/theme-accessibility-bw.scss new file mode 100644 index 00000000..6c0d7255 --- /dev/null +++ b/src/style/themes/theme-accessibility-bw.scss @@ -0,0 +1,69 @@ +@import "../variables"; + +.theme-accessibility-bw { + background-color: $darker-color; + color: $lighter-color; + + a { + color: $lighter-color; + text-decoration: none; + border-bottom: 1px solid $lighter-color; + + &:hover { + border-width: 2px; + } + } + + .main-menu { + a { + color: $dark-color; + border-bottom: 1px solid $dark-color; + + &:hover { + border-width: 2px; + } + } + } + + .main-menu { + .selected { + border-top: $menu-colored-mark-thickness solid $dark-color; + + a:link, a:visited { + color: $dark-color; + } + } + } + + .content { + &.content--padding-top--menu { + padding-top: $menu-thickness + $double-margin + 5em; + padding-bottom: $single-margin; + } + } + + .navigation { + background-color: $lighter-color; + } + + .parallax { + &__end { + background-color: $darker-color; + } + } + + .article { + &__head { + .date { + color: $lighter-color; + } + } + } + + footer { + color: $lighter-color; + background-color: $darker-color; + + font-size: $normal-font-size; + } +} diff --git a/src/style/themes/theme-default.scss b/src/style/themes/theme-default.scss new file mode 100644 index 00000000..5325c279 --- /dev/null +++ b/src/style/themes/theme-default.scss @@ -0,0 +1,38 @@ +@import "../variables"; + +.theme-default { + a { + color: $dark-color; + + text-decoration: none; + border-width: 1px; + border-bottom-style: solid; + + &:hover { + border-width: 2px; + } + + &:active { + border-width: 2px; + } + + &.invisible { + border-bottom: none; + } + } + + .accessibility-control { + display: none; + } + + footer { + color: $light-color; + background-color: $darker-color; + + font-size: $smaller-font-size; + + a { + color: $light-color; + } + } +} diff --git a/src/templates/components/accessibility-control.html b/src/templates/components/accessibility-control.html new file mode 100644 index 00000000..c55fdbb8 --- /dev/null +++ b/src/templates/components/accessibility-control.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/src/templates/components/navigation.html b/src/templates/components/navigation.html index 83507cfa..485a7601 100644 --- a/src/templates/components/navigation.html +++ b/src/templates/components/navigation.html @@ -1,7 +1,10 @@
- + +
+ -
- +
+ +
diff --git a/src/templates/main.html b/src/templates/main.html index a77517f8..d089f7fc 100644 --- a/src/templates/main.html +++ b/src/templates/main.html @@ -22,8 +22,7 @@ - - + @@ -61,7 +60,7 @@ {{{{raw-helper}}}} -
+
@@ -94,13 +93,13 @@
{{{{/raw-helper}}}}