jekyll-swift-theme 0.1.0

data/_sass/swift/_posts.sass

@@ -0,0 +1,209 @@
+.post
+  @extend %narrow
+  padding: 1rem 1.5rem
+  margin-top: 1.5rem
+  h1,h2,h3,h4,h5,h6
+    margin: 1rem auto
+    text-align: left
+    text-transform: initial
+    padding: 0.25rem 0 0 0
+
+  p
+    padding-bottom: 0.5rem
+    padding-top: 0.5rem
+    font-size: 1.05rem
+
+  &s
+    display: flex
+    justify-content: space-between
+    flex-flow: row wrap
+    width: 100%
+    align-items: stretch
+
+  &s:not(.aside)
+    padding: 0 30px
+
+  &_content
+    h4
+      margin: 5px 0
+      text-align: left
+    p
+      line-height: 1.65
+      &:first-child
+        margin-top: 0
+        padding-top: 0
+    a:not(.link)
+      border-bottom: 2px solid var(--theme)
+      &:hover
+        opacity: 0.7
+
+    ol, ul
+      padding: 0.5rem 0 0.5rem 1.2rem
+    li
+      padding: 0.33rem 0
+  &_header
+    background-size: cover
+    background-repeat: no-repeat
+    background-position: center
+    position: relative
+    color:#fff
+    height: 48vh
+    min-height: 360px
+    background-color: var(--bg)
+    margin-top: 60px
+    padding: 30px
+    display: flex
+    justify-content: center
+    align-items: center
+    flex-direction: column
+    &::after
+      content: ""
+      position: absolute
+      top: 0
+      left: 0
+      right: 0
+      bottom: 0
+      z-index: 1
+      background: rgba(10, 15, 30, 0.72)
+
+    h1
+      color: inherit
+    h1, p, h4
+      position: relative
+      z-index: 2
+
+  &_copy
+    opacity: 0
+    transition: opacity 0.3s ease-out
+
+  &_item
+    @include shadow
+    margin: 1.25rem 0
+    border-radius: 10px
+    overflow: hidden
+    width: 100%
+    @media screen and (min-width:667px)
+      width: 47%
+
+  &_item:hover &_copy
+    opacity: 1
+
+  &_link
+    padding: 2.5px 0
+    font-size: 1.25em
+    margin: 2.5px 0
+    text-align: left
+
+  &_meta
+    overflow: hidden
+    opacity: 0.8
+    font-size: 0.84rem
+    font-weight: 500
+    display: inline-grid
+    grid-template-columns: auto 1fr
+    background-color: var(--light)
+    padding: 0
+    align-items: center
+    border-radius: 0.3rem
+    color: var(--dark)
+    text-transform: capitalize
+    a
+      &:hover
+        color: var(--theme)
+        text-decoration: underline
+        opacity: 0.9
+
+  &_extra
+    display: flex
+    justify-content: flex-end
+
+  &_tag
+    font-size: 0.75rem !important
+    font-weight: 500
+    background: var(--theme)
+    color: var(--light)
+    padding: 0.25rem 0.67rem !important
+    text-transform: uppercase
+    display: inline-flex
+    border-radius: 5px
+
+  &_title
+    text-align: center
+    @extend %narrow
+
+  &_author
+    padding: 0.2rem 0.75rem
+    a
+      color: var(--theme)
+      text-decoration: underline
+
+  &_time
+    background: var(--theme)
+    display: inline-grid
+    padding: 0.2rem 0.75rem
+    color: var(--light)
+
+  &_card
+    display: block
+    position: relative
+    background-color: var(--dark)
+    border-radius: 0.5rem 0.5rem 0 0
+    background-size: cover
+    background-position: center
+    overflow: hidden
+    height: 10rem
+    &::after
+      content: ''
+      position: absolute
+      left: 0
+      right: 0
+      bottom: 0
+      top: 0
+      z-index: 1
+
+    &:hover::after
+      background-color:rgba(0,0,0,0.3)
+
+  &_thumbnail
+    width: 100%
+    margin: 0
+
+.pager
+  display: flex
+  justify-content: center
+  align-content: center
+  margin: 30px auto 0 auto
+  padding: 0 1.5rem
+  overflow: auto
+  &, &_link
+    justify-content: center
+    align-items: center
+
+  &_link
+    display: flex
+    background-color: var(--theme)
+    color: var(--light)
+    &:hover
+      opacity: 0.5
+  &_item, &_link
+    height: 36px
+    width: 36px
+    border-radius: 50%
+  &_item
+    margin-left: 5px
+    margin-right: 5px
+
+    &.active, &.disabled
+      opacity: 0.5
+
+.excerpt
+  padding: 0 10px 1.5rem 10px
+  position: relative
+  z-index: 1
+  &_meta
+    display: flex
+    justify-content: space-between
+    align-items: center
+    transform: translateY(-2.5rem)
+    position: relative
+    z-index: 5

