//- Container
.container._fir
//-- Menu
.menu
.menu__item._seedling
.menu__item._sepal
.menu__item._linden
.menu__item._pine
.menu__item._palm
.menu__item._fir
.menu__item._rose
.menu__item._willow
.menu__item._sunflower
.menu__item._bell
.menu__item._poplar
//-- Burger
label.burger
input.burger__input(type='checkbox')
svg.strokeWrap(viewBox="30 30 40 40" xmlns='http://www.w3.org/2000/svg')
path.strokeWrap__stroke._first(d='M0 40h62c13 0 6 28-4 18L35 35')
path.strokeWrap__stroke._second(d='M0 50h70')
path.strokeWrap__stroke._third(d='M0 60h62c13 0 6-28-4-18L35 65')
//-- Seedling
.seedling
.rod
.circle._xl._bg_black._xl_margin
.circle._lg_rod._bg_black
.circle._md_rod._bg_black
.circle._sm_rod._bg_black
.circle._xs_rod._bg_red
.circle._xl_arc._bg_black
.circle._lg_arc._bg_black
.circle._xm_arc._bg_black
.circle._md_arc._bg_black
.circle._sm_arc._bg_black
.circle._xs_arc._bg_black
mixin numberBasisMix(numberSizeBasis, borderStyle)
.basis._left._bs_dash(class=`_left_${numberSizeBasis} _bs_${borderStyle}`)
.basis._right._bs_dot(class=`_right_${numberSizeBasis}`)
+numberBasisMix('1')
+numberBasisMix('2')
+numberBasisMix('3')
+numberBasisMix('4')
+numberBasisMix('5')
+numberBasisMix('6', 'solid')
+numberBasisMix('7', 'solid')
+numberBasisMix('8', 'solid')
.circle._bCircle._bg_red._b_circle_margin_1
.circle._bCircle._bg_black._b_circle_margin_2
.circle._bCircle._bg_black._b_circle_margin_3
.legs
.arc
//-- Sepal
.sepal
.rod
.arc
.arc__circle
.cup._center
.cup._left._l1
.kernel
.cup._left._l2
.kernel
.cup._left._l3
.kernel
.cup._left._l4
.kernel
.cup._r1
.cup._r2
.cup._r3
.brunch
//-- Linden
.linden
.leftRod
.leftRod__leftBruch
.circle._bg_black._cmlb
.centerRod
.bottomArc
.bottomArc__rightBranch
.crown._md_horizontal._bg_black._position_2
.circle._bg_red._center
.crown._sm._bg_red._position_1
.topArc
.topArc__leftBranch
.crown._sm._bg_black._position_3
.crown._md._bg_black._position_4
.circle._bg_red._center
.crown._lg._bg_red._position_5
.circle._bg_black._center
.basisBrunch
.rightRod
.rightRod__rightBruch
.circle._bg_red._cmrb
//-- Pine
.pine
.leftRod
.leftRod__rightBrunch
.crown._lg._bg_red._position_1
.kernel._bg_black
.basisBrunch
.centerRod
.centerRod__bottomLeftBrunch
.crown._md._bg_red._position_3
.kernel._bg_black
.basisBrunch
.centerRod__bottomRightBrunch
.crown._md._bg_black._position_4
.kernel._bg_red
.centerRod__topLeftBrunch
.crown._sm._bg_black._position_5
.kernel._bg_red
.centerBrunch
.centerBrunch__leftBrunch._bg_black
.circle._bg_red
.centerRod__topRightBrunch
.crown._sm._bg_red._position_6
.kernel._bg_black
.centerBrunch
.basisBrunch
.crown._xs._bg_black._position_7
.kernel._bg_red
.basisBrunch
.rightRod
.rightRod__leftBrunch
.crown._lg._bg_black._position_2
.kernel._bg_red
.crown__leftBrunch._bg_black
.circle._bg_black
//-- Palm
.palm
mixin palmRodMix(sizeName, kernelColor)
.rod(class=`_${sizeName}`)
.crown(class=`_${sizeName}`)
.kernel(class=`_bg_${kernelColor}`)
+palmRodMix('sm', 'red')
+palmRodMix('xl', 'black')
+palmRodMix('xm', 'red')
+palmRodMix('xs', 'black')
+palmRodMix('md', 'black')
.rod._lg
.crown._lg
.kernel._bg_red
.leftBrunch
.wave._left
.wave._right._top
.wave._left._top
.wave._right._top
.wave._left._top
.wave__topBrunch
.crown._cup
mixin arcMix(sizeName, side, circleColor)
.arc(class=`_${sizeName} _${side}`)
.arc__circle(class=`_bg_${circleColor}`)
+arcMix('lg', 'left', 'red')
+arcMix('sm', 'left', 'black')
+arcMix('sm', 'right', 'red')
+arcMix('lg', 'right', 'black')
//-- Fir
mixin crownsMix(side)
.crown._1
.crown._2
.crown._3
.crown._4
.crown._5
.crown._6
.crown._7
.crown._8
.crown._9(class=`_margin_${side}CW`)
.crown._10(class=`_margin_${side}CW`)
.fir
.centerRod
.sideRods__crownsWrap._centerCW
+crownsMix('')
.sideRods
.kernel._bottomR._bg_black
.sideRods__crownsWrap._leftCW
+crownsMix('')
.sideRods__crownsWrap._rightCW
+crownsMix('right')
.angleLeftRod
.angleLeftRod__leftBtunch
.kernel._centered._bg_red
.angleRightRod
.angleLeftRod__rightBtunch
.kernel._centered._bg_red
.crown._1._margin_rightB
.crown._2._margin_rightB
.crown._3._margin_rightB
.centerRod__basis._bg_red
.kernel._bottom._centered._bg_black
.roots
.constellation
.line
.star._small._bg_red
.star._big._bg_black
.moon
//-- Rose
.rose
.rod
.pollen
.bud
mixin padsMix(padSide, positionNumber, brunchSide)
.pad(class=`_${padSide} _position_${positionNumber}`)
.pad__brunch(class=`_${brunchSide}`)
.brunchCircle
+padsMix('left', '1', 'right')
+padsMix('right', '2', 'left')
+padsMix('left', '3', 'right')
+padsMix('right', '4', 'left')
+padsMix('left', '5', 'right')
//-- Willow
mixin trunksMix(trunkSide, tailSide)
.trunk(class=`_${trunkSide}`)
.trunk__tail(class=`_${tailSide}`)
.trunk__basis
.trunk__crownsWrap._left
.crown._1
.crown._2
.crown._3
.crown._4
.crown._5
.crown._6
.crown._7
.crown._8
.crown._9
.crown._10
.trunk__crownsWrap._right
.crown._1
.crown._2
.crown._3
.crown._4
.crown._5
.crown._6
.crown._7
.crown._8
.crown._9
.crown._10
.willow
.rod
+trunksMix('top', 'left')
.rod__leftBrunch
+trunksMix('left', '')
.rod__rightBrunch
+trunksMix('right', '')
//-- Sunflower
.sunflower
.rod
.halo
.head
mixin brunchsMix(brunchSide, positionNumber)
.brunch(class=`_${brunchSide} _position_${positionNumber}`)
.sheet._left
.sheet._right
+brunchsMix('left', '1')
+brunchsMix('right', '2')
+brunchsMix('left', '3')
//-- Bell
.bell
.crown._position_1
.crown__rod
.arc._left
.tongue._bg_red
.arc__rightBrunch
.tongue._bg_black
.crown._position_2
.crown__rod
.arc._right
.tongue._bg_black
.arc__circleBrunch
.tongue._bg_red
mixin crownsMix(number, arcSide)
.crown(class=`_position_${number}`)
.crown__rod
.arc(class=`_${arcSide}`)
.tongue._bg_red
+crownsMix('3', 'left')
+crownsMix('4', 'right')
+crownsMix('5', 'left')
+crownsMix('6', 'right')
+crownsMix('7', 'left')
+crownsMix('8', 'right')
.crown._position_9
.crown__rod
.arc._left
.tongue._bg_red
.crown__leg
//-- Poplar
.poplar
.rod
.circle._center
.circle._bottom._center
.rod__arc._top
.rod__arc._bottom
.rod__basis
.brunch._left
.circle._left._center_v
.brunch__trunk
.brunch._right
.circle._right._center_v
.brunch__trunk._top._right
mixin crownsWrapMix(vSide, hSide, s1, s2, s3, s4, s5, s6, s7, s8)
.crownsWrap(class=`_${vSide} _${hSide}`)
.crown(class=`_size_${s1}`)
.crown._position_2(class=`_size_${s2}`)
.crown._position_3(class=`_size_${s3}`)
.crown._position_4(class=`_size_${s4}`)
.crown._position_5(class=`_size_${s5}`)
.crown._position_6(class=`_size_${s6}`)
.crown._position_7(class=`_size_${s7}`)
.crown._position_8(class=`_size_${s8}`)
+crownsWrapMix('top', 'left', 1, 2, 3, 4, 5, 6, 7, 8)
+crownsWrapMix('top', 'right', 1, 2, 3, 4, 5, 6, 7, 8)
+crownsWrapMix('bottom', 'left', 8, 7, 6, 5, 4, 3, 2, 1)
+crownsWrapMix('bottom', 'right', 8, 7, 6, 5, 4, 3, 2, 1)
//- Social links
.social
ul.socialList
li.socialList__item
a.socialList__link(href="https://github.com/Kerthin?tab=overview&from=2021-05-01&to=2021-05-05" target="_blank")
svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
path(d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22")
li.socialList__item
a.socialList__link(href="https://codepen.io/Astap" target="_blank")
svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
polygon(points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2")
line(x1="12" y1="22" x2="12" y2="15.5")
polyline(points="22 8.5 12 15.5 2 8.5")
polyline(points="2 15.5 12 8.5 22 15.5")
line(x1="12" y1="2" x2="12" y2="8.5")
li.socialList__item
a.socialList__link(href="https://twitter.com/BelichenkoRoden" target="_blank")
svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
path(d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z")/*____________________________________________________________
# Auxiliary styles
# Container
## Menu
## Burger
## Seedling
## Sepal
## Linden
## Pine
## Palm
## Fir
## Rose
## Willow
## Sunflower
## Bell
## Poplar
____________________________________________________________*/
/*____________________________________________________________
# Auxiliary styles
____________________________________________________________*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f1eee2;
}
$itemBgPath : "https://rawcdn.githack.com/Kerthin/trees-templateSait/803681865fc0778a90cc3f4b0c21e872773a87a7/dist/image/trees";
._bg_black {
background-color: #000;
}
._bg_red {
background-color: #de162a;
}
/*____________________________________________________________
# Container
____________________________________________________________*/
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #f1eee2;
transition: 1s;
@mixin treeChoseNameMix($treeName) {
&._#{$treeName} {
.#{$treeName} {
display: block;
}
}
}
@include treeChoseNameMix(seedling);
@include treeChoseNameMix(sepal);
@include treeChoseNameMix(linden);
@include treeChoseNameMix(pine);
@include treeChoseNameMix(palm);
@include treeChoseNameMix(fir);
@include treeChoseNameMix(rose);
@include treeChoseNameMix(willow);
@include treeChoseNameMix(sunflower);
@include treeChoseNameMix(bell);
@include treeChoseNameMix(poplar);
.seedling,
.sepal,
.linden,
.pine,
.palm,
.fir,
.rose,
.willow,
.sunflower,
.bell,
.poplar {
display: none;
}
&.popup {
transform: scale(.9);
}
}
/*____________________________________________________________
## Menu
____________________________________________________________*/
.menu {
position: fixed;
width: 100%;
height: 100vh;
top: -130%;
background-color: #f1eee2;
transition: 1s;
z-index: 10;
&.popup {
top: 0;
transition-delay: .2s;
}
.menu__item {
float: left;
width: 25%;
height: 33.333333333%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
transition: .3s;
&:hover {
transform: scale(.9);
}
&.active {
background-color: #e0dabf;
}
@mixin menuItemBgMix($itemBg) {
&._#{$itemBg} {
background-image: url(#{$itemBgPath}/#{$itemBg}.png);
}
}
@include menuItemBgMix(seedling);
@include menuItemBgMix(sepal);
@include menuItemBgMix(linden);
@include menuItemBgMix(pine);
@include menuItemBgMix(palm);
@include menuItemBgMix(fir);
@include menuItemBgMix(rose);
@include menuItemBgMix(willow);
@include menuItemBgMix(sunflower);
@include menuItemBgMix(bell);
@include menuItemBgMix(poplar);
}
}
/*____________________________________________________________
## Burger
____________________________________________________________*/
.burger {
position: absolute;
right: 5px;
width: 50px;
height: 50px;
cursor: pointer;
z-index: 11;
.burger__input {
display: none;
outline: none;
&.checked {
+ .strokeWrap {
._first,
._third {
--length: 22.627416998;
--offset: -94.1149185097;
}
._second {
--length: 0;
--offset: -50;
}
}
}
}
.strokeWrap__stroke {
fill: none;
stroke: #000;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
--length: 24;
--offset: -38;
stroke-dasharray: var(--length) var(--total-length);
stroke-dashoffset: var(--offset);
transition: all .8s cubic-bezier(.645, .045, .355, 1);
&._first,
&._third {
--total-length: 126.64183044433594;
}
&._second {
--total-length: 70;
}
}
}
/*____________________________________________________________
## Seedling
____________________________________________________________*/
.seedling {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 470px;
height: 816px;
overflow: hidden;
.rod {
position: relative;
margin: 0 auto;
width: 4px;
height: 100%;
background-color: #000;
.basis {
position: absolute;
height: 324px;
bottom: 54px;
border: 2px #000;
z-index: 2;
}
._bs_dash {
border-style: dashed;
}
._bs_dot {
border-style: dotted;
}
._bs_solid {
border-style: solid;
}
.legs {
position: absolute;
bottom: -35px;
left: -34px;
width: 70px;
height: 70px;
border-radius: 50%;
border: 4px solid #000;
}
.circle {
position: absolute;
border-radius: 50%;
}
._bCircle {
left: -20.5px;
width: 43px;
height: 43px;
}
._xl {
left: -26.5px;
width: 55px;
height: 55px;
}
._xl_margin {
bottom: 446px;
}
._left {
border-right: 0;
}
._right {
border-left: 0;
}
@mixin sideItemMix($numberItem, $circleSize, $borderRadius) {
._left_#{$numberItem} {
width: #{$circleSize}px;
left: -#{$circleSize}px;
border-bottom-left-radius: #{$borderRadius}px 100%;
border-top-left-radius: #{$borderRadius}px 100%;
}
._right_#{$numberItem} {
width: #{$circleSize}px;
right: -#{$circleSize}px;
border-bottom-right-radius: #{$borderRadius}px 100%;
border-top-right-radius: #{$borderRadius}px 100%;
}
}
@include sideItemMix(1, 50, 105);
@include sideItemMix(2, 60, 125);
@include sideItemMix(3, 70, 145);
@include sideItemMix(4, 80, 165);
@include sideItemMix(5, 90, 185);
@include sideItemMix(6, 100, 205);
@include sideItemMix(7, 110, 225);
@include sideItemMix(8, 120, 245);
@mixin circleBrunchMix($sizeItem, $brunchName, $marginCircle, $circleSize, $bottomMargin) {
._#{$sizeItem}_#{$brunchName} {
left: #{$marginCircle}px;
width: #{$circleSize}px;
height: #{$circleSize}px;
bottom: #{$bottomMargin}px;
}
}
@include circleBrunchMix(xl, arc, -8.5, 48, 536);
@include circleBrunchMix(lg, arc, 23, 40, 616);
@include circleBrunchMix(xm, arc, 60, 34, 683);
@include circleBrunchMix(md, arc, 104, 26, 735);
@include circleBrunchMix(sm, arc, 153, 19, 770);
@include circleBrunchMix(xs, arc, 209, 12, 787);
@include circleBrunchMix(lg, rod, -14, 32, 592);
@include circleBrunchMix(md, rod, -12.5, 27, 673);
@include circleBrunchMix(sm, rod, -9, 22, 736);
@include circleBrunchMix(xs, rod, -7, 18, '');
@mixin basisCircleMarginMix($numberMargin, $bottomMargin) {
._b_circle_margin_#{$numberMargin} {
bottom: #{$bottomMargin}px;
}
}
@include basisCircleMarginMix(1, 286.25);
@include basisCircleMarginMix(2, 195.5);
@include basisCircleMarginMix(3, 102.75);
}
.arc {
position: absolute;
left: -46px;
top: 300px;
width: 778px;
height: 220px;
border-bottom-left-radius: 400px 230px;
border-bottom-right-radius: 400px 230px;
border: 4px solid #000;
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
transform: rotate(90deg);
}
}
@media screen and (orientation: landscape) and (max-height: 846px) {
.seedling {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (orientation: landscape) and (max-height: 682px) {
.seedling {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (orientation: landscape) and (max-height: 520px) {
.seedling {
transform: translate(-50%, -50%) scale(.4);
}
}
@media screen and (orientation: landscape) and (max-height: 356px) {
.seedling {
transform: translate(-50%, -50%) scale(.2);
}
}
@media screen and (max-width: 500px) {
.seedling {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (max-width: 375px) {
.seedling {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (max-width: 320px) {
.seedling {
transform: translate(-50%, -50%) scale(.5);
}
}
/*____________________________________________________________
## Sepal
____________________________________________________________*/
.sepal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 207px;
height: 818px;
.rod {
position: relative;
margin: 0 auto;
width: 4px;
height: 100%;
background-color: #000;
.arc {
position: absolute;
top: -160px;
left: -170px;
width: 340px;
height: 340px;
border: 4px solid #000;
border-radius: 50%;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
transform: rotate(45deg);
.arc__circle {
position: absolute;
top: 24px;
right: 35px;
width: 37px;
height: 37px;
border-radius: 50%;
background-color: #de162a;
}
}
.brunch {
position: absolute;
left: -54px;
bottom: 182px;
width: 108px;
height: 114px;
border: 4px solid #000;
border-top-color: transparent;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
.cup {
position: absolute;
border-radius: 50%;
// left: -20.5px;
width: 105px;
height: 105px;
background-color: #000;
z-index: 1;
&._center {
left: 50%;
transform: translateX(-50%);
}
&._left {
right: 1px;
}
&._l1 {
bottom: 586px;
}
&._l2 {
bottom: 469px;
}
&._l3 {
bottom: 352px;
}
&._l4 {
bottom: 235px;
}
&._r1 {
bottom: 526px;
}
&._r2 {
bottom: 409px;
}
&._r3 {
bottom: 292px;
}
.kernel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 37px;
height: 37px;
border-radius: 50%;
background-color: #de162a;
}
}
}
}
@media screen and (orientation: landscape) and (max-height: 846px) {
.sepal {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (orientation: landscape) and (max-height: 682px) {
.sepal {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (orientation: landscape) and (max-height: 520px) {
.sepal {
transform: translate(-50%, -50%) scale(.4);
}
}
@media screen and (orientation: landscape) and (max-height: 356px) {
.sepal {
transform: translate(-50%, -50%) scale(.2);
}
}
@media screen and (max-width: 414px) {
.sepal {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (max-width: 375px) {
.sepal {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (max-width: 320px) {
.sepal {
transform: translate(-50%, -50%) scale(.5);
}
}
/*____________________________________________________________
## Linden
____________________________________________________________*/
.linden {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 356px;
height: 884px;
.leftRod {
position: absolute;
bottom: 0;
left: 160px;
width: 4px;
height: 380px;
background-color: #000;
.leftRod__leftBruch {
position: absolute;
top: -80px;
right: 0;
width: 56px;
height: 80px;
border: 4px solid #000;
border-top: 0;
border-right: 0;
._cmlb {
top: -46px;
left: -25px;
}
}
}
.centerRod {
position: absolute;
bottom: 0;
left: 175px;
width: 4px;
height: 797px;
background-color: #000;
.bottomArc {
position: absolute;
bottom: 437px;
right: -85px;
width: 240px;
height: 70px;
border: 4px solid #000;
border-top: 0;
border-bottom-left-radius: 70px;
border-bottom-right-radius: 70px;
.bottomArc__rightBranch {
position: absolute;
top: -95px;
right: -4px;
width: 4px;
height: 95px;
background-color: #000;
._position_2 {
top: -101px;
left: -85px;
}
}
._position_1 {
bottom: 42px;
left: -28px;
}
}
.topArc {
position: absolute;
bottom: 488px;
left: 4px;
width: 145px;
height: 4px;
background-color: #000;
.topArc__leftBranch {
position: absolute;
bottom: 0;
left: -75px;
width: 150px;
height: 150px;
border: 4px solid #000;
border-radius: 50%;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
transform: rotate(45deg);
}
._position_3 {
bottom: 0;
right: -32px;
}
._position_4 {
bottom: 75px;
left: -125px;
}
}
._position_5 {
top: -87px;
left: -60px;
.basisBrunch {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 50%;
background-color: #000;
}
}
}
.rightRod {
position: absolute;
bottom: 0;
left: 192px;
width: 4px;
height: 362px;
background-color: #000;
.rightRod__rightBruch {
position: absolute;
top: -169px;
width: 32px;
height: 169px;
border: 4px solid #000;
border-top: 0;
border-left: 0;
._cmrb {
top: -46px;
right: -25px;
}
}
}
.circle {
position: absolute;
width: 46px;
height: 46px;
border-radius: 50%;
&._center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.crown {
position: absolute;
border-radius: 100px;
&._sm {
width: 62px;
height: 108px;
}
&._md {
width: 101px;
height: 178px;
}
&._lg {
width: 124px;
height: 218px;
}
&._md_horizontal {
width: 178px;
height: 101px;
}
}
}
@media screen and (orientation: landscape) and (max-height: 914px) {
.linden {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (orientation: landscape) and (max-height: 737px) {
.linden {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (orientation: landscape) and (max-height: 550px) {
.linden {
transform: translate(-50%, -50%) scale(.4);
}
}
@media screen and (orientation: landscape) and (max-height: 406px) {
.linden {
transform: translate(-50%, -50%) scale(.2);
}
}
@media screen and (max-width: 500px) {
.linden {
transform: translate(-50%, -50%) scale(.7);
}
}
@media screen and (max-width: 375px) {
.linden {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (max-width: 320px) {
.linden {
transform: translate(-50%, -50%) scale(.5);
}
}
/*____________________________________________________________
## Pipe
____________________________________________________________*/
.pine {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 456px;
height: 884px;
.leftRod {
position: absolute;
bottom: 0;
left: 262px;
width: 19px;
height: 410px;
border: 4px solid #000;
border-top-left-radius: 70px;
border-bottom: 0;
border-right: 0;
.leftRod__rightBrunch {
position: absolute;
top: -41px;
right: -101px;
width: 101px;
height: 41px;
border: 4px solid #000;
border-bottom-right-radius: 70px;
border-top: 0;
border-left: 0;
._position_1 {
top: -77px;
left: 23px;
}
}
}
.centerRod {
position: absolute;
left: 277px;
width: 4px;
height: 100%;
background-color: #000;
@mixin treeBrunchMix($brunchName, $marginBottom, $marginRight, $width, $height, $leftRadius, $rightRadius, $borderLeft, $borderRight, $positionNumber, $positionTop, $positionLeft, $positionRight) {
.centerRod__#{$brunchName}Brunch {
position: absolute;
bottom: #{$marginBottom}px;
right: #{$marginRight};
width: #{$width}px;
height: #{$height}px;
border: 4px solid #000;
border-bottom-left-radius: #{$leftRadius}px;
border-bottom-right-radius: #{$rightRadius}px;
border-top: 0;
border-left: #{borderLeft};
border-right: #{borderRight};
._position_#{$positionNumber} {
top: #{$positionTop}px;
left: #{$positionLeft}px;
right: #{$positionRight}px;
}
}
}
@include treeBrunchMix(bottomLeft, 473, 0, 90, 47, 70, '', '', 0, 3, -61, -63, '');
@include treeBrunchMix(bottomRight, 558, '', 95, 40, '', 70, 0, '', 4, -61, '', -63);
@include treeBrunchMix(topLeft, 609, 0, 83, 47, 70, '', '', 0, 5, -50, -51, '');
@include treeBrunchMix(topRight, 690, '', 88, 39, '', 70, 0, '', 6, -50, '', -51);
._position_7 {
bottom: 791px;
left: -37px;
}
}
.rightRod {
position: absolute;
bottom: 0;
left: 262px;
width: 40px;
height: 327px;
border: 4px solid #000;
border-top-right-radius: 70px;
border-bottom: 0;
border-left: 0;
.rightRod__leftBrunch {
position: absolute;
top: -47px;
left: -84px;
width: 84px;
height: 47px;
border: 4px solid #000;
border-bottom-left-radius: 70px;
border-top: 0;
border-right: 0;
._position_2 {
top: -77px;
right: 6px;
}
.crown__leftBrunch {
position: absolute;
top: 0;
left: -104px;
width: 104px;
height: 4px;
}
}
}
.circle {
position: absolute;
top: -22px;
width: 46px;
height: 46px;
border-radius: 50%;
}
.crown {
position: absolute;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
.basisBrunch {
position: absolute;
width: 4px;
height: 50%;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: #000;
}
.centerBrunch {
position: absolute;
top: -53px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 53px;
background-color: #000;
.centerBrunch__leftBrunch {
position: absolute;
top: 0;
right: 0;
width: 166px;
height: 4px;
}
}
@mixin crownSizeMix($sizeName, $sizeWidth, $sizeHeight, $kernelWidth) {
&._#{$sizeName} {
width: #{$sizeWidth}px;
height: #{$sizeHeight}px;
.kernel {
width: #{$kernelWidth}px;
}
}
}
@include crownSizeMix(lg, 152, 77, 76);
@include crownSizeMix(md, 122, 61, 61);
@include crownSizeMix(sm, 98, 50, 49);
@include crownSizeMix(xs, 78, 40, 39);
.kernel {
margin: 0 auto;
height: 50%;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
}
}
@media screen and (orientation: landscape) and (max-height: 914px) {
.pine {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (orientation: landscape) and (max-height: 737px) {
.pine {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (orientation: landscape) and (max-height: 550px) {
.pine {
transform: translate(-50%, -50%) scale(.4);
}
}
@media screen and (orientation: landscape) and (max-height: 406px) {
.pine {
transform: translate(-50%, -50%) scale(.2);
}
}
@media screen and (max-width: 500px) {
.pine {
transform: translate(-50%, -50%) scale(.7);
}
}
@media screen and (max-width: 375px) {
.pine {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (max-width: 320px) {
.pine {
transform: translate(-50%, -50%) scale(.5);
}
}
/*____________________________________________________________
## Palm
____________________________________________________________*/
.palm {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 610px;
height: 893px;
.rod {
position: absolute;
bottom: 0;
width: 4px;
background-color: #000;
@mixin sizeRodMix($sizeName, $leftMargin, $height) {
&._#{$sizeName} {
left: #{$leftMargin}px;
height: #{$height}px;
}
}
@include sizeRodMix(sm, 498, 535);
@include sizeRodMix(xl, 458, 848);
@include sizeRodMix(xm, 404, 680);
@include sizeRodMix(xs, 362, 436);
@include sizeRodMix(md, 290, 592);
@include sizeRodMix(lg, 240, 776);
.crown {
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 0 0 50% 50% / 0 0 100% 100%;
background-color: #000;
@mixin sizeCrownMix($sizeName, $width, $height) {
&._#{$sizeName} {
width: #{$width}px;
height: #{$height}px;
}
}
@include sizeCrownMix(xs, 194, 35);
@include sizeCrownMix(sm, 218, 40);
@include sizeCrownMix(md, 254, 45);
@include sizeCrownMix(xm, 248, 44);
@include sizeCrownMix(lg, 263, 46);
@include sizeCrownMix(xl, 292, 52);
@include sizeCrownMix(cup, 118, 59);
.kernel {
position: absolute;
top: -46px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
}
.arc {
position: absolute;
top: -85px;
height: 100px;
border: 4px solid;
&._lg {
width: 59px;
&._left {
left: 0;
border-bottom-left-radius: 100px;
border-top: 0;
border-right: 0;
}
&._right {
right: 0;
border-bottom-right-radius: 100px;
border-top: 0;
border-left: 0;
}
}
&._sm {
width: 24px;
&._left {
left: 35px;
border-bottom-left-radius: 100px;
border-top: 0;
border-right: 0;
}
&._right {
right: 35px;
border-bottom-right-radius: 100px;
border-top: 0;
border-left: 0;
}
}
&._lg,
&._sm {
&._left {
.arc__circle {
left: -15px;
}
}
&._right {
.arc__circle {
right: -15px;
}
}
}
.arc__circle {
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
}
}
}
.leftBrunch {
position: absolute;
bottom: 286px;
right: 4px;
width: 170px;
height: 4px;
background-color: #000;
.wave {
position: absolute;
bottom: 0;
width: 50px;
height: 29px;
border: 4px solid #000;
&._left {
left: -50px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-right: 0;
}
&._right {
right: -50px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-left: 0;
}
&._top {
top: -29px;
}
.wave__topBrunch {
position: absolute;
bottom: 21px;
right: 0;
width: 4px;
height: 131px;
background-color: #000;
}
}
}
}
}
@media screen and (orientation: landscape) and (max-height: 924px) {
.palm {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (orientation: landscape) and (max-height: 747px) {
.palm {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (orientation: landscape) and (max-height: 560px) {
.palm {
transform: translate(-50%, -50%) scale(.4);
}
}
@media screen and (orientation: landscape) and (max-height: 416px) {
.palm {
transform: translate(-50%, -50%) scale(.2);
}
}
@media screen and (max-width: 640px) {
.palm {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (max-width: 518px) {
.palm {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (max-width: 375px) {
.palm {
transform: translate(-50%, -50%) scale(.5);
}
}
@media screen and (max-width: 320px) {
.palm {
transform: translate(-50%, -50%) scale(.4);
}
}
/*____________________________________________________________
## Fir
____________________________________________________________*/
.fir {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 554px;
height: 850px;
.centerRod {
position: absolute;
left: 290px;
width: 4px;
height: 804px;
background-color: #000;
.sideRods {
position: absolute;
top: 52px;
left: 50%;
transform: translateX(-50%);
width: 368px;
height: 663px;
border: 4px solid #000;
border-bottom-right-radius: 280px;
border-top: 0;
}
.centerRod__basis {
position: absolute;
top: 662px;
left: 50%;
transform: translateX(-50%);
width: 72px;
height: 72px;
border-radius: 50%;
}
.angleLeftRod {
position: absolute;
top: 690px;
right: 0;
width: 110px;
height: 90px;
border: 4px solid #000;
border-top: 0;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 70px;
.angleLeftRod__leftBtunch {
position: absolute;
top: -74px;
left: -4px;
width: 4px;
height: 74px;
background-color: #000;
}
}
.angleRightRod {
position: absolute;
top: 690px;
width: 100px;
height: 40px;
border: 4px solid #000;
border-top: 0;
border-bottom-left-radius: 70px;
border-bottom-right-radius: 20px;
.angleLeftRod__rightBtunch {
position: absolute;
top: -620px;
right: -4px;
width: 4px;
height: 620px;
background-color: #000;
}
}
.kernel {
position: absolute;
width: 35px;
height: 35px;
border-radius: 50%;
&._centered {
left: 50%;
transform: translateX(-50%);
}
&._bottom {
bottom: -19px;
}
&._bottomR {
bottom: -19px;
left: -19px;
}
}
.roots {
position: absolute;
bottom: -280px;
left: 50%;
transform: translateX(-50%);
width: 280px;
height: 280px;
border: 4px solid #000;
border-radius: 50%;
border-top-color: #000;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
}
.sideRods__crownsWrap {
position: absolute;
height: 554px;
width: 222px;
&._centerCW {
top: 10px;
left: 50%;
transform: translateX(-50%);
}
&._leftCW {
left: -2px;
transform: translateX(-50%);
}
&._rightCW {
top: 5px;
right: -2px;
transform: translateX(50%);
}
}
.crown {
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 0 0 50% 50% / 0 0 100% 100%;
background-color: #000;
&._margin_rightCW {
left: 0%;
transform: translate(0%);
}
@mixin crownsNumberMix($crownNumber, $marginTop, $width, $height) {
&._#{$crownNumber} {
top: #{$marginTop}px;
width: #{$width}px;
height: #{$height}px;
}
}
@include crownsNumberMix(1, 18, 34, 8);
@include crownsNumberMix(2, 66, 61, 11);
@include crownsNumberMix(3, 116, 71, 13);
@include crownsNumberMix(4, 165, 84, 15);
@include crownsNumberMix(5, 214, 100, 18);
@include crownsNumberMix(6, 256, 116, 21);
@include crownsNumberMix(7, 304, 136, 25);
@include crownsNumberMix(8, 357, 160, 28);
@include crownsNumberMix(9, 426, 190, 34);
@include crownsNumberMix(10, 514, 222, 40);
&._1 {
&._margin_rightB {
top: calc(18px + 50px);
}
}
&._2 {
&._margin_rightB {
top: calc(66px + 50px);
}
}
&._3 {
&._margin_rightB {
top: calc(116px + 50px);
}
}
&._9 {
&._margin_rightCW {
left: 1px;
}
}
&._10 {
&._margin_rightCW {
left: -55px;
}
}
}
.constellation {
position: absolute;
top: -50px;
right: -20px;
width: 126px;
height: 95px;
.line {
position: relative;
margin-top: 45.5px;
width: 126px;
height: 4px;
background-color: #000;
.star {
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
&._small {
width: 18px;
height: 18px;
}
&._big {
left: 25px;
width: 37px;
height: 37px;
}
}
}
.moon {
position: absolute;
top: 0;
right: 44px;
width: 95px;
height: 95px;
border-radius: 50%;
box-shadow: 20px 20px 0 0 #000;
transform: rotate(-45deg);
}
}
}
@media screen and (orientation: landscape) and (max-height: 930px) {
.fir {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (orientation: landscape) and (max-height: 748px) {
.fir {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (orientation: landscape) and (max-height: 570px) {
.fir {
transform: translate(-50%, -50%) scale(.4);
}
}
@media screen and (orientation: landscape) and (max-height: 390px) {
.fir {
transform: translate(-50%, -50%) scale(.2);
}
}
@media screen and (max-width: 600px) {
.fir {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (max-width: 480px) {
.fir {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (max-width: 375px) {
.fir {
transform: translate(-50%, -50%) scale(.5);
}
}
@media screen and (max-width: 320px) {
.fir {
transform: translate(-50%, -50%) scale(.4);
}
}
/*____________________________________________________________
## Rose
____________________________________________________________*/
.rose {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 165px;
height: 812px;
.rod {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background-color: #000;
.pollen {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 92px;
height: 92px;
border-radius: 50%;
background-color: #de162a;
z-index: 2;
}
.bud {
position: absolute;
top: 46px;
left: 50%;
transform: translateX(-50%);
width: 165px;
height: 82px;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
background-color: #000;
}
.pad {
position: absolute;
width: 18px;
height: 98px;
background-color: #000;
&._left {
right: 0;
border-bottom-left-radius: 40px 100%;
border-top-left-radius: 40px 100%;
}
&._right {
border-bottom-right-radius: 40px 100%;
border-top-right-radius: 40px 100%;
}
@mixin padsNumberMix($padNumber, $marginTop) {
&._position_#{$padNumber} {
top: #{$marginTop}px;
}
}
@include padsNumberMix(1, 126);
@include padsNumberMix(2, 224);
@include padsNumberMix(3, 322);
@include padsNumberMix(4, 420);
@include padsNumberMix(5, 518);
.pad__brunch {
position: absolute;
width: 35px;
height: 52px;
border: 4px solid #000;
border-top: 0;
&._left {
left: -35px;
border-right: 0;
border-bottom-left-radius: 40px;
.brunchCircle {
left: -13px;
}
}
&._right {
right: -35px;
border-left: 0;
.brunchCircle {
right: -13px;
}
}
.brunchCircle {
position: absolute;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #de162a;
}
}
}
}
}
@media screen and (orientation: landscape) and (max-height: 846px) {
.rose {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (orientation: landscape) and (max-height: 682px) {
.rose {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (orientation: landscape) and (max-height: 520px) {
.rose {
transform: translate(-50%, -50%) scale(.4);
}
}
@media screen and (orientation: landscape) and (max-height: 356px) {
.rose {
transform: translate(-50%, -50%) scale(.2);
}
}
@media screen and (max-width: 460px) {
.rose {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (max-width: 375px) {
.rose {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (max-width: 320px) {
.rose {
transform: translate(-50%, -50%) scale(.5);
}
}
/*____________________________________________________________
## Willow
____________________________________________________________*/
.willow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 366px;
height: 842px;
.rod {
position: absolute;
bottom: 0;
left: 198px;
width: 4px;
height: 420px;
background-color: #000;
.rod__leftBrunch {
position: absolute;
bottom: 238px;
right: 0;
width: 132px;
height: 4px;
background-color: #000;
}
.rod__rightBrunch {
position: absolute;
bottom: 110px;
width: 96px;
height: 4px;
background-color: #000;
}
.trunk {
position: absolute;
width: 4px;
height: 424px;
background-color: #000;
&._top {
top: -100%;
}
&._left {
bottom: 0;
left: 0;
}
&._right {
bottom: 0;
right: 0;
}
.trunk__tail {
position: absolute;
width: 22px;
height: 4px;
background-color: #000;
&._left {
right: 0;
}
}
.trunk__crownsWrap {
position: absolute;
width: 72px;
height: 316px;
&._left {
top: 45px;
right: 0;
.crown {
right: 0;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
}
&._right {
top: 33px;
.crown {
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
@mixin marginNumberMix($number, $marginTop) {
&._#{$number} {
top: #{$marginTop}px;
}
}
@include marginNumberMix(3, 46);
@include marginNumberMix(4, 73);
@include marginNumberMix(5, 102);
@include marginNumberMix(6, 132);
@include marginNumberMix(7, 169);
@include marginNumberMix(8, 207);
@include marginNumberMix(9, 249);
@include marginNumberMix(10, 285);
}
}
.crown {
position: absolute;
background-color: #000;
@mixin crownsSizeMix($number, $marginTop, $width, $height) {
&._#{$number} {
top: #{$marginTop}px;
width: #{$width}px;
height: #{$height}px;
}
}
@include crownsSizeMix(1, '', 40, 12);
@include crownsSizeMix(2, 23, 44, 12);
@include crownsSizeMix(3, 48, 47, 14);
@include crownsSizeMix(4, 75, 50, 14);
@include crownsSizeMix(5, 105, 54, 15);
@include crownsSizeMix(6, 137, 57, 17);
@include crownsSizeMix(7, 174, 61, 17);
@include crownsSizeMix(8, 214, 64, 19);
@include crownsSizeMix(9, 256, 68, 19);
@include crownsSizeMix(10, 294, 72, 21);
}
}
.trunk__basis {
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #de162a;
}
}
}
}
@media screen and (orientation: landscape) and (max-height: 876px) {
.willow {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (orientation: landscape) and (max-height: 712px) {
.willow {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (orientation: landscape) and (max-height: 550px) {
.willow {
transform: translate(-50%, -50%) scale(.4);
}
}
@media screen and (orientation: landscape) and (max-height: 386px) {
.willow {
transform: translate(-50%, -50%) scale(.2);
}
}
@media screen and (max-width: 500px) {
.willow {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (max-width: 375px) {
.willow {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (max-width: 320px) {
.willow {
transform: translate(-50%, -50%) scale(.5);
}
}
/*____________________________________________________________
## Sunflower
____________________________________________________________*/
.sunflower {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 326px;
height: 642px;
.rod {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background-color: #000;
.halo {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 210px;
height: 210px;
border-radius: 50%;
background-color: #000;
.head {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 118px;
height: 118px;
border-radius: 50%;
background-color: #de162a;
}
}
.brunch {
position: absolute;
top: 300px;
width: 183px;
height: 4px;
background-color: #000;
&._left {
left: -116px;
}
&._right {
left: -63px;
}
@mixin marginNumberMix($number, $marginTop) {
&._position_#{$number} {
top: #{$marginTop}px;
}
}
@include marginNumberMix(1, 270);
@include marginNumberMix(2, 358);
@include marginNumberMix(3, 446);
.sheet {
position: absolute;
bottom: 0;
width: 90px;
height: 67px;
background: #000;
border-radius: 50% 100px 0 80px;
&._left {
left: -45px;
border-radius: 50% 100px 0 80px;
}
&._right {
right: -45px;
border-radius: 100px 50% 80px 0;
}
}
}
}
}
@media screen and (orientation: landscape) and (max-height: 672px) {
.sunflower {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (orientation: landscape) and (max-height: 534px) {
.sunflower {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (orientation: landscape) and (max-height: 415px) {
.sunflower {
transform: translate(-50%, -50%) scale(.4);
}
}
@media screen and (orientation: landscape) and (max-height: 287px) {
.sunflower {
transform: translate(-50%, -50%) scale(.2);
}
}
@media screen and (max-width: 500px) {
.sunflower {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (max-width: 375px) {
.sunflower {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (max-width: 320px) {
.sunflower {
transform: translate(-50%, -50%) scale(.5);
}
}
/*____________________________________________________________
## Bell
____________________________________________________________*/
.bell {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 218px;
height: 866px;
.crown {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 134px;
height: 24px;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
background-color: #000;
@mixin marginNumberMix($number, $marginTop) {
&._position_#{$number} {
top: #{$marginTop}px;
}
}
@include marginNumberMix(1, 138);
@include marginNumberMix(2, 208);
@include marginNumberMix(3, 278);
@include marginNumberMix(4, 348);
@include marginNumberMix(5, 418);
@include marginNumberMix(6, 488);
@include marginNumberMix(7, 558);
@include marginNumberMix(8, 628);
@include marginNumberMix(9, 698);
.crown__rod {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 30px;
background-color: #000;
.arc {
position: absolute;
top: -40px;
width: 98px;
height: 44px;
border: 4px solid #000;
border-top: 0;
&._left {
right: 0;
border-bottom-left-radius: 50px;
border-right: 0;
.tongue {
left: -16px;
}
}
&._right {
border-bottom-right-radius: 50px;
border-left: 0;
.tongue {
right: -16px;
}
}
.arc__rightBrunch {
width: 94px;
height: 4px;
background-color: #000;
.tongue {
left: 74px;
}
}
.arc__circleBrunch {
position: absolute;
top: -124px;
width: 98px;
height: 124px;
border: 4px solid #000;
border-top-right-radius: 100px;
border-bottom: 0;
border-left: 0;
.tongue {
left: -16px;
}
}
.tongue {
position: absolute;
top: -15px;
width: 28px;
height: 28px;
border-radius: 50%;
}
}
}
.crown__leg {
position: absolute;
bottom: -144px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 144px;
background-color: #000;
}
}
}
@media screen and (orientation: landscape) and (max-height: 900px) {
.bell {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (orientation: landscape) and (max-height: 722px) {
.bell {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (orientation: landscape) and (max-height: 550px) {
.bell {
transform: translate(-50%, -50%) scale(.4);
}
}
@media screen and (orientation: landscape) and (max-height: 376px) {
.bell {
transform: translate(-50%, -50%) scale(.2);
}
}
@media screen and (max-width: 500px) {
.bell {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (max-width: 375px) {
.bell {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (max-width: 320px) {
.bell {
transform: translate(-50%, -50%) scale(.5);
}
}
/*____________________________________________________________
## Poplar
____________________________________________________________*/
.poplar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 289px;
height: 851px;
.rod {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background-color: #000;
.circle {
position: absolute;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #000;
&._center {
left: 50%;
transform: translateX(-50%);
}
&._center_v {
top: 50%;
transform: translateY(-50%);
}
&._bottom {
bottom: 118px;
}
&._left {
left: -12px;
}
&._right {
right: -12px;
}
}
.rod__arc {
position: absolute;
left: -61px;
width: 125px;
height: 125px;
border-radius: 50%;
border: 4px solid #000;
transform: rotate(45deg);
&._top {
top: 10px;
border-bottom-color: transparent;
border-right-color: transparent;
}
&._bottom {
bottom: 128px;
border-top-color: transparent;
border-left-color: transparent;
}
}
.rod__basis {
position: absolute;
top: 326px;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 90px;
border-radius: 50%;
background-color: #de162a;
.brunch {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 41px;
height: 4px;
background-color: #000;
&._left {
left: -41px;
}
&._right {
right: -41px;
}
.brunch__trunk {
position: absolute;
width: 4px;
height: 62px;
background-color: #000;
&._top {
bottom: 0;
}
&._right {
right: 0
}
}
}
}
}
.crownsWrap {
position: absolute;
width: 121px;
height: 239px;
&._top {
top: 72px;
}
&._bottom {
bottom: 181px;
}
&._left {
.crown {
right: 0;
}
}
&._right {
right: 0;
}
.crown {
position: absolute;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
background-color: #000;
@mixin sizeNumberMix($number, $width, $height) {
&._size_#{$number} {
width: #{$width}px;
height: #{$height}px;
}
}
@include sizeNumberMix(1, 74, 13);
@include sizeNumberMix(2, 80, 14);
@include sizeNumberMix(3, 87, 16);
@include sizeNumberMix(4, 94, 17);
@include sizeNumberMix(5, 100, 18);
@include sizeNumberMix(6, 107, 19);
@include sizeNumberMix(7, 114, 20);
@include sizeNumberMix(8, 121, 22);
@mixin marginNumberMix($number, $marginTop) {
&._position_#{$number} {
top: #{$marginTop}px;
}
}
@include marginNumberMix(2, 31);
@include marginNumberMix(3, 62);
@include marginNumberMix(4, 93);
@include marginNumberMix(5, 124);
@include marginNumberMix(6, 155);
@include marginNumberMix(7, 186);
@include marginNumberMix(8, 217);
}
}
}
@media screen and (orientation: landscape) and (max-height: 881px) {
.poplar {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (orientation: landscape) and (max-height: 710px) {
.poplar {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (orientation: landscape) and (max-height: 540px) {
.poplar {
transform: translate(-50%, -50%) scale(.4);
}
}
@media screen and (orientation: landscape) and (max-height: 370px) {
.poplar {
transform: translate(-50%, -50%) scale(.2);
}
}
@media screen and (max-width: 500px) {
.poplar {
transform: translate(-50%, -50%) scale(.8);
}
}
@media screen and (max-width: 375px) {
.poplar {
transform: translate(-50%, -50%) scale(.6);
}
}
@media screen and (max-width: 320px) {
.poplar {
transform: translate(-50%, -50%) scale(.5);
}
}
/*____________________________________________________________
# Social links
____________________________________________________________*/
.social {
position: fixed;
bottom: 0;
left: 30px;
}
.socialList {
list-style: none;
&:after {
content: '';
display: block;
margin: 0 auto;
width: 1px;
height: 40px;
background: #749064;
}
}
.socialList__item {
margin-bottom: 10px;
width: 20px;
height: 20px;
transition: transform .2s;
&:hover {
transform: translateY(-3px);
.socialList__icon {
stroke: #7dcbd8;
}
}
}
.socialList__icon {
fill: none;
stroke: #749064;
}"use strict";
var burgerBtn = document.querySelector(".burger__input");
var menuBlock = document.querySelector(".menu");
let containerVar = document.querySelector('.container');
let menuItemVar = document.getElementsByClassName("menu__item");
burgerBtn.onclick = function() {
if (menuBlock.classList.contains('popup') === false) {
this.classList.add('checked');
menuBlock.classList.add('popup');
containerVar.classList.add('popup');
} else {
this.classList.remove('checked');
menuBlock.classList.remove('popup');
containerVar.classList.remove('popup');
}
}
for(let el of menuItemVar) {
el.addEventListener("click", function() {
let claas = el.classList[1];
containerVar.setAttribute('class',`${containerVar.classList[0]} ${claas}`);
let x = document.getElementsByClassName("menu__item");
Array.prototype.forEach.call(x, function(el) {
el.classList.remove("active");
menuBlock.classList.remove('popup');
burgerBtn.classList.remove('checked');
});
this.classList.add('active');
});
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.