Update for launch

saysora · Mar 23, 2019 · c1fb31a · c1fb31a
1 parent 1d887ef
commit c1fb31a
Show file tree

Hide file tree

Showing 38 changed files with 451 additions and 87 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-prepros-6.config
+prepros-6.config
+site.webmanifest
diff --git a/README.html b/README.html
@@ -5,14 +5,13 @@
       </head>
       <body>
         <h1 id="gummigram">Gummigram</h1>
+<p><img src="/images/gummigram.jpg" alt=""></p>
 <p>An HTML, CSS, JS (jQuery) based recreation of the Kingdom Hearts 3 Loading Screen.
 With it, you can create your own posts as your favorite Kingdom Hearts characters, add comments and create fictional dialogue between the characters on this silly social page.</p>
 <h2 id="todo">TODO</h2>
-<ul>
-<li>Add Post Editing</li>
-<li>Add Character Choice on Comment Creation</li>
-</ul>
-<p>Suggestions?</p>
+<p>Suggestions?
+<a href="https://discord.gg/fbChRKn">Gummigram Discord</a>
+<a href="https://discord.gg/teSEFWZ">Heart Container Heroes Discord</a></p>
 
       </body>
     </html>
diff --git a/README.md b/README.md
@@ -1,11 +1,14 @@
 # Gummigram
 
+![](/images/gummigram.jpg)
+
 An HTML, CSS, JS (jQuery) based recreation of the Kingdom Hearts 3 Loading Screen.
 With it, you can create your own posts as your favorite Kingdom Hearts characters, add comments and create fictional dialogue between the characters on this silly social page.
 
 ## TODO
 
-* Add Post Editing
-* Add Character Choice on Comment Creation
 
