tmshv/hudozka
1
0 Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Moving to CSS Variables #4

Merged
tmshv merged 7 commits from dev into master 2018-05-23 07:29:04 +00:00
Conversation 0 Commits 7 Files Changed 35
+244 -327
35 changed files with 244 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.drone.yml
+2 -2
View File
@@ -4,8 +4,6 @@ pipeline:
commands: commands:
- docker build -t tmshv/hudozka:latest -t tmshv/hudozka:build-${DRONE_BUILD_NUMBER} . - docker build -t tmshv/hudozka:latest -t tmshv/hudozka:build-${DRONE_BUILD_NUMBER} .
- docker save -o hudozka-docker_container${DRONE_BUILD_NUMBER}.tar tmshv/hudozka:build-${DRONE_BUILD_NUMBER} - docker save -o hudozka-docker_container${DRONE_BUILD_NUMBER}.tar tmshv/hudozka:build-${DRONE_BUILD_NUMBER}
when:
branches: [master]
volumes: volumes:
- /var/run/docker.sock:/var/run/docker.sock - /var/run/docker.sock:/var/run/docker.sock
@@ -16,3 +14,5 @@ pipeline:
target: ~/Hudozka target: ~/Hudozka
source: hudozka-docker_container${DRONE_BUILD_NUMBER}.tar source: hudozka-docker_container${DRONE_BUILD_NUMBER}.tar
secrets: [scp_key] secrets: [scp_key]
when:
branch: master
package-lock.json
Generated
-5
View File
@@ -10880,11 +10880,6 @@
"koa-compose": "^3.0.0" "koa-compose": "^3.0.0"
} }
}, },
"koa-query": {
"version": "0.0.2",
"resolved": "http://storage.mds.yandex.net/get-npm/66641/koa-query-0.0.2.tgz",
"integrity": "sha1-YjMfgPchJgduorD964WKQJojeLM="
},
"koa-route": { "koa-route": {
"version": "3.2.0", "version": "3.2.0",
"resolved": "http://storage.mds.yandex.net/get-npm/45674/koa-route-3.2.0.tgz", "resolved": "http://storage.mds.yandex.net/get-npm/45674/koa-route-3.2.0.tgz",
package.json
-1
View File
@@ -35,7 +35,6 @@
"koa-helmet": "^1.0.0", "koa-helmet": "^1.0.0",
"koa-logger": "^2.0.0", "koa-logger": "^2.0.0",
"koa-mount": "^2.0.0", "koa-mount": "^2.0.0",
"koa-query": "0.0.2",
"koa-route": "^3.1.0", "koa-route": "^3.1.0",
"koa-session": "^4.0.0", "koa-session": "^4.0.0",
"koa-static": "^3.0.0", "koa-static": "^3.0.0",
src/routes/index.js
+5 -6
View File
@@ -10,15 +10,14 @@ export function queryObject() {
const processors = [toTrue, toFalse] const processors = [toTrue, toFalse]
return async(ctx, next) => { return async(ctx, next) => {
let query = ctx.query
ctx.query = Object ctx.query = Object
.keys(query) .keys(ctx.query)
.reduce((query, key) => assign( .reduce((query, key) => assign(
query, query,
key, key,
processors processors
.reduce((value, fn) => fn(value), query[key]) .reduce((value, fn) => fn(value), query[key])
), query) ), ctx.query)
await next() await next()
} }
@@ -26,9 +25,9 @@ export function queryObject() {
export function accepts(routes) { export function accepts(routes) {
return async function (ctx) { return async function (ctx) {
let request = ctx.request const types = Object
let types = Object.keys(routes) .keys(routes)
.filter(type => request.accepts(type)) .filter(type => ctx.request.accepts(type))
if (types.length) { if (types.length) {
let fn = routes[types[0]] let fn = routes[types[0]]
src/style/body-wrapper.scss
+1 -3
View File
@@ -1,12 +1,10 @@
@import "variables";
.body-wrapper { .body-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
background-color: white; background-color: white;
font-family: $text-font; font-family: var(--text-font);
font-size: var(--font-size-default); font-size: var(--font-size-default);
} }
src/style/components/Article.scss
+9 -11
View File
@@ -1,5 +1,3 @@
@import "../variables";
.Article { .Article {
--article-line-height: 1.75em; --article-line-height: 1.75em;
--article-quote-padding: var(--half-margin); --article-quote-padding: var(--half-margin);
@@ -8,7 +6,7 @@
hyphens: auto; hyphens: auto;
margin-bottom: $post-margin; margin-bottom: var(--post-margin);
&-Head { &-Head {
margin-bottom: 1.25em; margin-bottom: 1.25em;
@@ -29,8 +27,8 @@
--text-margin: 10px; --text-margin: 10px;
ul, ol { ul, ol {
margin-left: $half-margin; margin-left: var(--half-margin);
margin-bottom: $single-margin; margin-bottom: var(--single-margin);
li { li {
margin-bottom: var(--half-margin); margin-bottom: var(--half-margin);
@@ -54,8 +52,8 @@
blockquote { blockquote {
background-color: hsl(215, 10%, 96%); background-color: hsl(215, 10%, 96%);
padding: var(--article-quote-padding); padding: var(--article-quote-padding);
margin: $single-margin 0; margin: var(--single-margin) 0;
font-family: $title-font; font-family: var(--title-font);
font-style: italic; font-style: italic;
font-weight: normal; font-weight: normal;
font-size: var(--article-quote-font-size); font-size: var(--article-quote-font-size);
@@ -63,13 +61,13 @@
border-radius: var(--block-border-radius); border-radius: var(--block-border-radius);
cite { cite {
margin-top: $single-margin; margin-top: var(--single-margin);
display: block; display: block;
color: #aaa; color: #aaa;
font-size: initial; font-size: initial;
font-family: $text-font; font-family: var(--text-font);
text-align: right; text-align: right;
margin-right: $single-margin; margin-right: var(--single-margin);
} }
p { p {
@@ -93,7 +91,7 @@
} }
} }
@media (max-width: $mobile-width) { @media (max-width: var(--mobile-width)) {
.Article { .Article {
--article-line-height: 1.5em; --article-line-height: 1.5em;
--article-quote-padding: .5em; --article-quote-padding: .5em;
src/style/components/ArticleCard.scss
+2 -4
View File
@@ -1,5 +1,3 @@
@import "../variables";
.ArticleCard { .ArticleCard {
--article-card-width: 30%; --article-card-width: 30%;
--article-card-image-height: 15em; --article-card-image-height: 15em;
@@ -78,7 +76,7 @@
// Tablet // Tablet
@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) { @media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
.ArticleCard { .ArticleCard {
--article-card-image-height: 12em; --article-card-image-height: 12em;
} }
@@ -90,7 +88,7 @@
// Mobile // Mobile
@media (max-width: $mobile-width) { @media (max-width: var(--mobile-width)) {
.ArticleCard { .ArticleCard {
--article-card-width: 100%; --article-card-width: 100%;
--article-card-margin: var(--single-margin) 0; --article-card-margin: var(--single-margin) 0;
src/style/components/HudozkaTitle.scss
+1 -3
View File
@@ -1,5 +1,3 @@
@import "../variables";
.HudozkaTitle { .HudozkaTitle {
--padding: var(--double-margin) 0; --padding: var(--double-margin) 0;
@@ -17,7 +15,7 @@
} }
} }
@media (max-width: $mobile-width) { @media (max-width: var(--mobile-width)) {
.HudozkaTitle { .HudozkaTitle {
--padding: 0 0 var(--double-margin); --padding: 0 0 var(--double-margin);
} }
src/style/components/PersonCard.scss
+2 -4
View File
@@ -1,5 +1,3 @@
@import "../variables";
.PersonCard { .PersonCard {
--person-card-width: 30%; --person-card-width: 30%;
--person-card-height: 24em; --person-card-height: 24em;
@@ -78,7 +76,7 @@
// Tablet // Tablet
@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) { @media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
.PersonCard { .PersonCard {
--person-card-height: 20em; --person-card-height: 20em;
} }
@@ -90,7 +88,7 @@
// Mobile // Mobile
@media (max-width: $mobile-width) { @media (max-width: var(--mobile-width)) {
.PersonCard { .PersonCard {
--person-card-width: 100%; --person-card-width: 100%;
} }
src/style/components/accessibility-control.scss
+4 -6
View File
@@ -1,12 +1,10 @@
@import "../variables";
.accessibility-control { .accessibility-control {
width: 100%; width: 100%;
padding: $single-margin; padding: var(--single-margin);
span { span {
margin-right: $single-margin; margin-right: var(--single-margin);
} }
span.active { span.active {
@@ -14,12 +12,12 @@
} }
&__block { &__block {
margin-bottom: $half-margin; margin-bottom: var(--half-margin);
} }
ul li { ul li {
display: inline; display: inline;
margin-right: $single-margin; margin-right: var(--single-margin);
} }
ul { ul {
src/style/components/album-collection.scss
+2 -4
View File
@@ -1,5 +1,3 @@
@import "../variables";
.album-collection{ .album-collection{
&__body{ &__body{
display: flex; display: flex;
@@ -8,11 +6,11 @@
justify-content: flex-start; justify-content: flex-start;
align-items:center; align-items:center;
margin: 0 0 $double-margin; margin: 0 0 var(--double-margin);
} }
&__title{ &__title{
text-align: center; text-align: center;
margin: $single-margin 0; margin: var(--single-margin )0;
} }
} }
src/style/components/album.scss
+5 -7
View File
@@ -1,13 +1,11 @@
@import "../variables";
.album { .album {
margin-bottom: $double-margin; margin-bottom: var(--double-margin);
&__head { &__head {
margin-bottom: 1.25em; margin-bottom: 1.25em;
h3 { h3 {
font-size: $biggest-font-size; font-size: var(--biggest-font-size);
text-align: center; text-align: center;
} }
@@ -17,7 +15,7 @@
} }
a { a {
color: $dark-color; color: var(--dark-color);
border-bottom: none; border-bottom: none;
} }
} }
@@ -28,7 +26,7 @@
max-height: 40em; max-height: 40em;
display: block; display: block;
margin: 1.25em auto $small-margin; margin: 1.25em auto var(--small-margin);
} }
p{ p{
@@ -37,7 +35,7 @@
} }
} }
@media (max-width: $mobile-width) { @media (max-width: var(--mobile-width)) {
.album { .album {
&__body { &__body {
img { img {
src/style/components/breadcrumbs.scss
+12 -14
View File
@@ -1,17 +1,15 @@
@import "../variables";
$font-size: 0.75em;
$item-active-color: $link-color;
$item-inactive-color: $inactive-link-color;
$separator: '⟶';
$mobile-separator: '>';
breadcrumbs{ breadcrumbs{
--font-size: 0.75em;
--item-active-color: var(--link-color);
--item-inactive-color: var(--inactive-link-color);
--separator: '⟶';
--mobile-separator: '>';
padding: .35em 0 0; padding: .35em 0 0;
color: $item-inactive-color; color: var(--item-inactive-color);
a { a {
color: $item-active-color; color: var(--item-active-color);
} }
ul{ ul{
@@ -21,22 +19,22 @@ breadcrumbs{
display: inline-block; display: inline-block;
&:not(:first-child):before{ &:not(:first-child):before{
content: $separator; content: var(--separator);
margin-left: .4em; margin-left: .4em;
} }
} }
} }
} }
@media screen and (max-width: $mobile-width) { @media screen and (max-width: var(--mobile-width)) {
breadcrumbs{ breadcrumbs{
margin: 0; margin: 0;
font-size: $font-size; font-size: var(--font-size);
ul{ ul{
li { li {
&:not(:first-child):before{ &:not(:first-child):before{
content: $mobile-separator; content: var(--mobile-separator);
margin-left: .2em; margin-left: .2em;
} }
} }
src/style/components/document-row.scss
+3 -5
View File
@@ -1,5 +1,3 @@
@import "../variables";
.document-row { .document-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -20,7 +18,7 @@
img { img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
box-shadow: $white-shadow; box-shadow: var(--white-shadow);
} }
} }
@@ -39,11 +37,11 @@
.document-row__file-info { .document-row__file-info {
width: 25%; width: 25%;
flex-grow: 1; flex-grow: 1;
font-size: $smaller-font-size; font-size: var(--smaller-font-size);
text-align: right; text-align: right;
} }
@media (max-width: $mobile-width) { @media (max-width: var(--mobile-width)) {
.document-row__file { .document-row__file {
margin-left: var(--half-margin); margin-left: var(--half-margin);
} }
src/style/components/document.scss
+6 -8
View File
@@ -1,11 +1,9 @@
@import "../variables";
.document { .document {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0; padding: 0;
margin-bottom: $double-margin; margin-bottom: var(--double-margin);
} }
.document__image{ .document__image{
@@ -13,7 +11,7 @@
//width: 20em; //width: 20em;
//height: 20em; //height: 20em;
margin-bottom: $single-margin; margin-bottom: var(--single-margin);
//display: flex; //display: flex;
//justify-content: center; //justify-content: center;
@@ -23,7 +21,7 @@
img { img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
box-shadow: $white-shadow; box-shadow: var(--white-shadow);
} }
} }
@@ -39,11 +37,11 @@
} }
.document__file-info { .document__file-info {
font-size: $smaller-font-size; font-size: var(--smaller-font-size);
} }
@media (max-width: $mobile-width) { @media (max-width: var(--mobile-width)) {
.document { .document {
margin: 0 $single-margin/2 $single-margin; margin: 0 var(--single-margin) var(--single-margin);
} }
} }
src/style/components/documents-container.scss
+3 -5
View File
@@ -1,10 +1,8 @@
@import "../variables";
.documents-container { .documents-container {
margin-bottom: $post-margin; margin-bottom: var(--post-margin);
&__head { &__head {
margin-bottom: $double-margin; margin-bottom: var(--double-margin);
} }
&__body { &__body {
@@ -14,7 +12,7 @@
} }
} }
@media (max-width: $mobile-width) { @media (max-width: var(--mobile-width)) {
.documents-container { .documents-container {
} }
} }
src/style/components/footer-links.scss
+2 -4
View File
@@ -1,12 +1,10 @@
@import "../variables";
.footer-links { .footer-links {
&__header { &__header {
margin-bottom: $single-margin; margin-bottom: var(--single-margin);
} }
&__link { &__link {
margin-bottom: $half-margin; margin-bottom: var(--half-margin);
} }
ul { ul {
src/style/components/gallery-item.scss
+3 -9
View File
@@ -1,14 +1,8 @@
@import "../variables";
$img-max-width: 500px;
$double-margin-half: $double-margin / 2;
$percentage: 25%;
.gallery-item { .gallery-item {
box-sizing: padding-box; box-sizing: padding-box;
padding: 0; padding: 0;
margin: 0 $single-margin $double-margin; margin: 0 var(--single-margin) var(--double-margin);
a.invisible { a.invisible {
border-bottom: none; border-bottom: none;
@@ -16,8 +10,8 @@ $percentage: 25%;
} }
} }
@media screen and (max-width: $mobile-width) { @media screen and (max-width: var(--mobile-width)) {
.gallery-item { .gallery-item {
margin: 0 0 $double-margin; margin: 0 0 var(--double-margin);
} }
} }
src/style/components/main-menu.scss
+12 -14
View File
@@ -1,7 +1,5 @@
@import "../variables";
.main-menu { .main-menu {
font-size: $normal-font-size; font-size: var(--normal-font-size);
list-style: none; list-style: none;
@@ -35,45 +33,45 @@
} }
a { a {
color: $dark-color; color: var(--dark-color);
border-color: lighten($dark-color, 60%); border-color: var(--dark-color);
&:hover { &:hover {
border-color: lighten($dark-color, 30%); border-color: var(--dark-color);
} }
} }
.selected { .selected {
font-weight: bold; font-weight: bold;
border-top: $menu-colored-mark-thickness solid $light-color; border-top: var(--menu-colored-mark-thickness) solid var(--light-color);
&.blue { &.blue {
border-top: $menu-colored-mark-thickness solid $blue-color; border-top: var(--menu-colored-mark-thickness) solid var(--blue-color);
} }
&.orange { &.orange {
border-top: $menu-colored-mark-thickness solid $orange-color; border-top: var(--menu-colored-mark-thickness) solid var(--orange-color);
} }
&.green { &.green {
border-top: $menu-colored-mark-thickness solid $green-color; border-top: var(--menu-colored-mark-thickness) solid var(--green-color);
} }
&.yellow { &.yellow {
border-top: $menu-colored-mark-thickness solid $yellow-color; border-top: var(--menu-colored-mark-thickness) solid var(--yellow-color);
} }
&.pink { &.pink {
border-top: $menu-colored-mark-thickness solid $pink-color; border-top: var(--menu-colored-mark-thickness) solid var(--pink-color);
} }
&.red { &.red {
border-top: $menu-colored-mark-thickness solid $red-color; border-top: var(--menu-colored-mark-thickness) solid var(--red-color);
} }
} }
} }
@media (max-width: $mobile-width) { @media (max-width: var(--mobile-width)) {
.main-menu{ .main-menu{
font-size: 1em; font-size: 1em;
} }
src/style/components/navigation.scss
+4 -6
View File
@@ -1,5 +1,3 @@
@import "../variables";
.navigation { .navigation {
width: 100%; width: 100%;
background-color: white; background-color: white;
@@ -12,14 +10,14 @@
} }
.navigation__right { .navigation__right {
color: $dark-color; color: var(--dark-color);
font-size: $normal-font-size; font-size: var(--normal-font-size);
margin-right: 1em; margin-right: 1em;
z-index: 1000; z-index: 1000;
} }
@media (max-width: $mobile-width) { @media (max-width: var(--mobile-width)) {
.navigation { .navigation {
background-color: white; background-color: white;
} }
@@ -29,7 +27,7 @@
} }
} }
@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) { @media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
@media screen and (orientation: portrait) { @media screen and (orientation: portrait) {
.navigation__right { .navigation__right {
display: none; display: none;
src/style/components/page-collective.scss
+3 -5
View File
@@ -1,12 +1,10 @@
@import "../variables";
.page-collective { .page-collective {
&.ng-leave { &.ng-leave {
animation: slideOutLeft $short-duration both ease-in; animation: slideOutLeft var(--short-duration) both ease-in;
} }
&.ng-enter { &.ng-enter {
animation: slideInRight $short-duration both ease-in; animation: slideInRight var(--short-duration) both ease-in;
} }
} }
@@ -16,7 +14,7 @@
} }
} }
@media (max-width: $mobile-width) { @media (max-width: var(--mobile-width)) {
.page-collective { .page-collective {
&__collective-image { &__collective-image {
display: none; display: none;
src/style/components/page-schedule.scss
+2 -4
View File
@@ -1,12 +1,10 @@
@import "../variables";
.page-schedule { .page-schedule {
&.ng-leave { &.ng-leave {
transform-origin: 0% 0%; transform-origin: 0% 0%;
animation: rotateFall $short-duration both ease-in; animation: rotateFall var(--short-duration) both ease-in;
} }
&.ng-enter { &.ng-enter {
animation: scaleUp $short-duration both ease-in; animation: scaleUp var(--short-duration) both ease-in;
} }
} }
src/style/components/schedule-table.scss
+31 -34
View File
@@ -1,29 +1,26 @@
@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 { .schedule-table {
margin-bottom: $double-margin; --current-week-day-color: var(--blue-color);
--cell-width: 9em;
--cell-tablet-width: 7.5em;
--group-cell-width: 4em;
--group-cell-tablet-width: 3em;
--row-padding: var(--single-margin) 0;
--current-day-column-border-thickness: 3px;
margin-bottom: var(--double-margin);
max-width: 70em; max-width: 70em;
overflow-x: auto; overflow-x: auto;
a{ a{
color: $dark-color; color: var(--dark-color);
} }
.lesson { .lesson {
margin-bottom: $half-margin; margin-bottom: var(--half-margin);
} }
.teacher { .teacher {
@@ -31,8 +28,8 @@ $current-day-column-border-thickness: 3px;
} }
.current { .current {
border-left: $current-day-column-border-thickness solid; border-left: var(--current-day-column-border-thickness) solid;
border-right: $current-day-column-border-thickness solid; border-right: var(--current-day-column-border-thickness) solid;
} }
&__body { &__body {
@@ -46,8 +43,8 @@ $current-day-column-border-thickness: 3px;
} }
&__body-group{ &__body-group{
min-width: $group-cell-width; min-width: var(--group-cell-width);
padding: $row-padding; padding: var(--row-padding);
text-align: center; text-align: center;
@@ -58,14 +55,14 @@ $current-day-column-border-thickness: 3px;
} }
&__head-record { &__head-record {
min-width: $cell-width; min-width: var(--cell-width);
max-width: $cell-width; max-width: var(--cell-width);
padding: $row-padding; padding: var(--row-padding);
text-align: center; text-align: center;
& > .group { & > .group {
min-width: $group-cell-width; min-width: var(--group-cell-width);
} }
.date { .date {
@@ -75,19 +72,19 @@ $current-day-column-border-thickness: 3px;
} }
&__record{ &__record{
min-width: $cell-width; min-width: var(--cell-width);
max-width: $cell-width; max-width: var(--cell-width);
padding: $row-padding; padding: var(--row-padding);
text-align: center; text-align: center;
} }
&__course{ &__course{
margin-bottom: $half-margin; margin-bottom: var(--half-margin);
} }
} }
@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) { @media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
.schedule-table { .schedule-table {
min-width: 900px; min-width: 900px;
@@ -103,16 +100,16 @@ $current-day-column-border-thickness: 3px;
&__head{ &__head{
& > div{ & > div{
min-width: $cell-tablet-width; min-width: var(--cell-tablet-width);
} }
& > .group{ & > .group{
min-width: $group-cell-tablet-width; min-width: var(--group-cell-tablet-width);
} }
} }
&__body-group{ &__body-group{
min-width: $group-cell-tablet-width; min-width: var(--group-cell-tablet-width);
p.name { p.name {
font-size: 1em; font-size: 1em;
@@ -120,7 +117,7 @@ $current-day-column-border-thickness: 3px;
} }
&__record{ &__record{
min-width: $cell-tablet-width; min-width: var(--cell-tablet-width);
} }
} }
} }
src/style/components/timeline-record.scss
+2 -4
View File
@@ -1,9 +1,7 @@
@import "../variables";
.timeline__record { .timeline__record {
margin: 0 0 $post-margin; margin: 0 0 var(--post-margin);
.date { .date {
color: $light-color; color: var(--light-color);
} }
} }
src/style/components/timeline.scss
+5 -7
View File
@@ -1,9 +1,7 @@
@import "../variables";
.timeline{ .timeline{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: $double-margin auto; margin: var(--double-margin) auto;
} }
.timeline__footer{ .timeline__footer{
@@ -18,12 +16,12 @@
width: 100px; width: 100px;
height: 40px; height: 40px;
border: 2px solid $dark-color; border: 2px solid var(--dark-color);
padding: 0 10px; padding: 0 10px;
color: $dark-color; color: var(--dark-color);
background: $lighter-color; background: var(--lighter-color);
font-size: $normal-font-size; font-size: var(--normal-font-size);
&:hover { &:hover {
background: gainsboro; background: gainsboro;
src/style/content.scss
+11 -14
View File
@@ -1,26 +1,24 @@
@import "variables";
.content { .content {
margin: 0 auto 1em; margin: 0 auto 1em;
&.content_full{ &.content_full{
width: $content-full; width: var(--content-full);
} }
&.content_wide{ &.content_wide{
width: $content-wide; width: var(--content-wide);
} }
&.content_semi-wide{ &.content_semi-wide{
width: $content-semi-wide; width: var(--content-semi-wide);
} }
&.content_thin{ &.content_thin{
width: $content-thin; width: var(--content-thin);
} }
&.content--padding-top--menu{ &.content--padding-top--menu{
padding-top: $menu-thickness; padding-top: var(--menu-thickness);
} }
} }
@@ -42,21 +40,20 @@
animation: smallSlideInFromTop 350ms ease-out; animation: smallSlideInFromTop 350ms ease-out;
} }
@media screen and (max-width: var(--mobile-width)) {
@media screen and (max-width: $mobile-width) { --content-mobile: 95%;
$content-mobile: 95%;
.content { .content {
&.content_wide{ &.content_wide{
width: $content-mobile; width: var(--content-mobile);
} }
&.content_semi-wide{ &.content_semi-wide{
width: $content-mobile; width: var(--content-mobile);
} }
&.content_thin{ &.content_thin{
width: $content-mobile; width: var(--content-mobile);
} }
&.content--padding-top--menu{ &.content--padding-top--menu{
@@ -65,7 +62,7 @@
} }
} }
@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) { @media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
$thin-value: 70%; $thin-value: 70%;
$wide-value: 95%; $wide-value: 95%;
$semi-wide-value: 80%; $semi-wide-value: 80%;
src/style/footer.scss
+6 -6
View File
@@ -1,7 +1,7 @@
@import "variables"; @import "variables";
footer { footer {
padding: 0 $half-margin $half-margin; padding: 0 var(--half-margin) var(--half-margin);
position: relative; position: relative;
.footer-info { .footer-info {
@@ -9,19 +9,19 @@ footer {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
padding: $double-margin $single-margin 0; padding: var(--double-margin) var(--single-margin) 0;
margin-bottom: $double-margin; margin-bottom: var(--double-margin);
} }
.contacts { .contacts {
margin: $double-margin 0 $half-margin; margin: var(--double-margin) 0 var(--half-margin);
& > div { & > div {
padding: 0 $single-margin; padding: 0 var(--single-margin);
} }
p { p {
margin: $half-margin $single-margin; margin: var(--half-margin) var(--single-margin);
} }
} }
src/style/hmenu.scss
+10 -12
View File
@@ -1,14 +1,12 @@
@import "variables";
$hmenu-margin: 6px;
$hmenu-icon-width: 32px;
$hmenu-icon-height: 32px;
.no-scroll { .no-scroll {
overflow: hidden; overflow: hidden;
} }
.HMenu { .HMenu {
--hmenu-margin: 6px;
--hmenu-icon-width: 32px;
--hmenu-icon-height: 32px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@@ -39,7 +37,7 @@ $hmenu-icon-height: 32px;
.HMenu--folded.HMenu--open { .HMenu--folded.HMenu--open {
li { li {
margin: 0 0 $single-margin; margin: 0 0 var(--single-margin);
} }
} }
@@ -63,9 +61,9 @@ $hmenu-icon-height: 32px;
.HMenu__toggle { .HMenu__toggle {
position: absolute; position: absolute;
left: 0; left: 0;
height: $hmenu-icon-height; height: var(--hmenu-icon-height);
margin: $hmenu-margin; margin: var(--hmenu-margin);
display: flex; display: flex;
@@ -73,8 +71,8 @@ $hmenu-icon-height: 32px;
text-decoration: none; text-decoration: none;
border: none; border: none;
width: $hmenu-icon-width; width: var(--hmenu-icon-width);
height: $hmenu-icon-height; height: var(--hmenu-icon-height);
background-size: 100%; background-size: 100%;
} }
@@ -157,7 +155,7 @@ $hmenu-icon-height: 32px;
margin-bottom: 2em; margin-bottom: 2em;
} }
@media (max-width: $mobile-width) { @media (max-width: var(--mobile-width)) {
.HMenu--folded .HMenu__item { .HMenu--folded .HMenu__item {
max-width: 10em; max-width: 10em;
} }
src/style/kazimir/image.scss
+2 -4
View File
@@ -1,5 +1,3 @@
@import "../variables";
.kazimir__image { .kazimir__image {
--kazimir-caption-margin: 20px; --kazimir-caption-margin: 20px;
@@ -17,7 +15,7 @@
} }
figure { figure {
margin: 0 0 $single-margin; margin: 0 0 var(--single-margin);
} }
figcaption { figcaption {
@@ -31,7 +29,7 @@
} }
} }
@media screen and (max-width: $mobile-width) { @media screen and (max-width: var(--mobile-width)) {
.kazimir__image { .kazimir__image {
--kazimir-caption-margin: 10px; --kazimir-caption-margin: 10px;
} }
src/style/kazimir/video.scss
+2 -4
View File
@@ -1,12 +1,10 @@
@import "../variables";
.kazimir__video { .kazimir__video {
width: 100%; width: 100%;
height: 0; height: 0;
position: relative; position: relative;
padding-bottom: $embed-video-ratio; padding-bottom: var(--embed-video-ratio);
margin-bottom: $single-margin; margin-bottom: var(--single-margin);
iframe { iframe {
width: 100%; width: 100%;
src/style/main-image.scss
+1 -3
View File
@@ -1,5 +1,3 @@
@import "variables";
.main-image{ .main-image{
display: none; display: none;
@@ -20,7 +18,7 @@
//} //}
} }
@media (max-width: $mobile-width) { @media (max-width: var(--mobile-width)) {
.main-image { .main-image {
display: none; display: none;
} }
src/style/schedule-selector.scss
+1 -3
View File
@@ -1,8 +1,6 @@
@import "variables";
.schedule-selector { .schedule-selector {
text-align: center; text-align: center;
margin-bottom: $single-margin; margin-bottom: var(--single-margin);
label{ label{
margin: 0 .5em; margin: 0 .5em;
src/style/style.scss
+9 -9
View File
@@ -8,7 +8,7 @@
@import "components/breadcrumbs"; @import "components/breadcrumbs";
@import "components/timeline"; @import "components/timeline";
@import "components/timeline-record"; @import "components/timeline-record";
@import "components/timeline-record-instagram"; //@import "components/timeline-record-instagram";
@import "components/schedule-table"; @import "components/schedule-table";
@import "components/footer-links"; @import "components/footer-links";
@import "components/Article"; @import "components/Article";
@@ -46,14 +46,14 @@
// THEMES // THEMES
@import "themes/theme-default"; @import "themes/theme-default";
@import "themes/theme-accessibility-black-white"; //@import "themes/theme-accessibility-black-white";
@import "themes/theme-accessibility-white-black"; //@import "themes/theme-accessibility-white-black";
@import "themes/theme-accessibility-font-big"; //@import "themes/theme-accessibility-font-big";
@import "themes/theme-accessibility-font-biggest"; //@import "themes/theme-accessibility-font-biggest";
@import "themes/theme-accessibility-font-sans"; //@import "themes/theme-accessibility-font-sans";
@import "themes/theme-accessibility-font-serif"; //@import "themes/theme-accessibility-font-serif";
@import "themes/theme-accessibility-no-image"; //@import "themes/theme-accessibility-no-image";
@import "themes/theme-accessibility-kerning-big"; //@import "themes/theme-accessibility-kerning-big";
@import "marker/MarkerTable"; @import "marker/MarkerTable";
src/style/themes/theme-default.scss
+13 -15
View File
@@ -1,18 +1,16 @@
@import "../variables";
.theme-default { .theme-default {
h1, h2{ h1, h2{
font-family: $title-font; font-family: var(--title-font);
} }
a { a {
color: $dark-color; color: var(--dark-color);
text-decoration: none; text-decoration: none;
border-bottom: 1px solid lighten($dark-color, 60%); border-bottom: 1px solid var(--link-color);
&:hover { &:hover {
border-bottom: 2px solid $dark-color; border-bottom: 2px solid var(--dark-color);
} }
&:active { &:active {
@@ -34,7 +32,7 @@
.schedule-table { .schedule-table {
a{ a{
color: $dark-color; color: var(--dark-color);
} }
.lesson { .lesson {
@@ -42,7 +40,7 @@
} }
.current { .current {
border-color: $current-week-day-color; border-color: var(--current-week-day-color);
} }
&__head{ &__head{
@@ -53,23 +51,23 @@
&__body-row{ &__body-row{
&:nth-child(even) { &:nth-child(even) {
background-color: $schedule-row-color; background-color: var(--schedule-row-color);
} }
} }
} }
footer { footer {
color: $light-color; color: var(--light-color);
background-color: $darker-color; background-color: var(--darker-color);
font-size: $smaller-font-size; font-size: var(--smaller-font-size);
a { a {
color: $light-color; color: var(--light-color);
border-bottom-color: darken($light-color, 50%); border-bottom-color: var(--light-color);
&:hover { &:hover {
border-bottom-color: $light-color; border-bottom-color: var(--light-color);
} }
} }
} }
src/style/variables.scss
+68 -82
View File
@@ -1,76 +1,39 @@
//SIZE
$mobile-width: 31.25em;
$desktop-width: 59.99999em;
$tablet-min-width: 31.25em;
$tablet-max-width: 64em;
$content-full: 100%;
$content-wide: 90%;
$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: hsl(0, 0%, 20%);
$darker-color: hsl(0, 0%, 10%);
$light-color: hsl(0, 0%, 80%);
$lighter-color: hsl(0, 0%, 100%);
$blue-color: rgb(63, 156, 234);
$orange-color: rgb(240, 160, 65);
$green-color: rgb(92, 190, 64);
$yellow-color: rgb(255, 238, 0);
$pink-color: rgb(246, 85, 160);
$magenta-color: rgb(214, 39, 246);
$red-color: rgb(246, 27, 20);
$gray-color: rgb(153, 154, 160);
$link-color: $blue-color;
$inactive-link-color: $light-color;
$schedule-row-color: hsl(210, 55%, 90%);
//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;
$smaller-font-size: 0.9rem;
$normal-font-size: 1.0rem;
$bigger-font-size: 1.2rem;
$big-font-size: 1.5rem;
$biggest-font-size: 2.25rem;
//MENU
$menu-thickness: 2.5em;
$menu-colored-mark-thickness: 4px;
$menu-inactive-item-color: hsl(0, 0%, 50%);
//ANIMATION
$short-duration: 0.3s;
@media (max-width: $mobile-width) {
//FONTS
$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;
}
:root { :root {
//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;
--smaller-font-size: 0.9rem;
--normal-font-size: 1.0rem;
--bigger-font-size: 1.2rem;
--big-font-size: 1.5rem;
--biggest-font-size: 2.25rem;
//MENU
--menu-thickness: 2.5em;
--menu-colored-mark-thickness: 4px;
--menu-inactive-item-color: hsl(0, 0%, 50%);
//ANIMATION
$short-duration: 0.3s;
//SIZE
--mobile-width: 31.25em;
--desktop-width: 59.99999em;
--tablet-min-width: 31.25em;
--tablet-max-width: 64em;
--content-full: 100%;
--content-wide: 90%;
--content-semi-wide: 70%;
--content-thin: 60%;
--embed-video-ratio: 56.25%;
--text-color: #303030; --text-color: #303030;
--text-color-second: #ccc; --text-color-second: #ccc;
@@ -83,24 +46,47 @@ $short-duration: 0.3s;
--font-size-h3: 1.5rem; --font-size-h3: 1.5rem;
//COLOR //COLOR
--dark-color: $dark-color; --dark-color: hsl(0, 0%, 20%);
--darker-color: $darker-color; --darker-color: hsl(0, 0%, 10%);
--light-color: $light-color; --light-color: hsl(0, 0%, 80%);
--lighter-color: $lighter-color; --lighter-color: hsl(0, 0%, 100%);
--link-color: lighten(hsl(0, 0%, 20%), 60%);
--blue-color: rgb(63, 156, 234);
--orange-color: rgb(240, 160, 65);
--green-color: rgb(92, 190, 64);
--yellow-color: rgb(255, 238, 0);
--pink-color: rgb(246, 85, 160);
--magenta-color: rgb(214, 39, 246);
--red-color: rgb(246, 27, 20);
--gray-color: rgb(153, 154, 160);
--inactive-link-color: var(--light-color);
--schedule-row-color: hsl(210, 55%, 90%);
//MARGINS //MARGINS
--small-margin: $small-margin; --small-margin: .2em;
--half-margin: $half-margin; --half-margin: .5em;
--single-margin: $single-margin; --single-margin: 1.0em;
--double-margin: $double-margin; --double-margin: 2.0em;
--post-margin: $post-margin; --post-margin: 5.0em;
//OTHER //OTHER
--block-border-radius: 3px; --block-border-radius: 3px;
} }
@media (max-width: $mobile-width) { @media (max-width: var(--mobile-width)) {
:root { :root {
//FONTS
--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;
--font-size-h1: 1.75rem; --font-size-h1: 1.75rem;
--font-size-h2: 1.50rem; --font-size-h2: 1.50rem;
--font-size-h3: 1.25rem; --font-size-h3: 1.25rem;