data/_sass/swift/_social.sass

@@ -0,0 +1,6 @@
+.social-list
+    list-style: none
+    margin-left: 0
+
+    a:not(.link)
+        border-bottom: none

data/_sass/swift/_syntax.sass

@@ -0,0 +1,15 @@
+code
+  min-width: 100%
+  max-width: 100%
+.highlight
+  display: grid
+  margin: 1.25rem 0
+  & &
+    margin: 0
+  pre
+    padding: 1rem
+    margin: 1.5rem 0
+    background: var(--bubble) !important
+    box-shadow: 0 0 2.5rem rgba(0,0,0,0.12)
+    border-radius: 4px
+    overflow-x: auto

data/_sass/swift/_utils.sass

@@ -0,0 +1,145 @@
+.pale 
+  opacity: 0.7
+
+.hidden
+  display: none
+
+.center
+  text-align: center
+  margin: 5px auto
+
+.wrap
+  padding: 10px 0
+  max-width: 1024px
+  margin: 0 auto
+
+.paypal
+  display: flex
+  flex-flow: column
+  align-items: center
+  justify-content: center
+  background: var(--accent)
+  @media screen and (min-width: 667px)
+    margin-top: 2rem
+
+.mt
+  margin-top: 7rem
+
+.link
+  display: inline-block
+  width: 2.5rem
+  margin: 0 0.25rem
+  padding: 0 0.25rem
+  opacity: 0
+  transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)
+  &_owner:hover &
+    opacity: 0.9
+  img
+    margin: 0
+
+.solo
+  grid-column: 1/-1
+
+.never
+  min-height: 60vh
+  background-image: url($never-icon-path)
+  background-position: right bottom
+  background-repeat: no-repeat
+  background-size: contain
+  padding: 0 1.5rem
+  margin-top: 6rem
+  &_title
+    text-align: left
+
+@keyframes showMenu
+  0%
+    top: 100%
+    opacity: 0
+
+  100%
+    top: 0
+    opacity: 1
+
+@keyframes hideMenu
+  0%
+    top: 0
+    opacity: 1
+
+  100%
+    top: 100%
+    opacity: 0
+
+.align
+  h2, h3, h4, h5, h6
+    margin: 0.33rem 0 !important
+
+%grid
+  display: grid
+  grid-template-columns: 1fr
+
+[class*='grid_']
+  grid-gap: 2rem
+
+.grid_2, .grid_3, .grid_4
+  @extend %grid
+
+@media screen and (min-width: 42rem)
+  .grid_2
+    grid-template-columns: 1fr 1fr
+
+  .grid_3
+    grid-template-columns: repeat(3, 1fr)
+
+  .grid_4
+    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))
+
+@for $i from 1 through 4
+  $size: $i * 1.5rem
+  $x-size: $size * 0.5
+  .pt-#{$i}
+    padding-top: $size
+
+  .pb-#{$i}
+    padding-bottom: $size
+
+  .mt-#{$i}
+    margin-top: $size
+
+  .mb-#{$i}
+    margin-bottom: $size
+
+@keyframes fadeUp
+  from
+    opacity: 0
+    transform: translateY(4.5rem)
+  to
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes fadeRight
+  from
+    opacity: 0
+    transform: translateX(4.5rem)
+  to
+    opacity: 1
+    transform: translateX(0)
+
+@keyframes fadeLeft
+  from
+    opacity: 0
+    transform: translateX(-5rem)
+  to
+    opacity: 1
+    transform: translateX(0)
+
+.fade
+  &_up
+    animation: 3s fadeUp var(--easing)
+
+.fade
+  &_right
+    animation: 3s fadeRight var(--easing)
+
+.fade
+  &_left
+    animation: 3s fadeLeft var(--easing)