-Suggestions?
+
+Suggestions?
+[Gummigram Discord](https://discord.gg/fbChRKn)
+[Heart Container Heroes Discord](https://discord.gg/teSEFWZ)
diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png
diff --git a/android-chrome-256x256.png b/android-chrome-256x256.png
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
diff --git a/browserconfig.xml b/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/css/hearts.css b/css/hearts.css
@@ -174,6 +174,15 @@ body {
     color: #000;
     font-size: 1.2em;
     vertical-align: middle; }
+    .feed-item .item-caption .item-caption-input {
+      font-family: 'Coda';
+      width: 100%;
+      resize: none;
+      font-size: 1em;
+      border: 1px solid #000;
+      background: #fff;
+      color: #000;
+      padding: 5px; }
   .feed-item .item-comments {
     background: #fff;
     width: 100%;
@@ -188,6 +197,10 @@ body {
       padding-bottom: 10px;
       width: 100%;
       margin: auto; }
+  .feed-item .comment-input-fields {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex; }
   .feed-item .comment-input-field {
     width: 100%;
     font-size: 1em;
@@ -236,6 +249,14 @@ body {
       max-width: 100%;
       height: auto;
       vertical-align: bottom; }
+  .comment-list .comment-item .comment-tools {
+    opacity: 0;
+    cursor: default;
+    -webkit-transition: opacity .200s ease;
+    -o-transition: opacity .200s ease;
+    transition: opacity .200s ease; }
+  .comment-list .comment-item:hover .comment-tools {
+    opacity: 1; }
 
 .comment-list .comment-message {
   width: 100%; }
@@ -321,7 +342,8 @@ body {
       padding: 25px 10px 10px;
       background: #fff;
       color: #d4af37;
-      font-size: 1.4em; }
+      font-size: 1.4em;
+      text-align: center; }
     .modal .modal-card .modal-body {
       padding: 10px; }
   .modal .modal-close {
@@ -477,3 +499,56 @@ body {
     background: url("/images/hearttag.png") no-repeat;
     background-size: 20px;
     vertical-align: middle; }
+
+/* Mini char selector for comments */
+.mini-char-selector {
+  background: #fff;
+  width: 50px;
+  height: 50px;
+  padding: 1px;
+  position: relative; }
+  .mini-char-selector .selected-char {
+    border: 1px solid #d4af37;
+    border-radius: 50%;
+    overflow: hidden;
+    background: #333; }
+  .mini-char-selector img {
+    max-width: 100%;
+    height: auto;
+    vertical-align: bottom; }
+  .mini-char-selector .selected-char-options {
+    margin-top: 5px;
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    max-height: 0;
+    background: #fff;
+    overflow: hidden;
+    z-index: 40; }
+    .mini-char-selector .selected-char-options.active {
+      border: 1px solid #000;
+      max-height: 500px;
+      overflow-y: auto; }
+    .mini-char-selector .selected-char-options::-webkit-scrollbar {
+      width: 1px; }
+  .mini-char-selector .selected-char-option {
+    padding: 5px; }
+    .mini-char-selector .selected-char-option:hover {
+      background: #d4af37; }
+    .mini-char-selector .selected-char-option .char-option-image {
+      border: 1px solid #d4af37;
+      border-radius: 50%;
+      overflow: hidden;
+      background: #333; }
+    .mini-char-selector .selected-char-option.active {
+      background: #c7a22b; }
+
+/* Info */
+.info {
+  text-align: center; }
+  .info p {
+    margin: 10px 0; }
+  .info a {
+    color: #1E2274; }
+  .info .social {
+    padding: 10px 0; }
diff --git a/css/hearts.scss b/css/hearts.scss
@@ -209,6 +209,19 @@ $hashColor: #1E2274;
       font-size: 1.2em;
 
       vertical-align: middle;
+
+
+      .item-caption-input {
+        font-family: 'Coda';
+        width: 100%;
+        resize: none;
+        font-size: 1em;
+        border: 1px solid #000;
+        background: #fff;
+        color: #000;
+        padding: 5px;
+      }
+
     }
 
     .item-comments {
@@ -230,6 +243,10 @@ $hashColor: #1E2274;
         margin: auto;
       }
     }
+
+    .comment-input-fields {
+      display: flex;
+    }
 
     .comment-input-field {
       width: 100%;
@@ -251,6 +268,7 @@ $hashColor: #1E2274;
   .comment-list {
 
     .comment-item {
+
       position: relative;
       z-index: 5;
       &:not(:first-child) {
@@ -288,6 +306,19 @@ $hashColor: #1E2274;
           vertical-align: bottom;
         }
       }
+
+      .comment-tools {
+        opacity: 0;
+        cursor: default;
+
+        transition: opacity .200s ease;
+      }
+
+      &:hover {
+        .comment-tools {
+          opacity: 1;
+        }
+      }
 
     }
 
@@ -382,6 +413,7 @@ $hashColor: #1E2274;
         background: #fff;
         color: #d4af37;
         font-size: 1.4em;
+        text-align: center;
       }
 
       .modal-body {
@@ -589,4 +621,90 @@ $hashColor: #1E2274;
       background-size: 20px;
       vertical-align: middle;
     }
+  }
+
+  /* Mini char selector for comments */
+
+  .mini-char-selector {
+
+    background: #fff;
+    width: 50px;
+    height: 50px;
+    padding: 1px;
+    position: relative;
+
+
+
+    .selected-char {
+      border: 1px solid #d4af37;
+      border-radius: 50%;
+      overflow: hidden;
+      background: #333;
+
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+      vertical-align: bottom;
+    }
+
+    .selected-char-options {
+      margin-top: 5px;
+      position: absolute;
+      bottom: 100%;
+      left: 0;
+      max-height: 0;
+      background: #fff;      
+      overflow: hidden;
+      z-index: 40;
+
+      &.active {
+        border: 1px solid #000;
+        max-height: 500px;
+        overflow-y: auto;
+      }
+
+      &::-webkit-scrollbar {
+        width: 1px;
+      }
+    }
+
+    .selected-char-option {
+      padding: 5px;
+
+      &:hover {
+        background: #d4af37;
+      }
+
+      .char-option-image {
+        border: 1px solid #d4af37;
+        border-radius: 50%;
+        overflow: hidden;
+        background: #333;
+      }
+
+      &.active {
+        background: darken(#d4af37, 5%);
+      }
+    }    
+  }
+
+  /* Info */
+
+
+  .info {
+    text-align: center;
+
+    p {
+      margin: 10px 0;
+    }
+
+    a {
+      color: #1E2274;
+    }
+
+    .social {
+      padding: 10px 0;
+    }
   }
diff --git a/favicon-16x16.png b/favicon-16x16.png
diff --git a/favicon-32x32.png b/favicon-32x32.png
diff --git a/favicon.ico b/favicon.ico
diff --git a/images/characters/aqua-avatar.png b/images/characters/aqua-avatar.png
diff --git a/images/characters/kairi-avatar.png b/images/characters/kairi-avatar.png
diff --git a/images/characters/kh-axel.png b/images/characters/kh-axel.png
diff --git a/images/characters/kh-demyx.png b/images/characters/kh-demyx.png
diff --git a/images/characters/kh-larxene.png b/images/characters/kh-larxene.png
diff --git a/images/characters/kh-lexaus.png b/images/characters/kh-lexaus.png
diff --git a/images/characters/kh-luxord.png b/images/characters/kh-luxord.png
diff --git a/images/characters/kh-marluxia.png b/images/characters/kh-marluxia.png
diff --git a/images/characters/kh-saix.png b/images/characters/kh-saix.png
diff --git a/images/characters/kh-ventus.png b/images/characters/kh-ventus.png
diff --git a/images/characters/kh-vexen.png b/images/characters/kh-vexen.png
diff --git a/images/characters/kh-xaldin.png b/images/characters/kh-xaldin.png
diff --git a/images/characters/kh-xemnas.png b/images/characters/kh-xemnas.png
diff --git a/images/characters/kh-xigbar.png b/images/characters/kh-xigbar.png
diff --git a/images/characters/kh-zexion.png b/images/characters/kh-zexion.png
diff --git a/images/characters/namine-avatar.png b/images/characters/namine-avatar.png
diff --git a/images/characters/riku-avatar.png b/images/characters/riku-avatar.png
diff --git a/images/characters/roxas-avatar.png b/images/characters/roxas-avatar.png
diff --git a/images/characters/sora-avatar.png b/images/characters/sora-avatar.png
diff --git a/images/characters/terra-avatar.png b/images/characters/terra-avatar.png
diff --git a/images/favicon.png b/images/favicon.png
diff --git a/images/grummigram.jpg b/images/grummigram.jpg
diff --git a/index.html b/index.html
@@ -8,6 +8,13 @@
     <link rel="stylesheet" href="css/hearts.css" />
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Coda:400,800" rel="stylesheet">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#2b5797">
+    <meta name="theme-color" content="#ffffff">
 </head>
 <body>
 <!-- This is holds the insta feed-->
@@ -71,7 +78,9 @@
       <a class="side-menu-option" href="#charModal">
         Change Account
       </a>
-
+      <a class="side-menu-option" href="#infoModal">
+        Information
+      </a>
       </div>
     </div>
 
@@ -131,6 +140,39 @@
       </div>
     </div>
   </div>
+
+  <div class="modal info-modal" id="infoModal">
+    <div class="modal-card">
+      <div class="modal-title">
+        Information
+      </div>
+      <div class="modal-body">
+        <a class="modal-close" href="#" id="postModalClose">X</a>
+        <div class="info">
+          <p>This website is merely a fan creation based off of the series Kingdom Hearts and all the characters and concepts within there.
+            <br>All characters/etc belong to Square Enix and Disney.
+          </p>
+
+          <p>Gummigram was made with love by <a href="http://heartcontainerheroes.com/#saysora"><span class="heart">Saysora</span></span></a> of the <a href="http://heartcontainerheroes.com"><span class="heart">Heart Container Heroes</span></a></p>
+
+          <p class="social">
+              <a href="https://github.com/saysora/gummigram"><span class="heart">GummiGram Github</span></a>
+          </p>
+
+          <p class="social">
+            <a href="http://twitch.tv/saysora"><span class="heart">Twitch</span></a> 
+            <a href="http://twitter.com/theSaysora"><span class="heart">Twitter</span></a> 
+          </p>
+
+          <p class="social">
+            <a href="https://discord.gg/fbChRKn"><span class="heart">Gummigram Discord (Gummicord)</span></a> 
+            <a href="https://discord.gg/teSEFWZ"><span class="heart">Heart Container Hero Discord</span></a> 
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
   <script type="text/javascript" src="js/kingdom.js"></script>
 </body>