Merge pull request #129 from Hrnjez/feature/local-fix

assets updates and mobile responsiveness fixes

Author: YonatanE22

src/components/HomepageFeatures/index.tsx

@@ -146,9 +146,9 @@ export default function HomepageFeatures(): JSX.Element {
             ))}
           </div>
           <div className="row" style={{ overflow: 'visible', display: 'flex', justifyContent: 'center', marginTop: '130px', marginBottom: '80px'}}>
-              <Heading as="h1" className="text--center  orb-font" style={{ overflow: 'visible', position: 'relative', fontSize: 40, fontWeight: 'normal'}}>
+              <Heading as="h1" className="text--center bg-img-text orb-font" style={{ overflow: 'visible', position: 'relative', fontSize: 40, fontWeight: 'normal'}}>
                 Connect With US
-                <div style={{
+                <div className='bg-img' style={{
                         position: 'absolute',
                         top: '-88px',
                         left: '-82%',

src/components/HomepageFeatures/styles.module.css

@@ -29,7 +29,7 @@
   transition: box-shadow .3s, background .3s;
   width: 100%;
   /* background: var(--ifm-color-background); */
-  /* border: 1.5px solid var(--ifm-color-text); */
+  border: 1.5px solid rgb(188 190 192);
   /* box-shadow: 0px 0px 25px 0px rgba(255, 255, 255, 0.10); */
   border-radius: 20.2632px;
   /* justify-content: center; */
@@ -48,7 +48,7 @@ html[data-theme='dark'] .custom__card {
 .custom__card_1 {
   /* Rectangle 39 */
   background: #fff;
-  
+  border: 1.5px solid rgb(188 190 192);
   height: 308px;
   box-sizing: border-box;
   /* transition: box-shadow .3s; */
@@ -81,8 +81,6 @@ html[data-theme='dark'] {
 }
 
 
-
-
 @media  (max-width: 1440px) {
   .custom__card {
     height: 400px;

src/css/custom.css

@@ -339,8 +339,13 @@ pre code {
   text-decoration: none;
 }
 
-.tutorial-button img {
-filter: brightness(0) saturate(100%) invert(6%) sepia(31%) saturate(5266%) hue-rotate(181deg) brightness(93%) contrast(52%);
+
+.tutorial-button:hover img {
+filter: brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(2%) hue-rotate(351deg) brightness(103%) contrast(100%);
+}
+
+html[data-theme='dark'] .tutorial-button img {
+  filter: brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(2%) hue-rotate(351deg) brightness(103%) contrast(100%);
 }
 
 .tutorial-button.minimum {
@@ -537,21 +542,23 @@ html[data-theme='dark'] .header-discord-link:before {
 
 .header-twitter-link:before {
   content: '';
-  width: 28px;
-  height: 28px;
+  width: 26px;
+  height: 26px;
   display: flex;
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z'/%3E%3C/svg%3E")
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.244 2H21.5l-7.6 8.651L22 22h-6.531l-5.15-6.748L4.3 22H1l8.043-9.146L2 2h6.64l4.73 6.188L18.244 2z' fill='black'/%3E%3C/svg%3E")
   no-repeat;
   filter: brightness(0) saturate(100%) invert(14%) sepia(58%) saturate(2629%) hue-rotate(194deg) brightness(94%) contrast(101%);
 }
 
 html[data-theme='dark'] .header-twitter-link:before {
-  width: 28px;
-  height: 28px;
+  width: 26px;
+  height: 26px;
   display: flex;
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z'/%3E%3C/svg%3E")
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.244 2H21.5l-7.6 8.651L22 22h-6.531l-5.15-6.748L4.3 22H1l8.043-9.146L2 2h6.64l4.73 6.188L18.244 2z' fill='white'/%3E%3C/svg%3E")
   no-repeat;
+  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
 }
+
 html[data-theme='dark'] .header-twitter-link:before {
   filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
 }
@@ -1181,4 +1188,15 @@ pre code[class*="language-"]{
   .markdown table:has(> tbody > tr > td > table) > tbody > tr{
     grid-template-columns: 1fr;
   }
+
+  .bg-img{
+    width: 180% !important;
+    left: -40% !important;
+    top: -90px !important;
+  }
+
+  .bg-img-text {
+    font-size: 24px !important;
+    
+  }
 }