//- Container
.container
//-- About section
section.about
//--- Card Wrap
.cardWrap
//---- Learnability Icon
.iconCard
.learnabilityIcon
//----- Learnability Editor
.learnabilityEditor
//------ Learnability Editor Panel
.learnabilityEditor__panel
.learnabilityEditor__buttonsWrap
each val, index in ['exit', 'minimize', 'screen']
.learnabilityEditor__button(class=`__button_${val}`)
//------ Learnability Editor Code
.learnabilityEditor__codeWrap
.learnabilityEditor__scrollBox
ul.learnabilityEditor__codeList
- for (var n = 0; n < 7; n++)
li.learnabilityEditor__codeItem
- for (var j = 0; j < 5; j++)
.learnabilityEditor__codeLine
//----- Learnability Keyboard
.learnabilityKeyboard
each val, index in [14, 14, 13, 12, 10]
ul.learnabilityKeyboard__line
- for (var n = 0; n < val; n++)
li.learnabilityKeyboard__button
//----- Learnability Gear
.learnabilityGear
.learnabilityGear__gear
svg(viewBox="-208 -208 300 300")
defs
line#learnabilityGearTooth(x1="-2" x2="22")
g.teeth
- var n = 0;
- var angle = 30;
while n < 12
g(transform=`rotate(${n++ * angle})`)
use(xlink:href="#learnabilityGearTooth" x="85")
.learnabilityGear__gearCircle
//---- Fast Icon
.iconCard
.fastIcon
//----- Fast Browser
.fastBrowser
//------ Fast Browser Panel
.fastBrowser__panel
.fastBrowser__buttonsWrap
each val, index in ['exit', 'minimize', 'screen']
.fastBrowser__button(class=`__button_${val}`)
.fastBrowser__input
//------ Fast Browser Page
.fastBrowser__page
ul.fastBrowser__lineWrap
- for (var n = 0; n < 6; n++)
li.fastBrowser__line
//----- Fast Clock Wrap
.fastClockWrap
//------ Fast Clock Gear
.fastClockWrap__gear
svg(viewBox="-208 -208 300 300")
defs
line#clockGearTooth(x1="-2" x2="18")
g.teeth
- var n = 0;
- var angle = 30;
while n < 12
g(transform=`rotate(${n++ * angle})`)
use(xlink:href="#clockGearTooth" x="85")
//------ Fast Clock
.fastClockWrap__clock
.clockFaceContainer
.clockFaceContainer__clockHand
.clockFaceContainer__clockCircle
svg(viewBox="-208 -208 300 300")
defs
line#clockDealTooth(x1="-2" x2="10")
g.teeth
- var n = 0;
- var angle = 9;
while n < 40
g(transform=`rotate(${n++ * angle})`)
use(xlink:href="#clockDealTooth" x="85")
//---- Dynamic Icon
.iconCard
.dynamicIcon
//----- Dynamic Browser
.dynamicBrowser
//------ Dynamic Browser Panel
.dynamicBrowser__panel
.dynamicBrowser__buttonsWrap
each val, index in ['exit', 'minimize', 'screen']
.dynamicBrowser__button(class=`__button_${val}`)
//------ Dynamic Browser Header
header.dynamicBrowser__header
ul.dynamicBrowser__lineWrap
- for (var n = 0; n < 4; n++)
li.dynamicBrowser__line
.dynamicBrowser__title
.dynamicBrowser__subtitle
//------ Dynamic Browser Main
section.dynamicBrowser__main
.landscape
.landscapePicture
.landscapePicture__bg
.landscapePicture__dayWrap
.landscapePicture__sun
.landscapePicture__moon
.landscapePicture__mountainsWrap
.landscapePicture__mountain
.landscapePicture__mountain
//------ Dynamic Browser Footer
footer.dynamicBrowser__footer
ul.dynamicBrowser__productList
- for (var n = 0; n < 3; n++)
li.dynamicBrowser__product
.dynamicBrowser__productImg
.dynamicBrowser__productLineWrap
- for (var j = 0; j < 3; j++)
.dynamicBrowser__productLine
//----- Dynamic Dialog
mixin dynamicDialogMix(side, lineIteration)
ul.dynamicDialog(class=`dynamicDialog_${side}`)
- for (var n = 0; n < lineIteration; n++)
li.dynamicDialog__line
+dynamicDialogMix('left', '4')
+dynamicDialogMix('right', '3')
//----- Dynamic Dashed Frame
.dynamicDashedFrame
//----- Dynamic Chart
ul.dynamicChart
- for (var n = 0; n < 5; n++)
li.dynamicChart__line
//---- Responsive Icon
.iconCard
.responsiveIcon
//----- Responsive Imac
.respImac
//------ Responsive Imac Display
.respImac__display
//------- Responsive Browser
.respBrowser
//-------- Responsive Browser Panel
.respBrowser__panel
.respBrowser__buttonsWrap
each val, index in ['exit', 'minimize', 'screen']
.respBrowser__button(class=`__button_${val}`)
//-------- Responsive Browser Page
.respBrowser__page
.respBrowser__pageLayout
//--------- Responsive Browser Nav
.respBrowser__nav
//--------- Responsive Browser Banner
.respBrowser__banner
//--------- Responsive Browser Product List
ul.respBrowser__productList
- for (var n = 0; n < 3; n++)
li.respBrowser__product
.respBrowser__productImg
.respBrowser__productLineWrap
- for (var j = 0; j < 2; j++)
.respBrowser__productLine
//------ Responsive Imac Panel
.respImac__panel
//------ Responsive Imac Stand
.respImac__stand
.respImac__standShadow
.respImac__standBase
//----- Responsive Ipad
.respIpad
//------ Responsive Ipad Display
.respIpad__display
//------- Ipad Browser
.ipadBrowser
//-------- Ipad Browser Nav
.ipadBrowser__nav
//-------- Ipad Browser Banner
.ipadBrowser__banner
//-------- Responsive Ipad Product List
ul.ipadBrowser__productList
- for (var n = 0; n < 3; n++)
li.ipadBrowser__product
.ipadBrowser__productImg
.ipadBrowser__productLineWrap
- for (var j = 0; j < 3; j++)
.ipadBrowser__productLine
//------ Responsive Ipad Camera
.respIpad__camera
//------ Responsive Ipad Button
.respIpad__button
//----- Responsive Iphone
.respIphone
//------ Responsive Iphone Display
.respIphone__display
//------- Iphone Browser
.iphoneBrowser
//-------- Iphone Browser Nav
.iphoneBrowser__nav
//-------- Responsive Iphone Product List
ul.iphoneBrowser__productList
- for (var n = 0; n < 2; n++)
li.iphoneBrowser__product
.iphoneBrowser__productImg
.iphoneBrowser__productLineWrap
- for (var j = 0; j < 2; j++)
.iphoneBrowser__productLine
//------ Responsive Iphone Camera
.respIphone__camera
//------ Responsive Iphone Button
.respIphone__button
//---- Sociable Icon
.iconCard
.sociableIcon
//----- Sociable Link
mixin sociableLinkMix(position, name)
.sociableLink(class=`sociableLink_${position}`)
.sociableLink__figure(class=`sociableLink__figure_${name}`)
+sociableLinkMix('posLC', 'mail')
+sociableLinkMix('posLT', 'money')
+sociableLinkMix('posCT', 'tag')
+sociableLinkMix('posRT', 'percent')
+sociableLinkMix('posRC', 'and')
//----- Sociable Display
.sociableDisplay
//------ Sociable Panel
mixin sociableDisplayPanelMix(side, lineIteration)
ul.sociableDisplay__panel(class=`sociableDisplay_${side}Side`)
- for (var n = 0; n < lineIteration; n++)
li.sociableDisplay__line
+sociableDisplayPanelMix('left', '6')
+sociableDisplayPanelMix('right', '4')
//------ Sociable Avatar
.sociableDisplay__avatar
//------ Sociable Buttons Wrap
ul.sociableDisplay__buttonsWrap
- for (var n = 0; n < 2; n++)
li.sociableDisplay__button
//----- Sociable Keyboard
.sociableKeyboard
//---- Intuitive Icon
.iconCard
.intuitiveIcon
//----- Intuitive Rays
.intuitiveRays
svg(viewBox="-208 -208 300 300")
defs
line#ray(x1="-2" x2="15")
g.teeth
- var n = 0;
- var angle = 15;
while n < 24
g(transform=`rotate(${n++ * angle})`)
use(xlink:href="#ray" x="85")
//----- Intuitive Lamp
svg.intuitiveLightBulb(viewBox="0 0 571 678" fill="none" xmlns="http://www.w3.org/2000/svg")
path.intuitiveLightBulb__silhouette(d="M556.239 285.043C556.239 206.755 523.045 136.22 469.964 86.744C416.883 37.268 343.914 8.85098 264.363 14.8C197.061 19.833 136.478 49.868 91.794 95.492C47.11 141.116 18.323 202.329 14.612 269.717C12.344 310.898 19.279 350.212 33.545 385.795C47.811 421.378 69.409 453.23 96.469 479.488C120.498 502.805 138.92 530.743 151.334 561.222C163.748 591.701 170.157 624.721 170.157 658.203V660.98V663.757H285.215H400.273V660.972V658.187C400.273 623.899 407.426 590.554 420.628 559.706C433.83 528.858 453.081 500.51 477.276 476.215C501.674 451.716 521.415 422.578 535.056 390.238C548.697 357.895 556.239 322.352 556.239 285.043Z")
path.intuitiveLightBulb__silhouette(d="M400.273 677.601H285.216H170.158C166.334 677.601 162.873 676.052 160.368 673.546C157.863 671.04 156.313 667.579 156.313 663.756V660.979V658.202C156.313 625.996 149.981 594.513 138.13 565.726C126.279 536.939 108.907 510.846 86.828 489.422C57.215 460.688 34.568 426.232 19.893 388.629C5.21797 351.026 -1.48604 310.276 0.787958 268.955C4.70096 197.877 34.875 133.538 81.802 85.642C128.729 37.746 192.408 6.29501 263.332 0.992007C303.488 -2.01999 342.71 3.155 379.233 15.896C415.756 28.636 449.581 48.942 478.942 76.189C507.903 103.065 530.688 135.534 546.233 171.156C561.778 206.778 570.082 245.554 570.082 285.045C570.082 322.962 562.713 359.761 548.655 393.799C534.596 427.836 513.848 459.112 487.087 485.983C463.558 509.606 445.316 536.707 432.957 565.877C420.597 595.047 414.119 626.286 414.119 658.187V660.972V663.757C414.119 667.581 412.57 671.042 410.064 673.547C407.558 676.052 404.097 677.601 400.273 677.601ZM183.879 649.911H285.219H386.559C387.63 615.828 395.3 582.569 408.981 551.526C422.662 520.483 442.353 491.657 467.466 466.441C491.625 442.182 510.356 413.947 523.048 383.22C535.74 352.492 542.392 319.272 542.392 285.043C542.392 249.392 534.893 214.384 520.858 182.223C506.823 150.062 486.251 120.748 460.105 96.484C433.599 71.887 403.057 53.555 370.075 42.053C337.092 30.551 301.668 25.88 265.398 28.605C201.386 33.391 143.911 61.781 101.556 105.013C59.201 148.245 31.967 206.32 28.435 270.478C26.383 307.792 32.434 344.589 45.683 378.542C58.932 412.496 79.378 443.607 106.113 469.55C129.909 492.643 148.827 520.525 162.058 551.238C175.289 581.952 182.832 615.495 183.879 649.911Z")
//----- Intuitive Lamp Circle
.intuitiveLightBulbCircle
//----- Intuitive Brain
.intuitiveBrain
//----- Intuitive Play
svg.intuitivePlay(viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg")
path(d="M19.982 14.438L13.742 9.902C13.513 9.736 13.209 9.711 12.958 9.84C12.705 9.968 12.547 10.228 12.547 10.509V19.578C12.547 19.862 12.705 20.121 12.958 20.249C13.065 20.303 13.182 20.33 13.3 20.33C13.454 20.33 13.61 20.281 13.742 20.184L19.982 15.652C20.179 15.507 20.294 15.283 20.294 15.045C20.295 14.803 20.177 14.58 19.982 14.438Z")
path(d="M15.026 0.0019989C6.726 0.0019989 0 6.728 0 15.028C0 23.325 6.726 30.049 15.026 30.049C23.324 30.049 30.051 23.324 30.051 15.028C30.052 6.728 23.324 0.0019989 15.026 0.0019989ZM15.026 27.542C8.114 27.542 2.51 21.941 2.51 15.028C2.51 8.118 8.114 2.51 15.026 2.51C21.937 2.51 27.54 8.117 27.54 15.028C27.541 21.941 21.937 27.542 15.026 27.542Z")
//----- Intuitive Figures
each val, index in ['sm', 'lg']
.intuitiveBubble(class=`intuitiveBubble_${val}`)
.intuitiveRectangle
//----- Intuitive Dialog
.intuitiveDialog
.intuitiveDialog__cloud
ul.intuitiveDialog__lineWrap
- for (var n = 0; n < 2; n++)
li.intuitiveDialog__line
//----- Intuitive Landscape
.landscape
.landscapeShadow
.landscapePicture
.landscapePicture__bg
.landscapePicture__dayWrap
.landscapePicture__sun
.landscapePicture__moon
.landscapePicture__mountainsWrap
.landscapePicture__mountain
.landscapePicture__mountain
//----- Intuitive Neck
.intuitiveNeck
//----- Intuitive Base Housing
ul.intuitiveBaseHousing
- for (var n = 0; n < 4; n++)
li.intuitiveBaseHousing__line
li.intuitiveBaseHousing__contact
//- 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")/*____________________________________________________________
# @import
## @import reset.scss
# Variables
## Regular color variables
## Compound color variables
## Screen size variables
# Extends
## Position centering extends
# Mixins
## Media queries mixin
## Animation delay mixin
# Auxiliary styles
# Container
## Social links
## About section
### Card wrap
#### Learnability Icon
##### Learnability Editor
###### Learnability Editor Panel
###### Learnability Editor Code
##### Learnability Keyboard
##### Learnability Gear
#### Fast Icon
##### Fast Browser
###### Fast Browser Panel
###### Fast Browser Page
##### Fast Clock Wrap
###### Fast Clock Gear
###### Fast Clock
#### Dynamic Icon
##### Dynamic Browser
###### Dynamic Browser Panel
###### Dynamic Browser Header
###### Dynamic Browser Main
###### Dynamic Browser Footer
##### Dynamic Dialog
##### Dynamic Dashed Frame
##### Dynamic Chart
#### Responsive Icon
##### Responsive Imac
###### Responsive Imac Display
####### Responsive Browser
######## Responsive Browser Panel
######## Responsive Browser Page
######### Responsive Browser Nav
######### Responsive Browser Banner
######### Responsive Browser Product List
###### Responsive Imac Panel
###### Responsive Imac Stand
##### Responsive Ipad
###### Responsive Ipad Display
####### Ipad Browser
######## Ipad Browser Nav
######## Ipad Browser Banner
######## Responsive Ipad Product List
###### Responsive Ipad Camera
###### Responsive Ipad Button
##### Responsive Iphone
###### Responsive Iphone Display
####### Iphone Browser
######## Iphone Browser Nav
######## Responsive Iphone Product List
###### Responsive Iphone Camera
###### Responsive Iphone Button
#### Sociable Icon
##### Sociable Link
##### Sociable Display
###### Sociable Panel
###### Sociable Avatar
###### Sociable Buttons Wrap
##### Sociable Keyboard
#### Intuitive Icon
##### Intuitive Rays
##### Intuitive Lamp
##### Intuitive Lamp Circle
##### Intuitive Brain
##### Intuitive Play
##### Intuitive Figures
##### Intuitive Dialog
##### Intuitive Landscape
##### Intuitive Neck
##### Intuitive Base Housing
# Animation Pack
## Animation Icons
____________________________________________________________*/
/*____________________________________________________________
# @import
____________________________________________________________*/
/*____________________________________________________________
## @import reset.scss
____________________________________________________________*/
// @import '../../bower_components/reset-scss/reset.scss';
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
// HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*____________________________________________________________
# Variables
____________________________________________________________*/
/*____________________________________________________________
## Regular color variables
____________________________________________________________*/
// First number color
$x-color-black: #000;
$x-color-dark-blue: #01243a;
$x-color-dark-greenish-blue: #0b3442;
$x-color-blackish-blue: #171b25;
$x-color-dark-grey-blue: #272f3a;
$x-color-lime-green: #29c740;
$x-color-granite: #2a333c;
$x-color-dark-cyanide: #2c8291;
$x-color-cyanide: #37a4b8;
$x-color-space:#37404a;
$x-color-slate-grey: #3e4955;
$x-color-graphite-grey: #4c5259;
$x-color-wet-asphalt: #626a73;
$x-color-aquamarine: #7dcbd8;
$x-color-deep-red-brown: #480a16;
$x-color-flea-belly: #4d160e;
$x-color-marengo: #4d5c68;
$x-color-moderate-turquoise: #57c2cb;
$x-color-falun-red: #5f140e;
$x-color-dark-red: #732124;
$x-color-pearl-ruby: #7a1635;
$x-color-manatee: #889ea6;
$x-color-coral-red: #8c250e;
$x-color-vinous: #9b2d30;
// First letter color
$x-color-snow-blue: #a3d9e3;
$x-color-cadet-blue: #a4b4ba;
$x-color-niagara: #b0b7c6;
$x-color-silver: #c0c0c0;
$x-color-grideperlevy: #c3cdd1;
$x-color-grey-silk: #c6b69d;
$x-color-deep-orange: #c74b16;
$x-color-light-cyanide: #cceaf0;
$x-color-periwinkle: #cfdce5;
$x-color-light-cherry: #dd3e62;
$x-color-gainsborough: #e1e6e8;
$x-color-light-gray: #e6e5e5;
$x-color-tomato: #ee6648;
$x-color-beige: #f7e0b5;
$x-color-lemon-cream: #fafac3;
$x-color-shiny-orange: #febc2e;
$x-color-amber: #fec712;
$x-color-orange-dawn: #ff5f56;
$x-color-white: #fff;
/*____________________________________________________________
## Compound color variables
____________________________________________________________*/
$palette-primary: $x-color-vinous;
$palette-secondary: $x-color-beige;
$palette-tertiary: $x-color-aquamarine;
$palette-button-exit: $x-color-orange-dawn;
$palette-button-minimize: $x-color-shiny-orange;
$palette-button-screen: $x-color-lime-green;
$palette-bubble-type-1: $x-color-aquamarine;
$palette-bubble-type-2: $x-color-granite;
$palette-bubble-type-3: $x-color-tomato;
$palette-chart-type-1: $x-color-tomato;
$palette-chart-type-2: $x-color-granite;
$palette-window-line: $x-color-light-cyanide;
$palette-folder-shadow: $x-color-dark-cyanide;
$palette-settings-elements: $x-color-dark-cyanide;
$palette-analytics-elements: $x-color-snow-blue;
$palette-dialog: $x-color-snow-blue;
$palette-site-layout: $x-color-snow-blue;
$palette-imac-display-gradient: $x-color-snow-blue;
$palette-imac-browser-elements: $x-color-silver;
$palette-imac-browser-line: $x-color-granite;
$palette-program-panel: $x-color-granite;
$palette-skin: $x-color-deep-orange;
$palette-skin-shadow: $x-color-falun-red;
$palette-hair-blink: $x-color-dark-greenish-blue;
$palette-hair-shadow: $x-color-dark-blue;
$palette-costume-elements: $x-color-marengo;
$palette-bow-elements: $x-color-dark-red;
$palette-responsive-nav: $x-color-tomato;
$palette-responsive-banner: $x-color-aquamarine;
/*____________________________________________________________
## Screen size variables
____________________________________________________________*/
$media-screen-1824: 1824px;
$media-screen-1680: 1680px;
$media-screen-1600: 1600px;
$media-screen-1440: 1440px;
$media-screen-1366: 1366px;
$media-screen-1280: 1280px;
$media-screen-1120: 1120px;
$media-screen-1024: 1024px;
$media-screen-960: 960px;
$media-screen-848: 848px;
$media-screen-768: 768px;
$media-screen-720: 720px;
$media-screen-642: 642px;
$media-screen-480: 480px;
$media-screen-410: 410px;
$media-screen-375: 375px;
$media-screen-360: 360px;
$media-screen-320: 320px;
/*____________________________________________________________
# Extends
____________________________________________________________*/
/*____________________________________________________________
## Position centering extends
____________________________________________________________*/
%verticalCentering {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
%horizontalCentering {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
%centering {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*____________________________________________________________
# Mixins
____________________________________________________________*/
/*____________________________________________________________
## Media queries mixin
____________________________________________________________*/
@mixin media-screen($media) {
@if $media == 1824 {
@media only screen and (max-width: $media-screen-1824) { @content; }
}
@else if $media == 1680 {
@media only screen and (max-width: $media-screen-1680) { @content; }
}
@else if $media == 1600 {
@media only screen and (max-width: $media-screen-1600) { @content; }
}
@else if $media == 1440 {
@media only screen and (max-width: $media-screen-1440) { @content; }
}
@else if $media == 1366 {
@media only screen and (max-width: $media-screen-1366) { @content; }
}
@else if $media == 1280 {
@media only screen and (max-width: $media-screen-1280) { @content; }
}
@else if $media == 1120 {
@media only screen and (max-width: $media-screen-1120) { @content; }
}
@else if $media == 1024 {
@media only screen and (max-width: $media-screen-1024) { @content; }
}
@else if $media == 960 {
@media only screen and (max-width: $media-screen-960) { @content; }
}
@else if $media == 848 {
@media only screen and (max-width: $media-screen-848) { @content; }
}
@else if $media == 768 {
@media only screen and (max-width: $media-screen-768) { @content; }
}
@else if $media == 720 {
@media only screen and (max-width: $media-screen-720) { @content; }
}
@else if $media == 642 {
@media only screen and (max-width: $media-screen-642) { @content; }
}
@else if $media == 480 {
@media only screen and (max-width: $media-screen-480) { @content; }
}
@else if $media == 414 {
@media only screen and (max-width: $media-screen-410) { @content; }
}
@else if $media == 375 {
@media only screen and (max-width: $media-screen-375) { @content; }
}
@else if $media == 360 {
@media only screen and (max-width: $media-screen-360) { @content; }
}
@else if $media == 320 {
@media only screen and (max-width: $media-screen-320) { @content; }
}
}
/*____________________________________________________________
## Animation delay mixin
____________________________________________________________*/
@mixin animDelayChild($nthChild, $delay) {
&:nth-child(#{$nthChild}) {
&:after {
animation-delay: #{$delay}s;
}
}
}
/*____________________________________________________________
# Auxiliary styles
____________________________________________________________*/
::scrollbar {
width: 0;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.__button_exit {
background-color: $palette-button-exit;
}
.__button_minimize {
background-color: $palette-button-minimize;
}
.__button_screen {
background-color: $palette-button-screen;
}
/*____________________________________________________________
# Container
____________________________________________________________*/
.container {
width: 100%;
}
/*____________________________________________________________
## About section
____________________________________________________________*/
.about {
position: relative;
width: 100%;
height: 100vh;
background-color: $palette-primary;
}
/*____________________________________________________________
### Card wrap
____________________________________________________________*/
.cardWrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 490px;
height: 320px;
}
.iconCard {
float: left;
position: relative;
width: 150px;
height: 150px;
margin-bottom: 20px;
margin-right: 20px;
background-color: #9b2d30;
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);
&:nth-child(3n) {
margin-right: 0;
}
}
/*____________________________________________________________
#### Learnability Icon
____________________________________________________________*/
.learnabilityIcon {
@extend %centering;
width: 81px;
height: 61px;
}
/*____________________________________________________________
##### Learnability Editor
____________________________________________________________*/
.learnabilityEditor {
position: absolute;
right: 0;
width: 41px;
height: 100%;
}
/*____________________________________________________________
###### Learnability Editor Panel
____________________________________________________________*/
.learnabilityEditor__panel {
position: relative;
width: 100%;
height: 5px;
background-color: $palette-program-panel;
}
.learnabilityEditor__buttonsWrap {
position: absolute;
top: 1px;
left: 2px;
height: 2px;
}
.learnabilityEditor__button {
float: left;
margin-right: 1px;
width: 2px;
height: 2px;
border-radius: 50%;
}
/*____________________________________________________________
###### Learnability Editor Code
____________________________________________________________*/
.learnabilityEditor__codeWrap {
position: relative;
padding: 6px;
width: 100%;
height: calc(100% - 5px);
background-color: $x-color-tomato;
}
.learnabilityEditor__scrollBox {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.learnabilityEditor__codeList {
position: absolute;
width: 100%;
animation: learnabilityScrollCode .9s linear infinite;
}
.learnabilityEditor__codeItem {
position: relative;
margin-bottom: 2px;
width: 100%;
height: 7px;
}
.learnabilityEditor__codeLine {
position: absolute;
height: 1px;
overflow: hidden;
@mixin learnabilityEditorCodeLineChild($nthChild, $vSide, $vSideInent, $hSide, $hSideInent, $width) {
&:nth-child(#{$nthChild}) {
#{$vSide}: #{$vSideInent}px;
#{$hSide}: #{$hSideInent}px;
width: #{$width}px;
}
}
@include learnabilityEditorCodeLineChild(1, top, 0, left, 0, 7);
@include learnabilityEditorCodeLineChild(2, top, 0, left, 9, 11);
@include learnabilityEditorCodeLineChild(3, top, 3, left, 4, 21);
@include learnabilityEditorCodeLineChild(4, bottom, 0, right, 7, 14);
@include learnabilityEditorCodeLineChild(5, bottom, 0, right, 0, 5);
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(2, .2);
@include animDelayChild(3, .4);
@include animDelayChild(4, .6);
@include animDelayChild(5, .7);
&:nth-child(3),
&:nth-child(4),
&:nth-child(5) {
&:after {
background-color: $x-color-white;
}
}
}
/*____________________________________________________________
##### Learnability Keyboard
____________________________________________________________*/
.learnabilityKeyboard {
position: absolute;
bottom: 0;
padding: 2px;
width: 66px;
height: 26px;
background-color: $x-color-light-gray;
}
.learnabilityKeyboard__line {
position: relative;
margin-bottom: 1px;
width: 100%;
height: 3.4px;
overflow: hidden;
&:last-child {
margin-bottom: 0;
}
@mixin keyboardButtonChild($nthChildLine, $nthChildButton, $width) {
&:nth-child(#{$nthChildLine}) {
.learnabilityKeyboard__button {
&:nth-child(#{$nthChildButton}) {
width: #{$width}px;
}
}
}
}
@include keyboardButtonChild(1, 14, 4.5);
@include keyboardButtonChild(2, 1, 4.5);
@include keyboardButtonChild(3, 1, 6.3);
@include keyboardButtonChild(3, 13, 6.3);
@include keyboardButtonChild(4, 1, 8.5);
@include keyboardButtonChild(4, 12, 8.5);
@include keyboardButtonChild(5, 5, 22);
@mixin keyboardButtonAnimDelayChild($nthChildLine, $nthChildButton, $delay) {
&:nth-child(#{$nthChildLine}) {
.learnabilityKeyboard__button {
&:nth-child(#{$nthChildButton}) {
animation: keyboardClick 4s linear infinite #{$delay}s;
}
}
}
}
@include keyboardButtonAnimDelayChild(2, 4, .4);
@include keyboardButtonAnimDelayChild(3, 10, .8);
@include keyboardButtonAnimDelayChild(2, 10, 1.2);
@include keyboardButtonAnimDelayChild(5, 5, 1.6);
@include keyboardButtonAnimDelayChild(2, 3, 2);
@include keyboardButtonAnimDelayChild(1, 11, 2.4);
@include keyboardButtonAnimDelayChild(2, 5, 2.8);
@include keyboardButtonAnimDelayChild(4, 12, 3.2);
@include keyboardButtonAnimDelayChild(3, 4, 3.6);
}
.learnabilityKeyboard__button {
position: relative;
margin-right: 1px;
float: left;
width: 3.4px;
height: 3.4px;
background-color: $x-color-white;
&:last-child {
margin-right: 0;
}
}
/*____________________________________________________________
##### Learnability Gear
____________________________________________________________*/
.learnabilityGear {
position: absolute;
top: 4px;
left: 5px;
width: 30px;
height: 26px;
&:before,
&:after {
content: '';
position: absolute;
border: solid $x-color-granite;
width: 3px;
height: 100%;
box-sizing: border-box;
}
&:before {
border-width: 1px 0 1px 1px;
}
&:after {
right: 0;
border-width: 1px 1px 1px 0;
}
}
.learnabilityGear__gear {
@extend %centering;
width: 30px;
height: 30px;
svg {
position: absolute;
max-width: 100%;
max-height: 100%;
fill: none;
stroke: $x-color-space;
stroke-width: 24px;
animation: rotateRays 7s linear infinite;
}
.teeth {
position: absolute;
top: 19.32%;
left: 19.32%;
transform: translate(-19.32%, -19.32%);
}
}
.learnabilityGear__gearCircle {
@extend %centering;
width: 17px;
height: 17px;
border: 4px solid $x-color-granite;
background-color: $x-color-white;
border-radius: 50%;
}
/*____________________________________________________________
#### Fast Icon
____________________________________________________________*/
.fastIcon {
@extend %centering;
width: 69px;
height: 69px;
}
/*____________________________________________________________
##### Fast Browser
____________________________________________________________*/
.fastBrowser {
position: relative;
width: 100%;
height: 100%;
}
/*____________________________________________________________
###### Fast Browser Panel
____________________________________________________________*/
.fastBrowser__panel {
position: relative;
padding: 3px 5px;
width: 100%;
height: 11px;
background-color: $x-color-granite;
}
.fastBrowser__buttonsWrap {
float: left;
margin-right: 5px;
width: 18px;
height: 4px;
}
.fastBrowser__button {
float: left;
margin-right: 3px;
width: 4px;
height: 4px;
&:last-child {
margin-right: 0;
}
}
.fastBrowser__input {
position: relative;
float: left;
width: calc(100% - 23px);
height: 4px;
background-color: $x-color-white;
&:after {
content: '';
position: absolute;
right: 0;
width: 7px;
height: 100%;
background-color: $x-color-tomato;
}
}
/*____________________________________________________________
###### Fast Browser Page
____________________________________________________________*/
.fastBrowser__page {
position: relative;
padding: 5px;
width: 100%;
height: calc(100% - 11px);
border: 4px solid $x-color-light-gray;
background-color: $x-color-white;
}
.fastBrowser__lineWrap {
width: 100%;
height: 100%;
}
.fastBrowser__line {
position: relative;
margin-bottom: 2px;
width: 100%;
height: 2px;
overflow: hidden;
&:first-child {
height: 20px;
}
&:last-child {
margin-bottom: 0;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-tomato;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(2, .1);
@include animDelayChild(3, .2);
@include animDelayChild(4, .3);
@include animDelayChild(5, .4);
@include animDelayChild(6, .45);
}
/*____________________________________________________________
##### Fast Clock Wrap
____________________________________________________________*/
.fastClockWrap {
position: absolute;
top: 30px;
right: -30px;
width: 68px;
height: 68px;
}
/*____________________________________________________________
###### Fast Clock Gear
____________________________________________________________*/
.fastClockWrap__gear {
position: absolute;
width: 100%;
height: 100%;
svg {
position: absolute;
max-width: 100%;
max-height: 100%;
fill: none;
stroke: $x-color-space;
stroke-width: 24px;
animation: rotateRays 7s linear infinite;
}
.teeth {
position: absolute;
top: 19.32%;
left: 19.32%;
transform: translate(-19.32%, -19.32%);
}
}
/*____________________________________________________________
###### Fast Clock
____________________________________________________________*/
.fastClockWrap__clock {
@extend %centering;
width: 38px;
height: 38px;
overflow: hidden;
border: 4px solid $x-color-granite;
border-radius: 50%;
}
.clockFaceContainer {
position: absolute;
top: -5px;
left: -5px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: $x-color-white;
svg {
position: absolute;
max-width: 100%;
max-height: 100%;
fill: none;
stroke: $x-color-granite;
stroke-width: 4px;
stroke-linecap: round;
}
.teeth {
position: absolute;
top: 19.32%;
left: 19.32%;
transform: translate(-19.32%, -19.32%);
}
}
.clockFaceContainer__clockHand {
position: absolute;
top: calc(50% - 4px);
left: 50%;
transform: translate(-50%, -50%);
width: 1px;
height: 12px;
transform-origin: 50% 4px;
background-color: $x-color-granite;
animation: rotateRays 12s linear infinite;
}
.clockFaceContainer__clockCircle {
@extend %centering;
width: 5px;
height: 5px;
border: 1px solid $x-color-granite;
border-radius: 50%;
background-color: $x-color-white;
}
/*____________________________________________________________
#### Dynamic Icon
____________________________________________________________*/
.dynamicIcon {
@extend %centering;
width: 47px;
height: 68px;
}
/*____________________________________________________________
##### Dynamic Browser
____________________________________________________________*/
.dynamicBrowser {
position: relative;
width: 100%;
height: 100%;
}
/*____________________________________________________________
###### Dynamic Browser Panel
____________________________________________________________*/
.dynamicBrowser__panel {
width: 100%;
height: 5px;
background-color: $palette-program-panel;
}
.dynamicBrowser__buttonsWrap {
position: absolute;
top: 1px;
left: 2px;
height: 2px;
}
.dynamicBrowser__button {
float: left;
margin-right: 1px;
width: 2px;
height: 2px;
border-radius: 50%;
}
/*____________________________________________________________
###### Dynamic Browser Header
____________________________________________________________*/
.dynamicBrowser__header {
position: relative;
padding: 4px;
width: 100%;
height: 24px;
background-color: $x-color-light-gray;
}
.dynamicBrowser__lineWrap {
position: relative;
padding-top: 2px;
margin-bottom: 3px;
width: 100%;
height: 5px;
background-color: $palette-tertiary;
}
.dynamicBrowser__line {
position: relative;
float: left;
margin-left: 3px;
width: 6px;
height: 1px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(2, .2);
@include animDelayChild(3, .4);
@include animDelayChild(4, .6);
}
.dynamicBrowser__title {
position: relative;
margin-bottom: 3px;
width: 100%;
height: 3px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-tomato;
animation: slide 3.5s ease infinite;
animation-delay: .2s;
}
}
.dynamicBrowser__subtitle {
position: relative;
margin: 0 auto;
width: 60%;
height: 2px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
animation-delay: .2s;
}
}
/*____________________________________________________________
###### Dynamic Browser Main
____________________________________________________________*/
.dynamicBrowser__main {
position: relative;
width: 100%;
height: 22px;
background-color: $palette-tertiary;
animation: changeDay 10s linear infinite;
.landscape {
position: absolute;
top: 0;
left: 7px;
transform: scale(.8);
animation: none;
}
.landscapePicture__bg {
width: 100%;
height: 100%;
background: $palette-tertiary;
opacity: 1;
animation: changeDay 10s linear infinite;
}
}
/*____________________________________________________________
###### Dynamic Browser Footer
____________________________________________________________*/
.dynamicBrowser__footer {
position: relative;
padding: 2px 4px;
width: 100%;
height: 17px;
background-color: $x-color-light-gray;
}
.dynamicBrowser__productList {
width: 100%;
height: 100%;
}
.dynamicBrowser__product {
position: relative;
float: left;
margin-right: 5%;
width: 30%;
height: 100%;
&:last-child {
margin-right: 0;
}
}
.dynamicBrowser__productImg {
position: relative;
margin-bottom: 1px;
width: 100%;
height: 7px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-tomato;
animation: slide 3.5s ease infinite;
}
}
.dynamicBrowser__productLineWrap {
width: 100%;
height: 5px;
}
.dynamicBrowser__productLine {
position: relative;
float: left;
margin-bottom: 1px;
width: 100%;
height: 1px;
overflow: hidden;
&:nth-child(3) {
width: 50%;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(1, .2);
@include animDelayChild(2, .4);
@include animDelayChild(3, .6);
}
/*____________________________________________________________
##### Dynamic Dialog
____________________________________________________________*/
.dynamicDialog {
position: absolute;
padding: 2px;
animation: levitation 5s linear infinite;
&.dynamicDialog_left {
top: 18px;
left: -18px;
width: 14px;
background-color: $palette-tertiary;
.dynamicDialog__line {
&:last-child {
width: 50%;
}
&:after {
background-color: $x-color-white;
}
}
}
&.dynamicDialog_right {
top: 16px;
right: -20px;
width: 18px;
animation-delay: 2s;
.dynamicDialog__line {
&:first-child {
width: 50%;
}
}
}
}
.dynamicDialog__line {
position: relative;
float: left;
margin-bottom: 1px;
width: 100%;
height: 1px;
overflow: hidden;
&:last-child {
width: 50%;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(2, .2);
@include animDelayChild(3, .4);
@include animDelayChild(4, .6);
}
/*____________________________________________________________
##### Dynamic Dashed Frame
____________________________________________________________*/
.dynamicDashedFrame {
position: absolute;
top: 36px;
left: -13px;
width: 22px;
height: 18px;
border: 1px dashed $palette-secondary;
animation: levitation 5s linear infinite 2.5s;
}
/*____________________________________________________________
##### Dynamic Chart
____________________________________________________________*/
.dynamicChart {
position: absolute;
padding: 2px;
top: 31px;
right: -13px;
width: 18px;
height: 12px;
background-color: $x-color-light-gray;
animation: levitation 5s linear infinite 1s;
}
.dynamicChart__line {
position: relative;
bottom: 0;
float: left;
margin-right: 1px;
width: 2px;
height: 100%;
overflow: hidden;
&:last-child {
margin-right: 0;
}
&:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 10%;
background-color: $x-color-cadet-blue;
animation: lineDiagram 2.5s ease infinite;
}
&:nth-child(1) {
&:after {
background-color: $x-color-granite;
}
}
&:nth-child(4) {
&:after {
background-color: $x-color-tomato;
}
}
@include animDelayChild(1, .8);
@include animDelayChild(2, 1.4);
@include animDelayChild(3, .4);
@include animDelayChild(4, 1.2);
@include animDelayChild(5, 1.6);
}
/*____________________________________________________________
#### Responsive Icon
____________________________________________________________*/
.responsiveIcon {
@extend %centering;
width: 69px;
height: 46px;
}
/*____________________________________________________________
##### Responsive Imac
____________________________________________________________*/
.respImac {
position: relative;
width: 100%;
height: 100%;
}
/*____________________________________________________________
###### Responsive Imac Display
____________________________________________________________*/
.respImac__display {
position: relative;
width: 100%;
height: 100%;
border: 3.2px solid $x-color-granite;
border-radius: 2px 2px 0 0;
background-color: $palette-tertiary;
}
/*____________________________________________________________
####### Responsive Browser
____________________________________________________________*/
.respBrowser {
@extend %centering;
width: 60%;
height: 70%;
background-color: $x-color-white;
}
/*____________________________________________________________
######## Responsive Browser Panel
____________________________________________________________*/
.respBrowser__panel {
width: 100%;
height: 4px;
background-color: $palette-program-panel;
}
.respBrowser__buttonsWrap {
position: absolute;
top: 0.5px;
left: 2px;
height: 2px;
}
.respBrowser__button {
float: left;
margin-right: 1px;
width: 2px;
height: 2px;
border-radius: 50%;
}
/*____________________________________________________________
######## Responsive Browser Page
____________________________________________________________*/
.respBrowser__page {
padding: 1.5px 2.5px 2.5px;
width: 100%;
height: calc(100% - 4px);
}
.respBrowser__pageLayout {
width: 100%;
height: 100%;
}
/*____________________________________________________________
######### Responsive Browser Nav
____________________________________________________________*/
.respBrowser__nav {
margin-bottom: 1px;
width: 60%;
height: 3px;
background-color: $palette-responsive-nav;
}
/*____________________________________________________________
######### Responsive Browser Banner
____________________________________________________________*/
.respBrowser__banner {
margin-bottom: 1px;
width: 100%;
height: 5px;
background-color: $palette-responsive-banner;
}
/*____________________________________________________________
######### Responsive Browser Product List
____________________________________________________________*/
.respBrowser__productList {
width: 100%;
height: 9px;
}
.respBrowser__product {
position: relative;
float: left;
margin-right: 5%;
width: 30%;
height: 100%;
&:last-child {
margin-right: 0;
}
}
.respBrowser__productImg {
position: relative;
margin-bottom: 1px;
width: 100%;
height: 5px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-grideperlevy;
animation: slide 3.5s ease infinite;
}
}
.respBrowser__productLineWrap {
width: 100%;
height: 3px;
}
.respBrowser__productLine {
position: relative;
float: left;
margin-bottom: 1px;
width: 100%;
height: 1px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(1, .2);
@include animDelayChild(2, .4);
}
/*____________________________________________________________
###### Responsive Imac Panel
____________________________________________________________*/
.respImac__panel {
position: absolute;
bottom: -6px;
width: 100%;
height: 6px;
border-radius: 0 0 2px 2px;
background-color: $x-color-grideperlevy;
}
/*____________________________________________________________
###### Responsive Imac Stand
____________________________________________________________*/
.respImac__stand {
@extend %horizontalCentering;
bottom: -17px;
height: 0;
width: 23px;
border-bottom: 11px solid $x-color-grideperlevy;
border-left: 5.5px solid transparent;
border-right: 5.5px solid transparent;
}
.respImac__standShadow {
position: absolute;
left: 3px;
width: 0;
height: 0;
border-top: 11px solid $x-color-cadet-blue;
border-left: 12px solid transparent;
transform: skew(26deg, 0deg);
}
.respImac__standBase {
@extend %horizontalCentering;
top: 11px;
width: 36px;
height: 2px;
border-radius: 3px 3px 0 0;
background-color: $x-color-cadet-blue;
}
/*____________________________________________________________
##### Responsive Ipad
____________________________________________________________*/
.respIpad {
position: absolute;
bottom: -19px;
left: -14px;
width: 29px;
height: 42px;
}
/*____________________________________________________________
###### Responsive Ipad Display
____________________________________________________________*/
.respIpad__display {
position: relative;
padding: 2px 2px 2px 1px;
width: 100%;
height: 100%;
border: solid $x-color-granite;
border-width: 4px 2.5px;
border-radius: 2px;
background-color: $x-color-white;
}
/*____________________________________________________________
####### Ipad Browser
____________________________________________________________*/
.ipadBrowser {
position: relative;
width: 100%;
height: 100%;
}
/*____________________________________________________________
######## Ipad Browser Nav
____________________________________________________________*/
.ipadBrowser__nav {
margin-bottom: 1px;
width: 60%;
height: 3px;
background-color: $palette-responsive-nav;
}
/*____________________________________________________________
######## Ipad Browser Banner
____________________________________________________________*/
.ipadBrowser__banner {
margin-bottom: 1px;
width: 100%;
height: 5px;
background-color: $palette-responsive-banner;
}
/*____________________________________________________________
######## Responsive Ipad Product List
____________________________________________________________*/
.ipadBrowser__productList {
width: 100%;
height: calc(100% - 10px);
}
.ipadBrowser__product {
position: relative;
margin-bottom: 2px;
width: 100%;
height: 5px;
&:last-child {
margin-bottom: 0;
}
}
.ipadBrowser__productImg {
float: left;
position: relative;
margin-right: 2px;
width: 5px;
height: 5px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-grideperlevy;
animation: slide 3.5s ease infinite;
}
}
.ipadBrowser__productLineWrap {
float: left;
width: calc(100% - 7px);
height: 5px;
}
.ipadBrowser__productLine {
position: relative;
float: left;
margin-bottom: 1px;
width: 100%;
height: 1px;
overflow: hidden;
&:nth-child(3) {
margin-bottom: 0;
width: 50%;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(1, .2);
@include animDelayChild(2, .4);
@include animDelayChild(3, .5);
}
/*____________________________________________________________
###### Responsive Ipad Camera
____________________________________________________________*/
.respIpad__camera,
.respIphone__camera,
.respIpad__button,
.respIphone__button {
position: absolute;
height: 2px;
background-color: $x-color-grideperlevy;
}
.respIpad__camera,
.respIphone__camera {
top: 1px;
width: 2px;
border-radius: 50%;
}
.respIpad__camera {
left: 13.5px;
}
/*____________________________________________________________
###### Responsive Ipad Button
____________________________________________________________*/
.respIpad__button,
.respIphone__button {
bottom: 1px;
border-radius: 1px;
}
.respIpad__button {
left: 10.5px;
width: 8px;
}
/*____________________________________________________________
##### Responsive Iphone
____________________________________________________________*/
.respIphone {
position: absolute;
bottom: -19px;
right: -6px;
width: 17px;
height: 31px;
}
/*____________________________________________________________
###### Responsive Iphone Display
____________________________________________________________*/
.respIphone__display {
position: relative;
padding: 1px;
width: 100%;
height: 100%;
border: solid $x-color-granite;
border-width: 4px 2px;
border-radius: 2px;
background-color: $x-color-white;
}
/*____________________________________________________________
####### Iphone Browser
____________________________________________________________*/
.iphoneBrowser {
position: relative;
width: 100%;
height: 100%;
}
/*____________________________________________________________
######## Iphone Browser Nav
____________________________________________________________*/
.iphoneBrowser__nav {
margin-bottom: 1px;
width: 100%;
height: 3px;
background-color: $palette-responsive-nav;
}
/*____________________________________________________________
######## Responsive Iphone Product List
____________________________________________________________*/
.iphoneBrowser__productList {
width: 100%;
height: calc(100% - 7px);
}
.iphoneBrowser__product {
position: relative;
margin-bottom: 1px;
width: 100%;
height: 8px;
&:last-child {
margin-bottom: 0;
}
}
.iphoneBrowser__productImg {
position: relative;
margin-bottom: 1px;
width: 100%;
height: 4px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-grideperlevy;
animation: slide 3.5s ease infinite;
}
}
.iphoneBrowser__productLineWrap {
width: 100%;
height: 3px;
}
.iphoneBrowser__productLine {
position: relative;
float: left;
margin-bottom: 1px;
width: 100%;
height: 1px;
overflow: hidden;
&:nth-child(2) {
margin-bottom: 0;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(1, .2);
@include animDelayChild(2, .4);
}
/*____________________________________________________________
###### Responsive Iphone Camera
____________________________________________________________*/
.respIphone__camera {
left: 7.5px;
}
/*____________________________________________________________
###### Responsive Iphone Button
____________________________________________________________*/
.respIphone__button {
left: 5.5px;
width: 6px;
}
/*____________________________________________________________
#### Sociable Icon
____________________________________________________________*/
.sociableIcon {
@extend %centering;
width: 50px;
height: 32px;
}
/*____________________________________________________________
##### Sociable Link
____________________________________________________________*/
.sociableLink {
position: absolute;
width: 10px;
height: 10px;
border: dashed $x-color-granite;
animation: levitation 5s linear infinite;
@mixin sociableLinkPos($figureName, $top, $side, $sideInent, $borderWidth, $delay, $topFigure, $sideFigure, $sideInentFigure) {
&.sociableLink_pos#{$figureName} {
top: #{$top};
#{$side}: #{$sideInent};
border-width: #{$borderWidth};
animation-delay: #{$delay}s;
.sociableLink__figure {
top: #{$topFigure};
#{$sideFigure}: #{$sideInentFigure};
}
}
}
@include sociableLinkPos(LC, 50%, left, -10px, '1px 0 0 0', 0, -7px, left, -12px);
@include sociableLinkPos(LT, -10px, left, -1px, '1px 1px 0 0', .8, -7px, left, -12px);
@include sociableLinkPos(CT, -10px, left, 50%, '0 0 0 1px', 1.5, -12px, left, -7px);
@include sociableLinkPos(RT, -10px, right, -1px, '1px 0 0 1px', 2.2, -7px, right, -12px);
@include sociableLinkPos(RC, 50%, right, -10px, '1px 0 0 0', 2.9, -7px, right, -12px);
&:nth-child(2),
&:nth-child(4) {
.sociableLink__figure {
border-radius: 50%;
background-color: $x-color-tomato;
&:before {
border-radius: 50%;
}
}
}
}
.sociableLink__figure {
position: absolute;
width: 12px;
height: 12px;
background-color: $x-color-grideperlevy;
@mixin sociableLinkType($figureName, $content) {
&.sociableLink__figure_#{$figureName} {
&:after {
content: '#{$content}';
}
}
}
@include sociableLinkType(mail, '@');
@include sociableLinkType(money, '$');
@include sociableLinkType(tag, '#');
@include sociableLinkType(percent, '%');
@include sociableLinkType(and, '&');
&:after {
margin-top: .5px;
}
&:before,
&:after {
@extend %centering;
font-size: 9px;
}
&:before {
content: '';
width: 9px;
height: 9px;
border: 1px solid $x-color-granite;
}
}
/*____________________________________________________________
##### Sociable Display
____________________________________________________________*/
.sociableDisplay {
position: relative;
width: 100%;
height: 100%;
border: 3.2px solid $x-color-granite;
border-radius: 1px;
background-color: $x-color-white;
}
/*____________________________________________________________
###### Sociable Panel
____________________________________________________________*/
.sociableDisplay__panel {
position: absolute;
top: 2.2px;
width: 9px;
&.sociableDisplay_leftSide {
left: 1.8px;
.sociableDisplay__line {
&:nth-child(1) {
margin-top: 6px;
}
}
&:before {
content: '';
position: absolute;
margin-bottom: 2px;
width: 100%;
height: 4px;
background-color: $x-color-tomato;
}
}
&.sociableDisplay_rightSide {
right: 1.8px;
.sociableDisplay__line {
&:nth-child(1) {
width: 50%;
}
}
}
}
.sociableDisplay__line {
position: relative;
margin-bottom: 1px;
width: 100%;
height: 1px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
&:nth-child(6) {
width: 50%;
}
@include animDelayChild(2, .2);
@include animDelayChild(3, .4);
@include animDelayChild(4, .6);
@include animDelayChild(5, .8);
@include animDelayChild(6, 1);
}
/*____________________________________________________________
###### Sociable Avatar
____________________________________________________________*/
.sociableDisplay__avatar {
@extend %horizontalCentering;
top: 2.2px;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: $palette-tertiary;
background-image: url('https://i.pinimg.com/originals/05/d9/93/05d99321de948f7f4c24164eec708a15.png');
background-repeat: no-repeat;
background-position: center 2px;
background-size: contain;
}
/*____________________________________________________________
###### Sociable Buttons Wrap
____________________________________________________________*/
.sociableDisplay__buttonsWrap {
@extend %horizontalCentering;
bottom: 2.2px;
width: 16px;
height: 2px;
}
.sociableDisplay__button {
float: left;
width: 7px;
height: 2px;
&:nth-child(1) {
margin-right: 2px;
background-color: $x-color-granite;
}
&:nth-child(2) {
background-color: $x-color-tomato;
}
}
/*____________________________________________________________
##### Sociable Keyboard
____________________________________________________________*/
.sociableKeyboard {
position: relative;
margin-left: -8%;
width: calc(100% + 16%);
height: 10%;
border-radius: 0 0 3px 3px;
background-color: $x-color-grideperlevy;
overflow: hidden;
}
/*____________________________________________________________
#### Intuitive Icon
____________________________________________________________*/
.intuitiveIcon {
@extend %centering;
width: 50px;
height: 59px;
}
/*____________________________________________________________
##### Intuitive Rays
____________________________________________________________*/
.intuitiveRays {
position: absolute;
top: -30px;
left: -30px;
width: 110px;
height: 110px;
svg {
position: absolute;
max-width: 100%;
max-height: 100%;
fill: none;
stroke: $palette-secondary;
stroke-width: 5px;
stroke-linecap: round;
animation: rotateRays 3s linear infinite;
}
.teeth {
position: absolute;
top: 19.32%;
left: 19.32%;
transform: translate(-19.32%, -19.32%);
}
}
/*____________________________________________________________
##### Intuitive Lamp
____________________________________________________________*/
.intuitiveLightBulb {
position: absolute;
width: 50px;
}
.intuitiveLightBulb__silhouette {
fill: $palette-secondary;
}
/*____________________________________________________________
##### Intuitive Lamp Circle
____________________________________________________________*/
.intuitiveLightBulbCircle {
@extend %horizontalCentering;
top: 8px;
width: 34px;
height: 34px;
border-radius: 50%;
background-color: $x-color-white;
}
/*____________________________________________________________
##### Intuitive Brain
____________________________________________________________*/
.intuitiveBrain {
position: absolute;
top: 9px;
left: 9px;
width: 34px;
height: 34px;
opacity: .9;
background-image: url('https://i.pinimg.com/originals/56/68/37/566837724bf672f1f538df597d55604a.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/*____________________________________________________________
##### Intuitive Play
____________________________________________________________*/
.intuitivePlay {
position: absolute;
top: 35px;
left: -20px;
width: 20px;
height: 20px;
z-index: 1;
animation: levitation 5s linear infinite;
path {
fill: $palette-secondary;
}
}
/*____________________________________________________________
##### Intuitive Figures
____________________________________________________________*/
.intuitiveBubble {
position: absolute;
border-radius: 50%;
animation: levitation 5s linear infinite;
}
.intuitiveBubble_sm {
top: 50px;
left: 3px;
width: 7px;
height: 7px;
background-color: $x-color-grideperlevy;
animation-delay: 1.6s;
}
.intuitiveBubble_lg {
top: -12px;
left: 12px;
width: 13px;
height: 13px;
background-color: $x-color-aquamarine;
opacity: .8;
animation-delay: 2s;
}
.intuitiveRectangle {
position: absolute;
top: -6px;
right: -6px;
width: 20px;
height: 12px;
border: 3px solid $x-color-granite;
animation: levitation 5s linear infinite .5s;
}
/*____________________________________________________________
##### Intuitive Dialog
____________________________________________________________*/
.intuitiveDialog {
position: absolute;
top: 2px;
left: -15px;
width: 25px;
height: 20px;
animation: levitation 5s linear infinite .8s;
}
.intuitiveDialog__cloud {
position: absolute;
width: 25px;
height: 15px;
background-color: $x-color-grideperlevy;
opacity: .8;
&:before {
content: "";
position: absolute;
bottom: -5px;
left: 5px;
width: 0;
height: 0;
border-top: 5px solid $x-color-grideperlevy;
border-right: 5px solid transparent;
}
}
.intuitiveDialog__lineWrap {
position: absolute;
top: 4px;
right: 7px;
width: 23px;
height: 6px;
}
.intuitiveDialog__line {
position: absolute;
width: 100%;
height: 2px;
overflow: hidden;
&:nth-child(2) {
bottom: 0;
right: 0px;
width: 15px;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(2, .3);
}
/*____________________________________________________________
##### Intuitive Landscape
____________________________________________________________*/
.landscape {
position: absolute;
top: 35px;
right: -26px;
width: 35px;
height: 25px;
animation: levitation 5s linear infinite 1.4s;
}
.landscapeShadow {
position: absolute;
bottom: 0;
right: 0;
width: 32px;
height: 22px;
background-color: $x-color-granite;
}
.landscapePicture {
position: relative;
width: 32px;
height: 22px;
overflow: hidden;
}
.landscapePicture__bg {
width: 100%;
height: 100%;
background-color: $x-color-aquamarine;
opacity: .8;
animation: changeDay 10s linear infinite;
}
.landscapePicture__mountainsWrap {
position: absolute;
bottom: 3px;
right: 3px;
width: 25px;
height: 13px;
}
.landscapePicture__mountain {
position: absolute;
bottom: 0;
&:nth-child(1) {
border-left: 6.5px solid transparent;
border-right: 6.5px solid transparent;
border-bottom: 8px solid $x-color-white;
}
&:nth-child(2) {
right: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 13px solid $x-color-white;
}
}
.landscapePicture__dayWrap {
position: absolute;
top: 7px;
left: 1px;
width: 30px;
height: 30px;
animation: rotateRays 10s linear infinite;
}
.landscapePicture__dayWrap,
.landscapePicture__sun,
.landscapePicture__moon {
border-radius: 50%;
}
.landscapePicture__sun,
.landscapePicture__moon {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.landscapePicture__sun {
top: -5px;
width: 5px;
height: 5px;
background-color: $x-color-white;
}
.landscapePicture__moon {
bottom: -4px;
width: 7px;
height: 7px;
box-shadow: 2px 2px 0 0 $x-color-amber;
transform: rotate(120deg);
}
/*____________________________________________________________
##### Intuitive Neck
____________________________________________________________*/
.intuitiveNeck {
@extend %horizontalCentering;
bottom: -3px;
width: 22px;
height: 4px;
background-color: $palette-secondary;
}
/*____________________________________________________________
##### Intuitive Base Housing
____________________________________________________________*/
.intuitiveBaseHousing {
@extend %horizontalCentering;
bottom: -17px;
width: 22px;
height: 14px;
border: solid $x-color-granite;
border-width: 0 2px 0 2px;
}
.intuitiveBaseHousing__line {
position: absolute;
left: -5px;
width: 28px;
height: 2px;
background-color: $x-color-granite;
$x: 2;
$y: 4px;
@while $x < 5 {
&:nth-child(#{$x}) {
top: $y;
}
$x: $x + 1;
$y: $y + 4;
}
}
.intuitiveBaseHousing__contact {
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 2px;
background-color: $x-color-granite;
}
/*____________________________________________________________
# Animation Pack
____________________________________________________________*/
@keyframes slide {
0% {
left: -100%;
}
22% {
left: 0%;
}
78% {
left: 0%;
}
100% {
left: 100%;
}
}
@keyframes rotateRays {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes changeDay {
0% {
background-color: $palette-tertiary;
}
25% {
background-color: $x-color-granite;
}
60% {
background-color: $x-color-granite;
}
75% {
background-color: $palette-tertiary;
}
100% {
background-color: $palette-tertiary;
}
}
@keyframes lineDiagram {
0% {
height: 10%;
}
50% {
height: 100%;
}
100% {
left: 10%;
}
}
@keyframes levitation {
0% {
transform: translateY(0);
}
50% {
transform: translateY(6px);
}
100% {
transform: translateY(0);
}
}
/*____________________________________________________________
## Animation Icons
____________________________________________________________*/
@keyframes learnabilityScrollCode {
0% {
top: 0;
}
100% {
top: -18px;
}
}
@keyframes keyboardClick {
0% {
background-color: $x-color-white;
}
95% {
background-color: $x-color-white;
}
100% {
background-color: $x-color-black;
}
}
/*____________________________________________________________
# 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: $palette-secondary;
}
}
.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: $palette-secondary;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.