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

scss variables converted to css variables

Browse Source
This commit is contained in:
tmshv committed 2018-05-23 10:22:28 +03:00
1 parent 6410409d47
commit c9bec06fef
31 files changed
+237 -313
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/style/body-wrapper.scss
+1 -3
View File
@@ -1,12 +1,10 @@
@import "variables";
.body-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: white;
font-family: $text-font;
font-family: var(--text-font);
font-size: var(--font-size-default);
}
src/style/components/Article.scss
+9 -11
View File
@@ -1,5 +1,3 @@
@import "../variables";
.Article {
--article-line-height: 1.75em;
--article-quote-padding: var(--half-margin);
@@ -8,7 +6,7 @@
hyphens: auto;
margin-bottom: $post-margin;
margin-bottom: var(--post-margin);
&-Head {
margin-bottom: 1.25em;
@@ -29,8 +27,8 @@
--text-margin: 10px;
ul, ol {
margin-left: $half-margin;
margin-bottom: $single-margin;
margin-left: var(--half-margin);
margin-bottom: var(--single-margin);
li {
margin-bottom: var(--half-margin);
@@ -54,8 +52,8 @@
blockquote {
background-color: hsl(215, 10%, 96%);
padding: var(--article-quote-padding);
margin: $single-margin 0;
font-family: $title-font;
margin: var(--single-margin) 0;
font-family: var(--title-font);
font-style: italic;
font-weight: normal;
font-size: var(--article-quote-font-size);
@@ -63,13 +61,13 @@
border-radius: var(--block-border-radius);
cite {
margin-top: $single-margin;
margin-top: var(--single-margin);
display: block;
color: #aaa;
font-size: initial;
font-family: $text-font;
font-family: var(--text-font);
text-align: right;
margin-right: $single-margin;
margin-right: var(--single-margin);
}
p {
@@ -93,7 +91,7 @@
}
}
@media (max-width: $mobile-width) {
@media (max-width: var(--mobile-width)) {
.Article {
--article-line-height: 1.5em;
--article-quote-padding: .5em;
src/style/components/ArticleCard.scss
+2 -4
View File
@@ -1,5 +1,3 @@
@import "../variables";
.ArticleCard {
--article-card-width: 30%;
--article-card-image-height: 15em;
@@ -78,7 +76,7 @@
// 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 {
--article-card-image-height: 12em;
}
@@ -90,7 +88,7 @@
// Mobile
@media (max-width: $mobile-width) {
@media (max-width: var(--mobile-width)) {
.ArticleCard {
--article-card-width: 100%;
--article-card-margin: var(--single-margin) 0;
src/style/components/HudozkaTitle.scss
+1 -3
View File
@@ -1,5 +1,3 @@
@import "../variables";
.HudozkaTitle {
--padding: var(--double-margin) 0;
@@ -17,7 +15,7 @@
}
}
@media (max-width: $mobile-width) {
@media (max-width: var(--mobile-width)) {
.HudozkaTitle {
--padding: 0 0 var(--double-margin);
}
src/style/components/PersonCard.scss
+2 -4
View File
@@ -1,5 +1,3 @@
@import "../variables";
.PersonCard {
--person-card-width: 30%;
--person-card-height: 24em;
@@ -78,7 +76,7 @@
// 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 {
--person-card-height: 20em;
}
@@ -90,7 +88,7 @@
// Mobile
@media (max-width: $mobile-width) {
@media (max-width: var(--mobile-width)) {
.PersonCard {
--person-card-width: 100%;
}
src/style/components/accessibility-control.scss
+4 -6
View File
@@ -1,12 +1,10 @@
@import "../variables";
.accessibility-control {
width: 100%;
padding: $single-margin;
padding: var(--single-margin);
span {
margin-right: $single-margin;
margin-right: var(--single-margin);
}
span.active {
@@ -14,12 +12,12 @@
}
&__block {
margin-bottom: $half-margin;
margin-bottom: var(--half-margin);
}
ul li {
display: inline;
margin-right: $single-margin;
margin-right: var(--single-margin);
}
ul {
src/style/components/album-collection.scss
+2 -4
View File
@@ -1,5 +1,3 @@
@import "../variables";
.album-collection{
&__body{
display: flex;
@@ -8,11 +6,11 @@
justify-content: flex-start;
align-items:center;
margin: 0 0 $double-margin;
margin: 0 0 var(--double-margin);
}
&__title{
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 {
margin-bottom: $double-margin;
margin-bottom: var(--double-margin);
&__head {
margin-bottom: 1.25em;
h3 {
font-size: $biggest-font-size;
font-size: var(--biggest-font-size);
text-align: center;
}
@@ -17,7 +15,7 @@
}
a {
color: $dark-color;
color: var(--dark-color);
border-bottom: none;
}
}
@@ -28,7 +26,7 @@
max-height: 40em;
display: block;
margin: 1.25em auto $small-margin;
margin: 1.25em auto var(--small-margin);
}
p{
@@ -37,7 +35,7 @@
}
}
@media (max-width: $mobile-width) {
@media (max-width: var(--mobile-width)) {
.album {
&__body {
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{
--font-size: 0.75em;
--item-active-color: var(--link-color);
--item-inactive-color: var(--inactive-link-color);
--separator: '⟶';
--mobile-separator: '>';
padding: .35em 0 0;
color: $item-inactive-color;
color: var(--item-inactive-color);
a {
color: $item-active-color;
color: var(--item-active-color);
}
ul{
@@ -21,22 +19,22 @@ breadcrumbs{
display: inline-block;
&:not(:first-child):before{
content: $separator;
content: var(--separator);
margin-left: .4em;
}
}
}
}
@media screen and (max-width: $mobile-width) {
@media screen and (max-width: var(--mobile-width)) {
breadcrumbs{
margin: 0;
font-size: $font-size;
font-size: var(--font-size);
ul{
li {
&:not(:first-child):before{
content: $mobile-separator;
content: var(--mobile-separator);
margin-left: .2em;
}
}
src/style/components/document-row.scss
+3 -5
View File
@@ -1,5 +1,3 @@
@import "../variables";
.document-row {
display: flex;
flex-direction: row;
@@ -20,7 +18,7 @@
img {
max-width: 100%;
max-height: 100%;
box-shadow: $white-shadow;
box-shadow: var(--white-shadow);
}
}
@@ -39,11 +37,11 @@
.document-row__file-info {
width: 25%;
flex-grow: 1;
font-size: $smaller-font-size;
font-size: var(--smaller-font-size);
text-align: right;
}
@media (max-width: $mobile-width) {
@media (max-width: var(--mobile-width)) {
.document-row__file {
margin-left: var(--half-margin);
}
src/style/components/document.scss
+6 -8
View File
@@ -1,11 +1,9 @@
@import "../variables";
.document {
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
margin-bottom: $double-margin;
margin-bottom: var(--double-margin);
}
.document__image{
@@ -13,7 +11,7 @@
//width: 20em;
//height: 20em;
margin-bottom: $single-margin;
margin-bottom: var(--single-margin);
//display: flex;
//justify-content: center;
@@ -23,7 +21,7 @@
img {
max-width: 100%;
max-height: 100%;
box-shadow: $white-shadow;
box-shadow: var(--white-shadow);
}
}
@@ -39,11 +37,11 @@
}
.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 {
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 {
margin-bottom: $post-margin;
margin-bottom: var(--post-margin);
&__head {
margin-bottom: $double-margin;
margin-bottom: var(--double-margin);
}
&__body {
@@ -14,7 +12,7 @@
}
}
@media (max-width: $mobile-width) {
@media (max-width: var(--mobile-width)) {
.documents-container {
}
}
src/style/components/footer-links.scss
+2 -4
View File
@@ -1,12 +1,10 @@
@import "../variables";
.footer-links {
&__header {
margin-bottom: $single-margin;
margin-bottom: var(--single-margin);
}
&__link {
margin-bottom: $half-margin;
margin-bottom: var(--half-margin);
}
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 {
box-sizing: padding-box;
padding: 0;
margin: 0 $single-margin $double-margin;
margin: 0 var(--single-margin) var(--double-margin);
a.invisible {
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 {
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 {
font-size: $normal-font-size;
font-size: var(--normal-font-size);
list-style: none;
@@ -35,45 +33,45 @@
}
a {
color: $dark-color;
border-color: lighten($dark-color, 60%);
color: var(--dark-color);
border-color: var(--dark-color);
&:hover {
border-color: lighten($dark-color, 30%);
border-color: var(--dark-color);
}
}
.selected {
font-weight: bold;
border-top: $menu-colored-mark-thickness solid $light-color;
border-top: var(--menu-colored-mark-thickness) solid var(--light-color);
&.blue {
border-top: $menu-colored-mark-thickness solid $blue-color;
border-top: var(--menu-colored-mark-thickness) solid var(--blue-color);
}
&.orange {
border-top: $menu-colored-mark-thickness solid $orange-color;
border-top: var(--menu-colored-mark-thickness) solid var(--orange-color);
}
&.green {
border-top: $menu-colored-mark-thickness solid $green-color;
border-top: var(--menu-colored-mark-thickness) solid var(--green-color);
}
&.yellow {
border-top: $menu-colored-mark-thickness solid $yellow-color;
border-top: var(--menu-colored-mark-thickness) solid var(--yellow-color);
}
&.pink {
border-top: $menu-colored-mark-thickness solid $pink-color;
border-top: var(--menu-colored-mark-thickness) solid var(--pink-color);
}
&.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{
font-size: 1em;
}
src/style/components/navigation.scss
+4 -6
View File
@@ -1,5 +1,3 @@
@import "../variables";
.navigation {
width: 100%;
background-color: white;
@@ -12,14 +10,14 @@
}
.navigation__right {
color: $dark-color;
font-size: $normal-font-size;
color: var(--dark-color);
font-size: var(--normal-font-size);
margin-right: 1em;
z-index: 1000;
}
@media (max-width: $mobile-width) {
@media (max-width: var(--mobile-width)) {
.navigation {
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) {
.navigation__right {
display: none;
src/style/components/page-collective.scss
+3 -5
View File
@@ -1,12 +1,10 @@
@import "../variables";
.page-collective {
&.ng-leave {
animation: slideOutLeft $short-duration both ease-in;
animation: slideOutLeft var(--short-duration) both ease-in;
}
&.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 {
&__collective-image {
display: none;
src/style/components/page-schedule.scss
+2 -4
View File
@@ -1,12 +1,10 @@
@import "../variables";
.page-schedule {
&.ng-leave {
transform-origin: 0% 0%;
animation: rotateFall $short-duration both ease-in;
animation: rotateFall var(--short-duration) both ease-in;
}
&.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 {
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;
overflow-x: auto;
a{
color: $dark-color;
color: var(--dark-color);
}
.lesson {
margin-bottom: $half-margin;
margin-bottom: var(--half-margin);
}
.teacher {
@@ -31,8 +28,8 @@ $current-day-column-border-thickness: 3px;
}
.current {
border-left: $current-day-column-border-thickness solid;
border-right: $current-day-column-border-thickness solid;
border-left: var(--current-day-column-border-thickness) solid;
border-right: var(--current-day-column-border-thickness) solid;
}
&__body {
@@ -46,8 +43,8 @@ $current-day-column-border-thickness: 3px;
}
&__body-group{
min-width: $group-cell-width;
padding: $row-padding;
min-width: var(--group-cell-width);
padding: var(--row-padding);
text-align: center;
@@ -58,14 +55,14 @@ $current-day-column-border-thickness: 3px;
}
&__head-record {
min-width: $cell-width;
max-width: $cell-width;
padding: $row-padding;
min-width: var(--cell-width);
max-width: var(--cell-width);
padding: var(--row-padding);
text-align: center;
& > .group {
min-width: $group-cell-width;
min-width: var(--group-cell-width);
}
.date {
@@ -75,19 +72,19 @@ $current-day-column-border-thickness: 3px;
}
&__record{
min-width: $cell-width;
max-width: $cell-width;
padding: $row-padding;
min-width: var(--cell-width);
max-width: var(--cell-width);
padding: var(--row-padding);
text-align: center;
}
&__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 {
min-width: 900px;
@@ -103,16 +100,16 @@ $current-day-column-border-thickness: 3px;
&__head{
& > div{
min-width: $cell-tablet-width;
min-width: var(--cell-tablet-width);
}
& > .group{
min-width: $group-cell-tablet-width;
min-width: var(--group-cell-tablet-width);
}
}
&__body-group{
min-width: $group-cell-tablet-width;
min-width: var(--group-cell-tablet-width);
p.name {
font-size: 1em;
@@ -120,7 +117,7 @@ $current-day-column-border-thickness: 3px;
}
&__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 {
margin: 0 0 $post-margin;
margin: 0 0 var(--post-margin);
.date {
color: $light-color;
color: var(--light-color);
}
}
src/style/components/timeline.scss
+5 -7
View File
@@ -1,9 +1,7 @@
@import "../variables";
.timeline{
display: flex;
flex-direction: column;
margin: $double-margin auto;
margin: var(--double-margin) auto;
}
.timeline__footer{
@@ -18,12 +16,12 @@
width: 100px;
height: 40px;
border: 2px solid $dark-color;
border: 2px solid var(--dark-color);
padding: 0 10px;
color: $dark-color;
background: $lighter-color;
color: var(--dark-color);
background: var(--lighter-color);
font-size: $normal-font-size;
font-size: var(--normal-font-size);
&:hover {
background: gainsboro;
src/style/content.scss
+11 -14
View File
@@ -1,26 +1,24 @@
@import "variables";
.content {
margin: 0 auto 1em;
&.content_full{
width: $content-full;
width: var(--content-full);
}
&.content_wide{
width: $content-wide;
width: var(--content-wide);
}
&.content_semi-wide{
width: $content-semi-wide;
width: var(--content-semi-wide);
}
&.content_thin{
width: $content-thin;
width: var(--content-thin);
}
&.content--padding-top--menu{
padding-top: $menu-thickness;
padding-top: var(--menu-thickness);
}
}
@@ -42,21 +40,20 @@
animation: smallSlideInFromTop 350ms ease-out;
}
@media screen and (max-width: $mobile-width) {
$content-mobile: 95%;
@media screen and (max-width: var(--mobile-width)) {
--content-mobile: 95%;
.content {
&.content_wide{
width: $content-mobile;
width: var(--content-mobile);
}
&.content_semi-wide{
width: $content-mobile;
width: var(--content-mobile);
}
&.content_thin{
width: $content-mobile;
width: var(--content-mobile);
}
&.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%;
$wide-value: 95%;
$semi-wide-value: 80%;
src/style/footer.scss
+6 -6
View File
@@ -1,7 +1,7 @@
@import "variables";
footer {
padding: 0 $half-margin $half-margin;
padding: 0 var(--half-margin) var(--half-margin);
position: relative;
.footer-info {
@@ -9,19 +9,19 @@ footer {
flex-wrap: wrap;
justify-content: space-between;
padding: $double-margin $single-margin 0;
margin-bottom: $double-margin;
padding: var(--double-margin) var(--single-margin) 0;
margin-bottom: var(--double-margin);
}
.contacts {
margin: $double-margin 0 $half-margin;
margin: var(--double-margin) 0 var(--half-margin);
& > div {
padding: 0 $single-margin;
padding: 0 var(--single-margin);
}
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 {
overflow: hidden;
}
.HMenu {
--hmenu-margin: 6px;
--hmenu-icon-width: 32px;
--hmenu-icon-height: 32px;
display: flex;
flex-direction: row;
align-items: center;
@@ -39,7 +37,7 @@ $hmenu-icon-height: 32px;
.HMenu--folded.HMenu--open {
li {
margin: 0 0 $single-margin;
margin: 0 0 var(--single-margin);
}
}
@@ -63,9 +61,9 @@ $hmenu-icon-height: 32px;
.HMenu__toggle {
position: absolute;
left: 0;
height: $hmenu-icon-height;
height: var(--hmenu-icon-height);
margin: $hmenu-margin;
margin: var(--hmenu-margin);
display: flex;
@@ -73,8 +71,8 @@ $hmenu-icon-height: 32px;
text-decoration: none;
border: none;
width: $hmenu-icon-width;
height: $hmenu-icon-height;
width: var(--hmenu-icon-width);
height: var(--hmenu-icon-height);
background-size: 100%;
}
@@ -157,7 +155,7 @@ $hmenu-icon-height: 32px;
margin-bottom: 2em;
}
@media (max-width: $mobile-width) {
@media (max-width: var(--mobile-width)) {
.HMenu--folded .HMenu__item {
max-width: 10em;
}
src/style/kazimir/image.scss
+2 -4
View File
@@ -1,5 +1,3 @@
@import "../variables";
.kazimir__image {
--kazimir-caption-margin: 20px;
@@ -17,7 +15,7 @@
}
figure {
margin: 0 0 $single-margin;
margin: 0 0 var(--single-margin);
}
figcaption {
@@ -31,7 +29,7 @@
}
}
@media screen and (max-width: $mobile-width) {
@media screen and (max-width: var(--mobile-width)) {
.kazimir__image {
--kazimir-caption-margin: 10px;
}
src/style/kazimir/video.scss
+2 -4
View File
@@ -1,12 +1,10 @@
@import "../variables";
.kazimir__video {
width: 100%;
height: 0;
position: relative;
padding-bottom: $embed-video-ratio;
padding-bottom: var(--embed-video-ratio);
margin-bottom: $single-margin;
margin-bottom: var(--single-margin);
iframe {
width: 100%;
src/style/main-image.scss
+1 -3
View File
@@ -1,5 +1,3 @@
@import "variables";
.main-image{
display: none;
@@ -20,7 +18,7 @@
//}
}
@media (max-width: $mobile-width) {
@media (max-width: var(--mobile-width)) {
.main-image {
display: none;
}
src/style/schedule-selector.scss
+1 -3
View File
@@ -1,8 +1,6 @@
@import "variables";
.schedule-selector {
text-align: center;
margin-bottom: $single-margin;
margin-bottom: var(--single-margin);
label{
margin: 0 .5em;
src/style/style.scss
+9 -9
View File
@@ -8,7 +8,7 @@
@import "components/breadcrumbs";
@import "components/timeline";
@import "components/timeline-record";
@import "components/timeline-record-instagram";
//@import "components/timeline-record-instagram";
@import "components/schedule-table";
@import "components/footer-links";
@import "components/Article";
@@ -46,14 +46,14 @@
// THEMES
@import "themes/theme-default";
@import "themes/theme-accessibility-black-white";
@import "themes/theme-accessibility-white-black";
@import "themes/theme-accessibility-font-big";
@import "themes/theme-accessibility-font-biggest";
@import "themes/theme-accessibility-font-sans";
@import "themes/theme-accessibility-font-serif";
@import "themes/theme-accessibility-no-image";
@import "themes/theme-accessibility-kerning-big";
//@import "themes/theme-accessibility-black-white";
//@import "themes/theme-accessibility-white-black";
//@import "themes/theme-accessibility-font-big";
//@import "themes/theme-accessibility-font-biggest";
//@import "themes/theme-accessibility-font-sans";
//@import "themes/theme-accessibility-font-serif";
//@import "themes/theme-accessibility-no-image";
//@import "themes/theme-accessibility-kerning-big";
@import "marker/MarkerTable";
src/style/themes/theme-default.scss
+13 -15
View File
@@ -1,18 +1,16 @@
@import "../variables";
.theme-default {
h1, h2{
font-family: $title-font;
font-family: var(--title-font);
}
a {
color: $dark-color;
color: var(--dark-color);
text-decoration: none;
border-bottom: 1px solid lighten($dark-color, 60%);
border-bottom: 1px solid var(--link-color);
&:hover {
border-bottom: 2px solid $dark-color;
border-bottom: 2px solid var(--dark-color);
}
&:active {
@@ -34,7 +32,7 @@
.schedule-table {
a{
color: $dark-color;
color: var(--dark-color);
}
.lesson {
@@ -42,7 +40,7 @@
}
.current {
border-color: $current-week-day-color;
border-color: var(--current-week-day-color);
}
&__head{
@@ -53,23 +51,23 @@
&__body-row{
&:nth-child(even) {
background-color: $schedule-row-color;
background-color: var(--schedule-row-color);
}
}
}
footer {
color: $light-color;
background-color: $darker-color;
color: var(--light-color);
background-color: var(--darker-color);
font-size: $smaller-font-size;
font-size: var(--smaller-font-size);
a {
color: $light-color;
border-bottom-color: darken($light-color, 50%);
color: var(--light-color);
border-bottom-color: var(--light-color);
&: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 {
//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-second: #ccc;
@@ -83,24 +46,47 @@ $short-duration: 0.3s;
--font-size-h3: 1.5rem;
//COLOR
--dark-color: $dark-color;
--darker-color: $darker-color;
--light-color: $light-color;
--lighter-color: $lighter-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%);
--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
--small-margin: $small-margin;
--half-margin: $half-margin;
--single-margin: $single-margin;
--double-margin: $double-margin;
--post-margin: $post-margin;
--small-margin: .2em;
--half-margin: .5em;
--single-margin: 1.0em;
--double-margin: 2.0em;
--post-margin: 5.0em;
//OTHER
--block-border-radius: 3px;
}
@media (max-width: $mobile-width) {
@media (max-width: var(--mobile-width)) {
: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-h2: 1.50rem;
--font-size-h3: 1.25rem;