Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

creedon

Circle Member
  • Posts

    3,681
  • Joined

  • Last visited

  • Days Won

    39

Posts posted by creedon

  1. 27 minutes ago, jordanakozy said:

    so this worked but only for the "sweetery" link you have highlighted here...not the other links in the image block. Any thoughts?

    Ah. I misunderstood that you want all the links in that image block with the card layout to go greenish on hover.

    So remove the previous CSS and try the following.

    .sqs-block-image .design-layout-card .image-subtitle-wrapper a:hover {
    
      color: #309166;
      
      }

    Let us know how it goes.

  2. Follow up detail information.

    Since we don't have access to SCSS dynamically on Squarespace we had to convert it from...

    body {
        background: #ecf3f3;
    }
    
    .particle {
        position: absolute;
         border-radius: 50%;
    }
    
    @for $i from 1 through 30 {
        @keyframes particle-animation-#{$i} {
            100% {
                transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
            }
        }
        
        .particle:nth-child(#{$i}){
            animation: particle-animation-#{$i} 60s infinite;
            $size: random(5) + 5 + px;
            opacity: random(100)/100;
            height: $size;
            width: $size;
            animation-delay: -$i * .2s;
            transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
            background: hsl(random(360), 70%, 50%);
        }
    }

    ...to CSS...

    body {
      background: #ecf3f3;
    }
    .particle {
      position: absolute;
      border-radius: 50%;
    }
    @keyframes particle-animation-1 {
      100% {
        transform: translate3d(73vw, 90vh, 72px);
      }
    }
    .particle:nth-child(1) {
      animation: particle-animation-1 60s infinite;
      opacity: 0.72;
      height: 6px;
      width: 6px;
      animation-delay: -0.2s;
      transform: translate3d(64vw, 77vh, 93px);
      background: #6826d9;
    }
    @keyframes particle-animation-2 {
      100% {
        transform: translate3d(15vw, 67vh, 8px);
      }
    }
    .particle:nth-child(2) {
      animation: particle-animation-2 60s infinite;
      opacity: 0.03;
      height: 8px;
      width: 8px;
      animation-delay: -0.4s;
      transform: translate3d(32vw, 14vh, 71px);
      background: #80d926;
    }
    @keyframes particle-animation-3 {
      100% {
        transform: translate3d(26vw, 74vh, 71px);
      }
    }
    .particle:nth-child(3) {
      animation: particle-animation-3 60s infinite;
      opacity: 0.65;
      height: 6px;
      width: 6px;
      animation-delay: -0.6s;
      transform: translate3d(3vw, 40vh, 1px);
      background: #c726d9;
    }
    @keyframes particle-animation-4 {
      100% {
        transform: translate3d(65vw, 15vh, 22px);
      }
    }
    .particle:nth-child(4) {
      animation: particle-animation-4 60s infinite;
      opacity: 0.75;
      height: 10px;
      width: 10px;
      animation-delay: -0.8s;
      transform: translate3d(47vw, 67vh, 3px);
      background: #d9265c;
    }
    @keyframes particle-animation-5 {
      100% {
        transform: translate3d(11vw, 54vh, 35px);
      }
    }
    .particle:nth-child(5) {
      animation: particle-animation-5 60s infinite;
      opacity: 0.13;
      height: 9px;
      width: 9px;
      animation-delay: -1s;
      transform: translate3d(25vw, 2vh, 96px);
      background: #d9a026;
    }
    @keyframes particle-animation-6 {
      100% {
        transform: translate3d(65vw, 18vh, 51px);
      }
    }
    .particle:nth-child(6) {
      animation: particle-animation-6 60s infinite;
      opacity: 0.91;
      height: 8px;
      width: 8px;
      animation-delay: -1.2s;
      transform: translate3d(72vw, 88vh, 44px);
      background: #d92688;
    }
    @keyframes particle-animation-7 {
      100% {
        transform: translate3d(86vw, 50vh, 98px);
      }
    }
    .particle:nth-child(7) {
      animation: particle-animation-7 60s infinite;
      opacity: 0.08;
      height: 8px;
      width: 8px;
      animation-delay: -1.4s;
      transform: translate3d(13vw, 39vh, 84px);
      background: #2680d9;
    }
    @keyframes particle-animation-8 {
      100% {
        transform: translate3d(75vw, 67vh, 5px);
      }
    }
    .particle:nth-child(8) {
      animation: particle-animation-8 60s infinite;
      opacity: 0.28;
      height: 8px;
      width: 8px;
      animation-delay: -1.6s;
      transform: translate3d(70vw, 46vh, 16px);
      background: #d926ca;
    }
    @keyframes particle-animation-9 {
      100% {
        transform: translate3d(81vw, 18vh, 36px);
      }
    }
    .particle:nth-child(9) {
      animation: particle-animation-9 60s infinite;
      opacity: 0.58;
      height: 8px;
      width: 8px;
      animation-delay: -1.8s;
      transform: translate3d(82vw, 33vh, 24px);
      background: #d92688;
    }
    @keyframes particle-animation-10 {
      100% {
        transform: translate3d(87vw, 61vh, 91px);
      }
    }
    .particle:nth-child(10) {
      animation: particle-animation-10 60s infinite;
      opacity: 0.85;
      height: 9px;
      width: 9px;
      animation-delay: -2s;
      transform: translate3d(42vw, 61vh, 1px);
      background: #d9a926;
    }
    @keyframes particle-animation-11 {
      100% {
        transform: translate3d(17vw, 73vh, 66px);
      }
    }
    .particle:nth-child(11) {
      animation: particle-animation-11 60s infinite;
      opacity: 0.31;
      height: 8px;
      width: 8px;
      animation-delay: -2.2s;
      transform: translate3d(48vw, 66vh, 8px);
      background: #8ed926;
    }
    @keyframes particle-animation-12 {
      100% {
        transform: translate3d(75vw, 74vh, 94px);
      }
    }
    .particle:nth-child(12) {
      animation: particle-animation-12 60s infinite;
      opacity: 0.42;
      height: 7px;
      width: 7px;
      animation-delay: -2.4s;
      transform: translate3d(5vw, 24vh, 15px);
      background: #d92662;
    }
    @keyframes particle-animation-13 {
      100% {
        transform: translate3d(58vw, 10vh, 90px);
      }
    }
    .particle:nth-child(13) {
      animation: particle-animation-13 60s infinite;
      opacity: 0.7;
      height: 7px;
      width: 7px;
      animation-delay: -2.6s;
      transform: translate3d(4vw, 37vh, 95px);
      background: #d92659;
    }
    @keyframes particle-animation-14 {
      100% {
        transform: translate3d(9vw, 58vh, 27px);
      }
    }
    .particle:nth-child(14) {
      animation: particle-animation-14 60s infinite;
      opacity: 0.2;
      height: 7px;
      width: 7px;
      animation-delay: -2.8s;
      transform: translate3d(88vw, 7vh, 99px);
      background: #8b26d9;
    }
    @keyframes particle-animation-15 {
      100% {
        transform: translate3d(48vw, 43vh, 85px);
      }
    }
    .particle:nth-child(15) {
      animation: particle-animation-15 60s infinite;
      opacity: 0.31;
      height: 10px;
      width: 10px;
      animation-delay: -3s;
      transform: translate3d(38vw, 88vh, 48px);
      background: #266bd9;
    }
    @keyframes particle-animation-16 {
      100% {
        transform: translate3d(44vw, 38vh, 77px);
      }
    }
    .particle:nth-child(16) {
      animation: particle-animation-16 60s infinite;
      opacity: 0.25;
      height: 9px;
      width: 9px;
      animation-delay: -3.2s;
      transform: translate3d(54vw, 21vh, 16px);
      background: #b826d9;
    }
    @keyframes particle-animation-17 {
      100% {
        transform: translate3d(50vw, 21vh, 42px);
      }
    }
    .particle:nth-child(17) {
      animation: particle-animation-17 60s infinite;
      opacity: 0.13;
      height: 7px;
      width: 7px;
      animation-delay: -3.4s;
      transform: translate3d(49vw, 71vh, 68px);
      background: #2677d9;
    }
    @keyframes particle-animation-18 {
      100% {
        transform: translate3d(39vw, 38vh, 46px);
      }
    }
    .particle:nth-child(18) {
      animation: particle-animation-18 60s infinite;
      opacity: 0.54;
      height: 8px;
      width: 8px;
      animation-delay: -3.6s;
      transform: translate3d(1vw, 78vh, 67px);
      background: #268bd9;
    }
    @keyframes particle-animation-19 {
      100% {
        transform: translate3d(47vw, 3vh, 83px);
      }
    }
    .particle:nth-child(19) {
      animation: particle-animation-19 60s infinite;
      opacity: 0.24;
      height: 10px;
      width: 10px;
      animation-delay: -3.8s;
      transform: translate3d(29vw, 27vh, 58px);
      background: #2685d9;
    }
    @keyframes particle-animation-20 {
      100% {
        transform: translate3d(71vw, 58vh, 50px);
      }
    }
    .particle:nth-child(20) {
      animation: particle-animation-20 60s infinite;
      opacity: 0.49;
      height: 8px;
      width: 8px;
      animation-delay: -4s;
      transform: translate3d(89vw, 62vh, 58px);
      background: #d9266b;
    }
    @keyframes particle-animation-21 {
      100% {
        transform: translate3d(1vw, 13vh, 34px);
      }
    }
    .particle:nth-child(21) {
      animation: particle-animation-21 60s infinite;
      opacity: 0.16;
      height: 6px;
      width: 6px;
      animation-delay: -4.2s;
      transform: translate3d(16vw, 63vh, 92px);
      background: #c7d926;
    }
    @keyframes particle-animation-22 {
      100% {
        transform: translate3d(62vw, 83vh, 8px);
      }
    }
    .particle:nth-child(22) {
      animation: particle-animation-22 60s infinite;
      opacity: 0.46;
      height: 7px;
      width: 7px;
      animation-delay: -4.4s;
      transform: translate3d(43vw, 3vh, 36px);
      background: #26d96e;
    }
    @keyframes particle-animation-23 {
      100% {
        transform: translate3d(8vw, 11vh, 17px);
      }
    }
    .particle:nth-child(23) {
      animation: particle-animation-23 60s infinite;
      opacity: 0.1;
      height: 6px;
      width: 6px;
      animation-delay: -4.6s;
      transform: translate3d(12vw, 11vh, 54px);
      background: #2cd926;
    }
    @keyframes particle-animation-24 {
      100% {
        transform: translate3d(42vw, 44vh, 70px);
      }
    }
    .particle:nth-child(24) {
      animation: particle-animation-24 60s infinite;
      opacity: 0.47;
      height: 8px;
      width: 8px;
      animation-delay: -4.8s;
      transform: translate3d(46vw, 33vh, 57px);
      background: #d97126;
    }
    @keyframes particle-animation-25 {
      100% {
        transform: translate3d(66vw, 52vh, 19px);
      }
    }
    .particle:nth-child(25) {
      animation: particle-animation-25 60s infinite;
      opacity: 0.13;
      height: 8px;
      width: 8px;
      animation-delay: -5s;
      transform: translate3d(74vw, 59vh, 23px);
      background: #26d9bb;
    }
    @keyframes particle-animation-26 {
      100% {
        transform: translate3d(35vw, 82vh, 67px);
      }
    }
    .particle:nth-child(26) {
      animation: particle-animation-26 60s infinite;
      opacity: 0.45;
      height: 10px;
      width: 10px;
      animation-delay: -5.2s;
      transform: translate3d(49vw, 79vh, 12px);
      background: #d98826;
    }
    @keyframes particle-animation-27 {
      100% {
        transform: translate3d(85vw, 39vh, 97px);
      }
    }
    .particle:nth-child(27) {
      animation: particle-animation-27 60s infinite;
      opacity: 0.28;
      height: 10px;
      width: 10px;
      animation-delay: -5.4s;
      transform: translate3d(78vw, 72vh, 78px);
      background: #8826d9;
    }
    @keyframes particle-animation-28 {
      100% {
        transform: translate3d(15vw, 28vh, 12px);
      }
    }
    .particle:nth-child(28) {
      animation: particle-animation-28 60s infinite;
      opacity: 0.18;
      height: 9px;
      width: 9px;
      animation-delay: -5.6s;
      transform: translate3d(51vw, 47vh, 1px);
      background: #c426d9;
    }
    @keyframes particle-animation-29 {
      100% {
        transform: translate3d(68vw, 5vh, 77px);
      }
    }
    .particle:nth-child(29) {
      animation: particle-animation-29 60s infinite;
      opacity: 0.46;
      height: 7px;
      width: 7px;
      animation-delay: -5.8s;
      transform: translate3d(66vw, 12vh, 32px);
      background: #26d95f;
    }
    @keyframes particle-animation-30 {
      100% {
        transform: translate3d(25vw, 89vh, 37px);
      }
    }
    .particle:nth-child(30) {
      animation: particle-animation-30 60s infinite;
      opacity: 0.46;
      height: 6px;
      width: 6px;
      animation-delay: -6s;
      transform: translate3d(20vw, 37vh, 47px);
      background: #262cd9;
    }

    I used an online tool to do the conversion. You can also install a similar tool onto your computer if you want. Check the internet for more info.

    From this point I adapted the CSS for this use case.

  3. I'll do the critical steps in case anyone else is following along. You may have already done some of these steps.

    Put the following in a code block at the top of the page. You can put it anywhere within the page but I like to put things like this at the top.

    <!-- Inspired by: https://codepen.io/natewiley/pen/Ciwyn -->
    
    <div id="particle-container">
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      </div>

    Add the following in Page Settings > Advanced > Page Header Code Injection.

    <style>
    
      .particle {
      
        border-radius: 50%;
        left: 0;
        position: fixed; /* relative to browser window */
        top: 0;
        
        }
        
      /*
      
      The following was compiled from dynamic SCSS. This means it is now static in that the
      page loads, the animation starts, goes for a bit, and then repeats. It is always the
      same each time the page loads.
      
      */
      
      @keyframes particle-animation-1 {
        100% {
          transform: translate3d(73vw, 90vh, 72px);
        }
      }
      .particle:nth-child(1) {
        animation: particle-animation-1 60s infinite;
        opacity: 0.72;
        height: 6px;
        width: 6px;
        animation-delay: -0.2s;
        transform: translate3d(64vw, 77vh, 93px);
        background: #6826d9;
      }
      @keyframes particle-animation-2 {
        100% {
          transform: translate3d(15vw, 67vh, 8px);
        }
      }
      .particle:nth-child(2) {
        animation: particle-animation-2 60s infinite;
        opacity: 0.03;
        height: 8px;
        width: 8px;
        animation-delay: -0.4s;
        transform: translate3d(32vw, 14vh, 71px);
        background: #80d926;
      }
      @keyframes particle-animation-3 {
        100% {
          transform: translate3d(26vw, 74vh, 71px);
        }
      }
      .particle:nth-child(3) {
        animation: particle-animation-3 60s infinite;
        opacity: 0.65;
        height: 6px;
        width: 6px;
        animation-delay: -0.6s;
        transform: translate3d(3vw, 40vh, 1px);
        background: #c726d9;
      }
      @keyframes particle-animation-4 {
        100% {
          transform: translate3d(65vw, 15vh, 22px);
        }
      }
      .particle:nth-child(4) {
        animation: particle-animation-4 60s infinite;
        opacity: 0.75;
        height: 10px;
        width: 10px;
        animation-delay: -0.8s;
        transform: translate3d(47vw, 67vh, 3px);
        background: #d9265c;
      }
      @keyframes particle-animation-5 {
        100% {
          transform: translate3d(11vw, 54vh, 35px);
        }
      }
      .particle:nth-child(5) {
        animation: particle-animation-5 60s infinite;
        opacity: 0.13;
        height: 9px;
        width: 9px;
        animation-delay: -1s;
        transform: translate3d(25vw, 2vh, 96px);
        background: #d9a026;
      }
      @keyframes particle-animation-6 {
        100% {
          transform: translate3d(65vw, 18vh, 51px);
        }
      }
      .particle:nth-child(6) {
        animation: particle-animation-6 60s infinite;
        opacity: 0.91;
        height: 8px;
        width: 8px;
        animation-delay: -1.2s;
        transform: translate3d(72vw, 88vh, 44px);
        background: #d92688;
      }
      @keyframes particle-animation-7 {
        100% {
          transform: translate3d(86vw, 50vh, 98px);
        }
      }
      .particle:nth-child(7) {
        animation: particle-animation-7 60s infinite;
        opacity: 0.08;
        height: 8px;
        width: 8px;
        animation-delay: -1.4s;
        transform: translate3d(13vw, 39vh, 84px);
        background: #2680d9;
      }
      @keyframes particle-animation-8 {
        100% {
          transform: translate3d(75vw, 67vh, 5px);
        }
      }
      .particle:nth-child(8) {
        animation: particle-animation-8 60s infinite;
        opacity: 0.28;
        height: 8px;
        width: 8px;
        animation-delay: -1.6s;
        transform: translate3d(70vw, 46vh, 16px);
        background: #d926ca;
      }
      @keyframes particle-animation-9 {
        100% {
          transform: translate3d(81vw, 18vh, 36px);
        }
      }
      .particle:nth-child(9) {
        animation: particle-animation-9 60s infinite;
        opacity: 0.58;
        height: 8px;
        width: 8px;
        animation-delay: -1.8s;
        transform: translate3d(82vw, 33vh, 24px);
        background: #d92688;
      }
      @keyframes particle-animation-10 {
        100% {
          transform: translate3d(87vw, 61vh, 91px);
        }
      }
      .particle:nth-child(10) {
        animation: particle-animation-10 60s infinite;
        opacity: 0.85;
        height: 9px;
        width: 9px;
        animation-delay: -2s;
        transform: translate3d(42vw, 61vh, 1px);
        background: #d9a926;
      }
      @keyframes particle-animation-11 {
        100% {
          transform: translate3d(17vw, 73vh, 66px);
        }
      }
      .particle:nth-child(11) {
        animation: particle-animation-11 60s infinite;
        opacity: 0.31;
        height: 8px;
        width: 8px;
        animation-delay: -2.2s;
        transform: translate3d(48vw, 66vh, 8px);
        background: #8ed926;
      }
      @keyframes particle-animation-12 {
        100% {
          transform: translate3d(75vw, 74vh, 94px);
        }
      }
      .particle:nth-child(12) {
        animation: particle-animation-12 60s infinite;
        opacity: 0.42;
        height: 7px;
        width: 7px;
        animation-delay: -2.4s;
        transform: translate3d(5vw, 24vh, 15px);
        background: #d92662;
      }
      @keyframes particle-animation-13 {
        100% {
          transform: translate3d(58vw, 10vh, 90px);
        }
      }
      .particle:nth-child(13) {
        animation: particle-animation-13 60s infinite;
        opacity: 0.7;
        height: 7px;
        width: 7px;
        animation-delay: -2.6s;
        transform: translate3d(4vw, 37vh, 95px);
        background: #d92659;
      }
      @keyframes particle-animation-14 {
        100% {
          transform: translate3d(9vw, 58vh, 27px);
        }
      }
      .particle:nth-child(14) {
        animation: particle-animation-14 60s infinite;
        opacity: 0.2;
        height: 7px;
        width: 7px;
        animation-delay: -2.8s;
        transform: translate3d(88vw, 7vh, 99px);
        background: #8b26d9;
      }
      @keyframes particle-animation-15 {
        100% {
          transform: translate3d(48vw, 43vh, 85px);
        }
      }
      .particle:nth-child(15) {
        animation: particle-animation-15 60s infinite;
        opacity: 0.31;
        height: 10px;
        width: 10px;
        animation-delay: -3s;
        transform: translate3d(38vw, 88vh, 48px);
        background: #266bd9;
      }
      @keyframes particle-animation-16 {
        100% {
          transform: translate3d(44vw, 38vh, 77px);
        }
      }
      .particle:nth-child(16) {
        animation: particle-animation-16 60s infinite;
        opacity: 0.25;
        height: 9px;
        width: 9px;
        animation-delay: -3.2s;
        transform: translate3d(54vw, 21vh, 16px);
        background: #b826d9;
      }
      @keyframes particle-animation-17 {
        100% {
          transform: translate3d(50vw, 21vh, 42px);
        }
      }
      .particle:nth-child(17) {
        animation: particle-animation-17 60s infinite;
        opacity: 0.13;
        height: 7px;
        width: 7px;
        animation-delay: -3.4s;
        transform: translate3d(49vw, 71vh, 68px);
        background: #2677d9;
      }
      @keyframes particle-animation-18 {
        100% {
          transform: translate3d(39vw, 38vh, 46px);
        }
      }
      .particle:nth-child(18) {
        animation: particle-animation-18 60s infinite;
        opacity: 0.54;
        height: 8px;
        width: 8px;
        animation-delay: -3.6s;
        transform: translate3d(1vw, 78vh, 67px);
        background: #268bd9;
      }
      @keyframes particle-animation-19 {
        100% {
          transform: translate3d(47vw, 3vh, 83px);
        }
      }
      .particle:nth-child(19) {
        animation: particle-animation-19 60s infinite;
        opacity: 0.24;
        height: 10px;
        width: 10px;
        animation-delay: -3.8s;
        transform: translate3d(29vw, 27vh, 58px);
        background: #2685d9;
      }
      @keyframes particle-animation-20 {
        100% {
          transform: translate3d(71vw, 58vh, 50px);
        }
      }
      .particle:nth-child(20) {
        animation: particle-animation-20 60s infinite;
        opacity: 0.49;
        height: 8px;
        width: 8px;
        animation-delay: -4s;
        transform: translate3d(89vw, 62vh, 58px);
        background: #d9266b;
      }
      @keyframes particle-animation-21 {
        100% {
          transform: translate3d(1vw, 13vh, 34px);
        }
      }
      .particle:nth-child(21) {
        animation: particle-animation-21 60s infinite;
        opacity: 0.16;
        height: 6px;
        width: 6px;
        animation-delay: -4.2s;
        transform: translate3d(16vw, 63vh, 92px);
        background: #c7d926;
      }
      @keyframes particle-animation-22 {
        100% {
          transform: translate3d(62vw, 83vh, 8px);
        }
      }
      .particle:nth-child(22) {
        animation: particle-animation-22 60s infinite;
        opacity: 0.46;
        height: 7px;
        width: 7px;
        animation-delay: -4.4s;
        transform: translate3d(43vw, 3vh, 36px);
        background: #26d96e;
      }
      @keyframes particle-animation-23 {
        100% {
          transform: translate3d(8vw, 11vh, 17px);
        }
      }
      .particle:nth-child(23) {
        animation: particle-animation-23 60s infinite;
        opacity: 0.1;
        height: 6px;
        width: 6px;
        animation-delay: -4.6s;
        transform: translate3d(12vw, 11vh, 54px);
        background: #2cd926;
      }
      @keyframes particle-animation-24 {
        100% {
          transform: translate3d(42vw, 44vh, 70px);
        }
      }
      .particle:nth-child(24) {
        animation: particle-animation-24 60s infinite;
        opacity: 0.47;
        height: 8px;
        width: 8px;
        animation-delay: -4.8s;
        transform: translate3d(46vw, 33vh, 57px);
        background: #d97126;
      }
      @keyframes particle-animation-25 {
        100% {
          transform: translate3d(66vw, 52vh, 19px);
        }
      }
      .particle:nth-child(25) {
        animation: particle-animation-25 60s infinite;
        opacity: 0.13;
        height: 8px;
        width: 8px;
        animation-delay: -5s;
        transform: translate3d(74vw, 59vh, 23px);
        background: #26d9bb;
      }
      @keyframes particle-animation-26 {
        100% {
          transform: translate3d(35vw, 82vh, 67px);
        }
      }
      .particle:nth-child(26) {
        animation: particle-animation-26 60s infinite;
        opacity: 0.45;
        height: 10px;
        width: 10px;
        animation-delay: -5.2s;
        transform: translate3d(49vw, 79vh, 12px);
        background: #d98826;
      }
      @keyframes particle-animation-27 {
        100% {
          transform: translate3d(85vw, 39vh, 97px);
        }
      }
      .particle:nth-child(27) {
        animation: particle-animation-27 60s infinite;
        opacity: 0.28;
        height: 10px;
        width: 10px;
        animation-delay: -5.4s;
        transform: translate3d(78vw, 72vh, 78px);
        background: #8826d9;
      }
      @keyframes particle-animation-28 {
        100% {
          transform: translate3d(15vw, 28vh, 12px);
        }
      }
      .particle:nth-child(28) {
        animation: particle-animation-28 60s infinite;
        opacity: 0.18;
        height: 9px;
        width: 9px;
        animation-delay: -5.6s;
        transform: translate3d(51vw, 47vh, 1px);
        background: #c426d9;
      }
      @keyframes particle-animation-29 {
        100% {
          transform: translate3d(68vw, 5vh, 77px);
        }
      }
      .particle:nth-child(29) {
        animation: particle-animation-29 60s infinite;
        opacity: 0.46;
        height: 7px;
        width: 7px;
        animation-delay: -5.8s;
        transform: translate3d(66vw, 12vh, 32px);
        background: #26d95f;
      }
      @keyframes particle-animation-30 {
        100% {
          transform: translate3d(25vw, 89vh, 37px);
        }
      }
      .particle:nth-child(30) {
        animation: particle-animation-30 60s infinite;
        opacity: 0.46;
        height: 6px;
        width: 6px;
        animation-delay: -6s;
        transform: translate3d(20vw, 37vh, 47px);
        background: #262cd9;
      }
    
      </style>

    This is for a v7.0 site using the Skye family of templates.

    That should do it.

    This could be tweaked and is just a starting point. You could do things like add more or less particles. Perhaps based on screen size? The target area of the particles could be restricted from the whole window to a sub area. For example below the header area. That would take some Javascript I think to place the particle-container into the right location.

    I may follow up with a bit more detail of my process but these are the critical get it done steps.

    Let us know how it goes.

  4. When you are testing the base tag are you in edit mode? If so then the edit mode overrides the base tag behaviour in my testing.

    Keep your base tag in the Page Header Code Injection for the page you want the links to open to a new page.

    Then the trick is to get out of edit mode to test the behavior is correct.

    Hit the arrow or the escape key (if you have that enabled).

    1203937310_ScreenShot2020-09-26at11_06_39PM.png.ba73383c3653873cbeb6b7baa915c30f.png

    Once out of edit mode you should see the following URL.

    560640756_ScreenShot2020-09-26at11_08_05PM.png.4159cc6cb3a684377817f8a263f66128.png

    To that URL add ?noredirect and hit return to go to that URL.

    358966355_ScreenShot2020-09-26at11_10_26PM.png.a7b1f55af5a3995556121ea0ae1289a5.png

    This should help you not fallback into edit mode by accident.

    Now click on a link on that page. Does it open a new window or tab?

    To get back into edit mode hit escape key (if enabled). Or add "config/" (without the quotes) to the base URL of your website.

    Let us know how it goes.

  5. I think the easiest solution is going to be to convert all your vertical images from 2:3 to 3:2 ratio. At least the ones where you are losing critical visual information.

    Following is a mock up of how it might look.

    Normally when you are at the following item (Dee Triangular) you see something like...

    1744187293_ScreenShot2020-09-26at9_35_55PM.png.5579ff81c12a547af6e5ac78401e026e.png

     

     

    And then when you hover you get the truncated image...

     

     

    1676558860_ScreenShot2020-09-26at9_41_25PM.png.5598fe03c02c626adcf4f051e86d4bba.png

     

    If you replace your 2:3 hover image with a 3:2 version you get the following on hover.

     

    1302769309_ScreenShot2020-09-26at9_38_22PM.png.d67928918dbeb0d195cfa993f9067e97.png

  6. @cstern01 Lets give this a try to start. Add the following to Design > Custom CSS.

    @media screen and ( max-width: 768px ) {
    
      .header-special {
      
        display: unset;
    
        }
        
      .header-special .social-search-wrapper {
      
        display: unset;
        
        }
        
      .mobile-bar {
      
        background-color: unset;
        border-top: unset;
        bottom: unset;
        box-sizing: unset;
        display: unset;
        left: unset;
        padding: unset;
        position: unset;
        width: unset;
        z-index: unset;
        
        }
        
      /*
      
        IE 11 and a few others doesn't support all :-(
        
        .mobile-bar {
        
          all: unset;
          
          }
          
        */ 
        
      .nav-toggle-label {
      
        display: unset;
        
        }
      }

    Let us know how it goes.

  7. As to the Shaking Up interior design. I downloaded that image and it has a huge amount of dead space around the actual words. It is 1500w × 2122h pixels.

    It could be closer to something like 767w × 180h pixels.

    I think if you crop that image, you'll find it fills the space better. Do be careful about the cropping so that the image is balanced properly in some small amount of padding around it.

  8. You might find Summary Blocks documentation of use. Especially the section on editing styles for the Wall layout.

    There are two settings areas that effect the meta data display.

    1385300350_ScreenShot2020-09-25at8_58_04PM.png.2dd0ede5c3d0fc87538fa67945074cb5.png

    224099603_ScreenShot2020-09-25at8_58_40PM.png.ba6d113df35ef40cb8ff09b069acdfc2.png

    If those settings don't achieve the effect you want then you would probably need to use Code Injection and Javascript to place things where you want. We would need more details to help you.

    Let us know how it goes.

  9. 1 hour ago, hme164 said:

    Is it possible to achieve this on any page in Squarespace 7.1? I would really appreciate it!

    The short answer is yes you should be able to achieve the effect on just about any page.

    If you are interested in more background there is a good article on the CSS Scroll Snap Module on CSS-Tricks.

    If you need help with a more specific use case on your site. Please give us the URL for a specific page where you want to apply the effect and tell us more about how you want your page to behave. If you've not already done so please set up a site-wide password. Post the password here and then we can take a look at your issue.

×
×
  • Create New...