Merge branch 'main' of github.com:Moosync/Moosync.github.io

Author: Ovenoboyo

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Moosync
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

_includes/head.html

@@ -3,8 +3,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   {%- seo -%}
-  <link rel="stylesheet" href="{{ " /assets/main.css" | relative_url }}"> {%- feed_meta -%} {%- if jekyll.environment ==
+  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}"> {%- feed_meta -%} {%- if jekyll.environment ==
   'production' and
   site.google_analytics -%} {%- include google-analytics.html -%} {%- endif -%}
   {%- include custom-head.html -%}
-</head>
+</head>

assets/css/index.css

@@ -13,13 +13,18 @@
   scroll-behavior: smooth;
   font-family: "Lexend Deca", sans-serif;
 }
-
+::selection {
+  color: var(--green-primary);
+  background: #141414;
+}
 body {
   overflow: overlay;
   transition: color 0.2s ease-in;
   background-color: #212121 !important;
 }
 
+nav > * a,
+nav > * a:hover,
 footer > * a,
 footer > * a:hover {
   color: white !important;
@@ -37,6 +42,7 @@ a:hover {
 .main {
   min-height: 100vh;
   display: block;
+  color: white !important;
 }
 
 .nav__bar {
@@ -57,9 +63,8 @@ a:hover {
 }
 
 .nav__bar > * a:hover {
-  text-decoration: none;
+  color: var(--green-primary) !important;
 }
-
 .login__navbar {
   background-color: none;
   background-image: linear-gradient(
@@ -213,7 +218,7 @@ a:hover {
 }
 
 .moosync__navbar-mobileScreen-links li:hover {
-  color: var(--color-text-green);
+  color: #5bb67a;
 }
 
 #hamburger-close {
@@ -267,13 +272,13 @@ a:hover {
 .moosync__navbar-mobileScreen-links li {
   margin-top: 2rem;
   font-size: 2rem;
-  color: white;
+  color: var(--color-white);
   text-align: center;
   cursor: pointer;
 }
 
 .moosync__navbar-mobileScreen-links li:hover {
-  color: var(--green-primary);
+  color: var(--color-text-green);
 }
 
 #hamburger-close {
@@ -513,22 +518,37 @@ a:hover {
 }
 
 .usage {
+  height: 14rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: white;
+  padding: 10px;
+}
+.usage:hover{
+  box-sizing: border-box;
+  border: #4dc4ab solid 1px;
+  border-radius: 15px;
+  background-color: #212121;
 }
 
 .usage__icons {
   width: 5rem;
+  padding: 8px;
   object-fit: cover;
 }
+/* .usage__icons:hover{
+  border-radius: 15px;
+  border: solid #4e9f6a 1px;
+  transition: all ease-in 5ms;
+} */
 
 .info__text__4 {
   width: 10rem;
   padding: 1rem 0;
   text-align: center;
+  cursor:default;
 }
 
 /* Video Section Style */
@@ -602,6 +622,7 @@ a:hover {
 }
 
 .count__box:hover {
+  cursor: pointer;
   color: #faf3e3;
   width: 16rem;
   margin-bottom: 0;
@@ -1163,23 +1184,18 @@ a:hover {
   margin-top: 30px;
   padding: 15px;
 }
-
-::-webkit-scrollbar,
+::-webkit-scrollbar {
+  overflow: scroll;
+  padding-right: 10px;
+  width: 6px;
+} 
 ::-webkit-scrollbar-thumb {
-  width: 26px;
-  border-radius: 13px;
+  border-radius: 15px;
   background-clip: padding-box;
-  border: 10px solid transparent;
-  min-height: 50px;
-}
-
-::-webkit-scrollbar-thumb {
-  box-shadow: inset 0 0 0 10px;
-  min-height: 40px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
+  border: 5px solid var(--green-primary);
+  box-shadow: inset 0 0 0 1px;
+  min-height: 2px;
+  background: var(--green-primary);
 }
 
 .icon-linux,

index.html

@@ -98,6 +98,49 @@
       </button>
       <button id="download__btn" class="navigation__buttons">Download</button>
     </div>
+    <div class="moosync__navbar-mobileScreen">
+        <img
+          loading="lazy"
+          src="/assets/img/hamburgerIcon.svg"
+          alt="Menu"
+          id="hamburger-open"
+        />
+        <div
+          class="moosync__navbar-mobileScreen-overlayClose flex__center slide__bottom"
+          id="menu-overlay"
+        >
+          <img
+            loading="lazy"
+            src="/assets/img/hamburgerCloseIcon.svg"
+            alt="Close"
+            id="hamburger-close"
+          />
+          <ul class="moosync__navbar-mobileScreen-links">
+            <li class="p__normal" id="home"><a href="#">Home</a></li>
+            <li class="p__normal" id="privacy">
+              <a
+                href="https://www.iubenda.com/privacy-policy/70189564/full-legal"
+                >Privacy Policy</a
+              >
+            </li>
+            <li class="p__normal" id="documentation">
+              <a href="/wiki/">Documentation</a>
+            </li>
+            <li class="p__normal" id="github">
+              <a href="https://github.com/Moosync/Moosync">Github</a>
+            </li>
+            <li id="download">
+              <button
+                type="button"
+                name="button"
+                class="navigation__buttons"
+                id="download__btn"
+              >
+                Download
+              </button>
+            </li>
+          </ul>
+        </div>
     </div>
   </nav>
   <header class="heading__page">
@@ -169,7 +212,7 @@
         <img loading="lazy" src="/assets/img/usageIcon3.svg" alt="" class="usage__icons" />
         <span class="info__text__4">Seamlessly integrate your Spotify and Youtube playlists.</span>
       </span>
-      <span class="usage">
+      <span class="usg_mid">
         <img loading="lazy" src="/assets/img/laptopbg.png" alt="" id="usage__mid__img" />
       </span>
       <span id="usage__mid" class="usage">