~xdavidwu/xdavidwu.link

29f93a9ed497fec90b9977e6884a6ece82c82507 — xdavidwu 3 years ago 9a14c1b
sass: purge webkit-ism

it is 2020 and a blog for hackers should not use vendor prefix
M _sass/minimal-mistakes/_animations.scss => _sass/minimal-mistakes/_animations.scss +1 -10
@@ 2,15 2,6 @@
   ANIMATIONS
   ========================================================================== */

@-webkit-keyframes intro {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes intro {
  0% {
    opacity: 0;


@@ 18,4 9,4 @@
  100% {
    opacity: 1;
  }
}
\ No newline at end of file
}

M _sass/minimal-mistakes/_base.scss => _sass/minimal-mistakes/_base.scss +0 -6
@@ 208,11 208,8 @@ li ol {
/* Figures and images */

figure {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 2em 0;


@@ 226,7 223,6 @@ figure {
  img {
    width: 100%;
    border-radius: $border-radius;
    -webkit-transition: $global-transition;
    transition: $global-transition;
  }



@@ 270,7 266,6 @@ figcaption {
  font-size: $type-size-6;

  a {
    -webkit-transition: $global-transition;
    transition: $global-transition;

    &:hover {


@@ 354,6 349,5 @@ input[type="submit"],
.btn,
.highlight,
.archive__item-teaser {
  -webkit-transition: $global-transition;
  transition: $global-transition;
}

M _sass/minimal-mistakes/_footer.scss => _sass/minimal-mistakes/_footer.scss +0 -2
@@ 9,9 9,7 @@
  margin-right: 0;
  width: 100%;
  color: $muted-text-color;
  -webkit-animation: $intro-transition;
  animation: $intro-transition;
  -webkit-animation-delay: 0.45s;
  animation-delay: 0.45s;
  background-color: $footer-background-color;


M _sass/minimal-mistakes/_masthead.scss => _sass/minimal-mistakes/_masthead.scss +0 -5
@@ 5,9 5,7 @@
.masthead {
  position: relative;
  border-bottom: 1px solid $border-color;
  -webkit-animation: $intro-transition;
  animation: $intro-transition;
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
  z-index: 20;



@@ 17,9 15,7 @@
    margin-right: auto;
    padding: 0.625em 1em;
    max-width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    font-family: $sans-serif-narrow;



@@ 42,7 38,6 @@
}

.site-title {
  display: -webkit-box;
  display: flex;
  align-self: center;
  font-weight: bold;

M _sass/minimal-mistakes/_navigation.scss => _sass/minimal-mistakes/_navigation.scss +0 -23
@@ 13,9 13,7 @@
  padding-left: 1em;
  padding-right: 1em;
  font-family: $sans-serif;
  -webkit-animation: $intro-transition;
  animation: $intro-transition;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;

  @include breakpoint($x-large) {


@@ 171,9 169,7 @@

.greedy-nav {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  min-height: $nav-height;
  background: $background-color;


@@ 208,16 204,12 @@
  }

  .visible-links {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    -webkit-box-flex: 1;
    flex: 1;
    overflow: hidden;

    li {
      -webkit-box-flex: 0;
      flex: none;
    }



@@ 232,14 224,11 @@
        height: 4px;
        background: $primary-color;
        width: 100%;
        -webkit-transition: $global-transition;
        transition: $global-transition;
        -webkit-transform: scaleX(0) translate3d(0, 0, 0);
        transform: scaleX(0) translate3d(0, 0, 0); // hide
      }

      &:hover:before {
        -webkit-transform: scaleX(1);
        transform: scaleX(1); // reveal
      }
    }


@@ 254,8 243,6 @@
    border: 1px solid $border-color;
    border-radius: $border-radius;
    background: $background-color;
    -webkit-box-shadow: 0 2px 4px 0 rgba(#000, 0.16),
      0 2px 10px 0 rgba(#000, 0.12);
    box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);

    &.hidden {


@@ 342,7 329,6 @@
      border: 1px solid $light-gray;
      border-radius: $border-radius;
      z-index: 20;
      -webkit-transition: 0.2s ease-out;
      transition: 0.2s ease-out;
      cursor: pointer;



@@ 356,12 342,10 @@
        height: 0.125em;
        line-height: 1;
        background-color: $gray;
        -webkit-transition: 0.2s ease-out;
        transition: 0.2s ease-out;
      }

      &:after {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }



@@ 390,12 374,10 @@

    /* on hover show expand*/
    label:hover:after {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }

    input:checked + label:hover:after {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }



@@ 440,22 422,18 @@
    opacity: 0%;
    overflow: hidden;
    z-index: 10;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    -webkit-transform: translate(0, 10%);
    transform: translate(0, 10%);
  }
}

@include breakpoint(max-width $large - 1px) {
  .nav__list input:checked ~ .nav__items {
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    max-height: 9999px; /* exaggerate max-height to accommodate tall lists*/
    overflow: visible;
    opacity: 1;
    margin-top: 1em;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}


@@ 489,7 467,6 @@
  background-color: $background-color;
  border: 1px solid $border-color;
  border-radius: $border-radius;
  -webkit-box-shadow: $box-shadow;
  box-shadow: $box-shadow;

  .nav__title {

M _sass/minimal-mistakes/_page.scss => _sass/minimal-mistakes/_page.scss +0 -13
@@ 8,10 8,8 @@
  margin-right: auto;
  padding-left: 1em;
  padding-right: 1em;
  -webkit-animation: $intro-transition;
  animation: $intro-transition;
  max-width: 100%;
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;

  @include breakpoint($x-large) {


@@ 20,11 18,8 @@
}

body {
  display: -webkit-box;
  display: flex;
  min-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}



@@ 92,7 87,6 @@ body {
			left: 0.5em;
			opacity: 0;
			font-size: 0.8em;
			-webkit-transition: opacity 0.2s ease-in-out 0.1s;
			-moz-transition: opacity 0.2s ease-in-out 0.1s;
			transition: opacity 0.2s ease-in-out 0.1s;
		}


@@ 158,9 152,7 @@ body {
  position: relative;
  margin-bottom: 2em;
  @include clearfix;
  -webkit-animation: $intro-transition;
  animation: $intro-transition;
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;

  &--overlay {


@@ 171,9 163,7 @@ body {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-animation: $intro-transition;
    animation: $intro-transition;
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;

    a {


@@ 375,10 365,8 @@ body {
  }

  a {
    display: -webkit-box;
    display: flex;
    padding: 0.25em 0;
    -webkit-box-pack: justify;
    justify-content: space-between;
    color: inherit;
    text-decoration: none;


@@ 418,7 406,6 @@ body {
}

.page__comments-form {
  -webkit-transition: $global-transition;
  transition: $global-transition;

  &.disabled {

M _sass/minimal-mistakes/_print.scss => _sass/minimal-mistakes/_print.scss +0 -2
@@ 10,7 10,6 @@

  * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }



@@ 28,7 27,6 @@
    font-size: 1rem;
    line-height: 1.5;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }


M _sass/minimal-mistakes/_reset.scss => _sass/minimal-mistakes/_reset.scss +1 -9
@@ 22,7 22,6 @@ html {
    font-size: 22px;
  }

  -webkit-text-size-adjust: 100%;
}

/* Remove margin */


@@ 154,7 153,6 @@ button,
html input[type="button"], // avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* corrects inability to style clickable `input` types in iOS*/
    cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others*/
}



@@ 171,15 169,9 @@ input[type="checkbox"] {

input[type="search"] { /* Appearance in Safari/Chrome*/
  box-sizing: border-box;
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; /* inner-padding issues in Chrome OSX, Safari 5*/
}

textarea {
  overflow: auto; /* remove vertical scrollbar in IE6-9*/
  vertical-align: top; /* readability and alignment cross-browser*/
}
\ No newline at end of file
}

M _sass/minimal-mistakes/_search.scss => _sass/minimal-mistakes/_search.scss +0 -3
@@ 17,7 17,6 @@
  color: $primary-color;
  background-color: transparent;
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;

  &:hover {


@@ 42,9 41,7 @@
    margin-right: auto;
    padding-left: 1em;
    padding-right: 1em;
    -webkit-animation: $intro-transition;
    animation: $intro-transition;
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;

    @include breakpoint($x-large) {

M _sass/minimal-mistakes/_sidebar.scss => _sass/minimal-mistakes/_sidebar.scss +0 -3
@@ 12,7 12,6 @@
  //   /* fix z-index order of follow links */
  //   position: relative;
  //   z-index: 10;
  //   -webkit-transform: translate3d(0, 0, 0);
  //   transform: translate3d(0, 0, 0);
  // }



@@ 20,7 19,6 @@
    float: left;
    width: calc(#{$right-sidebar-width-narrow} - 1em);
    // opacity: 0.75;
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;

    &:hover {


@@ 85,7 83,6 @@

    &.sticky {
      @include clearfix();
      position: -webkit-sticky;
      position: sticky;
      top: 2em;
      float: right;

M _sass/minimal-mistakes/_utilities.scss => _sass/minimal-mistakes/_utilities.scss +0 -16
@@ 336,7 336,6 @@ body:hover .visually-hidden button {
  height: $navicon-height;
  background: $primary-color;
  margin: auto;
  -webkit-transition: 0.3s;
  transition: 0.3s;

  &:before,


@@ 347,7 346,6 @@ body:hover .visually-hidden button {
    width: $navicon-width;
    height: $navicon-height;
    background: $primary-color;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }



@@ 367,7 365,6 @@ body:hover .visually-hidden button {
  /* overlay the lines by setting both their top values to 0*/
  &:before,
  &:after {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    top: 0;
    width: $navicon-width;


@@ 375,11 372,9 @@ body:hover .visually-hidden button {

  /* rotate the lines to form the x shape*/
  &:before {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
  }
  &:after {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
  }
}


@@ 395,7 390,6 @@ body:hover .visually-hidden button {
      height: 100%;
      opacity: 0;
      background-color: $background-color;
      -webkit-transition: $global-transition;
      transition: $global-transition;
      pointer-events: none;
    }


@@ 404,7 398,6 @@ body:hover .visually-hidden button {
  &.close {
    &:before {
      opacity: 0.9;
      -webkit-transition: $global-transition;
      transition: $global-transition;
      pointer-events: auto;
    }


@@ 432,7 425,6 @@ body:hover .visually-hidden button {
.sticky {
  @include breakpoint($large) {
    @include clearfix();
    position: -webkit-sticky;
    position: sticky;
    top: 2em;



@@ 582,11 574,3 @@ a.reversefootnote {
    height: 100%;
  }
}

// full screen video fixes
:-webkit-full-screen-ancestor {
  .masthead,
  .page__footer {
    position: static;
  }
}