lot of fixes

gatheesha · Jun 9, 2023 · 78e4a4d · 78e4a4d
1 parent f77e99e
commit 78e4a4d
Show file tree

Hide file tree

Showing 84 changed files with 15,399 additions and 334 deletions.
diff --git a/.husky/.gitignore b/.husky/.gitignore
diff --git a/.husky/pre-push b/.husky/pre-push
diff --git a/assets/css/footer.scss b/assets/css/footer.scss
@@ -1,4 +1,4 @@
-.footer {
+/* .footer {
   padding: 40px 0;
   flex-grow: 0;
   opacity: .5;
@@ -41,27 +41,35 @@
       white-space: nowrap;
     }
   }
-}
+} */
 
 .extended_footer {
   /*background-color: $accent;*/
 
-  display: flex;
-  height: 10vh;
+  // display: flex;
+  //height: 10vh;
   width: 100%;
   max-width: 100vw;
-  margin: 0 auto;
-  box-sizing:content-box;
+  // margin: 0 auto;
+  // box-sizing:border-box;
   background-color: $accent;
-  line-height: 1.3;
-  position: relative;
+  // line-height: 1.3;
+  // position: relative;
+  text-align: center;
 
-  ul {
+  &__links {
     display: inline-grid;
     grid-auto-flow: row;
     grid-gap: 24px;
     justify-items: center;
     margin: auto;
+    padding: 40px 0;
+  }
+
+  .copyright {
+    padding: 20px 0;
+    color: #FFFFFF;
+    opacity: .2;
   }
 
   @media (min-width: 500px) {
@@ -73,20 +81,18 @@
   a {
     color: white;
     text-decoration: none;
-    box-shadow: inset 0 -1px 0 hsla(0, 0%, 100%, 0.4);
-  }
-
-  a:hover {
-    box-shadow: inset 0 -1.2em 0 hsla(0, 0%, 100%, 0.4);
   }
-  
+
   li:last-child {
     grid-column: 1 / 2;
-    grid-row: 1 / 2;
+    grid-row: 1;
   }
-
-  li:hover ~ li p {
-    animation: wave-animation 0.3s infinite;
+  li {
+    transition: all 0.1s ease-in-out;
+  }
+
+  li:hover{
+    transform: scale(1.4);
   }
 
   @keyframes wave-animation {

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -111,7 +111,7 @@ figure {
     margin-top: 0;
     background: $accent;
     color: $background;
-    opacity: 0.5;
+    // opacity: 0.5;
 
     &.left {
       text-align: left;

diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -17,3 +17,10 @@
 @import "code";
 @import "terms";
 @import "gist";
+
+// importing core styling file
+@import "../fontawesome/scss/fontawesome.scss";
+
+// our project needs Solid + Brands
+@import "../fontawesome/scss/solid.scss";
+@import "../fontawesome/scss/brands.scss";
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
@@ -1,126 +1,128 @@
-code.language-css,
-code.language-scss,
-.token.boolean,
-.token.string,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.language-scss .token.string,
-.style .token.string,
-.token.attr-value,
-.token.keyword,
-.token.control,
-.token.directive,
-.token.statement,
-.token.regex,
-.token.atrule,
-.token.number,
-.token.inserted,
-.token.important {
-  color: $accent !important;
-}
-
-.token.tag-id,
-.token.atrule-id,
-.token.operator,
-.token.unit,
-.token.placeholder,
-.token.variable,
-.token.tag,
-.token.attr-name,
-.token.namespace,
-.token.deleted,
-.token.property,
-.token.class-name,
-.token.constant,
-.token.symbol {
-  color: transparentize($accent, .3) !important;
-}
-
-.token.property,
-.token.function,
-.token.function-name,
-.token.deleted,
-code.language-javascript,
-code.language-html,
-.command-line-prompt > span:before {
-  color: mix($accent, #999, .9) !important;
-}
-
-.token.selector,
-.token.tag,
-.token.punctuation {
-  color: white;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: rgba(255, 255, 255, .3) !important;
-}
-
-.token.namespace {
-  opacity: .7 !important;
-}
-
-pre[data-line] {
-  position: relative;
-}
-
-pre[class*="language-"] {
-  margin: 0;
-  padding: 0;
-  overflow: auto;
-}
-
-.line-highlight {
-  position: absolute;
-  left: 0;
-  right: 0;
-  padding: 0;
-  margin: 0;
-  background: transparentize(mix($accent, #999, 90%), .92);
-  pointer-events: none;
-  line-height: inherit;
-  white-space: pre;
-}
-
-.line-highlight:before,
-.line-highlight[data-end]:after {
-  content: attr(data-start);
-  position: absolute;
-  /* top: .4em; */
-  left: .6em;
-  min-width: 1em;
-  padding: 0 .5em;
-  background-color: hsla(24, 20%, 50%, .4);
-  color: hsl(24, 20%, 95%);
-  font: bold 65%/1.5 sans-serif;
-  text-align: center;
-  vertical-align: .3em;
-  border-radius: 999px;
-  text-shadow: none;
-  box-shadow: 0 1px white;
-}
-
-.line-highlight[data-end]:after {
-  content: attr(data-end);
-  top: auto;
-  bottom: .4em;
-}
-
-.line-numbers .line-highlight:before,
-.line-numbers .line-highlight:after {
-  content: none;
-}
+// code.language-css,
+// code.language-scss,
+// .token.boolean,
+// .token.string,
+// .token.entity,
+// .token.url,
+// .language-css .token.string,
+// .language-scss .token.string,
+// .style .token.string,
+// .token.attr-value,
+// .token.keyword,
+// .token.control,
+// .token.directive,
+// .token.statement,
+// .token.regex,
+// .token.atrule,
+// .token.number,
+// .token.inserted,
+// .token.important {
+//   color: $accent !important;
+// }
+
+// .token.tag-id,
+// .token.atrule-id,
+// .token.operator,
+// .token.unit,
+// .token.placeholder,
+// .token.variable,
+// .token.tag,
+// .token.attr-name,
+// .token.namespace,
+// .token.deleted,
+// .token.property,
+// .token.class-name,
+// .token.constant,
+// .token.symbol {
+//   color: transparentize($accent, .3) !important;
+// }
+
+// .token.property,
+// .token.function,
+// .token.function-name,
+// .token.deleted,
+// code.language-javascript,
+// code.language-html,
+// .command-line-prompt > span:before {
+//   color: mix($accent, #999, .9) !important;
+// }
+
+// .token.selector,
+// .token.tag,
+// .token.punctuation {
+//   color: white;
+// }
+
+// .token.comment,
+// .token.prolog,
+// .token.doctype,
+// .token.cdata {
+//   color: rgba(255, 255, 255, .3) !important;
+// }
+
+// .token.namespace {
+//   opacity: .7 !important;
+// }
+
+// pre[data-line] {
+//   position: relative;
+// }
+
+// pre[class*="language-"] {
+//   margin: 0;
+//   padding: 0;
+//   overflow: auto;
+// }
+
+// .line-highlight {
+//   position: absolute;
+//   left: 0;
+//   right: 0;
+//   padding: 0;
+//   margin: 0;
+//   background: transparentize(mix($accent, #999, 90%), .92);
+//   pointer-events: none;
+//   line-height: inherit;
+//   white-space: pre;
+// }
+
+// .line-highlight:before,
+// .line-highlight[data-end]:after {
+//   content: attr(data-start);
+//   position: absolute;
+//   /* top: .4em; */
+//   left: .6em;
+//   min-width: 1em;
+//   padding: 0 .5em;
+//   background-color: hsla(24, 20%, 50%, .4);
+//   color: hsl(24, 20%, 95%);
+//   font: bold 65%/1.5 sans-serif;
+//   text-align: center;
+//   vertical-align: .3em;
+//   border-radius: 999px;
+//   text-shadow: none;
+//   box-shadow: 0 1px white;
+// }
+
+// .line-highlight[data-end]:after {
+//   content: attr(data-end);
+//   top: auto;
+//   bottom: .4em;
+// }
+
+// .line-numbers .line-highlight:before,
+// .line-numbers .line-highlight:after {
+//   content: none;
+// }
 
 .code-toolbar {
   $code-margin: 40px;
 	position: relative;
 	margin: $code-margin 0;
 	padding: 20px;
-	border: 1px solid rgba(255, 255, 255, .1);
+	border: 1px solid rgb(0, 0, 0);
+  background-color: $accent;
+
 
 	+ .code-toolbar,
 	+ .highlight,

diff --git a/assets/css/variables.scss b/assets/css/variables.scss
@@ -1,3 +1,5 @@
+$fa-font-path: "../fontawesome/webfonts";
+
 /* COLOR VARIABLES */
 $background:  #F2EEDE;
 $color: #000000;
@@ -11,4 +13,4 @@ $tablet: "max-width: 900px";
 :root {
   --phoneWidth: (max-width: 684px);
   --tabletWidth: (max-width: 900px);
-}
+}