<div class="tron-skyline">
<div class="skyline">
<div class="sky">
<div class="stars"></div>
<div class="lights">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="moon">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="planet"></div>
</div>
<div class="city">
<div class="city-back">
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="tip"></span>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="tip"></span>
<span class="windows">
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="tip"></span>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
</div>
</div>
<div class="city-middle">
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
</div>
<div class="city-front">
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="tip"></span>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
<div>
<span class="windows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="building-shadow"></span>
</div>
</div>
<div class="city-base"></div>
</div>
</div>
<div class="tron-grid">
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<h1>Jordi Rué</h1>
<h2>JordiRue.com</h2>
</div>
</div>
</div>/*
Variables
*/
/* Colors */
$tron-white: #f1f1f1;
$tron-black: #010101;
/* Sky */
$sky-1: rgb(255,12,184);
$sky-2: rgb(193,70,161);
$sky-3: rgb(31,42,107);
/* Grid */
$grid-1: rgb(0,104,189);
$grid-2: rgb(0,93,172);
$grid-3: rgb(2,43,96);
$grid-4: rgb(7,26,49);
$grid-line: rgb(41,137,216);
$grid-line-shadow: rgba(41,137,216,.6);
/* Lights */
$light-01: linear-gradient(to bottom,rgba(183,222,237,1) 0%,rgba(33,180,226,1) 15%,rgba(113,206,239,.5) 50%,rgba(183,222,237,.2) 100%);
$light-02: $light-01;
$light-03: linear-gradient(to bottom,rgba(206,4,4,1) 1%,rgba(204,110,110,1) 78%,rgba(204,120,120,1) 100%);
$light-04: linear-gradient(to bottom,rgba(183,222,237,1) 0%,rgba(33,180,226,1) 2%,rgba(33,180,226,.6) 15%,rgba(113,206,239,.3) 50%,rgba(183,222,237,.1) 100%);
$light-05: $light-03;
$light-06: linear-gradient(to bottom,rgba(206,4,4,1) 1%,rgba(204,110,110,.8) 58%,rgba(204,120,120,.2) 100%);
$light-07: linear-gradient(to bottom,rgba(206,4,4,1) 1%,rgba(204,67,67,1) 54%,rgba(204,120,120,1) 70%,rgba(255,61,61,1) 90%,rgba(255,12,184,1) 100%);
$light-08: linear-gradient(to bottom,rgba(206,4,4,1) 1%,rgba(204,110,110,.8) 58%,rgba(204,120,120,.2) 100%);
$light-09: $light-07;
$light-10: linear-gradient(to bottom,rgba(183,222,237,1) 0%,rgba(33,180,226,1) 3%,rgba(33,180,226,.6) 25%,rgba(113,206,239,.2) 70%,rgba(183,222,237,.1) 100%);
$light-11: linear-gradient(to bottom,rgba(206,4,4,1) 1%,rgba(204,110,110,.8) 58%,rgba(204,120,120,.2) 100%);
$light-12: linear-gradient(to bottom,rgba(206,4,4,1) 1%,rgba(204,67,67,1) 54%,rgba(204,120,120,1) 60%,rgba(255,61,61,1) 90%,rgba(255,12,184,1) 100%);
$light-13: $light-07;
$light-14: linear-gradient(to bottom,rgba(183,222,237,1) 0%,rgba(33,180,226,1) 5%,rgba(33,180,226,.4) 15%,rgba(113,206,239,.2) 50%,rgba(183,222,237,.1) 100%);
$light-15: $light-07;
$light-16: linear-gradient(to bottom,rgba(244,227,225,1) 0%,rgba(248,252,42,1) 98%);
$light-17: $light-07;
$light-18: linear-gradient(to right,rgba(248,80,50,1) 0%,rgba(241,111,92,1) 15%,rgba(244,227,225,1) 43%,rgba(240,47,23,1) 65%,rgba(248,252,42,1) 100%);
$light-19: linear-gradient(to bottom,rgba(255,12,184,.1) 0%,rgba(193,70,161,1) 20%,rgba(33,180,226,1) 30%,rgba(33,180,226,.4) 40%,rgba(193,70,161,.2) 50%,rgba(255,12,184,.1) 100%);
$light-20: linear-gradient(to bottom,rgba(255, 12, 184, 1) 0%,rgba(193, 70, 161,1) 20%,rgba(193, 70, 161, .5) 100%);
$light-21: linear-gradient(to right,rgba(248,80,50,1) 0%,rgba(241,111,92,1) 10%,rgba(240,73,0,1) 65%,rgba(252,68,0,1) 100%);
$light-22: linear-gradient(to bottom,rgba(33,180,226,1) 0%,rgba(33,180,226,.4) 90%,rgba(193,70,161,.2) 95%,rgba(255,12,184,.1) 100%);
/* Houses */
$house-bg: linear-gradient(to bottom, $grid-3 0%,$grid-2 100%);
$house-bg-rooftop: linear-gradient(to bottom, $grid-3 0%,$grid-2 20%,$grid-2 100%);
$house-border: solid 1px rgba(255,255,255,.1);
$house-shadow: rgba(5,116,210,0.2);
$box-shadow-left-1: 10px 0 0 $grid-3;
$box-shadow-left-2: 5px 0 0 $grid-3;
$box-shadow-right-1: -10px 0 0 $grid-3;
$box-shadow-right-2: -5px 0 0 $grid-3;
$tip-light: rgb(248,252,42);
$base-1: rgb(115,193,242);
$base-2: rgb(189,224,247);
/* Moon */
$moon-shadow: rgb(190,255,255);
$mon-hole-1: rgb(69,93,143);
$mon-hole-2: rgb(141,190,210);
$mon-hole-3: rgb(143,185,202);
$mon-hole-4: rgb(52,79,135);
/* Planet */
$planet-1: rgb(172,48,0);
$planet-2: rgb(116,32,0);
$planet-3: rgb(54,14,0);
$planet-4: rgb(215,58,0);
$planet-5: rgb(87,24,0);
$planet-6: rgb(255,110,60);
/* Windows lights */
$window-color-1: rgb(30,180,226);
$window-color-2: rgb(180,230,250);
$window-color-3: rgb(255,250,0);
$win-light-01: linear-gradient(to bottom, $window-color-1, $window-color-1 5%,transparent 5%,transparent 10%, $window-color-1 10%);
$win-light-02: linear-gradient(to right, $window-color-1, $window-color-1 5%,transparent 5%,transparent 15%, $window-color-1 15%);
$win-light-03: linear-gradient(to right, $window-color-2, $window-color-1 5%,transparent 5%,transparent 15%, $window-color-2 15%);
$win-light-04: linear-gradient(to top, $window-color-1, $window-color-1 5%,transparent 5%,transparent 15%, $window-color-1 15%, $window-color-1 25%,transparent 25%,transparent 35%, $window-color-2 35%);
$win-light-05: linear-gradient(to bottom, $window-color-1, $window-color-1 3%,transparent 3%,transparent 9%, $window-color-2 9%, $window-color-2 15%,transparent 15%,transparent 21%, $window-color-2 21%, $window-color-2 25%,transparent 25%);
/*
Mixins
*/
@mixin rooftop-before($w,$h,$mtop,$mleft,$bshadow) {
&:before {
content: '';
width: $w;
height: $h;
margin-top: $mtop;
margin-left: $mleft;
background: $house-bg-rooftop;
border-top: solid 1px rgba(255,255,255,.4);
border-right: $house-border;
border-bottom: $house-border;
border-left: $house-border;
box-shadow: $bshadow;
position: absolute;
display: block;
z-index: -1;
}
}
@mixin rooftop-after($w,$h,$mtop,$mleft,$bshadow) {
&:after {
content: '';
width: $w;
height: $h;
margin-top: $mtop;
margin-left: $mleft;
background: $house-bg-rooftop;
border-top: solid 1px rgba(255,255,255,.4);
border-right: $house-border;
border-bottom: $house-border;
border-left: $house-border;
box-shadow: $bshadow;
position: absolute;
display: block;
z-index: -2;
}
}
@mixin tip($tipt,$tipl) {
width: 8%;
height: 100%;
background: $tip-light;
position: absolute;
top: $tipt;
left: $tipl;
filter: blur(.1rem);
z-index: -2;
}
@mixin stars($stop,$sleft) {
width: 100%;
height: 100%;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 6px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 3px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 6px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 6px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 6px),
radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.5) 1px, transparent 1px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 3px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 3px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 6px),
radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 6px),
radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 6px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 3px),
radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 3px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 3px),
radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 3px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,1) 1px, transparent 3px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 3px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,1) 1px, transparent 6px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 4px),
radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px);
background-size:
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px;
background-position:
5% 30%,
11% 41%,
16% 12%,
3% 9%,
7% 54%,
15% 35%,
18% 48%,
10% 87%,
26% 33%,
9% 19%,
15% 35%,
21% 11%,
2% 48%,
33% 63%,
54% 18%,
15% 23%,
26% 62%,
47% 37%,
18% 78%,
27% 69%,
20% 5%,
31% 38%,
22% 62%,
51% 39%,
32% 12%,
25% 52%,
56% 30%,
27% 17%,
45% 27%,
29% 19%,
50% 30%,
35% 11%,
12% 22%,
43% 13%,
34% 54%,
85% 25%,
36% 16%,
68% 17%,
41% 18%,
29% 19%,
37% 46%,
31% 21%,
48% 27%,
42% 34%,
54% 4%,
45% 51%,
26% 38%,
13% 4%,
44% 32%,
47% 9%,
30% 10%,
58% 6%,
52% 32%,
63% 6%,
50% 14%,
59% 44%,
56% 16%,
57% 40%,
58% 58%,
59% 19%,
60% 0,
61% 1%,
62% 32%,
63% 23%,
64% 44%,
65% 85%,
66% 36%,
67% 73%,
68% 42%,
69% 9%,
70% 10%,
71% 76%,
72% 36%,
73% 63%,
74% 64%,
75% 88%,
74% 16%,
76% 97%,
78% 18%,
79% 29%,
80% 5%,
81% 65%,
82% 32%,
83% 28%,
84% 62%,
85% 35%,
86% 6%,
81% 13%,
88% 51%,
89% 19%,
90% 0,
91% 41%,
92% 60%,
93% 23%,
94% 54%,
95% 75%,
96% 61%,
97% 70%,
98% 82%,
99% 29%;
background-repeat: no-repeat;
position: absolute;
top: $stop;
left: $sleft;
}
@mixin moon($mw,$mh,$mtop,$mleft,$mopac) {
width: $mw;
height: $mh;
border-radius: 50%;
transition: transform 0.2s ease-in-out;
position: absolute;
top: $mtop;
left: $mleft;
opacity: $mopac;
&:after {
content: '';
width: 101%;
height: 101%;
border-radius: 50%;
position: absolute;
top: -1%;
left: 3%;
z-index: -1;
filter: blur(.4rem);
opacity: .8;
}
}
@mixin planet($mw,$mh,$mtop,$mleft,$mopac) {
width: $mw;
height: $mh;
border-radius: 50%;
transition: transform 0.2s ease-in-out;
position: absolute;
top: $mtop;
left: $mleft;
opacity: $mopac;
&:after {
content: '';
width: 101%;
height: 101%;
border-radius: 50%;
position: absolute;
top: -1%;
left: 3%;
z-index: -1;
filter: blur(.4rem);
opacity: .8;
}
}
@mixin windows($windir,$winh) {
width: 100%;
height: 100%;
display: flex;
flex-direction: $windir;
position: absolute;
span {
height: $winh;
border-top: solid 1px rgba(255,255,255,.2);
border-right: solid 1px rgba(255,255,255,.2);
border-bottom: solid 1px rgba(7,26,49,.2);
border-left: solid 1px rgba(7,26,49,.2);
flex: 1;
}
}
@mixin windows-grid($win) {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
position: absolute;
top: 5%;
span {
width: 10%;
height: 10%;
border-top: solid 1px rgba(7, 26, 49,.1);
border-right: solid 1px rgba(255, 255, 255,.1);
border-bottom: solid 1px rgba(255, 255, 255,.1);
border-left: solid 1px rgba(7, 26, 49,.1);
flex: 1 1 $win;
display: block;
}
}
*,
::before,
::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
.tron-skyline {
height: 540px;
margin-bottom: 50px;
text-align: center;
border-bottom: solid 2px $grid-line;
box-shadow: 0 10px 10px $grid-line-shadow;
position: relative;
overflow: hidden;
/* Central division
&:before {
content: '';
width: 2px;
height: 500px;
background-color: red;
position: absolute;
top: 0;
left: calc(50% - 1px);
opacity: .3;
z-index: 10;
}*/
.skyline {
width: 100%;
height: 62.5%;
background: linear-gradient(to bottom, $sky-3 40%,$sky-2 92%,$sky-1 100%);
position: absolute;
display: flex;
justify-content: center;
z-index: 1;
@media (min-width: 768px) {
height: 60%;
}
@media (min-width: 992px) {
height: 58.5%;
}
@media (min-width: 1140px) {
height: 55.5%;
}
.sky {
width: 100%;
height: 300px;
position: absolute;
display: flex;
justify-content: center;
.stars {
@include stars(0,0);
&:before {
content: '';
@include stars(1%,-50%);
}
&:after {
content: '';
@include stars(12%,52%);
}
}
.lights {
width: 100%;
max-width: 700px;
display: flex;
opacity: .6;
span:nth-of-type(1) {
width: 3%;
height: 80%;
margin-left: 2%;
background: $light-01;
filter: blur(.5rem);
opacity: .5;
}
span:nth-of-type(2){
width: 1%;
height: 70%;
margin-left: 9%;
background: $light-02;
filter: blur(.7rem);
opacity: .5;
}
span:nth-of-type(3){
width: 1%;
height: 70%;
background: $light-03;
filter: blur(.9rem);
opacity: .4;
}
span:nth-of-type(4){
width: 3%;
height: 65%;
margin-left: 2%;
background: $light-04;
filter: blur(.4rem);
opacity: .5;
}
span:nth-of-type(5){
width: 2%;
height: 70%;
background: $light-05;
filter: blur(.9rem);
opacity: .4;
}
span:nth-of-type(6){
width: 3%;
height: 50%;
margin-left: 4%;
background: $light-06;
filter: blur(.4rem);
opacity: .3;
}
span:nth-of-type(7){
width: 1%;
height: 90%;
background: $light-07;
filter: blur(.6rem);
}
span:nth-of-type(8){
width: 2%;
height: 50%;
margin-left: 4%;
background: $light-08;
filter: blur(.4rem);
opacity: .3;
}
span:nth-of-type(9){
width: 1%;
height: 70%;
background: $light-09;
filter: blur(.7rem);
}
span:nth-of-type(10) {
width: 3%;
height: 55%;
background: $light-10;
filter: blur(.2rem);
opacity: .7;
}
span:nth-of-type(11) {
width: 2%;
height: 50%;
background: $light-11;
filter: blur(.6rem);
opacity: .3;
}
span:nth-of-type(12) {
width: 1%;
height: 75%;
background: $light-12;
filter: blur(.5rem);
}
span:nth-of-type(13) {
width: 1%;
height: 90%;
margin-left: 5%;
background: $light-13;
filter: blur(.6rem);
}
span:nth-of-type(14) {
width: 3%;
height: 50%;
background: $light-14;
filter: blur(.2rem);
opacity: .7;
}
span:nth-of-type(15) {
width: 1%;
height: 90%;
background: $light-15;
filter: blur(.6rem);
}
span:nth-of-type(16) {
width: 4%;
height: 80%;
background: $light-16;
filter: blur(.6rem);
opacity: .6;
}
span:nth-of-type(17) {
width: 1%;
height: 90%;
background: $light-17;
filter: blur(.7rem);
opacity: .6;
}
span:nth-of-type(18) {
width: 2%;
height: 80%;
background: $light-18;
filter: blur(.3rem);
opacity: .5;
}
span:nth-of-type(19) {
width: 3%;
height: 50%;
background: $light-19;
filter: blur(.2rem);
opacity: .7;
}
span:nth-of-type(20) {
width: 7%;
height: 80%;
background: $light-20;
filter: blur(.9rem);
opacity: .6;
}
span:nth-of-type(21) {
width: 5%;
height: 80%;
background: $light-21;
filter: blur(.7rem);
opacity: .4;
}
span:nth-of-type(22) {
width: 3%;
height: 90%;
background: $light-22;
filter: blur(.2rem);
opacity: .2;
}
}
.moon {
@include moon(150px,150px,45%,65%,1);
background: linear-gradient(to bottom, $sky-3 40%,$sky-2 92%,$sky-1 100%);
box-shadow: inset -20px 10px 70px 0 $moon-shadow;
&:after {
background: $tron-white;
}
span {
box-shadow: inset 6px -2px 0 0px $tron-white;
filter: blur(.2rem);
&:after {
background: $tron-black;
}
}
span:nth-of-type(1) {
@include moon(22%,22%,25%,30%,.4);
background: $mon-hole-1;
}
span:nth-of-type(2) {
@include moon(12%,14%,15%,50%,.5);
background: $mon-hole-2;
}
span:nth-of-type(3) {
@include moon(20%,17%,40%,70%,.5);
background: $mon-hole-3;
}
span:nth-of-type(4) {
@include moon(9%,8%,75%,45%,.4);
background: $mon-hole-1;
}
span:nth-of-type(5) {
@include moon(10%,10%,11%,20%,.7);
background: $mon-hole-4;
}
span:nth-of-type(6) {
@include moon(9%,9%,62%,52%,.5);
background: $mon-hole-1;
}
}
.planet {
@include moon(30px,30px,8%,14%,1);
background: linear-gradient(to bottom, $planet-1 40%,$planet-2 62%,$planet-3 100%);
box-shadow: inset 5px 2px 0 0 $planet-4;
&:before {
content: '';
width: 200%;
height: 8%;
background: linear-gradient(to right, $planet-4 20%, $planet-5 70%, $planet-3 100%);
border-radius: 50%;
position: absolute;
top: 50%;
left: -50%;
transform: rotateZ(10deg);
z-index: 1;
}
&:after {
background: $planet-6;
}
}
}
.city {
width: 100%;
max-width: 700px;
height: 75%;
position: relative;
align-self: flex-end;
.city-back,
.city-middle,
.city-front {
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: flex-end;
div {
background: $house-bg;
border: $house-border;
position: relative;
.building-shadow {
width: 100%;
height: 100%;
background: $house-shadow;
position: absolute;
top: 100%;
left: 0;
filter: blur(.3rem);
}
}
}
.city-back {
top: 0;
z-index: 1;
div:nth-of-type(1) {
width: 7%;
height: 40%;
margin-left: 14%;
box-shadow: $box-shadow-left-2;
opacity: 0.9;
@include rooftop-before(80%,100%,-10%,10%,$box-shadow-left-2);
.windows {
@include windows(row,100%);
}
}
div:nth-of-type(2) {
width: 4%;
height: 45%;
margin-left: 9%;
box-shadow: $box-shadow-left-1;
@include rooftop-before(80%,100%,-30%,10%,$box-shadow-left-2);
.windows {
@include windows-grid(33.33%);
span:nth-of-type(1) {
background: $window-color-1;
}
span:nth-of-type(8) {
background: $window-color-1;
}
span:nth-of-type(12) {
background: $window-color-2;
}
}
}
div:nth-of-type(3) {
width: 3.5%;
height: 50%;
margin-left: .5%;
@include rooftop-before(70%,100%,-60%,20%,$box-shadow-left-2);
.windows {
@include windows(row,100%);
span {
background: $win-light-05;
}
}
}
div:nth-of-type(4) {
width: 3.5%;
height: 50%;
box-shadow: $box-shadow-left-2;
opacity: 0.9;
@include rooftop-before(70%,100%,-60%,20%,$box-shadow-left-2);
.windows {
@include windows-grid(50%);
span:nth-of-type(4) {
background: $window-color-1;
}
span:nth-of-type(6) {
background: $window-color-1;
}
span:nth-of-type(9) {
background: $window-color-3;
}
}
}
div:nth-of-type(5) {
width: 4%;
height: 70%;
margin-left: 1%;
opacity: 0.9;
@include rooftop-before(80%,100%,-30%,10%,$box-shadow-left-2);
@include rooftop-after(60%,100%,-70%,20%,$box-shadow-left-2);
.tip {
@include tip(-20%,55%);
}
.windows {
@include windows-grid(33.33%);
span:nth-of-type(8) {
background: $window-color-1;
}
span:nth-of-type(14) {
background: $window-color-1;
}
}
}
div:nth-of-type(6) {
width: 5%;
height: 48%;
margin-left: .5%;
opacity: 0.9;
@include rooftop-before(80%,100%,-40%,15%,0);
@include rooftop-after(50%,100%,-70%,28%,0);
.tip {
@include tip(-30%,52%);
}
.windows {
@include windows(row,100%);
}
}
div:nth-of-type(7) {
width: 6%;
height: 76%;
opacity: 0.9;
@include rooftop-before(60%,80%,100%,26%,$box-shadow-right-2);
.windows {
@include windows-grid(20%);
span:nth-of-type(-n+5) {
background: $window-color-1;
}
span:nth-of-type(14) {
background: $window-color-1;
}
span:nth-of-type(23) {
background: $window-color-2;
}
span:nth-of-type(34) {
background: $window-color-2;
}
}
}
div:nth-of-type(8) {
width: 6%;
height: 46%;
margin-left: 2%;
box-shadow: $box-shadow-right-2;
opacity: 0.9;
@include rooftop-before(70%,100%,-30%,20%,$box-shadow-right-2);
.windows {
@include windows(row,100%);
span:nth-of-type(3) {
background: $window-color-2;
}
span:nth-of-type(5) {
background: $window-color-2;
}
}
}
div:nth-of-type(9) {
width: 6%;
height: 60%;
opacity: 0.9;
@include rooftop-before(60%,100%,-30%,30%,$box-shadow-right-2);
.windows {
@include windows-grid(33.33%);
span:nth-of-type(2) {
background: $window-color-2;
}
span:nth-of-type(11) {
background: $window-color-1;
}
}
}
div:nth-of-type(10) {
width: 4%;
height: 57%;
@include rooftop-before(80%,100%,-50%,10%,$box-shadow-right-2);
.windows {
@include windows-grid(33.33%);
span:nth-of-type(2) {
background: $window-color-1;
}
span:nth-of-type(9) {
background: $window-color-3;
}
span:nth-of-type(18) {
background: $window-color-1;
}
span:nth-of-type(27) {
background: $window-color-1;
}
}
}
div:nth-of-type(11) {
width: 4%;
height: 30%;
margin-left: 8%;
box-shadow: $box-shadow-right-1;
@include rooftop-before(80%,100%,-30%,-5%,$box-shadow-right-2);
@include rooftop-after(60%,100%,-70%,5%,$box-shadow-right-2);
.tip {
@include tip(-40%,28%);
}
.windows {
@include windows(row,100%);
}
}
div:nth-of-type(12) {
width: 4%;
height: 25%;
margin-left: 5%;
box-shadow: $box-shadow-right-2;
@include rooftop-before(80%,100%,-30%,10%,$box-shadow-right-2);
.windows {
@include windows-grid(33.33%);
}
}
}
.city-middle {
top: 4%;
z-index: 2;
&:after {
content: '';
width: 100%;
height: 42%;
background: linear-gradient(to right, transparent 10%,rgba(255,255,255,.5) 50%, transparent 90%);
position: absolute;
bottom: 0;
filter: blur(.5rem);
z-index: -1;
}
div:nth-of-type(1) {
width: 8%;
height: 40%;
margin-left: 40%;
box-shadow: $box-shadow-left-2;
.windows {
@include windows-grid(20%);
span:nth-of-type(6) {
background: $window-color-1;
}
span:nth-of-type(8) {
background: $window-color-2;
}
span:nth-of-type(9) {
background: $window-color-1;
}
span:nth-of-type(15) {
background: $window-color-2;
}
span:nth-of-type(18) {
background: $window-color-1;
}
span:nth-of-type(22) {
background: $window-color-2;
}
span:nth-of-type(25) {
background: $window-color-1;
}
span:nth-of-type(32) {
background: $window-color-1;
}
span:nth-of-type(40) {
background: $window-color-1;
}
}
}
div:nth-of-type(2) {
width: 5%;
height: 30%;
margin-left: 14%;
box-shadow: $box-shadow-right-1;
top: -1%;
.windows {
@include windows(column,5%);
span:nth-of-type(2n) {
background: $win-light-02;
}
}
}
div:nth-of-type(3) {
width: 8%;
height: 40%;
box-shadow: $box-shadow-right-2;
top: 2%;
.windows {
@include windows-grid(33.33%);
span:nth-of-type(4) {
background: $window-color-1;
}
span:nth-of-type(18) {
background: $window-color-2;
}
span:nth-of-type(22) {
background: $window-color-1;
}
span:nth-of-type(26) {
background: $window-color-1;
}
span:nth-of-type(27) {
background: $window-color-1;
}
}
}
}
.city-front {
top: 8%;
z-index: 3;
div:nth-of-type(1) {
width: 11%;
height: 16%;
box-shadow: $box-shadow-left-1;
@include rooftop-before(80%,100%,-20%,10%,$box-shadow-left-1);
.windows {
@include windows(column,5%);
span:nth-of-type(1) {
background-color: $window-color-1;
}
span:nth-of-type(3) {
background-color: $window-color-1;
}
span:nth-of-type(5) {
background-color: $window-color-3;
}
}
}
div:nth-of-type(2) {
width: 11%;
height: 30%;
margin-left: 1%;
box-shadow: $box-shadow-left-1;
@include rooftop-before(80%,100%,-10%,10%,$box-shadow-left-2);
.windows {
@include windows-grid(20%);
span:nth-of-type(4) {
background: $window-color-1;
}
span:nth-of-type(13) {
background: $window-color-1;
}
span:nth-of-type(14) {
background: $window-color-2;
}
span:nth-of-type(23) {
background: $window-color-1;
}
span:nth-of-type(26) {
background: $window-color-3;
}
span:nth-of-type(37) {
background: $window-color-1;
}
span:nth-of-type(38) {
background: $window-color-2;
}
span:nth-of-type(39) {
background: $window-color-1;
}
span:nth-of-type(40) {
background: $window-color-3;
}
}
}
div:nth-of-type(3) {
width: 4%;
height: 55%;
margin-left: 1%;
box-shadow: $box-shadow-left-2;
top: -2%;
@include rooftop-before(80%,100%,-30%,10%,$box-shadow-left-2);
@include rooftop-after(60%,100%,-70%,20%,$box-shadow-left-2);
.tip {
@include tip(-26%,55%);
}
.windows {
@include windows-grid(33.33%);
span:nth-of-type(6) {
background: $window-color-2;
}
span:nth-of-type(7) {
background: $window-color-1;
}
span:nth-of-type(12) {
background: $window-color-2;
}
span:nth-of-type(19) {
background: $window-color-1;
}
span:nth-of-type(25) {
background: $window-color-1;
}
span:nth-of-type(27) {
background: $window-color-1;
}
}
}
div:nth-of-type(4) {
width: 11%;
height: 30%;
box-shadow: $box-shadow-left-1;
@include rooftop-before(80%,100%,-10%,10%,$box-shadow-left-2);
.windows {
@include windows(row,100%);
span:nth-of-type(2n) {
background: $win-light-04;
}
}
}
div:nth-of-type(5) {
width: 6%;
height: 40%;
margin-left: 10%;
.windows {
@include windows-grid(25%);
span:nth-of-type(4) {
background: $window-color-2;
}
span:nth-of-type(13) {
background: $window-color-3;
}
span:nth-of-type(14) {
background: $window-color-1;
}
span:nth-of-type(23) {
background: $window-color-1;
}
span:nth-of-type(26) {
background: $window-color-1;
}
span:nth-of-type(29) {
background: $window-color-1;
}
span:nth-of-type(30) {
background: $window-color-1;
}
span:nth-of-type(31) {
background: $window-color-2;
}
span:nth-of-type(32) {
background: $window-color-1;
}
}
}
div:nth-of-type(6) {
width: 8%;
height: 18%;
margin-left: 1%;
box-shadow: $box-shadow-right-2;
top: -3%;
.windows {
@include windows(row,100%);
span:nth-of-type(1) {
background-color: $window-color-2;
}
span:nth-of-type(5) {
background-color: $window-color-3;
}
span:nth-of-type(6) {
background-color: $window-color-2;
}
}
}
div:nth-of-type(7) {
width: 4%;
height: 32%;
margin-left: 13%;
box-shadow: $box-shadow-right-1;
@include rooftop-before(80%,100%,-30%,10%,$box-shadow-right-2);
.windows {
@include windows(column,5%);
span:nth-of-type(2n) {
background: $win-light-03;
}
}
}
div:nth-of-type(8) {
width: 9%;
height: 28%;
top: 0;
@include rooftop-before(80%,100%,-10%,10%,$box-shadow-right-2);
.windows {
@include windows(row,100%);
span {
background: $win-light-01;
}
}
}
div:nth-of-type(9) {
width: 3%;
height: 18%;
margin-left: 2%;
box-shadow: $box-shadow-right-2;
top: -1%;
.windows {
@include windows(column,5%);
span {
background-color: $window-color-1;
}
span:nth-of-type(1),
span:nth-of-type(5) {
background-color: $window-color-2;
}
}
}
div:nth-of-type(10) {
width: 5%;
height: 16%;
.windows {
@include windows-grid(33.33%);
span:nth-of-type(2) {
background: $window-color-2;
}
span:nth-of-type(6) {
background: $window-color-2;
}
span:nth-of-type(10) {
background: $window-color-1;
}
span:nth-of-type(13) {
background: $window-color-1;
}
span:nth-of-type(14) {
background: $window-color-1;
}
span:nth-of-type(15) {
background: $window-color-3;
}
}
}
}
.city-base {
width: 102%;
position: absolute;
bottom: -8%;
left: -1%;
border: solid 3px $base-2;
box-shadow: 0 -4px 7px $base-1;
filter: blur(.1rem);
z-index: 3;
}
}
}
.tron-grid {
height: 100%;
background: linear-gradient(to right, $grid-4 0%, $grid-3 30%, $grid-2 48%,$grid-1 50%,$grid-2 52%,$grid-3 70%,$grid-4 100%);
div {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div:nth-of-type(1) {
z-index: -2;
span {
width: 2px;
height: 1000px;
background-color: $grid-line;
position: absolute;
top: -150px;
display: flex;
justify-content: center;
align-items: center;
}
span:nth-of-type(1) {
left: calc((100% / 41) * -13); /* Line position */
transform: rotateZ(84deg); /* Line inclination */
}
span:nth-of-type(2) {
left: calc((100% / 41) * -10);
transform: rotateZ(83deg);
}
span:nth-of-type(3) {
left: calc((100% / 41) * -7);
transform: rotateZ(82deg);
}
span:nth-of-type(4) {
left: calc((100% / 41) * -4);
transform: rotateZ(81deg);
}
span:nth-of-type(5) {
left: calc((100% / 41) * -1);
transform: rotateZ(80deg);
}
span:nth-of-type(6) {
left: calc((100% / 41) * 2);
transform: rotateZ(78deg);
}
span:nth-of-type(7) {
left: calc((100% / 41) * 5);
transform: rotateZ(75deg);
}
span:nth-of-type(8) {
left: calc((100% / 41) * 9);
transform: rotateZ(72deg);
}
span:nth-of-type(9) {
left: calc((100% / 41) * 13);
transform: rotateZ(65deg);
}
span:nth-of-type(10) {
left: calc((100% / 41) * 16);
transform: rotateZ(45deg);
}
span:nth-of-type(11) {
left: calc((100% / 41) * 19);
transform: rotateZ(20deg);
}
span:nth-of-type(12) {
left: calc((100% / 41) * 22);
transform: rotateZ(-20deg);
}
span:nth-of-type(13) {
left: calc((100% / 41) * 25);
transform: rotateZ(-45deg);
}
span:nth-of-type(14) {
left: calc((100% / 41) * 28);
transform: rotateZ(-65deg);
}
span:nth-of-type(15) {
left: calc((100% / 41) * 32);
transform: rotateZ(-72deg);
}
span:nth-of-type(16) {
left: calc((100% / 41) * 36);
transform: rotateZ(-75deg);
}
span:nth-of-type(17) {
left: calc((100% / 41) * 39);
transform: rotateZ(-78deg);
}
span:nth-of-type(18) {
left: calc((100% / 41) * 42);
transform: rotateZ(-80deg);
}
span:nth-of-type(19) {
left: calc((100% / 41) * 45);
transform: rotateZ(-81deg);
}
span:nth-of-type(20) {
left: calc((100% / 41) * 48);
transform: rotateZ(-82deg);
}
span:nth-of-type(21) {
left: calc((100% / 41) * 51);
transform: rotateZ(-83deg);
}
span:nth-of-type(22) {
left: calc((100% / 41) * 54);
transform: rotateZ(-84deg);
}
}
div:nth-of-type(2) {
z-index: -1;
span {
width: 100%;
height: 2px;
background-color: $grid-line;
position: absolute;
flex: none;
display: flex;
justify-content: center;
align-items: center;
}
span:nth-of-type(1) {
bottom: 8%;
}
span:nth-of-type(2) {
bottom: 15%;
}
span:nth-of-type(3) {
bottom: 21%;
}
span:nth-of-type(4) {
bottom: 26%;
}
span:nth-of-type(5) {
bottom: 30%;
}
span:nth-of-type(6) {
bottom: 33%;
}
span:nth-of-type(7) {
bottom: 35%;
}
span:nth-of-type(8) {
bottom: 36.5%;
}
span:nth-of-type(9) {
bottom: 38%;
}
span:nth-of-type(10) {
bottom: 39.5%;
}
span:nth-of-type(11) {
bottom: 40.8%;
}
span:nth-of-type(12) {
bottom: 42%;
}
span:nth-of-type(13) {
bottom: 42.8%;
}
span:nth-of-type(14) {
bottom: 43.5%;
}
span:nth-of-type(15) {
bottom: 44%;
}
}
div:nth-of-type(3) {
position: absolute;
bottom: 5px;
h1,
h2 {
font-size: 16px;
font-weight: 1.2;
color: $tron-white;
margin: 0 10px;
padding: 0 5px;
background-color: rgba(0,104,189,.3);
text-shadow: 1px 3px 0 $grid-1;
}
}
}
}
// Tron Skyline
// CSS Draw, only CSS
// Drawing taking the movie Tron as a reference.
// jordirue.com/tron.html
// Inspired by:
// https://codepen.io/ivorjetski/pen/xxGYWQG
// &
// https://codepen.io/slinto/pen/mBCFx
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.