// source https://jsbin.com/redojep

3/1/2017 - 3:50 PM

// source https://jsbin.com/redojep

jsbin.redojep.js

loadjs('https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/4.1.0/sanitize.min.css');

loadjs('https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', {
  success: function() {
    return loadjs('https://rawgit.com/nick-jonas/nick-jonas.github.com/master/windows/js/jquery.windows.js', {
      success: function() {
        return $(document).ready(function() {
          return $('.page').windows({
            snapping: true,
            snapSpeed: 200,
            snapInterval: 1600
          });
        });
      }
    });
  }
});

loadjs('https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.27/webfontloader.js', {
  success: function() {
    return WebFont.load({
      custom: {
        families: ['Noto Sans JP'],
        urls: ['https://fonts.googleapis.com/earlyaccess/notosansjp.css']
      }
    });
  }
});

jsbin.redojep.css

html.wf-notosansjp-n4-active {
  font-family: 'Noto Sans JP';
}
body {
  font-feature-settings: 'palt';
  letter-spacing: 0.16em;
  font-size: 10pt;
  font-size: 3vmin;
  color: #333;
  text-shadow: 0 0.02em 0.04em #fff, 0 -0.02em 0.04em #666;
}
.page {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #ddd;
  background-image: linear-gradient(#eee, #aaa);
}
.safe-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vmin;
  max-width: 100%;
  border: 1px solid #aaa;
}
.safe-area::before {
  content: '';
  display: block;
  padding-top: 100%;
}
.anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>[TEST] page layout</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/loadjs/3.4.0/loadjs.min.js" charset="utf-8"></script>
  <style id="jsbin-css">
html.wf-notosansjp-n4-active {
  font-family: 'Noto Sans JP';
}
body {
  font-feature-settings: 'palt';
  letter-spacing: 0.16em;
  font-size: 10pt;
  font-size: 3vmin;
  color: #333;
  text-shadow: 0 0.02em 0.04em #fff, 0 -0.02em 0.04em #666;
}
.page {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #ddd;
  background-image: linear-gradient(#eee, #aaa);
}
.safe-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vmin;
  max-width: 100%;
  border: 1px solid #aaa;
}
.safe-area::before {
  content: '';
  display: block;
  padding-top: 100%;
}
.anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
</style>
</head>
  <body>
    <section class="page">
      <div class="safe-area">
        <div class="anchor">
          <p>あのイーハトーヴォの</p>
          <p>すきとおった風、夏でも</p>
          <p>底に冷たさをもつ青いそら、</p>
        </div>
      </div>
    </section>
    <section class="page">
      <div class="safe-area">
        <div class="anchor">
          <p>うつくしい森で飾られた</p>
          <p>モリーオ市、郊外のぎらぎら</p>
          <p>ひかる草の波。</p>
        </div>
      </div>
    </section>
    <section id="target" class="page">
      <div class="safe-area">
        <div class="anchor">
          <p>またそのなかで</p>
          <p>いっしょになったたくさんの</p>
          <p>ひとたち、</p>
        </div>
      </div>
    </section>
    <section class="page">
      <div class="safe-area">
        <div class="anchor">
          <p>ファゼーロとロザーロ、</p>
          <p>羊飼のミーロや、顔の</p>
          <p>赤いこどもたち、</p>
        </div>
      </div>
    </section>
    <section class="page">
      <div class="safe-area">
        <div class="anchor">
          <p>地主のテーモ、山猫博士の</p>
          <p>ボーガント・デストゥパーゴ</p>
          <p>など、</p>
        </div>
      </div>
    </section>
    <section class="page">
      <div class="safe-area">
        <div class="anchor">
          <p>いまこの暗い巨きな</p>
          <p>石の建物のなかで</p>
          <p>考えていると、</p>
        </div>
      </div>
    </section>
    <section class="page">
      <div class="safe-area">
        <div class="anchor">
          <p>みんなむかし風の</p>
          <p>なつかしい青い幻燈の</p>
          <p>ように思われます。</p>
        </div>
      </div>
    </section>
  <script id="jsbin-javascript">
loadjs('https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/4.1.0/sanitize.min.css');

loadjs('https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', {
  success: function() {
    return loadjs('https://rawgit.com/nick-jonas/nick-jonas.github.com/master/windows/js/jquery.windows.js', {
      success: function() {
        return $(document).ready(function() {
          return $('.page').windows({
            snapping: true,
            snapSpeed: 200,
            snapInterval: 1600
          });
        });
      }
    });
  }
});

loadjs('https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.27/webfontloader.js', {
  success: function() {
    return WebFont.load({
      custom: {
        families: ['Noto Sans JP'],
        urls: ['https://fonts.googleapis.com/earlyaccess/notosansjp.css']
      }
    });
  }
});

</script>

<script id="jsbin-source-html" type="text/html">doctype html
html
  head
    title [TEST] page layout
    meta(name='viewport' content='width=device-width, initial-scale=1')
    script(src='//cdnjs.cloudflare.com/ajax/libs/loadjs/3.4.0/loadjs.min.js' charset='utf-8')
  body
    section.page: .safe-area
      .anchor
        p あのイーハトーヴォの
        p すきとおった風、夏でも
        p 底に冷たさをもつ青いそら、
    section.page: .safe-area
      .anchor
        p うつくしい森で飾られた
        p モリーオ市、郊外のぎらぎら
        p ひかる草の波。
    section.page#target: .safe-area
      .anchor
        p またそのなかで
        p いっしょになったたくさんの
        p ひとたち、
    section.page: .safe-area
      .anchor
        p ファゼーロとロザーロ、
        p 羊飼のミーロや、顔の
        p 赤いこどもたち、
    section.page: .safe-area
      .anchor
        p 地主のテーモ、山猫博士の
        p ボーガント・デストゥパーゴ
        p など、
    section.page: .safe-area
      .anchor
        p いまこの暗い巨きな
        p 石の建物のなかで
        p 考えていると、
    section.page: .safe-area
      .anchor
        p みんなむかし風の
        p なつかしい青い幻燈の
        p ように思われます。
</script>

<script id="jsbin-source-css" type="text/css">html
  &.wf-notosansjp-n4-active
    font-family: 'Noto Sans JP'

body
  font-feature-settings: 'palt'
  letter-spacing: .16em
  font-size: 10pt
  font-size: 3vmin
  color: #333
  text-shadow: 0 .02em .04em #fff, 0 -.02em .04em #666;

.page
  position: relative
  width: 100%
  height: 100vh
  background-color: #ddd
  background-image: linear-gradient(#eee,#aaa)

.safe-area
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%,-50%)
  width: 100vmin
  max-width: 100%
  border: 1px solid #aaa
.safe-area::before
  content: ''
  display: block
  padding-top: 100%

.anchor
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%,-50%)
  //height: 0
  //width: 0
  text-align: center
</script>

<script id="jsbin-source-javascript" type="text/javascript">loadjs 'https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/4.1.0/sanitize.min.css'

loadjs 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', success: ->
  loadjs 'https://rawgit.com/nick-jonas/nick-jonas.github.com/master/windows/js/jquery.windows.js', success: ->
    $(document).ready ->
      $('.page').windows
        snapping: true
        snapSpeed: 200
        snapInterval: 1600


loadjs 'https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.27/webfontloader.js', success: ->
  WebFont.load custom:
    families: [
      'Noto Sans JP'
    ]
    urls: [
      'https://fonts.googleapis.com/earlyaccess/notosansjp.css'
    ]


</script></body>
</html>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

// source https://jsbin.com/redojep