markdown 使移动幻灯片看起来像布鲁克林的桌面幻灯片

Posted 2021-05-05

![screenshot](https://screenshot.click/2019-06-24_13-54-28.jpg)

```
/* Added by Anthony Gordon at Shopify June 24 2019 */

@include at-query($max, $small) {
  .announcement-bar__message {
    font-size: 0.7em; 
  }

  .site-header .wrapper .grid--full.grid--table {
    margin-top: -20px; 
  }

  .hero__adapt-text-wrap.wrapper {
    display: none !important;
  }

  .hero__text-align.wrapper {
    display: table;
  }

  .hero__slide .hero__title, .hero--adapt .hero__title {
    font-size: 1em;
  }
  .hero__slide .hero__subtitle, .hero--adapt .hero__subtitle {
    font-size: 0.7em;
  }

  .hero__slide a.hero__cta, .hero--adapt a.hero__cta {
    font-size: 0.5em;
  }

  .hero__title.h1, .hero__subtitle {
    margin-bottom: 0.4em; 
  }

  .hero__slide .hero__subtitle, .hero--adapt .hero__subtitle {
    margin-bottom: 0.4em; 
    margin-top: 1.5em;
  }


}

@include at-query($max, $x-small) {
  .announcement-bar__message {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
  }

  .hero__slide .hero__subtitle, .hero--adapt .hero__subtitle {
    margin-top: 2.5em;
    font-size: 0.6em;
  }

  .hero__title.h1, .hero__subtitle {
    font-size: 0.8em;
  }

  .btn.hero__cta {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}
```