style updated: introduced themes, accessibility controlling, other
This commit is contained in:
tmshv committed
1 parent
f27cc4003f
commit
ee9919b39d
55 files changed
+188
-1784
No files matched your search
+1
-18
@@ -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'])
|
||||
+3
-1
@@ -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))
|
||||
@@ -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()
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
const themes = {
|
||||
main: 'style.css',
|
||||
accessibility: 'style-accessibility.css',
|
||||
main: 'theme-default',
|
||||
accessibility: 'accessibility theme-accessibility-bw',
|
||||
}
|
||||
|
||||
const defaultTheme = 'main'
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
@import "../variables";
|
||||
|
||||
.album-collection{
|
||||
&__body{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items:flex-start;
|
||||
}
|
||||
|
||||
&__title{
|
||||
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
@import "../variables";
|
||||
|
||||
.timeline__record {
|
||||
margin: 0 0 $post-margin;
|
||||
|
||||
.date {
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
.error-404{
|
||||
text-align: center;
|
||||
|
||||
h1{
|
||||
font-size: 16pt;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
img{
|
||||
margin: 20px;
|
||||
width: 40%;
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
.page {
|
||||
width: 100%;
|
||||
|
||||
&.ng-leave {}
|
||||
&.ng-enter {}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
@import "variables";
|
||||
|
||||
.schedule-selector {
|
||||
text-align: center;
|
||||
margin-bottom: $single-margin;
|
||||
|
||||
label{
|
||||
margin: 0 .5em;
|
||||
}
|
||||
}
|
||||
@@ -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";
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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) {
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
@import "../variables";
|
||||
|
||||
.accessibility-control{
|
||||
//display: none;
|
||||
|
||||
background-color: gold;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -15,11 +15,6 @@
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $dark-color;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__body{
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
+13
-31
@@ -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;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
@@ -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";
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="accessibility-control">
|
||||
<button>Let's rock!</button>
|
||||
</div>
|
||||
@@ -1,7 +1,10 @@
|
||||
<div class="navigation">
|
||||
<main-menu items="$.menu"></main-menu>
|
||||
<accessibility-control></accessibility-control>
|
||||
<div class="navigation__body">
|
||||
<main-menu items="$.menu"></main-menu>
|
||||
|
||||
<div class="navigation__right">
|
||||
<theme-selector></theme-selector>
|
||||
<div class="navigation__right">
|
||||
<theme-selector></theme-selector>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
+9
-10
@@ -22,8 +22,7 @@
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="//static.shlisselburg.org/art/graphics/favicon-144.png" />
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||||
<link rel="stylesheet" ng-href="{{theme}}" href="style.css"/>
|
||||
<!--<link rel="stylesheet" href="style-accessibility.css" />-->
|
||||
<link rel="stylesheet" href="style.css"/>
|
||||
<!--<link rel="stylesheet" href="/animate.min.css">-->
|
||||
<link rel="stylesheet" href="/fonts/PTSans/stylesheet.css">
|
||||
<link rel="stylesheet" href="/fonts/PTSerif/stylesheet.css">
|
||||
@@ -61,7 +60,7 @@
|
||||
|
||||
{{{{raw-helper}}}}
|
||||
<body>
|
||||
<div class="body-wrapper" ng-controller="AppController">
|
||||
<div class="body-wrapper {{theme}}" ng-controller="AppController">
|
||||
<header ng-switch="navigation">
|
||||
<navigation menu="menuProvider" right-text="{{phone}}"></navigation>
|
||||
</header>
|
||||
@@ -94,13 +93,13 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
var d = document;
|
||||
var s = d.createElement('script');
|
||||
s.src = '//hudozka.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', Date.now());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
// (function() {
|
||||
// var d = document;
|
||||
// var s = d.createElement('script');
|
||||
// s.src = '//hudozka.disqus.com/embed.js';
|
||||
// s.setAttribute('data-timestamp', Date.now());
|
||||
// (d.head || d.body).appendChild(s);
|
||||
// })();
|
||||
</script>
|
||||
</body>
|
||||
{{{{/raw-helper}}}}
|
||||
|
||||
Reference in new issue
Block a user