Skip to content

Instantly share code, notes, and snippets.

@alt-karate

alt-karate/commo.js

Last active May 22, 2021 23:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alt-karate/fc6f492e6400674e2d1b828c9a2fe010 to your computer and use it in GitHub Desktop.
Save alt-karate/fc6f492e6400674e2d1b828c9a2fe010 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
commo.js
// アニメーション対象
const targetElements = document.querySelectorAll(".js-ObserveAnimationTarget");
const observeAnimation = () => {
if (!targetElements.length) return;
const handleObserve = entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.setAttribute("data-animated", "true");
}
});
};
const observerOptions = {
root: null,
rootMargin: "0px 0px -50%",
threshold: 0
};
const observer = new IntersectionObserver(handleObserve, observerOptions);
targetElements.forEach(target => {
target.setAttribute("data-animated", "false");
observer.observe(target);
});
};
document.addEventListener("DOMContentLoaded", observeAnimation, false);
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div class="l-Center">
<div class="l-Stack" data-gap="7 md:8 lg:9 xxl:10">
<section>
<h2 class="sw-Headline">Slide In X</h2>
<ul class="l-Stack" data-gap="6 md:7 lg:8 xxl:9">
<li>
<div class="anime-SlideInX js-ObserveAnimationTarget">
<div>
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1glY82pxWw5fl1jGswwQH9xaZEq2x2PAV" alt="" width="640" height="480" decording="async">
</div>
</div>
</div>
</li>
<li>
<div class="anime-SlideInX js-ObserveAnimationTarget">
<div>
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1bsnhjY9jZr3DvO0eVtwvbGMNGMc-kGrr" alt="" width="640" height="480" decording="async">
</div>
</div>
</div>
</li>
<li>
<div class="anime-SlideInX js-ObserveAnimationTarget">
<div>
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1D_c8jpzo2raVuHLQhCF1c8nN2mEbYJM0" alt="" width="640" height="480" decording="async">
</div>
</div>
</div>
</li>
</ul>
</section>
<section>
<h2 class="sw-Headline">Slide In Y</h2>
<ul class="l-Stack" data-gap="6 md:7 lg:8 xxl:9">
<li>
<div class="anime-SlideInY js-ObserveAnimationTarget">
<div>
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1Rx69Wi-HrrRXEWNKfNXW4KiNiIvUb6ok" alt="" width="640" height="480" decording="async">
</div>
</div>
</div>
</li>
<li>
<div class="anime-SlideInY js-ObserveAnimationTarget">
<div>
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1BIPJS2buFQ-tpn2ipOFh6cDYRAfGM_rL" alt="" width="640" height="480" decording="async">
</div>
</div>
</div>
</li>
<li>
<div class="anime-SlideInY js-ObserveAnimationTarget">
<div>
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1ikgoW0tnG_ZEYEiCG44gfeG3ngL0E_K7" alt="" width="640" height="480" decording="async">
</div>
</div>
</div>
</li>
</ul>
</section>
<section>
<h2 class="sw-Headline">Fade In</h2>
<ul class="l-Stack" data-gap="6 md:7 lg:8 xxl:9">
<li>
<div class="anime-FadeIn js-ObserveAnimationTarget">
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1olJaE9O1MHqepKz8rMYxp_sN_u9Wd8f_" alt="" width="640" height="480" decording="async">
</div>
</div>
</li>
<li>
<div class="anime-FadeIn js-ObserveAnimationTarget">
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1usYkzMURvuvdwJs51FlP-xZjOO8JNiXG" alt="" width="640" height="480" decording="async">
</div>
</div>
</li>
<li>
<div class="anime-FadeIn js-ObserveAnimationTarget">
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1KZnCylNc81m8wXO9WNNOKTvVARwrQaxX" alt="" width="640" height="480" decording="async">
</div>
</div>
</li>
</ul>
</section>
<section>
<h2 class="sw-Headline">Fade In Up</h2>
<ul class="l-Stack" data-gap="6 md:7 lg:8 xxl:9">
<li>
<div class="anime-FadeInUp js-ObserveAnimationTarget">
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1glY82pxWw5fl1jGswwQH9xaZEq2x2PAV" alt="" width="640" height="480" decording="async">
</div>
</div>
</li>
<li>
<div class="anime-FadeInUp js-ObserveAnimationTarget">
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1bsnhjY9jZr3DvO0eVtwvbGMNGMc-kGrr" alt="" width="640" height="480" decording="async">
</div>
</div>
</li>
<li>
<div class="anime-FadeInUp js-ObserveAnimationTarget">
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1D_c8jpzo2raVuHLQhCF1c8nN2mEbYJM0" alt="" width="640" height="480" decording="async">
</div>
</div>
</li>
</ul>
</section>
<section>
<h2 class="sw-Headline">Scale In</h2>
<ul class="l-Stack" data-gap="6 md:7 lg:8 xxl:9">
<li>
<div class="anime-ScaleIn js-ObserveAnimationTarget">
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1Rx69Wi-HrrRXEWNKfNXW4KiNiIvUb6ok" alt="" width="640" height="480" decording="async">
</div>
</div>
</li>
<li>
<div class="anime-ScaleIn js-ObserveAnimationTarget">
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1BIPJS2buFQ-tpn2ipOFh6cDYRAfGM_rL" alt="" width="640" height="480" decording="async">
</div>
</div>
</li>
<li>
<div class="anime-ScaleIn js-ObserveAnimationTarget">
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1ikgoW0tnG_ZEYEiCG44gfeG3ngL0E_K7" alt="" width="640" height="480" decording="async">
</div>
</div>
</li>
</ul>
</section>
<section>
<h2 class="sw-Headline">Use Style Attribute</h2>
<ul class="l-Stack" data-gap="6 md:7 lg:8 xxl:9">
<li>
<div class="anime-SlideInX js-ObserveAnimationTarget" style="--duration:0.5s;--timing-function:ease-in-out">
<div>
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1glY82pxWw5fl1jGswwQH9xaZEq2x2PAV" alt="" width="640" height="480" decording="async">
</div>
</div>
</div>
</li>
<li>
<div class="anime-FadeInUp js-ObserveAnimationTarget" style="--starting-position:-40px;">
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1BIPJS2buFQ-tpn2ipOFh6cDYRAfGM_rL" alt="" width="640" height="480" decording="async">
</div>
</div>
</li>
<li>
<div class="anime-ScaleIn js-ObserveAnimationTarget" style="--starting-scale:1.2;">
<div class="l-Frame" data-raito-type="3:2">
<img src="https://drive.google.com/uc?export=view&id=1glY82pxWw5fl1jGswwQH9xaZEq2x2PAV" alt="" width="640" height="480" decording="async">
</div>
</div>
</li>
</ul>
</section>
</div>
</div>
<script src="./js/common.js"></script>
</body>
</html>
Raw
style.css
html {
box-sizing: border-box;
font-size: 75%;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
@media screen and (min-width: 768px) {
html {
font-size: 87.5%;
}
}
@media screen and (min-width: 1200px) {
html {
font-size: 100%;
}
}
:root {
--base-color: #434a56;
--white-color-primary: #f7f8f8;
--gray-color-primary: #676f79;
--gray-color-secondary: #c2c2c2;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
}
body {
background: var(--white-color-primary);
color: var(--base-color);
font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans",
"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-size: 1em;
line-height: 1.5;
padding: max(4em, 5%) 5%;
}
.anime-SlideInX {
--duration: 1s;
--timing-function: cubic-bezier(0.19, 1, 0.22, 1);
overflow: hidden;
}
.anime-SlideInX > * {
display: block;
position: relative;
transform: translateX(-100%);
transition: transform var(--duration) var(--timing-function);
}
.anime-SlideInX > *::after {
background-color: var(--gray-color-primary);
content: "";
display: inline-block;
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: scaleX(1);
transform-origin: right;
transition: transform var(--duration) var(--timing-function)
calc(var(--duration) / 2);
width: 100%;
z-index: 1;
}
.anime-SlideInX[data-animated="false"] {
opacity: 0;
}
.anime-SlideInX[data-animated="true"] {
opacity: 1;
}
.anime-SlideInX[data-animated="true"] > * {
transform: translateX(0);
}
.anime-SlideInX[data-animated="true"] > *::after {
transform: scaleX(0);
}
.anime-SlideInY {
--duration: 1s;
--timing-function: cubic-bezier(0.19, 1, 0.22, 1);
overflow: hidden;
}
.anime-SlideInY > * {
display: block;
position: relative;
transform: translateY(-100%);
transition: transform var(--duration) var(--timing-function);
}
.anime-SlideInY > *::after {
background-color: var(--gray-color-primary);
content: "";
display: inline-block;
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: scaleY(1);
transform-origin: bottom;
transition: transform var(--duration) var(--timing-function)
calc(var(--duration) / 2);
width: 100%;
z-index: 1;
}
.anime-SlideInY[data-animated="false"] {
opacity: 0;
}
.anime-SlideInY[data-animated="true"] {
opacity: 1;
}
.anime-SlideInY[data-animated="true"] > * {
transform: translateY(0);
}
.anime-SlideInY[data-animated="true"] > *::after {
transform: scaleY(0);
}
.anime-FadeIn {
--duration: 1s;
--timing-function: ease;
transition: opacity var(--duration) var(--timing-function);
}
.anime-FadeIn[data-animated="false"] {
opacity: 0;
}
.anime-FadeIn[data-animated="true"] {
opacity: 1;
}
.anime-FadeInUp {
--duration: 1s;
--timing-function: ease;
--starting-position: 40px;
transition: opacity var(--duration) var(--timing-function),
transform var(--duration) var(--timing-function);
}
.anime-FadeInUp[data-animated="false"] {
opacity: 0;
transform: translateY(var(--starting-position));
}
.anime-FadeInUp[data-animated="true"] {
opacity: 1;
transform: translateY(0);
}
.anime-ScaleIn {
--duration: 1s;
--timing-function: ease;
--starting-scale: 0.9;
transition: opacity var(--duration) var(--timing-function),
transform var(--duration) var(--timing-function);
}
.anime-ScaleIn[data-animated="false"] {
opacity: 0;
transform: scale(var(--starting-scale));
}
.anime-ScaleIn[data-animated="true"] {
opacity: 1;
transform: scale(1);
}
.l-Stack {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.l-Stack:only-child {
height: 100%;
}
.l-Stack > * {
flex-shrink: 0;
}
.l-Stack[data-gap~="0"] > * + * {
margin-top: 0;
}
.l-Stack[data-gap~="1"] > * + * {
margin-top: 4px;
}
.l-Stack[data-gap~="2"] > * + * {
margin-top: 8px;
}
.l-Stack[data-gap~="3"] > * + * {
margin-top: 12px;
}
.l-Stack[data-gap~="4"] > * + * {
margin-top: 16px;
}
.l-Stack[data-gap~="5"] > * + * {
margin-top: 24px;
}
.l-Stack[data-gap~="6"] > * + * {
margin-top: 32px;
}
.l-Stack[data-gap~="7"] > * + * {
margin-top: 40px;
}
.l-Stack[data-gap~="8"] > * + * {
margin-top: 48px;
}
.l-Stack[data-gap~="9"] > * + * {
margin-top: 64px;
}
.l-Stack[data-gap~="10"] > * + * {
margin-top: 80px;
}
@media (min-width: 576px) {
.l-Stack[data-gap~="sm:0"] > * + * {
margin-top: 0;
}
.l-Stack[data-gap~="sm:1"] > * + * {
margin-top: 4px;
}
.l-Stack[data-gap~="sm:2"] > * + * {
margin-top: 8px;
}
.l-Stack[data-gap~="sm:3"] > * + * {
margin-top: 12px;
}
.l-Stack[data-gap~="sm:4"] > * + * {
margin-top: 16px;
}
.l-Stack[data-gap~="sm:5"] > * + * {
margin-top: 24px;
}
.l-Stack[data-gap~="sm:6"] > * + * {
margin-top: 32px;
}
.l-Stack[data-gap~="sm:7"] > * + * {
margin-top: 40px;
}
.l-Stack[data-gap~="sm:8"] > * + * {
margin-top: 48px;
}
.l-Stack[data-gap~="sm:9"] > * + * {
margin-top: 64px;
}
.l-Stack[data-gap~="sm:10"] > * + * {
margin-top: 80px;
}
}
@media (min-width: 768px) {
.l-Stack[data-gap~="md:0"] > * + * {
margin-top: 0;
}
.l-Stack[data-gap~="md:1"] > * + * {
margin-top: 4px;
}
.l-Stack[data-gap~="md:2"] > * + * {
margin-top: 8px;
}
.l-Stack[data-gap~="md:3"] > * + * {
margin-top: 12px;
}
.l-Stack[data-gap~="md:4"] > * + * {
margin-top: 16px;
}
.l-Stack[data-gap~="md:5"] > * + * {
margin-top: 24px;
}
.l-Stack[data-gap~="md:6"] > * + * {
margin-top: 32px;
}
.l-Stack[data-gap~="md:7"] > * + * {
margin-top: 40px;
}
.l-Stack[data-gap~="md:8"] > * + * {
margin-top: 48px;
}
.l-Stack[data-gap~="md:9"] > * + * {
margin-top: 64px;
}
.l-Stack[data-gap~="md:10"] > * + * {
margin-top: 80px;
}
}
@media (min-width: 992px) {
.l-Stack[data-gap~="lg:0"] > * + * {
margin-top: 0;
}
.l-Stack[data-gap~="lg:1"] > * + * {
margin-top: 4px;
}
.l-Stack[data-gap~="lg:2"] > * + * {
margin-top: 8px;
}
.l-Stack[data-gap~="lg:3"] > * + * {
margin-top: 12px;
}
.l-Stack[data-gap~="lg:4"] > * + * {
margin-top: 16px;
}
.l-Stack[data-gap~="lg:5"] > * + * {
margin-top: 24px;
}
.l-Stack[data-gap~="lg:6"] > * + * {
margin-top: 32px;
}
.l-Stack[data-gap~="lg:7"] > * + * {
margin-top: 40px;
}
.l-Stack[data-gap~="lg:8"] > * + * {
margin-top: 48px;
}
.l-Stack[data-gap~="lg:9"] > * + * {
margin-top: 64px;
}
.l-Stack[data-gap~="lg:10"] > * + * {
margin-top: 80px;
}
}
@media (min-width: 1280px) {
.l-Stack[data-gap~="xl:0"] > * + * {
margin-top: 0;
}
.l-Stack[data-gap~="xl:1"] > * + * {
margin-top: 4px;
}
.l-Stack[data-gap~="xl:2"] > * + * {
margin-top: 8px;
}
.l-Stack[data-gap~="xl:3"] > * + * {
margin-top: 12px;
}
.l-Stack[data-gap~="xl:4"] > * + * {
margin-top: 16px;
}
.l-Stack[data-gap~="xl:5"] > * + * {
margin-top: 24px;
}
.l-Stack[data-gap~="xl:6"] > * + * {
margin-top: 32px;
}
.l-Stack[data-gap~="xl:7"] > * + * {
margin-top: 40px;
}
.l-Stack[data-gap~="xl:8"] > * + * {
margin-top: 48px;
}
.l-Stack[data-gap~="xl:9"] > * + * {
margin-top: 64px;
}
.l-Stack[data-gap~="xl:10"] > * + * {
margin-top: 80px;
}
}
@media (min-width: 1400px) {
.l-Stack[data-gap~="xxl:0"] > * + * {
margin-top: 0;
}
.l-Stack[data-gap~="xxl:1"] > * + * {
margin-top: 4px;
}
.l-Stack[data-gap~="xxl:2"] > * + * {
margin-top: 8px;
}
.l-Stack[data-gap~="xxl:3"] > * + * {
margin-top: 12px;
}
.l-Stack[data-gap~="xxl:4"] > * + * {
margin-top: 16px;
}
.l-Stack[data-gap~="xxl:5"] > * + * {
margin-top: 24px;
}
.l-Stack[data-gap~="xxl:6"] > * + * {
margin-top: 32px;
}
.l-Stack[data-gap~="xxl:7"] > * + * {
margin-top: 40px;
}
.l-Stack[data-gap~="xxl:8"] > * + * {
margin-top: 48px;
}
.l-Stack[data-gap~="xxl:9"] > * + * {
margin-top: 64px;
}
.l-Stack[data-gap~="xxl:10"] > * + * {
margin-top: 80px;
}
}
.l-Frame {
display: block;
position: relative;
}
.l-Frame::before {
content: "";
float: left;
}
.l-Frame::after {
clear: both;
content: "";
display: block;
}
.l-Frame > * {
align-items: center;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
.l-Frame > img,
.l-Frame > video,
.l-Frame > iframe,
.l-Frame > picture img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
.l-Frame:not([data-raito-type]) {
--x: 1;
--y: 1;
}
.l-Frame:not([data-raito-type])::before {
padding-top: calc(var(--y) / var(--x) * 100%);
}
.l-Frame[data-raito-type~="1:1"]::before {
padding-top: 100%;
}
.l-Frame[data-raito-type~="2:1"]::before {
padding-top: 50%;
}
.l-Frame[data-raito-type~="16:9"]::before {
padding-top: 56.25%;
}
.l-Frame[data-raito-type~="platinumRaito"]::before {
padding-top: 57.7367205543%;
}
.l-Frame[data-raito-type~="goldenRaito"]::before {
padding-top: 61.804697157%;
}
.l-Frame[data-raito-type~="3:2"]::before {
padding-top: 66.6666666667%;
}
.l-Frame[data-raito-type~="silverRaito"]::before {
padding-top: 70.7213578501%;
}
.l-Frame[data-raito-type~="4:3"]::before {
padding-top: 75%;
}
.l-Frame[data-raito-type~="3:4"]::before {
padding-top: 133.3333333333%;
}
.l-Frame[data-raito-type~="2:3"]::before {
padding-top: 150%;
}
@media (min-width: 576px) {
.l-Frame[data-raito-type~="sm:1:1"]::before {
padding-top: 100%;
}
.l-Frame[data-raito-type~="sm:2:1"]::before {
padding-top: 50%;
}
.l-Frame[data-raito-type~="sm:16:9"]::before {
padding-top: 56.25%;
}
.l-Frame[data-raito-type~="sm:platinumRaito"]::before {
padding-top: 57.7367205543%;
}
.l-Frame[data-raito-type~="sm:goldenRaito"]::before {
padding-top: 61.804697157%;
}
.l-Frame[data-raito-type~="sm:3:2"]::before {
padding-top: 66.6666666667%;
}
.l-Frame[data-raito-type~="sm:silverRaito"]::before {
padding-top: 70.7213578501%;
}
.l-Frame[data-raito-type~="sm:4:3"]::before {
padding-top: 75%;
}
.l-Frame[data-raito-type~="sm:3:4"]::before {
padding-top: 133.3333333333%;
}
.l-Frame[data-raito-type~="sm:2:3"]::before {
padding-top: 150%;
}
}
@media (min-width: 768px) {
.l-Frame[data-raito-type~="md:1:1"]::before {
padding-top: 100%;
}
.l-Frame[data-raito-type~="md:2:1"]::before {
padding-top: 50%;
}
.l-Frame[data-raito-type~="md:16:9"]::before {
padding-top: 56.25%;
}
.l-Frame[data-raito-type~="md:platinumRaito"]::before {
padding-top: 57.7367205543%;
}
.l-Frame[data-raito-type~="md:goldenRaito"]::before {
padding-top: 61.804697157%;
}
.l-Frame[data-raito-type~="md:3:2"]::before {
padding-top: 66.6666666667%;
}
.l-Frame[data-raito-type~="md:silverRaito"]::before {
padding-top: 70.7213578501%;
}
.l-Frame[data-raito-type~="md:4:3"]::before {
padding-top: 75%;
}
.l-Frame[data-raito-type~="md:3:4"]::before {
padding-top: 133.3333333333%;
}
.l-Frame[data-raito-type~="md:2:3"]::before {
padding-top: 150%;
}
}
@media (min-width: 992px) {
.l-Frame[data-raito-type~="lg:1:1"]::before {
padding-top: 100%;
}
.l-Frame[data-raito-type~="lg:2:1"]::before {
padding-top: 50%;
}
.l-Frame[data-raito-type~="lg:16:9"]::before {
padding-top: 56.25%;
}
.l-Frame[data-raito-type~="lg:platinumRaito"]::before {
padding-top: 57.7367205543%;
}
.l-Frame[data-raito-type~="lg:goldenRaito"]::before {
padding-top: 61.804697157%;
}
.l-Frame[data-raito-type~="lg:3:2"]::before {
padding-top: 66.6666666667%;
}
.l-Frame[data-raito-type~="lg:silverRaito"]::before {
padding-top: 70.7213578501%;
}
.l-Frame[data-raito-type~="lg:4:3"]::before {
padding-top: 75%;
}
.l-Frame[data-raito-type~="lg:3:4"]::before {
padding-top: 133.3333333333%;
}
.l-Frame[data-raito-type~="lg:2:3"]::before {
padding-top: 150%;
}
}
@media (min-width: 1280px) {
.l-Frame[data-raito-type~="xl:1:1"]::before {
padding-top: 100%;
}
.l-Frame[data-raito-type~="xl:2:1"]::before {
padding-top: 50%;
}
.l-Frame[data-raito-type~="xl:16:9"]::before {
padding-top: 56.25%;
}
.l-Frame[data-raito-type~="xl:platinumRaito"]::before {
padding-top: 57.7367205543%;
}
.l-Frame[data-raito-type~="xl:goldenRaito"]::before {
padding-top: 61.804697157%;
}
.l-Frame[data-raito-type~="xl:3:2"]::before {
padding-top: 66.6666666667%;
}
.l-Frame[data-raito-type~="xl:silverRaito"]::before {
padding-top: 70.7213578501%;
}
.l-Frame[data-raito-type~="xl:4:3"]::before {
padding-top: 75%;
}
.l-Frame[data-raito-type~="xl:3:4"]::before {
padding-top: 133.3333333333%;
}
.l-Frame[data-raito-type~="xl:2:3"]::before {
padding-top: 150%;
}
}
@media (min-width: 1400px) {
.l-Frame[data-raito-type~="xxl:1:1"]::before {
padding-top: 100%;
}
.l-Frame[data-raito-type~="xxl:2:1"]::before {
padding-top: 50%;
}
.l-Frame[data-raito-type~="xxl:16:9"]::before {
padding-top: 56.25%;
}
.l-Frame[data-raito-type~="xxl:platinumRaito"]::before {
padding-top: 57.7367205543%;
}
.l-Frame[data-raito-type~="xxl:goldenRaito"]::before {
padding-top: 61.804697157%;
}
.l-Frame[data-raito-type~="xxl:3:2"]::before {
padding-top: 66.6666666667%;
}
.l-Frame[data-raito-type~="xxl:silverRaito"]::before {
padding-top: 70.7213578501%;
}
.l-Frame[data-raito-type~="xxl:4:3"]::before {
padding-top: 75%;
}
.l-Frame[data-raito-type~="xxl:3:4"]::before {
padding-top: 133.3333333333%;
}
.l-Frame[data-raito-type~="xxl:2:3"]::before {
padding-top: 150%;
}
}
.l-Center {
box-sizing: content-box;
margin-left: auto;
margin-right: auto;
max-width: 640px;
padding-left: 24px;
padding-right: 24px;
}
.l-Center > * {
box-sizing: border-box;
}
.sw-Headline {
display: flex;
font-family: "Lobster", cursive;
font-size: 2.5rem;
justify-content: center;
padding-bottom: 1em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment