add linkedin icon

DominikNoga · May 8, 2024 · 192b835 · 192b835
1 parent e1aa73a
commit 192b835
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/ISD-conference-web-app-frontend/src/app/pages/home-page/home-page.component.html b/ISD-conference-web-app-frontend/src/app/pages/home-page/home-page.component.html
@@ -63,6 +63,7 @@
                     </isd-paragraph>
                 </div>
                 <div class="tiwtts">
+                    <div class="linkedin"><a href="https://www.linkedin.com/company/isd2024/"><img src="../../../assets/LinkedIn_icon.svg.webp"/></a></div>
                     <isd-twitts-list></isd-twitts-list>
                 </div>
             </div>

diff --git a/ISD-conference-web-app-frontend/src/app/pages/home-page/home-page.component.scss b/ISD-conference-web-app-frontend/src/app/pages/home-page/home-page.component.scss
@@ -3,7 +3,6 @@
 
 .home-page-content-wrapper {
     padding-top: $content-gap-from-nav;
-
     .conference-topics-list {
         list-style-type: initial;
         margin-left: $default-gap*3;
@@ -36,3 +35,20 @@
         }
     }
 }
+img{
+    width: $icon-width;
+}
+.linkedin{
+    width: $icon-div-width;
+    height: $icon-div-width;
+    margin-right: 0;
+    margin-left: auto;
+    position: relative;
+    bottom: 10%;
+}
+
+@media screen and (max-width: $changeHomePageLayoutTreshold) {
+    .linkedin {
+        margin-bottom: 1em;
+    }
+}
diff --git a/ISD-conference-web-app-frontend/src/app/styles/isd-variables.scss b/ISD-conference-web-app-frontend/src/app/styles/isd-variables.scss
@@ -28,5 +28,6 @@ $default-gap: 1rem;
 $content-gap-from-nav: 5rem;
 $max-content-width: 1200px;
 $changeHomePageLayoutTreshold: 1100px;
-$content-width: min($max-content-width, 95%)
-
+$content-width: min($max-content-width, 95%);
+$icon-width: 3rem;
+$icon-div-width: 3rem;
diff --git a/ISD-conference-web-app-frontend/src/assets/LinkedIn_icon.svg.webp b/ISD-conference-web-app-frontend/src/assets/LinkedIn_icon.svg.webp