.container
.iphone
.buttons
.silent
.sleep
.vol-up
.vol-down
.top
.black-bar
.iphone-top
.components
.speaker
.camera
.shine-left
.shine-right
.top-bar
.bottom-bar
.screen
video(loop autoplay muted)
source(src=’https://s3-us-west-2.amazonaws.com/s.cdpn.io/1116884/iphone-vid.mp4′ type=”video/mp4″)
.stuff
.service
– for(var i = 0; i < 4; i++)
.bar
.battery
.nub
.energy
.lock-carrier AT&T
.lock-lock
.info
.lock-time
.lock-date
.lock-bar
// goo filter for notch shape
svg(viewbox="0 0 0 0" height="0" width="0")
filter(id="goo" color-interpolation-filters="sRGB")
feGaussianBlur(in="SourceGraphic" stdDeviation="4" result="blur")
feColorMatrix(in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 8 -1" result="cm")
feBlend(in="sourceGraphic" in2="cm" mode="multiply")
@import url('https://fonts.googleapis.com/css?family=Heebo:100')
// mixins
// Flexbox display
=flexbox()
display: -webkit-box
display: -moz-box
display: -ms-flexbox
display: -webkit-flex
display: flex
// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
=flex-direction($direction)
-webkit-flex-direction: $direction
-moz-flex-direction: $direction
-ms-flex-direction: $direction
flex-direction: $direction
// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around
=justify-content($justify)
-webkit-justify-content: $justify
-moz-justify-content: $justify
-ms-justify-content: $justify
justify-content: $justify
-ms-flex-pack: $justify
// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch
=align-items($align)
-webkit-align-items: $align
-moz-align-items: $align
-ms-align-items: $align
align-items: $align
// generic transform
=transform($transforms)
-moz-transform: $transforms
-o-transform: $transforms
-ms-transform: $transforms
-webkit-transform: $transforms
transform: $transforms
// scale
=scale($scale)
+transform(scale($scale))
// border-radius: allows for 1 - 4 arguments
=border-radius($tl, $tr: $tl, $br: $tl, $bl: $tl)
-moz-border-radius: $tl $tr $br $bl
-webkit-border-radius: $tl $tr $br $bl
border-radius: $tl $tr $br $bl
=filter($value)
-webkit-filter: $value
-moz-filter: $value
-o-filter: $value
filter: $value
//box shadow (allows for multiple box shadows)
=box-shadow($shadow...)
-webkit-box-shadow: $shadow
-moz-box-shadow: $shadow
box-shadow: $shadow
//box sizing
=box-sizing($sizing)
-webkit-box-sizing: $sizing
-moz-box-sizing: $sizing
box-sizing: $sizing
// end mixins
html
+box-sizing(border-box)
font-family: 'Heebo', sans-serif
html, body
height: 100%
*,
*:after,
*:before
+box-sizing(inherit)
body
margin: 0
background: #EAEAEA
.container
position: absolute
height: 100%
width: 100%
padding: 0.5rem
+flexbox
+justify-content(center)
+align-items(center)
.iphone
position: absolute
height: 875px
width: 423px
padding: 0 15px
+flexbox
+justify-content(center)
+align-items(center)
background: #111
border: 5px solid #3D3D3D
+border-radius(50px)
+box-shadow(inset 0 0 3px 0 rgba(0,0,0,0.2), 0 0 0 1px #999, 0 0 30px 0px rgba(0,0,0,0.7))
+scale(0.6)
.buttons
.silent,
.vol-up,
.vol-down,
.sleep
background: #111
position: absolute
+border-radius(2px, 0, 0, 2px)
.silent
height: 40px
width: 3px
top: 100px
left: -8px
.vol-up,
.vol-down
left: -8px
height: 60px
width: 4px
.sleep
left: auto
right: -8px
top: 180px
height: 100px
width: 4px
+border-radius(0, 2px, 2px, 0)
.vol-up
top: 170px
.vol-down
top: 250px
.top
position: absolute
top: 4px
width: 100%
+flexbox
+justify-content(center)
z-index: 4
+filter(url('#goo'))
.black-bar
position: absolute
height: 1px
width: 70%
padding-top: 2px
background: #111
.iphone-top
position: relative
height: 40px
width: 55%
+flexbox
+justify-content(center)
+align-items(center)
+border-radius(0, 0, 20px, 20px)
background: #111
z-index: 2
.components
position: absolute
top: 20px
padding-left: 12px
+flexbox
+justify-content(center)
+align-items(center)
.speaker
height: 6px
width: 70px
margin: 0 30px
+border-radius(6px)
border-bottom: 1px solid #333
background: #222
z-index: 100
.camera
height: 15px
width: 15px
+border-radius(50%)
border-bottom: 1px solid #444
background: radial-gradient(black, #333)
opacity: 0.5
z-index: 4
.shine-left
position: absolute
height: 10px
width: 10px
margin: 2px
border-left: 4px solid dodgerblue
border-right: transparent
background: black
+border-radius(50%)
+filter(blur(1.8px))
&:before
content: ''
position: absolute
right: 0px
height: 8px
width: 8px
border-right: 2px solid white
+border-radius(4px)
.top-bar, .bottom-bar
position: absolute
left: -5px
height: 15px
width: 423px
border:
left: 5px solid #111
right: 5px solid #111
.top-bar
top: 65px
.bottom-bar
bottom: 65px
.screen
position: absolute
height: calc(100% - 12px)
width: calc(100% - 12px)
margin: 0 auto
border: 2px solid rgba(0,0,0,0.9)
+border-radius(40px)
overflow: hidden
.stuff
height: 100%
width: 100%
+flexbox
+flex-direction(column)
+justify-content(center)
+align-items(center)
& *
z-index: 200
.info
position: absolute
top: 140px
+flexbox
+flex-direction(column)
+justify-content(center)
+align-items(center)
z-index: 200
.time
position: absolute
top: 8px
left: 30px
line-height: 1px
color: white
font-size: 1.2em
font-weight: 200
.lock-lock
position: absolute
top: 95px
height: 26px
width: 34px
background: white
+border-radius(3px)
&:before
content: ''
position: absolute
top: -18px
right: 4px
height: 30px
width: 26px
border: 4px solid white
+border-radius(26px)
.lock-carrier,
.lock-time,
.lock-date
color: white
.lock-time
margin: 2rem 0 1.6rem 0
line-height: 3rem
.lock-carrier
position: absolute
top: 11px
left: 42px
font-weight: 200
font-size: 0.9em
z-index: 200
.lock-time
font-size: 6em
font-weight: 100
color: white
.lock-date
font-weight: 100
font-size: 1.5em
.lock-swipe,
.lock-bar,
.service
position: absolute
font-family: "Helvetica Neue", sans-serif
.lock-swipe
bottom: 25px
font-size: 1.1em
font-weight: 100
color: white
.lock-bar
bottom: 10px
height: 4px
width: 45%
+border-radius(2px)
background: white
.service
top: 12px
left: 12px
height: 14px
width: 25px
+flexbox
+justify-content(space-between)
+align-items(flex-end)
.bar
width: 4px
+flexbox
+border-radius(1px)
background: white
&:first-child
height: 2px
&:nth-child(2)
height: 6px
&:nth-child(3)
height: 10px
&:last-child
height: 14px
.battery
position: absolute
top: 11px
right: 32px
height: 16px
width: 32px
border: 1px solid white
+border-radius(2px)
+flexbox
+align-items(center)
z-index: 200
.nub,
.energy
position: absolute
background: white
.nub
top: 4px
right: -4px
height: 6px
width: 2px
+border-radius(0, 4px, 4px, 0)
.energy
left: 1px
height: 12px
width: 18px
+border-radius(1px, 0, 0, 1px)
@media screen and (max-height: 500px)
.iphone
+scale(0.35)
@import url('https://fonts.googleapis.com/css?family=Heebo:100')
// mixins
// Flexbox display
=flexbox()
display: -webkit-box
display: -moz-box
display: -ms-flexbox
display: -webkit-flex
display: flex
// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
=flex-direction($direction)
-webkit-flex-direction: $direction
-moz-flex-direction: $direction
-ms-flex-direction: $direction
flex-direction: $direction
// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around
=justify-content($justify)
-webkit-justify-content: $justify
-moz-justify-content: $justify
-ms-justify-content: $justify
justify-content: $justify
-ms-flex-pack: $justify
// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch
=align-items($align)
-webkit-align-items: $align
-moz-align-items: $align
-ms-align-items: $align
align-items: $align
// generic transform
=transform($transforms)
-moz-transform: $transforms
-o-transform: $transforms
-ms-transform: $transforms
-webkit-transform: $transforms
transform: $transforms
// scale
=scale($scale)
+transform(scale($scale))
// border-radius: allows for 1 - 4 arguments
=border-radius($tl, $tr: $tl, $br: $tl, $bl: $tl)
-moz-border-radius: $tl $tr $br $bl
-webkit-border-radius: $tl $tr $br $bl
border-radius: $tl $tr $br $bl
=filter($value)
-webkit-filter: $value
-moz-filter: $value
-o-filter: $value
filter: $value
//box shadow (allows for multiple box shadows)
=box-shadow($shadow...)
-webkit-box-shadow: $shadow
-moz-box-shadow: $shadow
box-shadow: $shadow
//box sizing
=box-sizing($sizing)
-webkit-box-sizing: $sizing
-moz-box-sizing: $sizing
box-sizing: $sizing
// end mixins
html
+box-sizing(border-box)
font-family: 'Heebo', sans-serif
html, body
height: 100%
*,
*:after,
*:before
+box-sizing(inherit)
body
margin: 0
background: #EAEAEA
.container
position: absolute
height: 100%
width: 100%
padding: 0.5rem
+flexbox
+justify-content(center)
+align-items(center)
.iphone
position: absolute
height: 875px
width: 423px
padding: 0 15px
+flexbox
+justify-content(center)
+align-items(center)
background: #111
border: 5px solid #3D3D3D
+border-radius(50px)
+box-shadow(inset 0 0 3px 0 rgba(0,0,0,0.2), 0 0 0 1px #999, 0 0 30px 0px rgba(0,0,0,0.7))
+scale(0.6)
.buttons
.silent,
.vol-up,
.vol-down,
.sleep
background: #111
position: absolute
+border-radius(2px, 0, 0, 2px)
.silent
height: 40px
width: 3px
top: 100px
left: -8px
.vol-up,
.vol-down
left: -8px
height: 60px
width: 4px
.sleep
left: auto
right: -8px
top: 180px
height: 100px
width: 4px
+border-radius(0, 2px, 2px, 0)
.vol-up
top: 170px
.vol-down
top: 250px
.top
position: absolute
top: 4px
width: 100%
+flexbox
+justify-content(center)
z-index: 4
+filter(url('#goo'))
.black-bar
position: absolute
height: 1px
width: 70%
padding-top: 2px
background: #111
.iphone-top
position: relative
height: 40px
width: 55%
+flexbox
+justify-content(center)
+align-items(center)
+border-radius(0, 0, 20px, 20px)
background: #111
z-index: 2
.components
position: absolute
top: 20px
padding-left: 12px
+flexbox
+justify-content(center)
+align-items(center)
.speaker
height: 6px
width: 70px
margin: 0 30px
+border-radius(6px)
border-bottom: 1px solid #333
background: #222
z-index: 100
.camera
height: 15px
width: 15px
+border-radius(50%)
border-bottom: 1px solid #444
background: radial-gradient(black, #333)
opacity: 0.5
z-index: 4
.shine-left
position: absolute
height: 10px
width: 10px
margin: 2px
border-left: 4px solid dodgerblue
border-right: transparent
background: black
+border-radius(50%)
+filter(blur(1.8px))
&:before
content: ''
position: absolute
right: 0px
height: 8px
width: 8px
border-right: 2px solid white
+border-radius(4px)
.top-bar, .bottom-bar
position: absolute
left: -5px
height: 15px
width: 423px
border:
left: 5px solid #111
right: 5px solid #111
.top-bar
top: 65px
.bottom-bar
bottom: 65px
.screen
position: absolute
height: calc(100% - 12px)
width: calc(100% - 12px)
margin: 0 auto
border: 2px solid rgba(0,0,0,0.9)
+border-radius(40px)
overflow: hidden
.stuff
height: 100%
width: 100%
+flexbox
+flex-direction(column)
+justify-content(center)
+align-items(center)
& *
z-index: 200
.info
position: absolute
top: 140px
+flexbox
+flex-direction(column)
+justify-content(center)
+align-items(center)
z-index: 200
.time
position: absolute
top: 8px
left: 30px
line-height: 1px
color: white
font-size: 1.2em
font-weight: 200
.lock-lock
position: absolute
top: 95px
height: 26px
width: 34px
background: white
+border-radius(3px)
&:before
content: ''
position: absolute
top: -18px
right: 4px
height: 30px
width: 26px
border: 4px solid white
+border-radius(26px)
.lock-carrier,
.lock-time,
.lock-date
color: white
.lock-time
margin: 2rem 0 1.6rem 0
line-height: 3rem
.lock-carrier
position: absolute
top: 11px
left: 42px
font-weight: 200
font-size: 0.9em
z-index: 200
.lock-time
font-size: 6em
font-weight: 100
color: white
.lock-date
font-weight: 100
font-size: 1.5em
.lock-swipe,
.lock-bar,
.service
position: absolute
font-family: "Helvetica Neue", sans-serif
.lock-swipe
bottom: 25px
font-size: 1.1em
font-weight: 100
color: white
.lock-bar
bottom: 10px
height: 4px
width: 45%
+border-radius(2px)
background: white
.service
top: 12px
left: 12px
height: 14px
width: 25px
+flexbox
+justify-content(space-between)
+align-items(flex-end)
.bar
width: 4px
+flexbox
+border-radius(1px)
background: white
&:first-child
height: 2px
&:nth-child(2)
height: 6px
&:nth-child(3)
height: 10px
&:last-child
height: 14px
.battery
position: absolute
top: 11px
right: 32px
height: 16px
width: 32px
border: 1px solid white
+border-radius(2px)
+flexbox
+align-items(center)
z-index: 200
.nub,
.energy
position: absolute
background: white
.nub
top: 4px
right: -4px
height: 6px
width: 2px
+border-radius(0, 4px, 4px, 0)
.energy
left: 1px
height: 12px
width: 18px
+border-radius(1px, 0, 0, 1px)
@media screen and (max-height: 500px)
.iphone
+scale(0.35)
// My educated guess as to what the iPhone X will look like
const select = s => document.querySelector(s);
const displayDate = select(’.lock-date’);
const displayTime = select(’.lock-time’);
function updateTime() {
const date = new Date();
const hour = date.getHours() < 13
? date.getHours() === 0
? 12
: date.getHours()
: date.getHours() - 12
const minutes = date.getMinutes() < 10
? `0${date.getMinutes()}`
: date.getMinutes()
const formattedDate = date.toLocaleString('en-US', {
weekday: 'long',
month: 'long',
day: 'numeric'
})
displayTime.innerText = `${hour}:${minutes}`;
displayDate.innerText = formattedDate;
requestAnimationFrame(updateTime);
}
updateTime();
Energia dla Wsi 2026
Ostatni nabor
Jesienia rusza ostatni nabor w programie, ktory od lat jest glownym zrodlem finansowania biogazowni rolniczych w Polsce. Opowiemy, jak dobrze sie przygotowac.
Doswiadczenia z 2 poprzednich naborow
Kto sie kwalifikuje do dofinansowania
Jak dobrze sie przygotowac do wniosku
Otwarta sesja Q and A na koniec