Skip to content

W
web
Commit 4b102327 authored by Murukesh Mohanan's avatar Murukesh Mohanan
Browse files
Options

Style years, use SCSS variables

parent d0b722d1
Pipeline #1529 failed with stage
    Hide whitespace changes
    Inline Side-by-side
    Showing with 68 additions and 81 deletions
    css/countdown.scss
    View file @ 4b102327
    --- ---
    --- ---
    #main section { #main section {
    width: 60vw; width: 60vw;
    height: 60vw; height: 60vw;
    line-height: initial; line-height: initial;
    } }
    #countdown { #countdown {
    position: relative; position: relative;
    margin: auto; margin: auto;
    text-align: center; text-align: center;
    width: 100%; width: 100%;
    height: 100%; height: 100%;
    } }
    #countdown-numbers { #countdown-numbers {
    display: inline-block; display: inline-block;
    position: relative; position: relative;
    top: 40%; top: 40%;
    text-align: center; text-align: center;
    } }
    .days { $fields: (
    font-size: 8vw; years: (
    color: mediumpurple; color: chocolate,
    stroke: mediumpurple; size: 8vw,
    } stroke-width 1.6%:
    ),
    .hours { days: (
    font-size: 6vw; color: mediumpurple,
    color: lawngreen; size: 6vw,
    stroke: lawngreen; stroke-width 1.2%:
    } ),
    hours: (
    .minutes { color: lawngreen,
    font-size: 4vw; size: 4vw,
    color: gold; stroke-width 0.8%:
    stroke: gold; ),
    } minutes: (
    color: gold,
    .seconds { size: 2vw,
    color: silver; stroke-width 0.6%:
    stroke: silver; ),
    } seconds: (
    color: silver,
    #days { size: initial,
    font-size: 8vw; stroke-width 0.4%:
    } ),
    );
    #hours {
    font-size: 6vw; @each $field, $value in $fields {
    } .#{$field} {
    font-size: map-get($value, "size");
    #minutes { color: map-get($value, "color");
    font-size: 4vw; stroke: map-get($value, "color");
    }
    ##{$field} {
    font-size: map-get($value, "size");
    }
    svg circle.#{$field} {
    stroke-width: map-get($value, "stroke-width");
    }
    } }
    svg { svg {
    position: absolute; position: absolute;
    top: 0; top: 0;
    right: 0; right: 0;
    width: 100%; width: 100%;
    height: 100%; height: 100%;
    transform: rotateY(-180deg) rotateZ(-90deg); transform: rotateY(-180deg) rotateZ(-90deg);
    } }
    svg circle { svg circle {
    /* stroke-linecap: round; */ /* stroke-linecap: round; */
    fill: none; fill: none;
    }
    svg circle.years {
    stroke-width: 1.6%;
    }
    svg circle.days {
    stroke-width: 1.2%;
    }
    svg circle.hours {
    stroke-width: 0.8%;
    }
    svg circle.minutes {
    stroke-width: 0.6%;
    }
    svg circle.seconds {
    stroke-width: 0.4%;
    } }
    @media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) { @media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) {
    #main section { #main section {
    width: auto; width: auto;
    } }
    } }
    @media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) { @media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) {
    #main section { #main section {
    max-width: 60vw; max-width: 60vw;
    } }
    } }
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment