added icons for social networks on the detail page

content/stylesheets/main.css

@@ -542,6 +542,10 @@ fieldset p label input {
   opacity: 1;
 }
 
+.title_link{
+  text-decoration: none;
+}
+
 .tile__title {
   opacity: 0;
   position: absolute;
@@ -607,6 +611,58 @@ fieldset p label input {
   display: flex;
   flex-direction: row;
 }
+
+.social>a {
+
+  display: block;
+  background-size: 50px;
+  background-repeat: no-repeat;
+  background-position: top center;
+}
+
+.social>a>.link{
+  display: none;
+}
+
+.social>a>p{
+  padding-top: 50px;
+  text-align: center;
+}
+
+.social-facebook>a{
+  background-image: url(/assets/social/facebook_small.png);
+}
+
+.social-instagram>a{
+  background-image: url(/assets/social/instagram_small.png);
+}
+
+.social-twitter>a{
+  background-image: url(/assets/social/twitter_small.png);
+}
+
+.social-youtube>a{
+  background-image: url(/assets/social/youtube_small.png);
+}
+
+.social-tiktok>a{
+  background-image: url(/assets/social/tiktok_small.png);
+}
+
+.social-linkedin>a{
+  background-image: url(/assets/social/linkedIn_small.png);
+}
+
+.social-fetlife>a{
+  background-image: url(/assets/social/fetLife_small.png);
+}
+
+.social-container>ul{
+  list-style: none;
+  display: flex;
+  gap: 1rem;
+}
+
 .vereniging_themas{
   list-style: none;
   display: flex;
@@ -651,6 +707,7 @@ footer{
   gap: 1rem;
 }
 
+
 @media only screen and (max-width: 600px) {
   .tile-grid {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

layouts/detail.erb

@@ -1,10 +1,10 @@
 <div class="details-container details-logo">
-    <img src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=huge" alt="<%= item[:naam] %>">
+    <a target="_blank" href="<%= item[:website] %>"><img src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=small" alt="<%= item[:naam] %>"></a>
 </div>
 <div class="detail_title">
-    <h2>
+    <a class="title_link" target="_blank" href="<%= item[:website] %>"><h2>
     <%= item[:naam] %>
-    </h2>
+    </h2></a>
     <% if item[:themas] %>
                 <ul class="vereniging_themas">
                     <% for thema in item[:themas] %>
@@ -31,8 +31,8 @@
         <ul>
             <% if item[:social] %>
                 <% for social in item[:social] %>
-                    <li class="social-<%= social[:platform] %>">
-                    <a href="<%= social[:link] %>"><%= social[:link] %></a>
+                    <li class="social social-<%= social[:platform] %>">
+                    <a href="<%= social[:link] %>"><p class="link"><%= social[:link] %></p><p><%= social[:platform] %></p></a>
                     </li>
                 <% end %>
             <% end %>