diff --git a/examples/Poiret One.woff2 b/examples/Poiret One.woff2 new file mode 100644 index 00000000..46d81af1 Binary files /dev/null and b/examples/Poiret One.woff2 differ diff --git a/examples/demo.css b/examples/demo.css new file mode 100644 index 00000000..be9bd32d --- /dev/null +++ b/examples/demo.css @@ -0,0 +1,74 @@ +@font-face { + font-family: "Poiret One"; + src: url("Poiret One.woff2"); +} +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poiret One"; +} +html, body { + min-height: 100vh; + width: 100vw; +} +body { + background: #fff; +} +.wrapper { + width: 100vw; + max-width: 1000px; + height: 100%; + min-height: 100vh; + margin: auto; + position: relative; +} +header { + position: relative; + height: 150px; + font-size: 45px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} +footer { + position: absolute; + bottom: 0; + left: 0; + display: flex; + width: 100%; + align-items: center; + justify-content: space-around; + padding: 10px 0; + font-size: 20px; +} +section { + position: relative; + width: 100%; + min-height: 100px; + padding: 10px 15px; + font-size: 25px; + margin-bottom: 50px; +} +.rh { + display: flex; + flex-direction: column; +} +section .r { + display: flex; + flex-direction: row; + flex: auto; + align-items: center; + justify-content: space-around; + margin: 10px; +} +section .c { + flex: auto; + display: flex; + align-items: center; + justify-content: center; +} +section span { + margin: 0 5px; +} diff --git a/examples/fisheye.html b/examples/fisheye.html index e854f2e9..f7221868 100644 --- a/examples/fisheye.html +++ b/examples/fisheye.html @@ -7,81 +7,129 @@ - - - + + + - - -
-
+