data/_sass/swift/_variables.sass

@@ -0,0 +1,44 @@
+$padding: 10px
+$margin: 25px
+$font-path: '../fonts'
+$icons: '../images/icons/'
+$copy-icon-path: '#{$icons}copy.svg'
+$next-icon-path: '#{$icons}next.svg'
+$reply-icon-path: '#{$icons}reply.svg'
+$close-icon-path: '#{$icons}close.svg'
+$never-icon-path: '#{$icons}sitting.svg'
+
+// #161d21; // #1F2A2F; // #132433; // #24292e;
+html
+  --light: #fff
+  --dark: #131313
+  --gray: #f5f5f5
+  --bubble: #161718
+  --accent: var(--gray)
+  --bg: var(--light)
+  --text: var(--dark)
+  --theme: #ef7f1a
+  --font: 'Metropolis', sans-serif
+  --italic: 'Volkhov' // italic font
+
+@media (prefers-color-scheme: dark)
+  *
+    box-shadow: none !important
+  html
+    --bg: var(--dark)
+    --text: var(--light)
+    --accent: var(--bubble)
+
+%narrow
+  max-width: 750px
+  margin: 0 auto
+
+@mixin viewport($width: 1024px, $margin: 25px)
+  max-width: $width
+  margin: $margin auto
+  @content
+
+@mixin shadow($opacity: 0.17)
+  box-shadow: 0 0 3rem rgba(0,0,0,$opacity)
+  &:hover
+    box-shadow: 0 0 5rem rgba(0,0,0, (1.5 * $opacity))

data/_sass/swift.sass

@@ -0,0 +1,12 @@
+@import 'swift/variables'
+@import 'swift/fonts'
+@import 'swift/base'
+@import 'swift/components'
+@import 'swift/utils'
+@import 'swift/nav'
+@import 'swift/posts'
+@import 'swift/audio'
+@import 'swift/footer'
+@import 'swift/comments'
+@import 'swift/syntax'
+@import 'swift/social'

data/assets/images/icons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/assets/favicons/mstile-150x150.png"/>
+            <TileColor>#ffc40d</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

data/assets/images/icons/close.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 15.642 15.642" viewBox="0 0 15.642 15.642" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="m8.882 7.821 6.541-6.541c.293-.293.293-.768 0-1.061s-.768-.293-1.061 0l-6.541 6.541-6.541-6.54c-.293-.293-.768-.293-1.061 0s-.293.768 0 1.061l6.541 6.541-6.54 6.54c-.293.293-.293.768 0 1.061.147.146.338.22.53.22s.384-.073.53-.22l6.541-6.541 6.541 6.541c.147.146.338.22.53.22s.384-.073.53-.22c.293-.293.293-.768 0-1.061z"/></svg>

data/assets/images/icons/copy.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 699.428 699.428" height="699.428" viewBox="0 0 699.428 699.428" width="699.428" xmlns="http://www.w3.org/2000/svg"><path d="m502.714 0c-2.71 0-262.286 0-262.286 0-46.25 0-87.428 42.425-87.428 87.429l-25.267.59c-46.228 0-84.019 41.834-84.019 86.838v437.143c0 45.004 41.179 87.428 87.429 87.428h327.857c46.249 0 87.428-42.424 87.428-87.428h21.857c46.25 0 87.429-42.424 87.429-87.428v-349.19zm-43.714 655.715h-327.857c-22.95 0-43.714-21.441-43.714-43.715v-437.143c0-22.272 18.688-42.993 41.638-42.993l23.933-.721v393.429c0 45.004 41.178 87.428 87.428 87.428h262.286c0 22.273-20.765 43.715-43.714 43.715zm153-131.143c0 22.271-20.765 43.713-43.715 43.713h-327.857c-22.95 0-43.714-21.441-43.714-43.713v-437.143c0-22.272 20.764-43.714 43.714-43.714h218.572c-.351 50.337 0 87.975 0 87.975 0 45.419 40.872 86.882 87.428 86.882h65.572zm-65.572-349.715c-23.277 0-43.714-42.293-43.714-64.981 0 0 0-22.994 0-65.484v-.044l109.286 130.509zm-43.714 131.537h-196.714c-12.065 0-21.857 9.77-21.857 21.835s9.792 21.835 21.857 21.835h196.714c12.065 0 21.857-9.771 21.857-21.835 0-12.065-9.792-21.835-21.857-21.835zm0 109.176h-196.714c-12.065 0-21.857 9.77-21.857 21.834 0 12.066 9.792 21.836 21.857 21.836h196.714c12.065 0 21.857-9.77 21.857-21.836 0-12.064-9.792-21.834-21.857-21.834z" fill="#04a763"/></svg>

