Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Section divider/styles.css: Difference between revisions

Template page
No edit summary
No edit summary
 
Line 5: Line 5:
   clip-path: polygon(1px 0px, 0px 0px, 0px 0px, 8px 14px, 13px 14px, 22px 7px, 42px 6px, 49px 2px, 100% 2px, 100% 0px, 42px 0px, 35px 5px, 22px 6px, 13px 13px, 9px 13px);
   clip-path: polygon(1px 0px, 0px 0px, 0px 0px, 8px 14px, 13px 14px, 22px 7px, 42px 6px, 49px 2px, 100% 2px, 100% 0px, 42px 0px, 35px 5px, 22px 6px, 13px 13px, 9px 13px);
   animation-name: hr;
   animation-name: hr;
   animation-duration: var(--glitched-long-duration);
   animation-duration: 3s;
   animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   animation-timing-function: linear;  
   animation-timing-function: linear;  
}
}


/*
.tg-section-divider:not(:empty) {
.tg-section-divider:not(:empty) {
     gap: 1rem;
     gap: 1rem;
Line 22: Line 23:
     background-color: #555555;
     background-color: #555555;
}
}
*/


@keyframes section-divider {
@keyframes section-divider {

Latest revision as of 19:35, 7 June 2025

.tg-section-divider {
  height: 14px;
  background-color: #555555;
  width: 100%;
  clip-path: polygon(1px 0px, 0px 0px, 0px 0px, 8px 14px, 13px 14px, 22px 7px, 42px 6px, 49px 2px, 100% 2px, 100% 0px, 42px 0px, 35px 5px, 22px 6px, 13px 13px, 9px 13px);
  animation-name: hr;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

/*
.tg-section-divider:not(:empty) {
    gap: 1rem;
    white-space: nowrap;
}

.tg-section-divider::before,
.tg-section-divider::after {
    content: "";
    height: 1px;
    width: 100%;
    background-color: #555555;
}
*/

@keyframes section-divider {
  0% {
    transform: skew(0deg);
  }
  15% {
    transform: skew(0deg);
  }
  16% {
    transform: skew(20deg);
  }
  20% {
    transform: skew(20deg);
  }
  21% {
    transform: skew(0deg);
  }
  100% {
    right: 35px;
  }
}