+ accessibility styles
This commit is contained in:
tmshv committed
1 parent
d5db0ca07e
commit
ca23ccc75f
38 files changed
+1682
-1
No files matched your search
+18
-1
@@ -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']);
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@import "../variables";
|
||||
|
||||
.album-collection{
|
||||
&__body{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items:flex-start;
|
||||
}
|
||||
|
||||
&__title{
|
||||
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
@import "../variables";
|
||||
|
||||
.timeline__record {
|
||||
margin: 0 0 $post-margin;
|
||||
|
||||
.date {
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
.error-404{
|
||||
text-align: center;
|
||||
|
||||
h1{
|
||||
font-size: 16pt;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
img{
|
||||
margin: 20px;
|
||||
width: 40%;
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.page {
|
||||
width: 100%;
|
||||
|
||||
&.ng-leave {}
|
||||
&.ng-enter {}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
@import "variables";
|
||||
|
||||
.schedule-selector {
|
||||
text-align: center;
|
||||
margin-bottom: $single-margin;
|
||||
|
||||
label{
|
||||
margin: 0 .5em;
|
||||
}
|
||||
}
|
||||
@@ -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";
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user