data/assets/images/icons/link.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 64 64" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g fill="#04a763"><path d="m19 40c1.104 0 2-.896 2-2s-.896-2-2-2c-3.86 0-7-3.14-7-7 0-1.873.728-3.628 2.059-4.95 1.313-1.322 3.068-2.05 4.941-2.05h10c3.86 0 7 3.14 7 7 0 .258-.015.509-.048.78-.174 1.574-.885 3.052-2.017 4.176-.532.54-1.137.974-1.797 1.289-.997.476-1.419 1.669-.944 2.666.476.996 1.669 1.419 2.667.943 1.08-.516 2.063-1.219 2.908-2.075 1.763-1.75 2.885-4.08 3.156-6.539.051-.413.075-.819.075-1.24 0-6.065-4.935-11-11-11h-10c-2.947 0-5.709 1.147-7.77 3.221-2.083 2.07-3.23 4.832-3.23 7.779 0 6.065 4.935 11 11 11z"/><path d="m45 28c-1.104 0-2 .896-2 2s.896 2 2 2c3.86 0 7 3.141 7 7 0 1.873-.728 3.628-2.059 4.95-1.313 1.322-3.068 2.05-4.941 2.05h-10c-3.86 0-7-3.141-7-7 0-.258.015-.509.048-.78.174-1.574.885-3.052 2.017-4.176.532-.54 1.136-.974 1.796-1.289.997-.476 1.419-1.67.944-2.667s-1.669-1.418-2.667-.944c-1.081.516-2.064 1.22-2.908 2.076-1.763 1.75-2.885 4.08-3.156 6.538-.05.415-.074.821-.074 1.242 0 6.065 4.935 11 11 11h10c2.946 0 5.709-1.147 7.77-3.221 2.083-2.07 3.23-4.833 3.23-7.779 0-6.065-4.935-11-11-11z"/></g></svg>

data/assets/images/icons/next.svg

@@ -0,0 +1,6 @@
+<?xml version='1.0' encoding='utf-8'?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
+  <g>
+    <path fill="#FFFFFF" d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/>
+  </g>
+</svg>

data/assets/images/icons/reply.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 60.015 60.015" viewBox="0 0 60.015 60.015" xmlns="http://www.w3.org/2000/svg"><path fill="#04a763" d="m42.007 0h-24c-9.925 0-18 8.075-18 18v14c0 9.59 7.538 17.452 17 17.973v8.344c0 .688.411 1.304 1.047 1.568.212.087.433.13.652.13.44 0 .873-.173 1.198-.498l1.876-1.876c4.928-4.928 11.479-7.641 18.447-7.641h1.78c9.925 0 18-8.075 18-18v-14c0-9.925-8.075-18-18-18zm16 32c0 8.822-7.178 16-16 16h-1.78c-7.502 0-14.556 2.921-19.86 8.226l-1.359 1.359v-8.585-1-4c0-.552-.447-1-1-1s-1 .448-1 1v3.949c-8.356-.52-15-7.465-15-15.949v-14c0-8.822 7.178-16 16-16h24c8.822 0 16 7.178 16 16v14z" /></svg>

data/assets/images/icons/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

