first init
This commit is contained in:
pengwenchuan
commit
dc84425c0a
|
|
@ -0,0 +1,5 @@
|
|||
from nginx:1.29-alpine
|
||||
|
||||
copy html /usr/share/nginx/html
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
<svg width="1440" height="582" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#606483" stop-opacity="0" offset="0%"/><stop stop-color="#0B0D19" stop-opacity=".72" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="b"><stop stop-color="#0B0D19" offset="0%"/><stop stop-color="#0B0D19" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="57.93%" gradientTransform="matrix(.24796 -.96592 .92535 .25883 -.151 .643)" id="c"><stop stop-color="#FF6C50" stop-opacity="0" offset="0%"/><stop stop-color="#FF6C50" stop-opacity=".64" offset="51.712%"/><stop stop-color="#FF6C50" stop-opacity=".24" offset="100%"/></radialGradient><filter id="d"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M252.464 335.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z" fill="url(#a)" transform="rotate(24 -272.272 -82.087)"/><path d="M302.512 242.909c88.025 32.428 156-25.04 156-55.93 0-30.888-69.844-55.928-156-55.928-86.157 0-156 25.04-156 55.929 0 30.888 67.974 23.5 156 55.929z" fill="url(#b)" transform="rotate(24 -255.451 -119.868)"/><path d="M103.064 315.218c128.156 12.998 192.38 157.059 218.627 106.632 26.247-50.427-44.059-106.456 60.397-202.707 104.457-96.252-143.2-285.785-172.392-122.551C180.503 259.825-25.091 302.22 103.064 315.218z" transform="translate(1176 -33)" fill="url(#c)" filter="url(#d)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="1440" height="347" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#606483" stop-opacity="0" offset="0%"/><stop stop-color="#0B0D19" stop-opacity=".72" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="b"><stop stop-color="#0B0D19" offset="0%"/><stop stop-color="#0B0D19" stop-opacity="0" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M177.486 208.219c78.18 89.285 218.65-81.067 218.65-119.337 0-38.27-86.408-69.295-193-69.295-106.59 0-193 31.024-193 69.295 0 38.27 89.17 30.051 167.35 119.337z" transform="rotate(6 -140.175 3980.948)" fill="url(#a)"/><path d="M252.464 335.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z" fill="url(#a)" transform="rotate(24 321.92 -247.724)"/><path d="M302.512 242.909c88.025 32.428 156-25.04 156-55.93 0-30.888-69.844-55.928-156-55.928-86.157 0-156 25.04-156 55.929 0 30.888 67.974 23.5 156 55.929z" fill="url(#b)" transform="rotate(24 338.741 -285.505)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="1440" height="318" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="38.706%" y1="-187.115%" x2="18.675%" y2="110.984%" id="a"><stop stop-color="#FFF" stop-opacity="0" offset="0%"/><stop stop-color="#FF6C50" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c"><stop stop-color="#606483" stop-opacity="0" offset="0%"/><stop stop-color="#0B0D19" stop-opacity=".72" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="d"><stop stop-color="#0B0D19" stop-opacity=".32" offset="0%"/><stop stop-color="#0B0D19" stop-opacity="0" offset="100%"/></linearGradient><filter id="b"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M88.494 90c67.04 7.177 161.094-24.753 224.996-90H.2c25.3 48.079 42.361 85.083 88.294 90z" transform="translate(1051)" fill="url(#a)" filter="url(#b)"/><path d="M250.464 367.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z" fill="url(#c)" transform="rotate(143 810.285 354.367)"/><path d="M373.408 256.178c88.026 32.429 156-25.04 156-55.929 0-30.888-69.843-55.929-156-55.929-86.156 0-156 25.04-156 55.93 0 30.888 67.975 23.5 156 55.928z" fill="url(#d)" transform="rotate(136 905.21 332.676)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 532 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 382 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 321 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 391 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="876" height="764" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="#4234F8" offset="0%"/><stop stop-color="#4234F8" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="58.676%" gradientTransform="scale(.81337 1) rotate(-72.484 .371 .382)" id="c"><stop stop-color="#FF6C50" stop-opacity="0" offset="0%"/><stop stop-color="#FF6C50" stop-opacity=".64" offset="51.712%"/><stop stop-color="#FF6C50" stop-opacity=".24" offset="100%"/></radialGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="d"><stop stop-color="#4234F8" stop-opacity=".8" offset="0%"/><stop stop-color="#4234F8" stop-opacity="0" offset="100%"/></linearGradient><filter id="a"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd" filter="url(#a)"><path d="M173.286 346.278c37.75 237.363 436.799-108.302 173.285-173.139C83.058 108.302 268.99 0 173.286 0S0 77.517 0 173.14c0 95.621 135.536-64.225 173.286 173.138z" transform="translate(217 195)" fill="url(#b)"/><path d="M251 344c94.993 0 172-77.007 172-172S345.993 0 251 0s46.934 178.387-172 172c-218.934-6.387 77.007 172 172 172z" transform="translate(19)" fill="url(#c)"/><path d="M173.286 346.278c37.75 237.363 436.799-108.302 173.285-173.139C83.058 108.302 268.99 0 173.286 0S0 77.517 0 173.14c0 95.621 135.536-64.225 173.286 173.138z" transform="matrix(-1 0 0 1 653 195)" fill="url(#d)"/><path fill="#C1C3DA" d="M640.608 179l-3.624 1.667-.984 3.53 1.158 3.36 3.45 1.443 3.249-1.639 2.143-3.165-1.62-3.674z"/><path fill-opacity=".64" fill="#FF6C50" d="M642.304 218l-1.812.833-.492 1.765.579 1.68 1.725.722 1.624-.82 1.072-1.582-.81-1.837z"/><path fill-opacity=".64" fill="#268DF7" d="M614.686 200l-2.899 1.334-.787 2.823.926 2.688 2.76 1.155 2.6-1.31 1.714-2.533-1.295-2.94z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="876" height="780" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="#268DF7" offset="0%"/><stop stop-color="#268DF7" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="57.989%" gradientTransform="matrix(.2477 -.96494 .91064 .26247 -.145 .641)" id="c"><stop stop-color="#FF6C50" stop-opacity="0" offset="0%"/><stop stop-color="#FF6C50" stop-opacity=".64" offset="51.712%"/><stop stop-color="#FF6C50" stop-opacity=".24" offset="100%"/></radialGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="d"><stop stop-color="#268DF7" stop-opacity=".8" offset="0%"/><stop stop-color="#268DF7" stop-opacity="0" offset="100%"/></linearGradient><filter id="a"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd" filter="url(#a)"><path d="M173.286 346.278c37.75 237.363 436.799-108.302 173.285-173.139C83.058 108.302 268.99 0 173.286 0S0 77.517 0 173.14c0 95.621 135.536-64.225 173.286 173.138z" transform="matrix(-1 0 0 1 655 203)" fill="url(#b)"/><path d="M201.208 353c94.993 0 172-77.007 172-172s-98.8-212.473-172-172c-73.2 40.473-73.2 222.973-172 172-98.8-50.973 77.007 172 172 172z" transform="matrix(-1 0 0 1 805.208 0)" fill="url(#c)"/><path d="M173.286 346.278c37.75 237.363 436.799-108.302 173.285-173.139C83.058 108.302 268.99 0 173.286 0S0 77.517 0 173.14c0 95.621 135.536-64.225 173.286 173.138z" transform="translate(219 203)" fill="url(#d)"/><path fill="#C1C3DA" d="M260.608 103l-3.624 1.667-.984 3.53 1.158 3.36 3.45 1.443 3.249-1.639 2.143-3.165-1.62-3.674z"/><path fill-opacity=".64" fill="#FF6C50" d="M262.304 142l-1.812.833-.492 1.765.579 1.68 1.725.722 1.624-.82 1.072-1.582-.81-1.837z"/><path fill-opacity=".64" fill="#4234F8" d="M234.686 124l-2.899 1.334-.787 2.823.926 2.688 2.76 1.155 2.6-1.31 1.714-2.533-1.295-2.94z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="876" height="762" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="#4234F8" offset="0%"/><stop stop-color="#4234F8" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="58.178%" gradientTransform="scale(.90193 1) rotate(-74.113 .351 .41)" id="c"><stop stop-color="#FF6C50" stop-opacity="0" offset="0%"/><stop stop-color="#FF6C50" stop-opacity=".64" offset="51.712%"/><stop stop-color="#FF6C50" stop-opacity=".24" offset="100%"/></radialGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="d"><stop stop-color="#4234F8" stop-opacity=".8" offset="0%"/><stop stop-color="#4234F8" stop-opacity="0" offset="100%"/></linearGradient><filter id="a"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd" filter="url(#a)"><path d="M173.286 346.278c37.75 237.363 436.799-108.302 173.285-173.139C83.058 108.302 268.99 0 173.286 0S0 77.517 0 173.14c0 95.621 135.536-64.225 173.286 173.138z" transform="translate(219 194)" fill="url(#b)"/><path d="M216 343c185-39.91 172-77.007 172-172s-115 7-172-123.102C159-82.203-100.836 90.254 44 171c144.836 80.746-13 211.91 172 172z" transform="translate(56)" fill="url(#c)"/><path fill="#C1C3DA" d="M349.608 16l-3.624 1.667-.984 3.53 1.158 3.36 3.45 1.443 3.249-1.639L355 21.196l-1.62-3.674z"/><path fill-opacity=".64" fill="#FF6C50" d="M351.304 55l-1.812.833-.492 1.765.579 1.68 1.725.722 1.624-.82L354 57.599l-.81-1.837z"/><path fill-opacity=".64" fill="#268DF7" d="M323.686 37l-2.899 1.334-.787 2.823.926 2.688 2.76 1.155 2.6-1.31L328 41.156l-1.295-2.94z"/><path d="M392.286 540.278c37.75 237.363 436.799-108.302 173.285-173.139C302.058 302.302 487.99 194 392.286 194S219 271.517 219 367.14c0 95.621 135.536-64.225 173.286 173.138z" fill="url(#d)" transform="matrix(-1 0 0 1 874 0)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="876" height="760" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="#268DF7" offset="0%"/><stop stop-color="#268DF7" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="58.741%" gradientTransform="matrix(.24453 -.95258 .76548 .3043 -.08 .62)" id="c"><stop stop-color="#FF6C50" stop-opacity="0" offset="0%"/><stop stop-color="#FF6C50" stop-opacity=".64" offset="51.712%"/><stop stop-color="#FF6C50" stop-opacity=".24" offset="100%"/></radialGradient><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="57.77%" id="d"><stop stop-color="#FF6C50" stop-opacity=".64" offset="0%"/><stop stop-color="#FF6C50" stop-opacity=".24" offset="100%"/></radialGradient><filter x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox" id="e"><feGaussianBlur in="SourceGraphic"/></filter><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="f"><stop stop-color="#268DF7" stop-opacity=".8" offset="0%"/><stop stop-color="#268DF7" stop-opacity="0" offset="100%"/></linearGradient><filter id="a"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd" filter="url(#a)"><path d="M173.286 346.278c37.75 237.363 436.799-108.302 173.285-173.139C83.058 108.302 268.99 0 173.286 0S0 77.517 0 173.14c0 95.621 135.536-64.225 173.286 173.138z" transform="matrix(-1 0 0 1 655 193)" fill="url(#b)"/><g transform="translate(432)"><path d="M219.833 343c94.993 0 172-77.007 172-172s-87.598-167.172-172-135.18c-84.403 31.992-27 113.196-172 135.18-145 21.984 77.007 172 172 172z" fill="url(#c)" transform="matrix(-1 0 0 1 391.833 0)"/><circle fill-opacity=".72" fill="url(#d)" cx="183" cy="40" r="40"/><circle fill-opacity=".48" fill="url(#d)" filter="url(#e)" cx="298" cy="87" r="16"/></g><path d="M392.286 539.278c37.75 237.363 436.799-108.302 173.285-173.139C302.058 301.302 487.99 193 392.286 193S219 270.517 219 366.14c0 95.621 135.536-64.225 173.286 173.138z" fill="url(#f)"/><path fill="#C1C3DA" d="M697.608 50l-3.624 1.667-.984 3.53 1.158 3.36 3.45 1.443 3.249-1.639L703 55.196l-1.62-3.674z"/><path fill-opacity=".64" fill="#FF6C50" d="M683.304 72l-1.812.833-.492 1.765.579 1.68 1.725.722 1.624-.82L686 74.599l-.81-1.837z"/><path fill-opacity=".64" fill="#4234F8" d="M729.686 119l-2.899 1.334-.787 2.823.926 2.688 2.76 1.155 2.6-1.31 1.714-2.533-1.295-2.94z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="1050" height="1044" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#4234F8" offset="0%"/><stop stop-color="#4234F8" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="32.541%" cy="46.352%" fx="32.541%" fy="46.352%" r="60.823%" id="c"><stop stop-color="#4234F8" stop-opacity="0" offset="0%"/><stop stop-color="#4234F8" stop-opacity=".64" offset="51.712%"/><stop stop-color="#4234F8" stop-opacity="0" offset="100%"/></radialGradient><filter id="b"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M199 398c43.352 272.817 501.617-124.479 199-199S308.905 0 199 0 0 89.095 0 199s155.648-73.817 199 199z" transform="translate(305 463)" fill="url(#a)" filter="url(#b)"/><circle cx="172" cy="172" r="172" transform="translate(528 252)" fill="url(#c)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 364 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="57.77%" id="a"><stop stop-color="#FF6C50" stop-opacity=".24" offset="0%"/><stop stop-color="#FF6C50" stop-opacity=".64" offset="51.712%"/><stop stop-color="#FF6C50" stop-opacity=".24" offset="100%"/></radialGradient></defs><circle cx="16" cy="16" r="16" fill="url(#a)" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 432 B |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
!function(){const t=document,e=t.documentElement,i=t.body,n=window.sr=ScrollReveal({mobile:!1});e.classList.remove("no-js"),e.classList.add("js"),window.addEventListener("load",function(){i.classList.add("is-loaded")}),i.classList.contains("has-animations")&&window.addEventListener("load",function(){n.reveal(".feature-extended .device-mockup",{duration:600,distance:"100px",easing:"cubic-bezier(0.215, 0.61, 0.355, 1)",origin:"bottom",viewFactor:.6}),n.reveal(".feature-extended .feature-extended-body",{duration:600,distance:"40px",easing:"cubic-bezier(0.215, 0.61, 0.355, 1)",origin:"top",viewFactor:.6})});let s=function(t){let e=this;e.parentNode=t,e.getCanvasSize(),window.addEventListener("resize",function(){e.getCanvasSize()}),e.mouseX=0,e.mouseY=0,window.addEventListener("mousemove",function(t){e.mouseX=t.clientX,e.mouseY=t.clientY}),e.randomise()};s.prototype.getCanvasSize=function(){this.canvasWidth=this.parentNode.clientWidth,this.canvasHeight=this.parentNode.clientHeight},s.prototype.generateDecimalBetween=function(t,e){return(Math.random()*(t-e)+e).toFixed(2)},s.prototype.update=function(){let t=this;t.translateX=t.translateX-t.movementX,t.translateY=t.translateY-t.movementY,t.posX+=(t.mouseX/(t.staticity/t.magnetism)-t.posX)/t.smoothFactor,t.posY+=(t.mouseY/(t.staticity/t.magnetism)-t.posY)/t.smoothFactor,(t.translateY+t.posY<0||t.translateX+t.posX<0||t.translateX+t.posX>t.canvasWidth)&&(t.randomise(),t.translateY=t.canvasHeight)},s.prototype.randomise=function(){this.colors=["85,107,139","38,141,247","66,52,248","255,108,80","243, 244, 255","96, 100, 131"],this.velocity=30,this.smoothFactor=50,this.staticity=30,this.magnetism=.1+4*Math.random(),this.color=this.colors[Math.floor(Math.random()*this.colors.length)],this.alpha=this.generateDecimalBetween(5,10)/10,this.size=this.generateDecimalBetween(1,4),this.posX=0,this.posY=0,this.movementX=this.generateDecimalBetween(-2,2)/this.velocity,this.movementY=this.generateDecimalBetween(1,20)/this.velocity,this.translateX=this.generateDecimalBetween(0,this.canvasWidth),this.translateY=this.generateDecimalBetween(0,this.canvasHeight)};let a=function(t){this.canvas=document.getElementById(t),this.ctx=this.canvas.getContext("2d"),this.dpr=window.devicePixelRatio};a.prototype.start=function(){let t=this;t.canvasSize(),window.addEventListener("resize",function(){t.canvasSize()}),t.bubblesList=[],t.generateBubbles(),t.animate()},a.prototype.canvasSize=function(){this.container=this.canvas.parentNode,this.w=this.container.offsetWidth,this.h=this.container.offsetHeight,this.wdpi=this.w*this.dpr,this.hdpi=this.h*this.dpr,this.canvas.width=this.wdpi,this.canvas.height=this.hdpi,this.canvas.style.width=this.w+"px",this.canvas.style.height=this.h+"px",this.ctx.scale(this.dpr,this.dpr)},a.prototype.animate=function(){let t=this;t.ctx.clearRect(0,0,t.canvas.clientWidth,t.canvas.clientHeight),t.bubblesList.forEach(function(e){e.update(),t.ctx.translate(e.translateX,e.translateY),t.ctx.beginPath(),t.ctx.arc(e.posX,e.posY,e.size,0,2*Math.PI),t.ctx.fillStyle="rgba("+e.color+","+e.alpha+")",t.ctx.fill(),t.ctx.setTransform(t.dpr,0,0,t.dpr,0,0)}),requestAnimationFrame(this.animate.bind(this))},a.prototype.addBubble=function(t){return this.bubblesList.push(t)},a.prototype.generateBubbles=function(){let t=this;for(let e=0;e<t.bubbleDensity();e++)t.addBubble(new s(t.canvas.parentNode))},a.prototype.bubbleDensity=function(){return 15},window.addEventListener("load",function(){const t=new a("hero-particles"),e=new a("footer-particles");t.start(),e.start()}),window.requestAnimFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}();
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>智驾定位</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Heebo:400,700|Oxygen:700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="dist/css/style.css">
|
||||
<script src="https://unpkg.com/scrollreveal@4.0.5/dist/scrollreveal.min.js"></script>
|
||||
</head>
|
||||
<body class="is-boxed has-animations">
|
||||
<div class="body-wrap boxed-container">
|
||||
<header class="site-header text-light">
|
||||
<div class="container">
|
||||
<div class="site-header-inner">
|
||||
<div class="brand header-brand">
|
||||
<h1 class="m-0">
|
||||
<a href="#">
|
||||
<img class="header-logo-image" src="dist/images/logo2.png" alt="Logo">
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero text-center text-light">
|
||||
<!-- <div class="hero-bg"></div> -->
|
||||
<div class="hero-particles-container">
|
||||
<canvas id="hero-particles"></canvas>
|
||||
</div>
|
||||
<div class="container-sm">
|
||||
<div class="hero-inner">
|
||||
<div class="hero-copy">
|
||||
<h1 class="hero-title mt-0"> <font color="#D151DB">一款面向家庭用户、车队管理者、骑行社群等多种出行场景的精准定位与智能驾驶分析APP。</font> </h1>
|
||||
<p class="hero-paragraph"><font color="#9557F1">我们致力于通过精准的位置共享、行车轨迹分析和智能出行守护，为每一位用户打造更高效、更安心的出行体验。智能记录、安全前行、分享行程，让关心的人更安心！</font></p>
|
||||
<div class="hero-cta">
|
||||
<a class="button button-primary button-wide-mobile" href="#">下载</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mockup-container">
|
||||
<div class="mockup-bg">
|
||||
<img src="dist/images/iphone-hero-bg.svg" alt="iPhone illustration">
|
||||
</div>
|
||||
<img class="device-mockup" src="dist/images/iphone-hero.png" alt="iPhone Hero">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features-extended section">
|
||||
<div class="features-extended-inner section-inner">
|
||||
<div class="features-extended-wrap">
|
||||
<div class="container">
|
||||
<div class="feature-extended">
|
||||
<div class="feature-extended-image">
|
||||
<div class="mockup-bg">
|
||||
<img src="dist/images/iphone-feature-bg-01.svg" alt="iPhone Feature 01 illustration">
|
||||
</div>
|
||||
<img class="device-mockup is-revealing" src="dist/images/iphone-feature-01.png" alt="iPhone Feature 01">
|
||||
</div>
|
||||
<div class="feature-extended-body is-revealing">
|
||||
<h3 class="mt-0 mb-16">帮助你查找朋友和车辆的定位</h3>
|
||||
<p class="m-0">数据自动生成，行程随时回顾.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-extended">
|
||||
<div class="feature-extended-image">
|
||||
<div class="mockup-bg">
|
||||
<img src="dist/images/iphone-feature-bg-02.svg" alt="iPhone Feature 02 illustration">
|
||||
</div>
|
||||
<img class="device-mockup is-revealing" src="dist/images/iphone-feature-02.png" alt="iPhone Feature 02">
|
||||
</div>
|
||||
<div class="feature-extended-body is-revealing">
|
||||
<h3 class="mt-0 mb-16">驾驶评分、智驾分析</h3>
|
||||
<p class="m-0">自动计算驾驶行为评分，实时反馈驾驶习惯，包括急刹车、加速、超速等</p>
|
||||
<p class="m-0">详细分析驾驶行为，展示每次行车的评分细节、改善建议、优化目标</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-extended">
|
||||
<div class="feature-extended-image">
|
||||
<div class="mockup-bg">
|
||||
<img src="dist/images/iphone-feature-bg-03.svg" alt="iPhone Feature 03 illustration">
|
||||
</div>
|
||||
<img class="device-mockup is-revealing" src="dist/images/iphone-feature-03.png" alt="iPhone Feature 03">
|
||||
</div>
|
||||
<div class="feature-extended-body is-revealing">
|
||||
<h3 class="mt-0 mb-16">行程回顾、行程分享</h3>
|
||||
<p class="m-0">精准记录每一次行程，回顾路线、时间、里程，支持轨迹回放</p>
|
||||
<p class="m-0">将实时行程分享给关心你的人</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-extended">
|
||||
<div class="feature-extended-image">
|
||||
<div class="mockup-bg">
|
||||
<img src="dist/images/iphone-feature-bg-04.svg" alt="iPhone Feature 04 illustration">
|
||||
</div>
|
||||
<img class="device-mockup is-revealing" src="dist/images/iphone-feature-04.png" alt="iPhone Feature 04">
|
||||
</div>
|
||||
<div class="feature-extended-body is-revealing">
|
||||
<h3 class="mt-0 mb-16">安全省心、隐私保护</h3>
|
||||
<p class="m-0">上车不掉队，圈子一路随行，安心共享每一步</p>
|
||||
<p class="m-0">圈子虽小，连接无限，定位共享，从亲近的人开始</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--<footer class="site-footer">
|
||||
<div class="footer-particles-container">
|
||||
<canvas id="footer-particles"></canvas>
|
||||
</div>
|
||||
<div class="site-footer-top">
|
||||
<section class="cta section text-light">
|
||||
<div class="container-sm">
|
||||
<div class="cta-inner section-inner">
|
||||
<div class="cta-header text-center">
|
||||
<h2 class="section-title mt-0">Stay in the know</h2>
|
||||
<p class="section-paragraph">Lorem ipsum is common placeholder text used to demonstrate the graphic elements of a document or visual presentation.</p>
|
||||
<div class="cta-cta">
|
||||
<a class="button button-primary button-wide-mobile" href="#">Get early access</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div> -->
|
||||
<div class="site-footer-bottom">
|
||||
<div class="container">
|
||||
<div class="site-footer-inner">
|
||||
<div class="brand footer-brand">
|
||||
<a href="#">
|
||||
<img src="dist/images/logo.png" alt="智驾定位">
|
||||
</a>
|
||||
</div>
|
||||
<ul class="footer-links list-reset">
|
||||
<div class="footer-copyright"><font size="5">© 2025 智驾定位, 版权所有</font></div>
|
||||
<li>
|
||||
<a href="Agreement.html"><font size="5">用户协议</font></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="Privacy.html"><font size="5">隐私政策</font></a>
|
||||
</li>
|
||||
</ul>
|
||||
<!--<ul class="footer-social-links list-reset">
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="screen-reader-text">Facebook</span>
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.023 16L6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023z" fill="#FFF"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="screen-reader-text">Twitter</span>
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4C.7 7.7 1.8 9 3.3 9.3c-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z" fill="#FFF"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="screen-reader-text">Google</span>
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.9 7v2.4H12c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.5 1.7 9.9 1 8 1 4.1 1 1 4.1 1 8s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H7.9z" fill="#FFF"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="footer-copyright">© 2025 智驾定位, 版权所有</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="dist/js/main.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg width="1440" height="582" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="#606483" stop-opacity="0" offset="0%"/><stop stop-color="#0B0D19" stop-opacity=".72" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="c"><stop stop-color="#0B0D19" offset="0%"/><stop stop-color="#0B0D19" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="57.93%" gradientTransform="matrix(.24796 -.96592 .92535 .25883 -.151 .643)" id="d"><stop stop-color="#FF6C50" stop-opacity="0" offset="0%"/><stop stop-color="#FF6C50" stop-opacity=".64" offset="51.712%"/><stop stop-color="#FF6C50" stop-opacity=".24" offset="100%"/></radialGradient><filter id="a"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M252.464 335.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z" fill="url(#b)" transform="rotate(24 -272.272 -82.087)"/><path d="M302.512 242.909c88.025 32.428 156-25.04 156-55.93 0-30.888-69.844-55.928-156-55.928-86.157 0-156 25.04-156 55.929 0 30.888 67.974 23.5 156 55.929z" fill="url(#c)" transform="rotate(24 -255.451 -119.868)"/><g transform="translate(1176 -33)" fill="url(#d)" filter="url(#a)"><path d="M103.064 315.218c128.156 12.998 192.38 157.059 218.627 106.632 26.247-50.427-44.059-106.456 60.397-202.707 104.457-96.252-143.2-285.785-172.392-122.551C180.503 259.825-25.091 302.22 103.064 315.218z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="1440" height="347" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="#606483" stop-opacity="0" offset="0%"/><stop stop-color="#0B0D19" stop-opacity=".72" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="c"><stop stop-color="#0B0D19" offset="0%"/><stop stop-color="#0B0D19" stop-opacity="0" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M177.486 208.219c78.18 89.285 218.65-81.067 218.65-119.337 0-38.27-86.408-69.295-193-69.295-106.59 0-193 31.024-193 69.295 0 38.27 89.17 30.051 167.35 119.337z" transform="rotate(6 -140.175 3980.948)" fill="url(#b)"/><path d="M252.464 335.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z" fill="url(#b)" transform="rotate(24 321.92 -247.724)"/><path d="M302.512 242.909c88.025 32.428 156-25.04 156-55.93 0-30.888-69.844-55.928-156-55.928-86.157 0-156 25.04-156 55.929 0 30.888 67.974 23.5 156 55.929z" fill="url(#c)" transform="rotate(24 338.741 -285.505)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="1440" height="318" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="38.706%" y1="-187.115%" x2="18.675%" y2="110.984%" id="a"><stop stop-color="#FFF" stop-opacity="0" offset="0%"/><stop stop-color="#FF6C50" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c"><stop stop-color="#606483" stop-opacity="0" offset="0%"/><stop stop-color="#0B0D19" stop-opacity=".72" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="d"><stop stop-color="#0B0D19" stop-opacity=".32" offset="0%"/><stop stop-color="#0B0D19" stop-opacity="0" offset="100%"/></linearGradient><filter id="b"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M88.494 90c67.04 7.177 161.094-24.753 224.996-90H.2c25.3 48.079 42.361 85.083 88.294 90z" transform="translate(1051)" fill="url(#a)" filter="url(#b)"/><path d="M250.464 367.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z" fill="url(#c)" transform="rotate(143 810.285 354.367)"/><path d="M373.408 256.178c88.026 32.429 156-25.04 156-55.929 0-30.888-69.843-55.929-156-55.929-86.156 0-156 25.04-156 55.93 0 30.888 67.975 23.5 156 55.928z" fill="url(#d)" transform="rotate(136 905.21 332.676)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="876" height="764" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="#4234F8" offset="0%"/><stop stop-color="#4234F8" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="58.676%" gradientTransform="scale(.81337 1) rotate(-72.484 .371 .382)" id="c"><stop stop-color="#FF6C50" stop-opacity="0" offset="0%"/><stop stop-color="#FF6C50" stop-opacity=".64" offset="51.712%"/><stop stop-color="#FF6C50" stop-opacity=".24" offset="100%"/></radialGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="d"><stop stop-color="#4234F8" stop-opacity=".8" offset="0%"/><stop stop-color="#4234F8" stop-opacity="0" offset="100%"/></linearGradient><filter id="a"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd" filter="url(#a)"><path d="M173.286 346.278c37.75 237.363 436.799-108.302 173.285-173.139C83.058 108.302 268.99 0 173.286 0S0 77.517 0 173.14c0 95.621 135.536-64.225 173.286 173.138z" transform="translate(217 195)" fill="url(#b)"/><path d="M251 344c94.993 0 172-77.007 172-172S345.993 0 251 0s46.934 178.387-172 172c-218.934-6.387 77.007 172 172 172z" transform="translate(19)" fill="url(#c)"/><path d="M173.286 346.278c37.75 237.363 436.799-108.302 173.285-173.139C83.058 108.302 268.99 0 173.286 0S0 77.517 0 173.14c0 95.621 135.536-64.225 173.286 173.138z" transform="matrix(-1 0 0 1 653 195)" fill="url(#d)"/><path fill="#C1C3DA" d="M640.608 179l-3.624 1.667-.984 3.53 1.158 3.36 3.45 1.443 3.249-1.639 2.143-3.165-1.62-3.674z"/><path fill-opacity=".64" fill="#FF6C50" d="M642.304 218l-1.812.833-.492 1.765.579 1.68 1.725.722 1.624-.82 1.072-1.582-.81-1.837z"/><path fill-opacity=".64" fill="#268DF7" d="M614.686 200l-2.899 1.334-.787 2.823.926 2.688 2.76 1.155 2.6-1.31 1.714-2.533-1.295-2.94z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="876" height="780" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="#268DF7" offset="0%"/><stop stop-color="#268DF7" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="57.989%" gradientTransform="matrix(.2477 -.96494 .91064 .26247 -.145 .641)" id="c"><stop stop-color="#FF6C50" stop-opacity="0" offset="0%"/><stop stop-color="#FF6C50" stop-opacity=".64" offset="51.712%"/><stop stop-color="#FF6C50" stop-opacity=".24" offset="100%"/></radialGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="d"><stop stop-color="#268DF7" stop-opacity=".8" offset="0%"/><stop stop-color="#268DF7" stop-opacity="0" offset="100%"/></linearGradient><filter id="a"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd" filter="url(#a)"><path d="M173.286 346.278c37.75 237.363 436.799-108.302 173.285-173.139C83.058 108.302 268.99 0 173.286 0S0 77.517 0 173.14c0 95.621 135.536-64.225 173.286 173.138z" transform="matrix(-1 0 0 1 655 203)" fill="url(#b)"/><path d="M201.208 353c94.993 0 172-77.007 172-172s-98.8-212.473-172-172c-73.2 40.473-73.2 222.973-172 172-98.8-50.973 77.007 172 172 172z" transform="matrix(-1 0 0 1 805.208 0)" fill="url(#c)"/><path d="M173.286 346.278c37.75 237.363 436.799-108.302 173.285-173.139C83.058 108.302 268.99 0 173.286 0S0 77.517 0 173.14c0 95.621 135.536-64.225 173.286 173.138z" transform="translate(219 203)" fill="url(#d)"/><path fill="#C1C3DA" d="M260.608 103l-3.624 1.667-.984 3.53 1.158 3.36 3.45 1.443 3.249-1.639 2.143-3.165-1.62-3.674z"/><path fill-opacity=".64" fill="#FF6C50" d="M262.304 142l-1.812.833-.492 1.765.579 1.68 1.725.722 1.624-.82 1.072-1.582-.81-1.837z"/><path fill-opacity=".64" fill="#4234F8" d="M234.686 124l-2.899 1.334-.787 2.823.926 2.688 2.76 1.155 2.6-1.31 1.714-2.533-1.295-2.94z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="876" height="762" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="#4234F8" offset="0%"/><stop stop-color="#4234F8" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="58.178%" gradientTransform="scale(.90193 1) rotate(-74.113 .351 .41)" id="c"><stop stop-color="#FF6C50" stop-opacity="0" offset="0%"/><stop stop-color="#FF6C50" stop-opacity=".64" offset="51.712%"/><stop stop-color="#FF6C50" stop-opacity=".24" offset="100%"/></radialGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="d"><stop stop-color="#4234F8" stop-opacity=".8" offset="0%"/><stop stop-color="#4234F8" stop-opacity="0" offset="100%"/></linearGradient><filter id="a"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd" filter="url(#a)"><path d="M173.286 346.278c37.75 237.363 436.799-108.302 173.285-173.139C83.058 108.302 268.99 0 173.286 0S0 77.517 0 173.14c0 95.621 135.536-64.225 173.286 173.138z" transform="translate(219 194)" fill="url(#b)"/><path d="M216 343c185-39.91 172-77.007 172-172s-115 7-172-123.102C159-82.203-100.836 90.254 44 171c144.836 80.746-13 211.91 172 172z" transform="translate(56)" fill="url(#c)"/><path fill="#C1C3DA" d="M349.608 16l-3.624 1.667-.984 3.53 1.158 3.36 3.45 1.443 3.249-1.639L355 21.196l-1.62-3.674z"/><path fill-opacity=".64" fill="#FF6C50" d="M351.304 55l-1.812.833-.492 1.765.579 1.68 1.725.722 1.624-.82L354 57.599l-.81-1.837z"/><path fill-opacity=".64" fill="#268DF7" d="M323.686 37l-2.899 1.334-.787 2.823.926 2.688 2.76 1.155 2.6-1.31L328 41.156l-1.295-2.94z"/><path d="M392.286 540.278c37.75 237.363 436.799-108.302 173.285-173.139C302.058 302.302 487.99 194 392.286 194S219 271.517 219 367.14c0 95.621 135.536-64.225 173.286 173.138z" fill="url(#d)" transform="matrix(-1 0 0 1 874 0)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="876" height="760" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="#268DF7" offset="0%"/><stop stop-color="#268DF7" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="58.741%" gradientTransform="matrix(.24453 -.95258 .76548 .3043 -.08 .62)" id="c"><stop stop-color="#FF6C50" stop-opacity="0" offset="0%"/><stop stop-color="#FF6C50" stop-opacity=".64" offset="51.712%"/><stop stop-color="#FF6C50" stop-opacity=".24" offset="100%"/></radialGradient><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="57.77%" id="d"><stop stop-color="#FF6C50" stop-opacity=".64" offset="0%"/><stop stop-color="#FF6C50" stop-opacity=".24" offset="100%"/></radialGradient><filter x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox" id="e"><feGaussianBlur in="SourceGraphic"/></filter><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="f"><stop stop-color="#268DF7" stop-opacity=".8" offset="0%"/><stop stop-color="#268DF7" stop-opacity="0" offset="100%"/></linearGradient><filter id="a"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd" filter="url(#a)"><path d="M173.286 346.278c37.75 237.363 436.799-108.302 173.285-173.139C83.058 108.302 268.99 0 173.286 0S0 77.517 0 173.14c0 95.621 135.536-64.225 173.286 173.138z" transform="matrix(-1 0 0 1 655 193)" fill="url(#b)"/><g transform="translate(432)"><path d="M219.833 343c94.993 0 172-77.007 172-172s-87.598-167.172-172-135.18c-84.403 31.992-27 113.196-172 135.18-145 21.984 77.007 172 172 172z" fill="url(#c)" transform="matrix(-1 0 0 1 391.833 0)"/><circle fill-opacity=".72" fill="url(#d)" cx="183" cy="40" r="40"/><circle fill-opacity=".48" fill="url(#d)" filter="url(#e)" cx="298" cy="87" r="16"/></g><path d="M392.286 539.278c37.75 237.363 436.799-108.302 173.285-173.139C302.058 301.302 487.99 193 392.286 193S219 270.517 219 366.14c0 95.621 135.536-64.225 173.286 173.138z" fill="url(#f)"/><path fill="#C1C3DA" d="M697.608 50l-3.624 1.667-.984 3.53 1.158 3.36 3.45 1.443 3.249-1.639L703 55.196l-1.62-3.674z"/><path fill-opacity=".64" fill="#FF6C50" d="M683.304 72l-1.812.833-.492 1.765.579 1.68 1.725.722 1.624-.82L686 74.599l-.81-1.837z"/><path fill-opacity=".64" fill="#4234F8" d="M729.686 119l-2.899 1.334-.787 2.823.926 2.688 2.76 1.155 2.6-1.31 1.714-2.533-1.295-2.94z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="1050" height="1044" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="#4234F8" offset="0%"/><stop stop-color="#4234F8" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="32.541%" cy="46.352%" fx="32.541%" fy="46.352%" r="60.823%" id="c"><stop stop-color="#4234F8" stop-opacity="0" offset="0%"/><stop stop-color="#4234F8" stop-opacity=".64" offset="51.712%"/><stop stop-color="#4234F8" stop-opacity="0" offset="100%"/></radialGradient><filter id="a"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M199 398c43.352 272.817 501.617-124.479 199-199S308.905 0 199 0 0 89.095 0 199s155.648-73.817 199 199z" transform="translate(305 463)" fill="url(#b)" filter="url(#a)"/><circle cx="172" cy="172" r="172" transform="translate(528 252)" fill="url(#c)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="57.77%" id="a"><stop stop-color="#FF6C50" stop-opacity=".24" offset="0%"/><stop stop-color="#FF6C50" stop-opacity=".64" offset="51.712%"/><stop stop-color="#FF6C50" stop-opacity=".24" offset="100%"/></radialGradient></defs><circle cx="16" cy="16" r="16" fill="url(#a)" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 432 B |
|
|
@ -0,0 +1,181 @@
|
|||
(function () {
|
||||
const doc = document
|
||||
const rootEl = doc.documentElement
|
||||
const body = doc.body
|
||||
/* global ScrollReveal */
|
||||
const sr = window.sr = ScrollReveal({ mobile: false })
|
||||
|
||||
rootEl.classList.remove('no-js')
|
||||
rootEl.classList.add('js')
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
body.classList.add('is-loaded')
|
||||
})
|
||||
|
||||
// Reveal animations
|
||||
function revealAnimations () {
|
||||
sr.reveal('.feature-extended .device-mockup', {
|
||||
duration: 600,
|
||||
distance: '100px',
|
||||
easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||
origin: 'bottom',
|
||||
viewFactor: 0.6
|
||||
})
|
||||
sr.reveal('.feature-extended .feature-extended-body', {
|
||||
duration: 600,
|
||||
distance: '40px',
|
||||
easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||
origin: 'top',
|
||||
viewFactor: 0.6
|
||||
})
|
||||
}
|
||||
|
||||
if (body.classList.contains('has-animations')) {
|
||||
window.addEventListener('load', revealAnimations)
|
||||
}
|
||||
|
||||
// Particle animation
|
||||
let Bubble = function (parentNode) {
|
||||
let self = this
|
||||
self.parentNode = parentNode
|
||||
self.getCanvasSize()
|
||||
window.addEventListener('resize', function () {
|
||||
self.getCanvasSize()
|
||||
})
|
||||
self.mouseX = 0
|
||||
self.mouseY = 0
|
||||
window.addEventListener('mousemove', function (e) {
|
||||
self.mouseX = e.clientX
|
||||
self.mouseY = e.clientY
|
||||
})
|
||||
self.randomise()
|
||||
}
|
||||
|
||||
Bubble.prototype.getCanvasSize = function () {
|
||||
let self = this
|
||||
self.canvasWidth = self.parentNode.clientWidth
|
||||
self.canvasHeight = self.parentNode.clientHeight
|
||||
}
|
||||
|
||||
Bubble.prototype.generateDecimalBetween = function (min, max) {
|
||||
return (Math.random() * (min - max) + max).toFixed(2)
|
||||
}
|
||||
|
||||
Bubble.prototype.update = function () {
|
||||
let self = this
|
||||
self.translateX = self.translateX - self.movementX
|
||||
self.translateY = self.translateY - self.movementY
|
||||
self.posX += ((self.mouseX / (self.staticity / self.magnetism)) - self.posX) / self.smoothFactor
|
||||
self.posY += ((self.mouseY / (self.staticity / self.magnetism)) - self.posY) / self.smoothFactor
|
||||
|
||||
if (self.translateY + self.posY < 0 || self.translateX + self.posX < 0 || self.translateX + self.posX > self.canvasWidth) {
|
||||
self.randomise()
|
||||
self.translateY = self.canvasHeight
|
||||
}
|
||||
}
|
||||
|
||||
Bubble.prototype.randomise = function () {
|
||||
let self = this
|
||||
self.colors = ['85,107,139', '38,141,247', '66,52,248', '255,108,80', '243, 244, 255', '96, 100, 131']
|
||||
self.velocity = 30 // Bubble levitation velocity (the higher the slower)
|
||||
self.smoothFactor = 50 // The higher, the smoother
|
||||
self.staticity = 30 // Increase value to make bubbles move slower on mousemove
|
||||
self.magnetism = 0.1 + Math.random() * 4
|
||||
self.color = self.colors[Math.floor(Math.random() * self.colors.length)]
|
||||
self.alpha = self.generateDecimalBetween(5, 10) / 10
|
||||
self.size = self.generateDecimalBetween(1, 4)
|
||||
self.posX = 0
|
||||
self.posY = 0
|
||||
self.movementX = self.generateDecimalBetween(-2, 2) / self.velocity
|
||||
self.movementY = self.generateDecimalBetween(1, 20) / self.velocity
|
||||
self.translateX = self.generateDecimalBetween(0, self.canvasWidth)
|
||||
self.translateY = self.generateDecimalBetween(0, self.canvasHeight)
|
||||
}
|
||||
|
||||
let Background = function (selector) {
|
||||
let self = this
|
||||
self.canvas = document.getElementById(selector)
|
||||
self.ctx = this.canvas.getContext('2d')
|
||||
self.dpr = window.devicePixelRatio
|
||||
}
|
||||
|
||||
Background.prototype.start = function () {
|
||||
let self = this
|
||||
self.canvasSize()
|
||||
window.addEventListener('resize', function () {
|
||||
self.canvasSize()
|
||||
})
|
||||
self.bubblesList = []
|
||||
self.generateBubbles()
|
||||
self.animate()
|
||||
}
|
||||
|
||||
Background.prototype.canvasSize = function () {
|
||||
let self = this
|
||||
self.container = self.canvas.parentNode
|
||||
// Determine window width and height
|
||||
self.w = self.container.offsetWidth
|
||||
self.h = self.container.offsetHeight
|
||||
self.wdpi = self.w * self.dpr
|
||||
self.hdpi = self.h * self.dpr
|
||||
// Set canvas width and height
|
||||
self.canvas.width = self.wdpi
|
||||
self.canvas.height = self.hdpi
|
||||
// Set width and height attributes
|
||||
self.canvas.style.width = self.w + 'px'
|
||||
self.canvas.style.height = self.h + 'px'
|
||||
// Scale down canvas
|
||||
self.ctx.scale(self.dpr, self.dpr)
|
||||
}
|
||||
|
||||
Background.prototype.animate = function () {
|
||||
let self = this
|
||||
self.ctx.clearRect(0, 0, self.canvas.clientWidth, self.canvas.clientHeight)
|
||||
self.bubblesList.forEach(function (bubble) {
|
||||
bubble.update()
|
||||
self.ctx.translate(bubble.translateX, bubble.translateY)
|
||||
self.ctx.beginPath()
|
||||
self.ctx.arc(bubble.posX, bubble.posY, bubble.size, 0, 2 * Math.PI)
|
||||
self.ctx.fillStyle = 'rgba(' + bubble.color + ',' + bubble.alpha + ')'
|
||||
self.ctx.fill()
|
||||
self.ctx.setTransform(self.dpr, 0, 0, self.dpr, 0, 0)
|
||||
})
|
||||
/* global requestAnimationFrame */
|
||||
requestAnimationFrame(this.animate.bind(this))
|
||||
}
|
||||
|
||||
Background.prototype.addBubble = function (bubble) {
|
||||
return this.bubblesList.push(bubble)
|
||||
}
|
||||
|
||||
Background.prototype.generateBubbles = function () {
|
||||
let self = this
|
||||
for (let i = 0; i < self.bubbleDensity(); i++) {
|
||||
self.addBubble(new Bubble(self.canvas.parentNode))
|
||||
}
|
||||
}
|
||||
|
||||
Background.prototype.bubbleDensity = function () {
|
||||
return 15
|
||||
}
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
const heroParticles = new Background('hero-particles')
|
||||
const footerParticles = new Background('footer-particles')
|
||||
heroParticles.start()
|
||||
footerParticles.start()
|
||||
})
|
||||
|
||||
window.requestAnimFrame = (function () {
|
||||
return (
|
||||
window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function (callback) {
|
||||
window.setTimeout(callback, 1000 / 60)
|
||||
}
|
||||
)
|
||||
})()
|
||||
}())
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
html {
|
||||
line-height: 1.15;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
details,
|
||||
menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
// --------------------------------------------------------------------
|
||||
// Retrieve Font Size -------------------------------------------------
|
||||
// Used in _mixins.scss [@mixin font-size] ----------------------------
|
||||
// --------------------------------------------------------------------
|
||||
@function get-font-size($size, $elem) {
|
||||
@return nth(map-get(map-get($font__scale, $elem), $size), 1);
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
// Retrieve Line Height -----------------------------------------------
|
||||
// Used in _mixins.scss [@mixin font-size] ----------------------------
|
||||
// --------------------------------------------------------------------
|
||||
@function get-line-height($size, $elem) {
|
||||
@return nth(map-get(map-get($font__scale, $elem), $size), 2);
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
// Retrieve Kerning ---------------------------------------------------
|
||||
// Used in _mixins.scss [@mixin font-size] ----------------------------
|
||||
// --------------------------------------------------------------------
|
||||
@function get-kerning($size, $elem) {
|
||||
@return nth(map-get(map-get($font__scale, $elem), $size), 3);
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
// Retrieve Font Family -----------------------------------------------
|
||||
// Used in _mixins.scss [@mixin font-family] --------------------------
|
||||
// --------------------------------------------------------------------
|
||||
@function get-font-family($elem) {
|
||||
@return map-get($font__family, $elem);
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
// Retrieve Font Weight -----------------------------------------------
|
||||
// Used in _mixins.scss [@mixin font-weight] --------------------------
|
||||
// --------------------------------------------------------------------
|
||||
@function get-font-weight($elem) {
|
||||
@return map-get($font__weight, $elem);
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
// Retrieve Padding of Content Area Elements --------------------------
|
||||
// Used in _mixins.scss [@mixin font-size] ----------------------------
|
||||
// --------------------------------------------------------------------
|
||||
@function get-content-padding($elem) {
|
||||
@return map-get($content__padding, $elem);
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
// Retrieve Colors ----------------------------------------------------
|
||||
// Usage: color(typography, 1) ----------------------------------------------
|
||||
// --------------------------------------------------------------------
|
||||
@function color($elem, $variant) {
|
||||
@return map-get(map-get($color, $elem), $variant);
|
||||
}
|
||||
|
|
@ -0,0 +1,567 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
// _ _ _ _ _
|
||||
// (_) | | | | | (_)
|
||||
// _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _
|
||||
// | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` |
|
||||
// | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| |
|
||||
// |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_|
|
||||
//
|
||||
// Simple, elegant and maintainable media queries in Sass
|
||||
// v1.4.9
|
||||
//
|
||||
// http://include-media.com
|
||||
//
|
||||
// Authors: Eduardo Boucas (@eduardoboucas)
|
||||
// Hugo Giraudel (@hugogiraudel)
|
||||
//
|
||||
// This project is licensed under the terms of the MIT license
|
||||
|
||||
|
||||
////
|
||||
/// include-media library public configuration
|
||||
/// @author Eduardo Boucas
|
||||
/// @access public
|
||||
////
|
||||
|
||||
|
||||
///
|
||||
/// Creates a list of global breakpoints
|
||||
///
|
||||
/// @example scss - Creates a single breakpoint with the label `phone`
|
||||
/// $breakpoints: ('phone': 320px);
|
||||
///
|
||||
$breakpoints: (
|
||||
'small': 480px,
|
||||
'medium': 640px,
|
||||
'large': 1024px,
|
||||
) !default;
|
||||
|
||||
|
||||
///
|
||||
/// Creates a list of static expressions or media types
|
||||
///
|
||||
/// @example scss - Creates a single media type (screen)
|
||||
/// $media-expressions: ('screen': 'screen');
|
||||
///
|
||||
/// @example scss - Creates a static expression with logical disjunction (OR operator)
|
||||
/// $media-expressions: (
|
||||
/// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
|
||||
/// );
|
||||
///
|
||||
$media-expressions: (
|
||||
'screen': 'screen',
|
||||
'print': 'print',
|
||||
'handheld': 'handheld',
|
||||
'landscape': '(orientation: landscape)',
|
||||
'portrait': '(orientation: portrait)',
|
||||
'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
|
||||
'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)'
|
||||
) !default;
|
||||
|
||||
|
||||
///
|
||||
/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals
|
||||
///
|
||||
/// @example scss - Interval for pixels is defined as `1` by default
|
||||
/// @include media('>128px') {}
|
||||
///
|
||||
/// /* Generates: */
|
||||
/// @media (min-width: 129px) {}
|
||||
///
|
||||
/// @example scss - Interval for ems is defined as `0.01` by default
|
||||
/// @include media('>20em') {}
|
||||
///
|
||||
/// /* Generates: */
|
||||
/// @media (min-width: 20.01em) {}
|
||||
///
|
||||
/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;`
|
||||
/// @include media('>2.0rem') {}
|
||||
///
|
||||
/// /* Generates: */
|
||||
/// @media (min-width: 2.1rem) {}
|
||||
///
|
||||
$unit-intervals: (
|
||||
'px': 1,
|
||||
'em': 0.01,
|
||||
'rem': 0.1,
|
||||
'': 0
|
||||
) !default;
|
||||
|
||||
///
|
||||
/// Defines whether support for media queries is available, useful for creating separate stylesheets
|
||||
/// for browsers that don't support media queries.
|
||||
///
|
||||
/// @example scss - Disables support for media queries
|
||||
/// $im-media-support: false;
|
||||
/// @include media('>=tablet') {
|
||||
/// .foo {
|
||||
/// color: tomato;
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// /* Generates: */
|
||||
/// .foo {
|
||||
/// color: tomato;
|
||||
/// }
|
||||
///
|
||||
$im-media-support: true !default;
|
||||
|
||||
///
|
||||
/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or
|
||||
/// intercept the breakpoint will be displayed, any others will be ignored.
|
||||
///
|
||||
/// @example scss - This media query will show because it intercepts the static breakpoint
|
||||
/// $im-media-support: false;
|
||||
/// $im-no-media-breakpoint: 'desktop';
|
||||
/// @include media('>=tablet') {
|
||||
/// .foo {
|
||||
/// color: tomato;
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// /* Generates: */
|
||||
/// .foo {
|
||||
/// color: tomato;
|
||||
/// }
|
||||
///
|
||||
/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint
|
||||
/// $im-media-support: false;
|
||||
/// $im-no-media-breakpoint: 'tablet';
|
||||
/// @include media('>=desktop') {
|
||||
/// .foo {
|
||||
/// color: tomato;
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// /* No output */
|
||||
///
|
||||
$im-no-media-breakpoint: 'desktop' !default;
|
||||
|
||||
///
|
||||
/// Selects which media expressions are allowed in an expression for it to be used when media queries
|
||||
/// are not supported.
|
||||
///
|
||||
/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions
|
||||
/// $im-media-support: false;
|
||||
/// $im-no-media-breakpoint: 'desktop';
|
||||
/// $im-no-media-expressions: ('screen');
|
||||
/// @include media('>=tablet', 'screen') {
|
||||
/// .foo {
|
||||
/// color: tomato;
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// /* Generates: */
|
||||
/// .foo {
|
||||
/// color: tomato;
|
||||
/// }
|
||||
///
|
||||
/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted
|
||||
/// $im-media-support: false;
|
||||
/// $im-no-media-breakpoint: 'desktop';
|
||||
/// $im-no-media-expressions: ('screen');
|
||||
/// @include media('>=tablet', 'retina2x') {
|
||||
/// .foo {
|
||||
/// color: tomato;
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// /* No output */
|
||||
///
|
||||
$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
|
||||
|
||||
////
|
||||
/// Cross-engine logging engine
|
||||
/// @author Hugo Giraudel
|
||||
/// @access private
|
||||
////
|
||||
|
||||
|
||||
///
|
||||
/// Log a message either with `@error` if supported
|
||||
/// else with `@warn`, using `feature-exists('at-error')`
|
||||
/// to detect support.
|
||||
///
|
||||
/// @param {String} $message - Message to log
|
||||
///
|
||||
@function im-log($message) {
|
||||
@if feature-exists('at-error') {
|
||||
@error $message;
|
||||
} @else {
|
||||
@warn $message;
|
||||
$_: noop();
|
||||
}
|
||||
|
||||
@return $message;
|
||||
}
|
||||
|
||||
|
||||
///
|
||||
/// Wrapper mixin for the log function so it can be used with a more friendly
|
||||
/// API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function
|
||||
/// within functions because it is not possible to include a mixin in a function
|
||||
/// and use the mixin everywhere else because it's much more elegant.
|
||||
///
|
||||
/// @param {String} $message - Message to log
|
||||
///
|
||||
@mixin log($message) {
|
||||
@if im-log($message) {}
|
||||
}
|
||||
|
||||
|
||||
///
|
||||
/// Function with no `@return` called next to `@warn` in Sass 3.3
|
||||
/// to trigger a compiling error and stop the process.
|
||||
///
|
||||
@function noop() {}
|
||||
|
||||
///
|
||||
/// Determines whether a list of conditions is intercepted by the static breakpoint.
|
||||
///
|
||||
/// @param {Arglist} $conditions - Media query conditions
|
||||
///
|
||||
/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint
|
||||
///
|
||||
@function im-intercepts-static-breakpoint($conditions...) {
|
||||
$no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint);
|
||||
|
||||
@if not $no-media-breakpoint-value {
|
||||
@if im-log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {}
|
||||
}
|
||||
|
||||
@each $condition in $conditions {
|
||||
@if not map-has-key($media-expressions, $condition) {
|
||||
$operator: get-expression-operator($condition);
|
||||
$prefix: get-expression-prefix($operator);
|
||||
$value: get-expression-value($condition, $operator);
|
||||
|
||||
@if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or
|
||||
($prefix == 'min' and $value > $no-media-breakpoint-value) {
|
||||
@return false;
|
||||
}
|
||||
} @else if not index($im-no-media-expressions, $condition) {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
||||
@return true;
|
||||
}
|
||||
|
||||
////
|
||||
/// Parsing engine
|
||||
/// @author Hugo Giraudel
|
||||
/// @access private
|
||||
////
|
||||
|
||||
|
||||
///
|
||||
/// Get operator of an expression
|
||||
///
|
||||
/// @param {String} $expression - Expression to extract operator from
|
||||
///
|
||||
/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤`
|
||||
///
|
||||
@function get-expression-operator($expression) {
|
||||
@each $operator in ('>=', '>', '<=', '<', '≥', '≤') {
|
||||
@if str-index($expression, $operator) {
|
||||
@return $operator;
|
||||
}
|
||||
}
|
||||
|
||||
// It is not possible to include a mixin inside a function, so we have to
|
||||
// rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
|
||||
// functions cannot be called anywhere in Sass, we need to hack the call in
|
||||
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
|
||||
// Sass 3.3, change this line in `@if im-log(..) {}` instead.
|
||||
$_: im-log('No operator found in `#{$expression}`.');
|
||||
}
|
||||
|
||||
|
||||
///
|
||||
/// Get dimension of an expression, based on a found operator
|
||||
///
|
||||
/// @param {String} $expression - Expression to extract dimension from
|
||||
/// @param {String} $operator - Operator from `$expression`
|
||||
///
|
||||
/// @return {String} - `width` or `height` (or potentially anything else)
|
||||
///
|
||||
@function get-expression-dimension($expression, $operator) {
|
||||
$operator-index: str-index($expression, $operator);
|
||||
$parsed-dimension: str-slice($expression, 0, $operator-index - 1);
|
||||
$dimension: 'width';
|
||||
|
||||
@if str-length($parsed-dimension) > 0 {
|
||||
$dimension: $parsed-dimension;
|
||||
}
|
||||
|
||||
@return $dimension;
|
||||
}
|
||||
|
||||
|
||||
///
|
||||
/// Get dimension prefix based on an operator
|
||||
///
|
||||
/// @param {String} $operator - Operator
|
||||
///
|
||||
/// @return {String} - `min` or `max`
|
||||
///
|
||||
@function get-expression-prefix($operator) {
|
||||
@return if(index(('<', '<=', '≤'), $operator), 'max', 'min');
|
||||
}
|
||||
|
||||
|
||||
///
|
||||
/// Get value of an expression, based on a found operator
|
||||
///
|
||||
/// @param {String} $expression - Expression to extract value from
|
||||
/// @param {String} $operator - Operator from `$expression`
|
||||
///
|
||||
/// @return {Number} - A numeric value
|
||||
///
|
||||
@function get-expression-value($expression, $operator) {
|
||||
$operator-index: str-index($expression, $operator);
|
||||
$value: str-slice($expression, $operator-index + str-length($operator));
|
||||
|
||||
@if map-has-key($breakpoints, $value) {
|
||||
$value: map-get($breakpoints, $value);
|
||||
} @else {
|
||||
$value: to-number($value);
|
||||
}
|
||||
|
||||
$interval: map-get($unit-intervals, unit($value));
|
||||
|
||||
@if not $interval {
|
||||
// It is not possible to include a mixin inside a function, so we have to
|
||||
// rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
|
||||
// functions cannot be called anywhere in Sass, we need to hack the call in
|
||||
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
|
||||
// Sass 3.3, change this line in `@if im-log(..) {}` instead.
|
||||
$_: im-log('Unknown unit `#{unit($value)}`.');
|
||||
}
|
||||
|
||||
@if $operator == '>' {
|
||||
$value: $value + $interval;
|
||||
} @else if $operator == '<' {
|
||||
$value: $value - $interval;
|
||||
}
|
||||
|
||||
@return $value;
|
||||
}
|
||||
|
||||
|
||||
///
|
||||
/// Parse an expression to return a valid media-query expression
|
||||
///
|
||||
/// @param {String} $expression - Expression to parse
|
||||
///
|
||||
/// @return {String} - Valid media query
|
||||
///
|
||||
@function parse-expression($expression) {
|
||||
// If it is part of $media-expressions, it has no operator
|
||||
// then there is no need to go any further, just return the value
|
||||
@if map-has-key($media-expressions, $expression) {
|
||||
@return map-get($media-expressions, $expression);
|
||||
}
|
||||
|
||||
$operator: get-expression-operator($expression);
|
||||
$dimension: get-expression-dimension($expression, $operator);
|
||||
$prefix: get-expression-prefix($operator);
|
||||
$value: get-expression-value($expression, $operator);
|
||||
|
||||
@return '(#{$prefix}-#{$dimension}: #{$value})';
|
||||
}
|
||||
|
||||
///
|
||||
/// Slice `$list` between `$start` and `$end` indexes
|
||||
///
|
||||
/// @access private
|
||||
///
|
||||
/// @param {List} $list - List to slice
|
||||
/// @param {Number} $start [1] - Start index
|
||||
/// @param {Number} $end [length($list)] - End index
|
||||
///
|
||||
/// @return {List} Sliced list
|
||||
///
|
||||
@function slice($list, $start: 1, $end: length($list)) {
|
||||
@if length($list) < 1 or $start > $end {
|
||||
@return ();
|
||||
}
|
||||
|
||||
$result: ();
|
||||
|
||||
@for $i from $start through $end {
|
||||
$result: append($result, nth($list, $i));
|
||||
}
|
||||
|
||||
@return $result;
|
||||
}
|
||||
|
||||
////
|
||||
/// String to number converter
|
||||
/// @author Hugo Giraudel
|
||||
/// @access private
|
||||
////
|
||||
|
||||
|
||||
///
|
||||
/// Casts a string into a number
|
||||
///
|
||||
/// @param {String | Number} $value - Value to be parsed
|
||||
///
|
||||
/// @return {Number}
|
||||
///
|
||||
@function to-number($value) {
|
||||
@if type-of($value) == 'number' {
|
||||
@return $value;
|
||||
} @else if type-of($value) != 'string' {
|
||||
$_: im-log('Value for `to-number` should be a number or a string.');
|
||||
}
|
||||
|
||||
$first-character: str-slice($value, 1, 1);
|
||||
$result: 0;
|
||||
$digits: 0;
|
||||
$minus: ($first-character == '-');
|
||||
$numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
|
||||
|
||||
// Remove +/- sign if present at first character
|
||||
@if ($first-character == '+' or $first-character == '-') {
|
||||
$value: str-slice($value, 2);
|
||||
}
|
||||
|
||||
@for $i from 1 through str-length($value) {
|
||||
$character: str-slice($value, $i, $i);
|
||||
|
||||
@if not (index(map-keys($numbers), $character) or $character == '.') {
|
||||
@return to-length(if($minus, -$result, $result), str-slice($value, $i))
|
||||
}
|
||||
|
||||
@if $character == '.' {
|
||||
$digits: 1;
|
||||
} @else if $digits == 0 {
|
||||
$result: $result * 10 + map-get($numbers, $character);
|
||||
} @else {
|
||||
$digits: $digits * 10;
|
||||
$result: $result + map-get($numbers, $character) / $digits;
|
||||
}
|
||||
}
|
||||
|
||||
@return if($minus, -$result, $result);
|
||||
}
|
||||
|
||||
|
||||
///
|
||||
/// Add `$unit` to `$value`
|
||||
///
|
||||
/// @param {Number} $value - Value to add unit to
|
||||
/// @param {String} $unit - String representation of the unit
|
||||
///
|
||||
/// @return {Number} - `$value` expressed in `$unit`
|
||||
///
|
||||
@function to-length($value, $unit) {
|
||||
$units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
|
||||
|
||||
@if not index(map-keys($units), $unit) {
|
||||
$_: im-log('Invalid unit `#{$unit}`.');
|
||||
}
|
||||
|
||||
@return $value * map-get($units, $unit);
|
||||
}
|
||||
|
||||
///
|
||||
/// This mixin aims at redefining the configuration just for the scope of
|
||||
/// the call. It is helpful when having a component needing an extended
|
||||
/// configuration such as custom breakpoints (referred to as tweakpoints)
|
||||
/// for instance.
|
||||
///
|
||||
/// @author Hugo Giraudel
|
||||
///
|
||||
/// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints`
|
||||
/// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression`
|
||||
///
|
||||
/// @example scss - Extend the global breakpoints with a tweakpoint
|
||||
/// @include media-context(('custom': 678px)) {
|
||||
/// .foo {
|
||||
/// @include media('>phone', '<=custom') {
|
||||
/// // ...
|
||||
/// }
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// @example scss - Extend the global media expressions with a custom one
|
||||
/// @include media-context($tweak-media-expressions: ('all': 'all')) {
|
||||
/// .foo {
|
||||
/// @include media('all', '>phone') {
|
||||
/// // ...
|
||||
/// }
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// @example scss - Extend both configuration maps
|
||||
/// @include media-context(('custom': 678px), ('all': 'all')) {
|
||||
/// .foo {
|
||||
/// @include media('all', '>phone', '<=custom') {
|
||||
/// // ...
|
||||
/// }
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) {
|
||||
// Save global configuration
|
||||
$global-breakpoints: $breakpoints;
|
||||
$global-media-expressions: $media-expressions;
|
||||
|
||||
// Update global configuration
|
||||
$breakpoints: map-merge($breakpoints, $tweakpoints) !global;
|
||||
$media-expressions: map-merge($media-expressions, $tweak-media-expressions) !global;
|
||||
|
||||
@content;
|
||||
|
||||
// Restore global configuration
|
||||
$breakpoints: $global-breakpoints !global;
|
||||
$media-expressions: $global-media-expressions !global;
|
||||
}
|
||||
|
||||
////
|
||||
/// include-media public exposed API
|
||||
/// @author Eduardo Boucas
|
||||
/// @access public
|
||||
////
|
||||
|
||||
|
||||
///
|
||||
/// Generates a media query based on a list of conditions
|
||||
///
|
||||
/// @param {Arglist} $conditions - Media query conditions
|
||||
///
|
||||
/// @example scss - With a single set breakpoint
|
||||
/// @include media('>phone') { }
|
||||
///
|
||||
/// @example scss - With two set breakpoints
|
||||
/// @include media('>phone', '<=tablet') { }
|
||||
///
|
||||
/// @example scss - With custom values
|
||||
/// @include media('>=358px', '<850px') { }
|
||||
///
|
||||
/// @example scss - With set breakpoints with custom values
|
||||
/// @include media('>desktop', '<=1350px') { }
|
||||
///
|
||||
/// @example scss - With a static expression
|
||||
/// @include media('retina2x') { }
|
||||
///
|
||||
/// @example scss - Mixing everything
|
||||
/// @include media('>=350px', '<tablet', 'retina3x') { }
|
||||
///
|
||||
@mixin media($conditions...) {
|
||||
@if ($im-media-support and length($conditions) == 0) or
|
||||
(not $im-media-support and im-intercepts-static-breakpoint($conditions...)) {
|
||||
@content;
|
||||
} @else if ($im-media-support and length($conditions) > 0) {
|
||||
@media #{unquote(parse-expression(nth($conditions, 1)))} {
|
||||
// Recursive call
|
||||
@include media(slice($conditions, 2)...) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
// Font-size + Line-height + Kerning
|
||||
// Usage: @include font-size(1, mobile)
|
||||
// Add more true/false args to control what to output: font-size, line-height, kerning
|
||||
@mixin font-size($size, $elem, $font-size: true, $line-height: false, $kerning: false, $adjust-font-size: 0) {
|
||||
@if not map-has-key(map-get($font__scale, $elem), $size) {
|
||||
@warn "'#{$size}' key does not exist in array!";
|
||||
}
|
||||
@if ( $font-size != false ) {
|
||||
font-size: get-font-size($size, $elem) + $adjust-font-size;
|
||||
}
|
||||
@if ( $line-height == true ) {
|
||||
line-height: get-line-height($size, $elem);
|
||||
}
|
||||
@if ( $kerning == true ) {
|
||||
letter-spacing: get-kerning($size, $elem);
|
||||
}
|
||||
}
|
||||
|
||||
// Font Family
|
||||
@mixin font-family($elem) {
|
||||
font-family: unquote(get-font-family($elem));
|
||||
}
|
||||
|
||||
// Font Weight
|
||||
@mixin font-weight($elem) {
|
||||
font-weight: get-font-weight($elem);
|
||||
}
|
||||
|
||||
// Anchor aspect
|
||||
@mixin anchor-aspect($type: 'main') {
|
||||
@if ($type == 'main') { // Base
|
||||
color: color(primary, 1);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
outline: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
} @else if ($type == 'header') {
|
||||
color: color(typography, 2i);
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: color(typography, 1i);
|
||||
}
|
||||
} @else if ($type == 'footer') {
|
||||
color: color(typography, 2i);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin shadow($layout: false) {
|
||||
@if ( $layout == 'dark' ) {
|
||||
box-shadow: 0 20px 48px rgba(darken(color(bg, 1), 35%), .2);
|
||||
} @else {
|
||||
box-shadow: 0 20px 48px rgba(color(typography, 1), .16);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin shadow-sm($layout: false) {
|
||||
@if ( $layout == 'dark' ) {
|
||||
box-shadow: 0 16px 24px rgba(darken(color(bg, 1), 35%), .2);
|
||||
} @else {
|
||||
box-shadow: 0 16px 24px rgba(color(typography, 1), .16);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin divider-mix($layout: false) {
|
||||
display: block;
|
||||
height: 1px;
|
||||
@if ( $layout == 'dark' ) {
|
||||
background: color(bg, 2i);
|
||||
} @else {
|
||||
background: color(bg, 3);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin divider($type: false, $layout: false) {
|
||||
@if ( $type == 'before' ) {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
@include divider-mix($layout);
|
||||
}
|
||||
} @else if ($type == 'after') {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
@include divider-mix($layout);
|
||||
}
|
||||
} @else {
|
||||
@include divider-mix($layout);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
// --------------------------------------------
|
||||
// Colors -------------------------------------
|
||||
// Usage example: color(primary, main)
|
||||
// --------------------------------------------
|
||||
$color: (
|
||||
typography: (
|
||||
1: #161E2A,
|
||||
2: #6B7A90,
|
||||
1i: #FFF,
|
||||
2i: #606483
|
||||
),
|
||||
bg: (
|
||||
1: #FFFFFF,
|
||||
2: #F3F4FF,
|
||||
3: #E4E8EE,
|
||||
1i: #0B0D19,
|
||||
2i: #1E233D
|
||||
),
|
||||
primary: (
|
||||
1: #4234F8,
|
||||
2: #7065FA,
|
||||
3: #1908F1,
|
||||
4: #E2E0FE
|
||||
),
|
||||
secondary: (
|
||||
1: #FF6C50,
|
||||
2: #FF816A,
|
||||
3: #FF411D,
|
||||
4: #FFD8D1
|
||||
)
|
||||
);
|
||||
|
||||
// --------------------------------------------
|
||||
// Typography ---------------------------------
|
||||
// --------------------------------------------
|
||||
$font__family: (
|
||||
base: '"Heebo", sans-serif', // font-family(base)
|
||||
heading: '"Oxygen", sans-serif', // font-family(heading)
|
||||
code: 'Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace', // font-family(code)
|
||||
pre: '"Courier 10 Pitch", Courier, monospace' // font-family(pre)
|
||||
);
|
||||
|
||||
$font__sizes: (
|
||||
alpha: ( 44px, 54px, 0px ), // font-size, line-height, kerning (use '0' if don't want to output any kerning)
|
||||
beta: ( 38px, 48px, 0px ),
|
||||
gamma: ( 32px, 42px, 0px ),
|
||||
delta: ( 28px, 34px, 0px ),
|
||||
epsilon: ( 20px, 30px, -0.1px ),
|
||||
zeta: ( 18px, 27px, -0.1px ),
|
||||
eta: ( 16px, 24px, -0.1px ),
|
||||
theta: ( 14px, 22px, 0px )
|
||||
);
|
||||
|
||||
$font__scale: (
|
||||
desktop: ( // i.e. $breakpoint__m + $breakpoint__l (600 - 1024)
|
||||
1: map-get($font__sizes, alpha), // H1
|
||||
2: map-get($font__sizes, beta), // H2
|
||||
3: map-get($font__sizes, gamma), // H3
|
||||
4: map-get($font__sizes, delta), // H4
|
||||
5: map-get($font__sizes, epsilon), // Body, H5, H6
|
||||
6: map-get($font__sizes, zeta), // Text small
|
||||
7: map-get($font__sizes, eta), // Text smaller
|
||||
8: map-get($font__sizes, theta) // Footer area
|
||||
),
|
||||
mobile: ( // i.e. $breakpoint__xs + $breakpoint__s (up to 600)
|
||||
1: map-get($font__sizes, beta), // H1
|
||||
2: map-get($font__sizes, gamma), // H2
|
||||
3: map-get($font__sizes, delta), // H3
|
||||
4: map-get($font__sizes, delta), // H4
|
||||
5: map-get($font__sizes, epsilon), // Body, H5, H6
|
||||
6: map-get($font__sizes, zeta), // Text small
|
||||
7: map-get($font__sizes, eta), // Text smaller
|
||||
8: map-get($font__sizes, theta) // Footer area
|
||||
)
|
||||
);
|
||||
|
||||
$font__weight: (
|
||||
regular: 400, // font__weight(regular)
|
||||
medium: 500, // font__weight(medium)
|
||||
semibold: 600, // font__weight(semibold)
|
||||
bold: 700 // font__weight(bold)
|
||||
);
|
||||
|
||||
// --------------------------------------------
|
||||
// Structure ----------------------------------
|
||||
// --------------------------------------------
|
||||
$content__padding: (
|
||||
mobile: 16px,
|
||||
desktop: 24px
|
||||
);
|
||||
$container__width: 1080px;
|
||||
$container__width-sm: 800px;
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
background: color(bg, 1); /* Fallback for when there is no custom background color defined. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
@include divider();
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 24px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
li > ul,
|
||||
li > ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
dt {
|
||||
@include font-weight(semibold);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto; /* Make sure images are scaled correctly. */
|
||||
max-width: 100%; /* Adhere to container width. */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 24px 0; /* Extra wide images within figure tags don't overflow the content area. */
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@include font-size(7, mobile, true, true);
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// tables
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid color(bg, 3);
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 10px 16px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,469 @@
|
|||
.container,
|
||||
.container-sm {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding-left: get-content-padding(mobile);
|
||||
padding-right: get-content-padding(mobile);
|
||||
|
||||
@include media( '>small' ) {
|
||||
padding-left: get-content-padding(desktop);
|
||||
padding-right: get-content-padding(desktop);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: $container__width + ( get-content-padding(desktop) * 2 );
|
||||
}
|
||||
|
||||
.container-sm {
|
||||
max-width: $container__width-sm + ( get-content-padding(desktop) * 2 );
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
.container-sm {
|
||||
max-width: $container__width-sm;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Text meant only for screen readers. */
|
||||
.screen-reader-text {
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
position: absolute !important;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
|
||||
|
||||
&:focus {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
clip: auto !important;
|
||||
display: block;
|
||||
@include font-size(8, mobile, true, false, true);
|
||||
@if ( get-font-size(8, desktop) != get-font-size(8, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(8, desktop, true, false, true);
|
||||
}
|
||||
}
|
||||
@include font-weight(semibold);
|
||||
line-height: 16px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-color: color(bg, 1);
|
||||
color: color(primary, 1) !important;
|
||||
border: none;
|
||||
height: auto;
|
||||
left: 8px;
|
||||
padding: 16px 40px;
|
||||
top: 8px;
|
||||
width: auto;
|
||||
z-index: 100000;
|
||||
}
|
||||
}
|
||||
|
||||
.list-reset {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: color(primary, 1);
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: color(secondary, 1);
|
||||
}
|
||||
|
||||
.has-top-divider {
|
||||
@include divider(before);
|
||||
}
|
||||
|
||||
.has-bottom-divider {
|
||||
@include divider(after);
|
||||
}
|
||||
|
||||
.m-0 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mt-0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mr-0 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ml-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.m-8 {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.mt-8 {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mr-8 {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ml-8 {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.m-16 {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.mt-16 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.mr-16 {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.mb-16 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.ml-16 {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.m-24 {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.mt-24 {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.mr-24 {
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.mb-24 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.ml-24 {
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.m-32 {
|
||||
margin: 32px;
|
||||
}
|
||||
|
||||
.mt-32 {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.mr-32 {
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.mb-32 {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.ml-32 {
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
.m-40 {
|
||||
margin: 40px;
|
||||
}
|
||||
|
||||
.mt-40 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.mr-40 {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.mb-40 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.ml-40 {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.m-48 {
|
||||
margin: 48px;
|
||||
}
|
||||
|
||||
.mt-48 {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.mr-48 {
|
||||
margin-right: 48px;
|
||||
}
|
||||
|
||||
.mb-48 {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.ml-48 {
|
||||
margin-left: 48px;
|
||||
}
|
||||
|
||||
.m-56 {
|
||||
margin: 56px;
|
||||
}
|
||||
|
||||
.mt-56 {
|
||||
margin-top: 56px;
|
||||
}
|
||||
|
||||
.mr-56 {
|
||||
margin-right: 56px;
|
||||
}
|
||||
|
||||
.mb-56 {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.ml-56 {
|
||||
margin-left: 56px;
|
||||
}
|
||||
|
||||
.m-64 {
|
||||
margin: 64px;
|
||||
}
|
||||
|
||||
.mt-64 {
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.mr-64 {
|
||||
margin-right: 64px;
|
||||
}
|
||||
|
||||
.mb-64 {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.ml-64 {
|
||||
margin-left: 64px;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pt-0 {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.pr-0 {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.pb-0 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.pl-0 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.p-8 {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.pt-8 {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.pr-8 {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.pb-8 {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.pl-8 {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.p-16 {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.pt-16 {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.pr-16 {
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.pb-16 {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.pl-16 {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.p-24 {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.pt-24 {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.pr-24 {
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.pb-24 {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.pl-24 {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.p-32 {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.pt-32 {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.pr-32 {
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.pb-32 {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.pl-32 {
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.p-40 {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.pt-40 {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.pr-40 {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.pb-40 {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.pl-40 {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.p-48 {
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
.pt-48 {
|
||||
padding-top: 48px;
|
||||
}
|
||||
|
||||
.pr-48 {
|
||||
padding-right: 48px;
|
||||
}
|
||||
|
||||
.pb-48 {
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
.pl-48 {
|
||||
padding-left: 48px;
|
||||
}
|
||||
|
||||
.p-56 {
|
||||
padding: 56px;
|
||||
}
|
||||
|
||||
.pt-56 {
|
||||
padding-top: 56px;
|
||||
}
|
||||
|
||||
.pr-56 {
|
||||
padding-right: 56px;
|
||||
}
|
||||
|
||||
.pb-56 {
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
|
||||
.pl-56 {
|
||||
padding-left: 56px;
|
||||
}
|
||||
|
||||
.p-64 {
|
||||
padding: 64px;
|
||||
}
|
||||
|
||||
.pt-64 {
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.pr-64 {
|
||||
padding-right: 64px;
|
||||
}
|
||||
|
||||
.pb-64 {
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
|
||||
.pl-64 {
|
||||
padding-left: 64px;
|
||||
}
|
||||
|
||||
/* Reveal animations */
|
||||
.sr {
|
||||
|
||||
.has-animations {
|
||||
|
||||
.is-revealing {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,263 @@
|
|||
html {
|
||||
@include font-size(5, mobile, true, true);
|
||||
@if ( get-font-size(5, desktop) != get-font-size(5, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(5, desktop, true, true, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: color(typography, 2);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
@include font-family(base);
|
||||
}
|
||||
|
||||
a {
|
||||
@include anchor-aspect(main);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
clear: both;
|
||||
color: color(typography, 1);
|
||||
@if ( get-font-family(heading) != get-font-family(base) ) {
|
||||
@include font-family(heading);
|
||||
}
|
||||
@include font-weight(semibold);
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
@include font-size(1, mobile, true, true, true);
|
||||
@if ( get-font-size(1, desktop) != get-font-size(1, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(1, desktop, true, true, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
@include font-size(2, mobile, true, true, true);
|
||||
@if ( get-font-size(2, desktop) != get-font-size(2, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(2, desktop, true, true, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3,
|
||||
blockquote {
|
||||
@include font-size(3, mobile, true, true, true);
|
||||
@if ( get-font-size(3, desktop) != get-font-size(3, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(3, desktop, true, true, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
@include font-size(4, mobile, true, true, true);
|
||||
@if ( get-font-size(4, desktop) != get-font-size(4, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(4, desktop, true, true, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h5,
|
||||
.h5,
|
||||
h6,
|
||||
.h6 {
|
||||
@include font-size(5, mobile, true, true, true);
|
||||
@if ( get-font-size(5, desktop) != get-font-size(5, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(5, desktop, true, true, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media( '<=medium' ) {
|
||||
|
||||
.h1-mobile {
|
||||
@include font-size(1, mobile, true, true, true);
|
||||
}
|
||||
|
||||
.h2-mobile {
|
||||
@include font-size(2, mobile, true, true, true);
|
||||
}
|
||||
|
||||
.h3-mobile {
|
||||
@include font-size(3, mobile, true, true, true);
|
||||
}
|
||||
|
||||
.h4-mobile {
|
||||
@include font-size(4, mobile, true, true, true);
|
||||
}
|
||||
|
||||
.h5-mobile,
|
||||
.h6-mobile {
|
||||
@include font-size(5, mobile, true, true, true);
|
||||
}
|
||||
}
|
||||
|
||||
.text-light {
|
||||
color: color(typography, 2i);
|
||||
|
||||
a {
|
||||
color: color(typography, 2i);
|
||||
}
|
||||
}
|
||||
|
||||
.text-light {
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
color: color(typography, 1i) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
@include font-size(6, mobile, true, true, true);
|
||||
@if ( get-font-size(6, desktop) != get-font-size(6, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(6, desktop, true, true, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
@include font-size(7, mobile, true, true, true);
|
||||
@if ( get-font-size(7, desktop) != get-font-size(7, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(7, desktop, true, true, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2,
|
||||
.h1, .h2 {
|
||||
margin-top: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3 {
|
||||
margin-top: 36px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h4, h5, h6,
|
||||
.h4, .h5, .h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
dfn, cite, em, i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: color(typography, 2);
|
||||
font-style: italic;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
margin-left: 24px;
|
||||
|
||||
&::before {
|
||||
content: "\201C";
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "\201D";
|
||||
}
|
||||
|
||||
p {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
address {
|
||||
color: color(typography, 2);
|
||||
border-width: 1px 0;
|
||||
border-style: solid;
|
||||
border-color: color(bg, 3);
|
||||
padding: 24px 0;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
pre,
|
||||
pre h1,
|
||||
pre h2,
|
||||
pre h3,
|
||||
pre h4,
|
||||
pre h5,
|
||||
pre h6,
|
||||
pre .h1,
|
||||
pre .h2,
|
||||
pre .h3,
|
||||
pre .h4,
|
||||
pre .h5,
|
||||
pre .h6 {
|
||||
@include font-family(pre);
|
||||
}
|
||||
|
||||
pre, code, kbd, tt, var {
|
||||
background: color(bg, 2);
|
||||
}
|
||||
|
||||
pre {
|
||||
@include font-size(7, mobile, true, true);
|
||||
margin-bottom: 1.6em;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
padding: 24px;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
code, kbd, tt, var {
|
||||
@include font-family(code);
|
||||
@include font-size(7, mobile, true);
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
abbr, acronym {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
mark, ins {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
small {
|
||||
@include font-size(6, mobile, true, true, true);
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
@include font-weight(semibold);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
label {
|
||||
@include font-size(5, mobile, true, true);
|
||||
}
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
.button {
|
||||
display: inline-flex;
|
||||
@include font-size(8, mobile, true, false, true);
|
||||
@if ( get-font-size(8, desktop) != get-font-size(8, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(8, desktop, true, false, true);
|
||||
}
|
||||
}
|
||||
@include font-weight(bold);
|
||||
line-height: 16px;
|
||||
text-decoration: none !important;
|
||||
text-transform: uppercase;
|
||||
background-color: color(bg, 1);
|
||||
background: color(bg, 1);
|
||||
color: color(primary, 1) !important;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
padding: 16px 40px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
&:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.button-shadow {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-shadow: 0 8px 16px rgba(color(typography, 1), .12);
|
||||
mix-blend-mode: multiply;
|
||||
transition: box-shadow .15s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 8px 16px rgba(color(typography, 1), .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-sm {
|
||||
padding: 8px 24px;
|
||||
height: 32px;
|
||||
|
||||
&.button-shadow {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 4px 16px rgba(color(typography, 1), .12);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 4px 16px rgba(color(typography, 1), .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-primary,
|
||||
.button-secondary {
|
||||
color: color(typography, 1i) !important;
|
||||
transition: background .15s ease;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background: color(primary, 1);
|
||||
|
||||
&:hover {
|
||||
background: lighten(color(primary, 1), 2%);
|
||||
}
|
||||
|
||||
&.button-shadow {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 8px 16px rgba(color(primary, 1), .24);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 8px 16px rgba(color(primary, 1), .32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-sm {
|
||||
|
||||
&.button-shadow {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 4px 16px rgba(color(primary, 1), .24);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 4px 16px rgba(color(primary, 1), .32);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
background: color(secondary, 1);
|
||||
|
||||
&:hover {
|
||||
background: lighten(color(secondary, 1), 3%);
|
||||
}
|
||||
|
||||
&.button-shadow {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 8px 16px rgba(color(secondary, 1), .24);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 8px 16px rgba(color(secondary, 1), .32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-sm {
|
||||
|
||||
&.button-shadow {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 4px 16px rgba(color(secondary, 1), .24);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 4px 16px rgba(color(secondary, 1), .32);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-block {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media( '<=medium' ) {
|
||||
|
||||
.button-wide-mobile {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
.cta {
|
||||
|
||||
.section-paragraph {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media( '>medium' ) {
|
||||
|
||||
.cta {
|
||||
|
||||
.section-paragraph {
|
||||
margin-bottom: 32px;
|
||||
padding-left: 72px;
|
||||
padding-right: 72px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
.has-animations {
|
||||
|
||||
.features-extended {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.is-loaded {
|
||||
|
||||
.features-extended {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features-extended-header {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.features-extended-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: -24px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: -24px;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-extended {
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.feature-extended-image {
|
||||
position: relative;
|
||||
margin-bottom: 32px;
|
||||
|
||||
img,
|
||||
svg {
|
||||
width: 100%;
|
||||
max-width: 296px;
|
||||
height: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-extended-body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include media( '>medium' ) {
|
||||
|
||||
.features-extended {
|
||||
|
||||
.container {
|
||||
/* image width (440) + padding (96) + text width (360) = 896 */
|
||||
max-width: 864px + ( get-content-padding(desktop) * 2 );
|
||||
}
|
||||
|
||||
.section-inner {
|
||||
padding-bottom: 128px;
|
||||
}
|
||||
|
||||
.section-paragraph {
|
||||
padding-left: 72px;
|
||||
padding-right: 72px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.features-extended-header {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.features-extended-wrap {
|
||||
margin-top: -64px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: -64px;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-extended {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
justify-content: flex-end;
|
||||
padding: 64px 0;
|
||||
|
||||
.feature-extended-image {
|
||||
width: 440px;
|
||||
margin-right: 96px;
|
||||
margin-bottom: 0;
|
||||
|
||||
img,
|
||||
svg {
|
||||
width: auto;
|
||||
|
||||
&.device-mockup {
|
||||
max-width: 296px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
justify-content: flex-start;
|
||||
|
||||
.feature-extended-image {
|
||||
order: 1;
|
||||
margin-left: 96px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feature-extended-body {
|
||||
/* Align vertically */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
/* Align vertically, end */
|
||||
flex-shrink: 0;
|
||||
width: 360px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@include media( '>large' ) {
|
||||
|
||||
.features-extended {
|
||||
|
||||
.container {
|
||||
/* image width (440) + padding (64) + text width (392) = 896 */
|
||||
max-width: 896px + ( get-content-padding(desktop) * 2 );
|
||||
}
|
||||
}
|
||||
|
||||
.feature-extended {
|
||||
|
||||
.feature-extended-image {
|
||||
margin-right: 64px;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
|
||||
.feature-extended-image {
|
||||
margin-left: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feature-extended-body {
|
||||
width: 392px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
.site-footer {
|
||||
position: relative;
|
||||
background: color(bg, 1i);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -76px;
|
||||
left: calc(50% - 360px);
|
||||
width: 720px;
|
||||
height: 291px;
|
||||
background-image: url('../images/footer-bg.svg');
|
||||
background-size: 720px 291px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.footer-particles-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer-bottom {
|
||||
@include font-size(8, mobile, true, true, true);
|
||||
@if ( get-font-size(8, desktop) != get-font-size(8, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(8, desktop, true, true, true);
|
||||
}
|
||||
}
|
||||
color: color(typography, 3);
|
||||
z-index: 1;
|
||||
|
||||
a {
|
||||
@include anchor-aspect(footer);
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer-inner {
|
||||
position: relative; /* To display all elements above the background color */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px;
|
||||
@include divider(before, dark);
|
||||
}
|
||||
|
||||
.footer-brand,
|
||||
.footer-links,
|
||||
.footer-social-links,
|
||||
.footer-copyright {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-brand,
|
||||
.footer-links,
|
||||
.footer-social-links {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.footer-links,
|
||||
.footer-social-links {
|
||||
|
||||
li {
|
||||
|
||||
+ li {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social-links {
|
||||
|
||||
li {
|
||||
display: inline-flex;
|
||||
|
||||
a {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media( '>medium' ) {
|
||||
|
||||
.site-footer {
|
||||
|
||||
&::before {
|
||||
top: -152px;
|
||||
left: calc(50% - 720px);
|
||||
width: 1440px;
|
||||
height: 582px;
|
||||
background-size: 1440px 582px;
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer-inner {
|
||||
justify-content: space-between;
|
||||
padding-top: 64px;
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
|
||||
.footer-brand,
|
||||
.footer-links,
|
||||
.footer-social-links,
|
||||
.footer-copyright {
|
||||
flex: 50%;
|
||||
}
|
||||
|
||||
.footer-brand,
|
||||
.footer-copyright {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.footer-links,
|
||||
.footer-social-links {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
order: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
.site-header {
|
||||
padding: 24px 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.site-header-inner {
|
||||
position: relative; /* To display all elements above the background color */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-links {
|
||||
display: inline-flex;
|
||||
|
||||
li {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
a:not(.button) {
|
||||
@include font-size(7, mobile, true, true, true);
|
||||
@if ( get-font-size(7, desktop) != get-font-size(7, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(7, desktop, true, true, true);
|
||||
}
|
||||
}
|
||||
@include font-weight(semibold);
|
||||
@include anchor-aspect(header);
|
||||
line-height: 16px;
|
||||
padding: 8px 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
.hero {
|
||||
position: relative;
|
||||
padding-top: 128px;
|
||||
padding-bottom: 88px;
|
||||
z-index: 0;
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 42%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: color(bg, 1i);
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.hero-particles-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 42%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: calc(50% - 360px);
|
||||
width: 720px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
height: 159px;
|
||||
background-image: url('../images/hero-bg-top.svg');
|
||||
background-size: 720px 159px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 42%;
|
||||
height: 173px;
|
||||
background-image: url('../images/hero-bg-bottom.svg');
|
||||
background-size: 720px 173px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative; /* To display elements above hero illustrations */
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
@include media( '>medium' ) {
|
||||
|
||||
.hero {
|
||||
padding-top: 160px;
|
||||
padding-bottom: 128px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
left: calc(50% - 720px);
|
||||
width: 1440px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
height: 318px;
|
||||
background-size: 1440px 318px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
height: 347px;
|
||||
background-size: 1440px 347px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
margin-bottom: 88px;
|
||||
}
|
||||
|
||||
.hero-paragraph {
|
||||
padding-left: 72px;
|
||||
padding-right: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
.has-animations {
|
||||
|
||||
.hero .hero-bg,
|
||||
.hero::before,
|
||||
.hero::after,
|
||||
.hero-particles-container,
|
||||
.site-header,
|
||||
.hero-title,
|
||||
.hero-paragraph,
|
||||
.hero-cta,
|
||||
.hero .mockup-bg,
|
||||
.hero .device-mockup {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.is-loaded {
|
||||
|
||||
.hero {
|
||||
|
||||
.hero-bg {
|
||||
animation: heroBg .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
animation: heroFadeIn .6s ease forwards .45s;
|
||||
}
|
||||
}
|
||||
|
||||
.site-header,
|
||||
.hero-particles-container,
|
||||
.hero .mockup-bg {
|
||||
animation: heroFadeIn .6s ease forwards .45s;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
animation: heroContent .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards .15s;
|
||||
}
|
||||
|
||||
.hero-paragraph {
|
||||
animation: heroContent .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards .3s;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
animation: heroContent .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards .45s;
|
||||
}
|
||||
|
||||
.hero .device-mockup {
|
||||
animation: heroMockup .6s ease forwards .6s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heroBg {
|
||||
from {
|
||||
transform: scaleY(0) scaleX(1.2) skewY(30deg);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: scaleY(1) scaleX(1) skewY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heroContent {
|
||||
from {
|
||||
transform: translateY(40px) skewY(2deg);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0) skewY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heroMockup {
|
||||
from {
|
||||
transform: translateY(80px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heroFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
.is-boxed {
|
||||
background: color(bg, 1);
|
||||
}
|
||||
|
||||
.body-wrap {
|
||||
background: color(bg, 1);
|
||||
overflow: hidden;
|
||||
/* Sticky footer */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.boxed-container {
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
@include shadow;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.section-inner {
|
||||
position: relative; /* To always display inner elements above pseudo decorative stuff */
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
@include media( '>medium' ) {
|
||||
|
||||
.section-inner {
|
||||
padding-top: 88px;
|
||||
padding-bottom: 88px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
.mockup-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mockup-bg {
|
||||
pointer-events: none;
|
||||
|
||||
img,
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: auto !important;
|
||||
height: auto;
|
||||
max-width: 300% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.device-mockup {
|
||||
position: relative;
|
||||
width: 350px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
/*--------------------------------------------------------------
|
||||
# Variables, functions and mixins
|
||||
--------------------------------------------------------------*/
|
||||
@import "abstracts/variables",
|
||||
"abstracts/functions",
|
||||
"abstracts/mixins",
|
||||
'abstracts/include-media';
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
1.0 Normalize
|
||||
* normalize.css v7.0.0 | MIT License
|
||||
* github.com/necolas/normalize.css
|
||||
--------------------------------------------------------------*/
|
||||
@import "normalize";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Base
|
||||
--------------------------------------------------------------*/
|
||||
@import "base/base";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Typography
|
||||
--------------------------------------------------------------*/
|
||||
@import "base/typography";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Helpers
|
||||
--------------------------------------------------------------*/
|
||||
@import "base/helpers";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Buttons
|
||||
--------------------------------------------------------------*/
|
||||
@import "components/buttons";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Header
|
||||
--------------------------------------------------------------*/
|
||||
@import "layout/header";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Hero
|
||||
--------------------------------------------------------------*/
|
||||
@import "layout/hero";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Mockup
|
||||
--------------------------------------------------------------*/
|
||||
@import "layout/mockups";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Features extended
|
||||
--------------------------------------------------------------*/
|
||||
@import "layout/features-extended";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# CTA
|
||||
--------------------------------------------------------------*/
|
||||
@import "layout/cta";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Site content
|
||||
--------------------------------------------------------------*/
|
||||
@import "layout/main";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Footer
|
||||
--------------------------------------------------------------*/
|
||||
@import "layout/footer";
|
||||
Loading…
Reference in New Issue