Merge branch 'CssDetailPage' into master

content/konventen/wvk.md

@@ -7,6 +7,7 @@ konvent: wvk
 website: https://wvk.ugent.be/
 contact: wvk@student.ugent.be
 ---
+
 Het WVK groepeert alle maatschappelijk-sociaal geïnspireerde studentenverenigingen en alle wetenschappelijke werkgroepen. Als konvent organiseert het WVK zelf (in tegenstelling tot sommige andere konventen) geen eigen activiteiten, maar richt het zich volledig op het samenbrengen en verdedigen van de belangen van de maatschappelijke verenigingen en wetenschappelijke werkgroepen aan de Universiteit Gent.
 
-<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwvkcentraal%2Fvideos%2F795092330635099%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
+<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwvkcentraal%2Fvideos%2F795092330635099%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden; margin: auto;" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

content/stylesheets/main.css

@@ -115,7 +115,7 @@ details[open] {
   width: 5rem;
   height: 100vh;
   padding-bottom: 2rem;
-  transition: width 600ms ease;
+  transition: width 300ms ease;
 }
 
 .navbar-nav {
@@ -165,6 +165,10 @@ details[open] {
   font-weight: bolder;
 }
 
+.hidden {
+  display: none;
+}
+
 .nav-link svg {
   width: 2rem;
   min-width: 2rem;
@@ -341,7 +345,7 @@ header {
 h2 {
   font-family: MyWebFont, futura, Avenir Next, Verdana, Geneva, Tahoma,
     sans-serif;
-  font-size: 3.4rem;
+  font-size: 2.8rem;
 
   font-weight: lighter;
   color: var(--darkblue);
@@ -590,6 +594,10 @@ h2 {
   opacity: 1;
 }
 
+.title_link {
+  text-decoration: none;
+}
+
 .tile__title {
   color: black;
   width: 100%;
@@ -621,6 +629,150 @@ h2 {
   min-width: 400px;
 }
 
+.details-logo > img {
+  width: 100px;
+}
+
+.details-logo {
+  display: flex;
+  justify-content: center;
+}
+
+.detail_title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: center;
+}
+
+.detail_title h2 {
+  margin: 0;
+  text-align: center;
+}
+
+.social > a {
+  display: block;
+  background-size: 50px;
+  background-repeat: no-repeat;
+  background-position: top center;
+
+  width: 100px;
+  height: 100px;
+}
+
+.social > a > .link {
+  display: none;
+}
+
+.social > a > p {
+  padding-top: 65px;
+  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;
+  padding: 0;
+  /* gap: 0.5rem; */
+  margin: auto;
+  justify-content: space-around;
+}
+
+.detail-body {
+  margin: auto;
+  max-width: 1200px;
+  padding: 2rem 10%;
+
+  position: relative;
+}
+
+.social {
+  width: 52px;
+  height: 52px;
+}
+
+.social > img {
+  width: 52px;
+  height: 52px;
+}
+
+.social + .social {
+  margin-left: 20px;
+}
+
+.vereniging_themas {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  margin: 0 3rem;
+  padding: 0;
+}
+/* .vereniging_thema {
+  width: 4rem;
+  height: 4rem;
+} */
+
+.vereniging_thema > a > svg:hover {
+  transform: scale(1.2);
+  transform-origin: center center;
+  transition: all 150ms ease;
+}
+
+.vereniging_thema > a > svg {
+  fill: #013e7a;
+  width: 3rem;
+  height: 3rem;
+}
+
+footer {
+  padding-top: 1rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.showcase-image > img {
+  flex-grow: 3;
+  height: 30rem;
+  max-width: 80vw;
+}
+
+.showcase-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+}
+
 @media only screen and (max-width: 600px) {
   .tile-grid {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
@@ -640,3 +792,27 @@ h2 {
     grid-template-columns: auto;
   }
 }
+
+.detail-content {
+  max-width: 1100px;
+}
+
+.details-contact {
+  padding: 1rem;
+  float: right;
+  margin: auto;
+}
+
+@media only screen and (max-width: 700px) {
+  .details-contact {
+    float: none;
+    width: 300px;
+    padding-bottom: 2rem;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .detail-body {
+    width: 100%;
+  }
+}

content/verenigingen/vbk.md

@@ -7,9 +7,10 @@ konvent: fk
 website: https://www.vlaamsebiomedischekring.be/
 contact: vbkgent@gmail.com
 social:
-  - plaform: facebook
+  - platform: facebook
     link: https://www.facebook.com/vlaamsebiomedischekring/
 themas:
-  -  faculteit
+  - faculteit
 ---
+
 V.B.K. simply the best! Voor alle studenten Biomedische wetenschappen organiseren wij tal van beestelijke feestjes in de Point Final, tevens ons kringcafe waar tal van promo's doorgaan. Ook hebben wij ons zalige galabal samen met VLAK. Naast feestjes doen we ook toffe sportactiviteiten, cultuuractiviteiten enz. Met ons zal je de leukste studententijd tegemoet gaan, twijfel dus niet om lid te worden van onze familie, je zal er zeker geen spijt van hebben!

layouts/default.erb

@@ -5,15 +5,6 @@
     <%= yield %>
   </div>
 <footer class="align">
-  <div>
-    <img src="" alt="">
-    <img src="" alt="">
-    <img src="" alt="">
-    <img src="" alt="">
-    <img src="" alt="">
-    <img src="" alt="">
-    <img src="" alt="">
-  </div>
   <p>©2020 Gentse studentenraad</p>
   <div lang="en">
     <p>Made with ♥ by <a href="https://zeus.gent">Zeus WPI</a></p>

layouts/evenement.erb

@@ -1,4 +1,4 @@
-<h1> <%= item[:naam] %> </h1>
+<h2> <%= item[:naam] %> </h2>
 <p> georganiseerd door: <%= item[:organiser] %></p>
 <div class="details-wrapper">
     <div class="details-container details-text">

layouts/homepage.erb

@@ -1,9 +1,6 @@
 <div class="beforeTheFold">
   <div class="header_photo backgroundSquare"></div>
-
-
   <article class="align">
-    <h1 class="hidden">Durf Doen</h1>
     <div class="intro">
       <div class="header_blueSquare backgroundSquare"></div>
       <h2 class="studentZijn">