data/assets/images/icons/sitting.svg

@@ -0,0 +1 @@
+<svg fill="none" height="585" viewBox="0 0 557 585" width="557" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill-rule="evenodd"><path d="m325.738 138.49c4.608-5.408 7.727-12.037 7.206-19.464-1.502-21.4008-31.292-16.693-37.087-5.892s-5.106 38.199 2.383 40.13c2.987.77 9.35-1.116 15.825-5.02l-4.064 28.756h24z" fill="#b28b67"/><path d="m327.582 143.308c3.013-13.401 11.594-22.536 10.283-28.526-.873-3.993-3.202-6.476-6.986-7.45-1.957-7.9163-8.268-11.2836-18.934-10.1014-15.999 1.7732-25.764 8.4174-21.547 23.0374 3.877 0 8.556-1.402 15.027 1 2.053.762 3.522 3.126 4.406 7.09h2.924c2.838-4.705 5.636-6.434 8.395-5.187 2.758 1.247 3.386 4.277 1.881 9.088l1.441 11.049z" fill="#0a0a0d"/><path d="m401.001 302h-115c-8.837 0-16 7.164-16 16v92c0 8.837 7.163 16 16 16h115c8.836 0 16-7.163 16-16v-92c0-8.836-7.164-16-16-16zm-16 28c2.209 0 4 1.791 4 4v60c0 2.209-1.791 4-4 4h-83c-2.21 0-4-1.791-4-4v-60c0-2.209 1.79-4 4-4z" fill="#333"/><path d="m170.842 421c19.716-24.076 33.056-41.924 40.02-53.546 11.925-19.899 21.685-37.606 24.766-44.369 7.344-16.13-16.909-23.682-22.398-16.159-8.308 11.387-26.051 47.217-53.229 107.492z" fill="#b28b67"/><path d="m211.243 414 36.692-92.363c7.848-16.837-30.05-27.905-35.818-20.069-13.094 17.789-44.215 87.966-48.116 93.266z" fill="#333"/><path d="m308.968 395.477c-7.148-10.426-33.146-45.502-47.306-60.016-4.07-4.17-8.04-8.173-11.795-11.903-11.162-11.088-33.39 7.548-22.249 17.647 27.747 25.15 68.232 59.102 71.614 62.129 4.741 4.243 14.228-1.304 9.736-7.857z" fill="#b28b67"/><path d="m307.296 390.767c2.462 2.027 4.064 3.683 4.805 4.967.902 1.562 1.957 3.991 3.167 7.287-1.812 1.046-18.094 10.447-48.846 28.201-3.692-3.463-4.267-6.152-1.725-8.065 2.541-1.914 4.639-3.528 6.292-4.842l16.859-23.228c.325-.447.95-.546 1.397-.222.008.006.015.011.023.017l3.503 2.697c3.214-.28 5.612-.877 7.195-1.791 1.286-.743 2.762-2.287 4.428-4.634.639-.901 1.888-1.113 2.789-.473.038.027.076.056.113.086z" fill="#666464"/><path d="m179.322 417.402c1.119 2.987 1.679 5.221 1.679 6.704 0 1.803-.301 4.435-.902 7.894-2.092 0-20.892 0-56.401 0-1.466-4.845-.62-7.461 2.538-7.848 3.158-.386 5.781-.735 7.87-1.046l26.215-11.687c.504-.225 1.095.002 1.32.506.004.009.008.018.011.026l1.685 4.088c2.924 1.364 5.299 2.046 7.127 2.046 1.485 0 3.536-.6 6.152-1.799 1.004-.461 2.191-.02 2.652.984.019.044.038.088.054.132z" fill="#666464"/><path d="m261.139 326.25c30.496-4.968 50.924-8.365 61.281-10.192 29.523-5.205 38.132-21.092 33.042-55.756h-54.396c-7.198 2.079-37.276 14.936-90.233 38.57-9.528 4.73-7.753 18.676-6.012 23.27.071.188 16.134 27.711 48.187 82.571l44.498-28.347-36.451-46.775c-.963-1.939-.935-3.053.084-3.341z" fill="#333"/><path d="m257.219 247.212-31.898 23.423c-8.651 2.335-15.879 5.239-21.684 8.714-1.371 1.249-3.028 3.779 2.658 3.342 5.687-.437 11.688-.641 12.472 1.298.785 1.94-2.656 4.259-1.07 6.876 1.057 1.745 6.053-2.63 14.986-13.124l31.588-13.098zm122.474.808-20.898.082c12.903 41.654 19.869 63.755 20.898 66.304 2.314 5.734-2.583 14.468-4.677 19.161 6.82 3.052 6.093-8.25 14.697-4.247 7.852 3.653 13.826 10.273 22.899 4.675 1.115-.689 2.337-3.28-.616-5.305-7.358-5.045-17.961-13.875-19.393-16.782-1.954-3.963-6.257-25.259-12.91-63.888z" fill="#b28b67"/><path d="m320.306 160.332-8.648-1.483c-32.083 27.715-45.261 80.96-84.587 109.166l9.466 11.733c68.223-8.447 85.133-73.393 83.769-119.416z" fill="#333"/><path d="m358.001 269c-34.672 0-60.176 0-76.512 0-3.496 0-2.837-5.048-2.332-7.596 5.833-29.4 28.602-61.092 28.602-102.943l22.07-3.461c18.254 29.359 24.567 65.505 28.172 114z" fill="#fff"/><path d="m357.386 183.858c3.205-.921 5.743-3.07 7.615-6.447 8.066-14.555 5.153-22.568-3.468-25.203-8.62-2.634-16.308 2.792-30.042 2.792-.747 0-1.432.047-2.053.141l-6.909.394c-19.822 67.18-25.289 112.002-16.401 134.465h60.221c3.568 8.32 6.982 15.32 10.243 21h16.409c1.544-49.933-10.328-92.313-35.615-127.142z" fill="#333"/><path d="m353.235 255.498c-1.894 15.846-4.972 27.347-9.234 34.502h22.348c-4.162-9.705-8.533-21.205-13.114-34.502z" fill="#000" fill-opacity=".1"/></g><path d="m531.247 449.47c120.961 121.393-299.759 49.458-391.269 19.334-91.5107-30.125-149.33622-229.091-42.2482-256.06 85.0202-21.411 145.9942-25.418 148.5652-124.1872 3.954-151.9044 297.609 22.8832 231.421 127.9412-66.188 105.059-67.43 111.578 53.531 232.972z" fill="#27ae60" fill-opacity=".03"/></svg>

