start

storymessinger · Nov 18, 2016 · 03cd527 · 03cd527
commit 03cd527
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 0 deletions.
diff --git a/.htaccess b/.htaccess
@@ -0,0 +1,7 @@
+<IfModule mod_url.c>
+    checkURL On
+    ServerEncoding EUC-KR
+    ClientEncoding UTF-8
+</IfModule>
+php_flag register_globals on
+php_flag register_long_arrays on
diff --git a/css/home.css b/css/home.css
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,136 @@
+html {
+    width: 100%;
+    height: 100%;
+    /*    background: linear-gradient(225deg, #1185ec, #a4aff7, #cc7fee);*/
+    font-family: 'Cabin';
+    font-size: 16px;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    background: linear-gradient(225deg, #1185ec, #a4aff7, #edbef3, #f3a0aa);
+    background-size: 600% 600%;
+    animation: cssGradientAnimator 8s ease infinite;
+}
+
+@keyframes cssGradientAnimator { 
+    0%{background-position:0% 50%}
+    50%{background-position:100% 50%}
+    100%{background-position:0% 50%}
+}
+
+.title {
+    font-size: 1.3em; 
+    position: absolute;
+    top: 1em;
+    left: 1em;
+    color: lightgoldenrodyellow;
+}
+
+.footer {
+    font-size: 1.3em; 
+    position: absolute;
+    bottom: 1em;
+    right: 1em;
+    color: lightgoldenrodyellow;
+}
+
+.main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.gastby {
+    width: 100%;
+    height: 100%;
+    opacity: 1.0;
+
+    margin: 0;
+    position:relative;
+    overflow: hidden;
+
+    -webkit-transition: opacity 2s ease-in-out 0s;
+    transition: opacity 2s ease-in-out 0s;
+}
+
+.gastby:hover {
+    opacity: 0.2;
+}
+
+.gatsby::-webkit-scrollbar {
+    width: 0px;
+}
+
+.gastby p {
+    color: lightgoldenrodyellow;
+    font-size: 8vw;
+    top: 20px;
+    padding: 3vw 6vw 3vw 6vw;
+
+    opacity: 1;
+
+    position: absolute;
+    overflow-y:scroll;
+    max-height: 75vh;
+
+}
+
+/*
+.gastby p:hover {
+    opacity: 0.5;
+}
+*/
+
+/*
+.rotate-box {
+    font-size: 1.5em;
+    margin: auto;
+    background-color: lightgoldenrodyellow;
+    
+    width: 20vw;
+    height: 20vw;
+    opacity: 0;
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+    
+    -webkit-transition: 
+        width 2s ease-out 0s,
+        height 2s ease-out 0s, 
+        opacity 2s ease-out 0s,
+        transform 2s ease-out 0s;
+    transition: 
+        width 2s ease-out 0s,
+        height 2s ease-out 0s, 
+        opacity 2s ease-out 0s,
+        transform 2s ease-out 0s;
+}
+
+.rotate-box:hover {
+    width: 40vw;
+    height: 40vw;
+    opacity: 0.7;
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+*/
+
+/*    animation: rotateBox 1.5s ease-out forwards;*/
+
+/*
+@keyframes rotateBox {
+    0% {
+        transform: scale(.5);
+    }
+    100% {
+        transform: scale(1) rotate(45deg);
+        background-color: lightgoldenrodyellow;
+        opacity: 0.7;
+    } 
+}*/
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+
+<head>
+    <meta charset=utf-8>
+    <meta name="viewport" content="width=device-width,initial-scale=1" name=viewport>
+    <title>Fantastic-Conceits by J</title>
+    <link type="text/css" rel="stylesheet" href="css/style.css" />
+    <script src="js/lib/jquery-3.1.1.min.js"></script>
+<!-- JS: Using the webfont loader async-->
+    <script>
+        WebFontConfig = {
+            google: {
+                families: ['Cabin:400,400i,700']
+            }
+        };
+
+        (function (d) {
+            var wf = d.createElement('script'),
+                s = d.scripts[0];
+            wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';
+            s.parentNode.insertBefore(wf, s);
+        })(document);
+    </script>
+</head>
+
+<body>
+    <div class="title">Fantastical Conceits</div>
+    <div class="main"> 
+<!--        <div class="rotate-box"></div>-->
+        <div class="gastby">
+            <p>The most grotesque and fantastic conceits haunted him in his bed at night. A universe of ineffable gaudiness spun itself out in his brain while the clock ticked on the wash-stand and the moon soaked with wet light his tangled clothes upon the floor. Each night he added to the pattern of his fancies until drowsiness closed down upon some vivid scene with an oblivious embrace.</p> 
+        </div>
+    </div>
+
+    <div class="footer">Coming Soon...</div>
+    <!--JS: main javascript for index.html-->
+    <script type="text/javascript" src="js/main.js"></script>
+</body>
diff --git a/js/main.js b/js/main.js