update: links page

.cpanel.yml

@@ -4,6 +4,5 @@ deployment:
     - /bin/cp index.html ~/public_html
     - /bin/cp about.html ~/public_html
     - /bin/cp -R assets ~/public_html
-    - /bin/cp -R dev ~/public_html
+    - /bin/cp -R c ~/public_html
-    - /bin/cp -R links ~/public_html
 

DEVELOPMENT/dependency.sh

@@ -21,5 +21,5 @@ whereis php
 # check php version with:
 php --version
 
-# When running in local machine link /weblink to ./www
+# When running server in local machine link /weblink to ./www
 ln -sv /path/to/www/ /weblink

assets/css/main.css

@@ -4,23 +4,63 @@ body {
 body .block-out {
   display: flex;
   flex-direction: column;
-  margin: 0rem 5rem;
   align-self: center;
 }
+@media only screen and (min-width: 768px) {
+  body .block-out {
+    margin: 0rem 5rem;
+  }
+}
 body .block-out .block-in {
-  background-color: #394867;
+  background-color: #173652;
   color: #F1F6F9;
   border-radius: 10px;
   border-style: groove;
   padding: 1rem 0;
   margin: 1rem 0;
 }
-body .block-out .block-in .basic-list {
+body .block-out .block-in .list-header {
   text-align: center;
+}
+body .block-out .block-in .basic-list {
   list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0px;
 }
 body .block-out .block-in .basic-list > .block-list-in {
-  padding: 1rem 0;
+  padding: 0rem 0;
+  margin: 0.5rem 0;
+  text-align: center;
+  background-color: #394867;
+  border-radius: 10px;
+  border-style: dotted;
+  width: fit-content;
+  min-width: 50%;
+}
+@media only screen and (max-width: 768px) {
+  body .block-out .block-in .basic-list > .block-list-in {
+    min-width: 90%;
+  }
+}
+body .block-out .block-in .basic-list > .block-list-in .in-p {
+  margin: 0px;
+  padding: 1rem;
+  font-size: x-large;
+  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
+}
+body .block-out .block-in .basic-list > .block-list-in > a {
+  color: #F1F6F9;
+}
+body .block-out .block-in .basic-list > .block-list-in > a:hover {
+  color: #9BA4B5;
+}
+body .block-out .block-in .basic-list > .block-list-in > a:visited {
+  color: #a54051;
+}
+body .block-out .block-in .basic-list.block-hover:hover {
+  transition: all;
 }
 
 /*# sourceMappingURL=main.css.map */

assets/css/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss"],"names":[],"mappings":"AAeA;EACE,kBAhBgB;;AAkBhB;EACE;EACA;EACA;EACA;;AAEA;EACE,kBAxBY;EAyBZ,OAvBY;EAyBZ;EACA;EAEA;EACA;;AAEA;EACE;EACA;;AAEA;EACE","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss"],"names":[],"mappings":"AAeA;EACE,kBAhBgB;;AAkBhB;EACE;EACA;EAMA;;AAJA;EAJF;IAKI;;;AAKF;EACE;EACA,OA3BY;EA6BZ;EACA;EAEA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;;AAGA;EACE;EACA;EAEA;EAEA,kBAxDQ;EAyDR;EACA;EAEA;EACA;;AAEA;EAbF;IAcI;;;AAGF;EACE;EACA;EAEA;EACA;;AAKF;EACE,OA5EM;;AA8EN;EACE,OAhFI;;AAmFN;EACE;;AAMN;EACE","file":"main.css"}

assets/scss/main.scss

@@ -19,11 +19,15 @@ body {
   .block-out {
     display: flex;
     flex-direction: column;
-    margin: 0rem 5rem;
+
+    @media only screen and (min-width: 768px) {
+      margin: 0rem 5rem;
+    }
+
     align-self: center;
 
     .block-in {
-      background-color: $cur-color2;
+      background-color: adjust-color($color: $cur-color1, $red: -10, $green: 12, $blue: 20, $alpha: 0.8);
       color: $cur-color4;
 
       border-radius: 10px;
@@ -32,12 +36,62 @@ body {
       padding: 1rem 0;
       margin: 1rem 0;
 
-      .basic-list {
+      .list-header {
         text-align: center;
+      }
+
+      .basic-list {
         list-style-type: none;
-  
+        display: flex;
-        >.block-list-in{
+        flex-direction: column;
-          padding: 1rem 0;
+
+        align-items: center;
+        padding: 0px;
+
+
+        >.block-list-in {
+          padding: 0rem 0;
+          margin: 0.5rem 0;
+
+          text-align: center;
+
+          background-color: $cur-color2;
+          border-radius: 10px;
+          border-style: dotted;
+
+          width: fit-content;
+          min-width: 50%;
+
+          @media only screen and (max-width: 768px) {
+            min-width: 90%;
+          }
+
+          .in-p {
+            margin: 0px;
+            padding: 1rem;
+
+            font-size: x-large;
+            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+          }
+
+
+
+          >a {
+            color: $cur-color4;
+
+            &:hover {
+              color: $cur-color3;
+            }
+
+            &:visited {
+              color: adjust-color($color: $cur-color3, $red: 10, $green: -100, $blue: -100, $alpha: 1.0);
+            }
+          }
+
+        }
+
+        &.block-hover:hover {
+          transition: all;
         }
       }
     }

c/link/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script>window.location.replace("https://asandikci.com/c/links")</script>
+  </head>
+  <body>
+
+  </body>
+</html>

c/links/index.php

@@ -39,26 +39,35 @@ if (!$_SERVER['DOCUMENT_ROOT']) {
 
 
 <body>
-  <h1>STILL UNDER ACTIVE DEVELOPMENT</h1>
-
   <div class="block-out">
 
-    <div class="block-in">
+    <div class="block-in block-hover">
+      <h2 class="list-header">Open Source / Decentralized Platform Links</h2>
       <ul class="basic-list">
-        <li class="block-list-in"><a href="https://asandikci.com/about">About me (not ready)</a></li>
+        <li class="block-list-in"><a href="https://asandikci.com/c/about">
-        <li class="block-list-in"><a href="https://mastodon.social/@asandikci">Mastodon (Fediverse)</a></li>
+            <p class="in-p">About me</p>
+          </a></li>
+        <li class="block-list-in"><a href="https://mastodon.social/@asandikci">
+            <p class="in-p">Fediverse (Mastodon)</p>
+          </a></li>
       </ul>
     </div>
 
-    <div class="block-in">
+    <div class="block-in block-hover">
+      <h2 class="list-header">Other Platform Links</h2>
       <ul class="basic-list">
-        <li class="block-list-in"><a href="https://www.instagram.com/aliberksandikci/">Instagram</a></li>
+        <li class="block-list-in"><a href="https://www.instagram.com/aliberksandikci/">
-        <li class="block-list-in">Discord: kinetokor#7641</li>
+            <p class="in-p">Instagram</p>
+          </a></li>
+        <li class="block-list-in">
+          <p class="in-p">Discord: kinetokor#7641</p>
+        </li>
       </ul>
     </div>
 
   </div>
 
+  <p style="text-align:center">This page is still in active development</p>
   <?php
   $dir = new DirectoryIterator($_SERVER['DOCUMENT_ROOT'] . "/assets/js");
   foreach ($dir as $file) {