data/assets/images/thumbnail.svg

@@ -0,0 +1,49 @@
+<svg width="1200" height="800" viewBox="0 0 1200 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1200" height="800" fill="#04A763"/>
+<circle cx="542" cy="461" r="20" fill="url(#paint0_radial)"/>
+<circle cx="423" cy="375" r="25" fill="url(#paint1_radial)"/>
+<circle cx="777" cy="350" r="25" fill="url(#paint2_radial)"/>
+<circle cx="627" cy="540" r="25" fill="url(#paint3_radial)"/>
+<circle cx="690" cy="425" r="10" fill="url(#paint4_radial)"/>
+<circle cx="572" cy="265" r="30" fill="url(#paint5_radial)"/>
+<circle cx="569.5" cy="332.5" r="7.5" fill="url(#paint6_radial)"/>
+<path d="M479.586 487.921C474.844 485.09 473.295 478.95 476.126 474.208L542.763 362.586C545.594 357.844 551.733 356.295 556.475 359.126L625.166 400.133C629.908 402.964 631.457 409.104 628.626 413.846L561.989 525.468C559.158 530.21 553.019 531.759 548.277 528.928L479.586 487.921Z" fill="white" fill-opacity="0.25"/>
+<path d="M479.586 487.921C474.844 485.09 473.295 478.95 476.126 474.208L542.763 362.586C545.594 357.844 551.733 356.295 556.475 359.126L625.166 400.133C629.908 402.964 631.457 409.104 628.626 413.846L561.989 525.468C559.158 530.21 553.019 531.759 548.277 528.928L479.586 487.921Z" fill="white" fill-opacity="0.25"/>
+<path d="M479.586 487.921C474.844 485.09 473.295 478.95 476.126 474.208L542.763 362.586C545.594 357.844 551.733 356.295 556.475 359.126L625.166 400.133C629.908 402.964 631.457 409.104 628.626 413.846L561.989 525.468C559.158 530.21 553.019 531.759 548.277 528.928L479.586 487.921Z" fill="white" fill-opacity="0.25"/>
+<path d="M691.777 479.394C689.816 484.557 684.041 487.153 678.878 485.192L557.348 439.035C552.185 437.074 549.59 431.299 551.551 426.136L579.955 351.348C581.916 346.185 587.691 343.59 592.854 345.551L714.384 391.708C719.547 393.669 722.143 399.444 720.182 404.607L691.777 479.394Z" fill="white" fill-opacity="0.25"/>
+<path d="M691.777 479.394C689.816 484.557 684.041 487.153 678.878 485.192L557.348 439.035C552.185 437.074 549.59 431.299 551.551 426.136L579.955 351.348C581.916 346.185 587.691 343.59 592.854 345.551L714.384 391.708C719.547 393.669 722.143 399.444 720.182 404.607L691.777 479.394Z" fill="white" fill-opacity="0.25"/>
+<path d="M691.777 479.394C689.816 484.557 684.041 487.153 678.878 485.192L557.348 439.035C552.185 437.074 549.59 431.299 551.551 426.136L579.955 351.348C581.916 346.185 587.691 343.59 592.854 345.551L714.384 391.708C719.547 393.669 722.143 399.444 720.182 404.607L691.777 479.394Z" fill="white" fill-opacity="0.25"/>
+<path d="M670 405H519C513.477 405 509 400.523 509 395V300H660C665.523 300 670 304.477 670 310V405Z" fill="white" fill-opacity="0.25"/>
+<path d="M670 405H519C513.477 405 509 400.523 509 395V300H660C665.523 300 670 304.477 670 310V405Z" fill="white" fill-opacity="0.25"/>
+<path d="M670 405H519C513.477 405 509 400.523 509 395V300H660C665.523 300 670 304.477 670 310V405Z" fill="white" fill-opacity="0.25"/>
+<defs>
+<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(542 461) rotate(90) scale(20)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(423 375) rotate(90) scale(25)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(777 350) rotate(90) scale(25)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(627 540) rotate(90) scale(25)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint4_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(690 425) rotate(90) scale(10)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(572 265) rotate(90) scale(30)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(569.5 332.5) rotate(90) scale(7.5)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>

data/assets/js/audio.js

@@ -0,0 +1,59 @@
+(function(){
+  var waves = new SineWaves({
+    el: document.getElementById('waves'),
+    speed: 5,
+    rotate: 0,
+    ease: 'SineInOut',
+    wavesWidth: '75%',
+    waves: [
+    {
+      timeModifier: 4,
+      lineWidth: 1,
+      amplitude: -20,
+      wavelength: 20
+    },
+    {
+      timeModifier: 2,
+      lineWidth: 1,
+      amplitude: -10,
+      wavelength: 27,
+    },
+    {
+      timeModifier: 1,
+      lineWidth: 1,
+      amplitude: -27,
+      wavelength: 27,
+    },
+		{
+      timeModifier: 3,
+      lineWidth: 1,
+      amplitude: 36,
+      wavelength: 36
+    },
+    {
+      timeModifier: 0.5,
+      lineWidth: 1,
+      amplitude: -50,
+      wavelength: 50
+    },
+    {
+      timeModifier: 1.3,
+      lineWidth: 1,
+      amplitude: -36,
+      wavelength: 36
+    }
+  ],
+  initialize: function (){},
+  resizeEvent: function() {
+    var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
+    gradient.addColorStop(0,"rgba(0, 0, 255, 0)");
+    gradient.addColorStop(0.5,"rgba(255, 0, 0, 0.75)");
+    gradient.addColorStop(1,"rgba(0, 255, 0, 0");
+    var index = -1;
+    var length = this.waves.length;
+	  while(++index < length){
+      this.waves[index].strokeStyle = gradient;
+    }
+  }
+  });
+})();