Update style.css

style.css

@@ -27,6 +27,7 @@ body{
      margin: auto;
    }
 
+   /* Navbar */
    #navbar{
      width: 100%;
      height: 56px;
@@ -74,6 +75,7 @@ body{
      display: none;
    }
 
+   /* Home */
    #home{
      margin: 0;
      width: 100%;
@@ -113,6 +115,7 @@ body{
      background: var(--theme1);
    }
 
+   /* About Section */
    #aboutContent{
      width: 100%;
      display: flex;
@@ -130,6 +133,7 @@ body{
      width: 80%;
    }
 
+   /* Socialmedia Section */
    #socialmedia{
      margin: auto;
    }
@@ -151,9 +155,28 @@ body{
 
    #socialSelection label:hover, .smRadioInput:checked + .smRadioLabel{
      background: var(--theme1);
-     transition: all 250ms linear;
+     transition: all 200ms linear;
+     border-top-right-radius: var(--borderRadius);
+     border-top-left-radius: var(--borderRadius);
    }
 
+   .socialTab{
+     display: none;
+     background: var(--theme1);
+     width: 100%;
+     height: auto;
+     min-height: 200px;
+     margin: 0 0 0 -5px;
+     padding: var(--padding);
+     border-bottom-right-radius: var(--borderRadius);
+     border-bottom-left-radius: var(--borderRadius);
+   }
+
+   .socialTab img{
+     max-width: 80%;
+   }
+
+   /* Project Section */
    #projects{
      margin: auto;
    }
@@ -164,7 +187,7 @@ body{
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
-     align-items: center;
+     align-items: flex-start;
    }
 
    .project{
@@ -173,12 +196,12 @@ body{
      height: auto;
      background: var(--theme1);
      border-radius: var(--borderRadius);
-     margin: var(--margin);
+     margin: var(--margin) var(--margin) 40px var(--margin);
      padding: 0 var(--padding) var(--padding) 0;
    }
 
-   .project:nth-child(2n){
-     margin-top: 100px;
+   #projectRow2{
+     padding-top: 100px;
    }
 
    .project img{
@@ -214,6 +237,7 @@ body{
      background: var(--theme1);
    }
 
+   /* Footer & imprint */
    #footer{
      margin: 0;
      padding: 0;
@@ -243,6 +267,7 @@ body{
      padding: 15px;
    }
 
+   /* Scroll to the top button */
    #scroll-top{
      width: 40px;
      height: 40px;
@@ -269,6 +294,7 @@ body{
      margin-top: -5px;
    }
 
+   /* Section defaults */
    .sectionTitle{
      color: var(--color);
      font-size: 2rem;
@@ -281,6 +307,7 @@ body{
      user-select: auto;
    }
 
+   /* General stylings */
    a{
      color: inherit;
      text-decoration: none;
@@ -311,6 +338,7 @@ body{
    }
 
    @media screen and (max-width:640px){
+     /* Navbar */
      #navbar-links{
        display: none;
        width: 80%;
@@ -359,10 +387,22 @@ body{
        display: block;
      }
 
-     .project:nth-child(2n){
-       margin-top: auto;
+     /* Socialmedia Section */
+     #socialSelection label{
+       font-size: 0.9rem;
+     }
+
+     .socialTab{
+       width: calc(90% - (2 * var(--padding)));
+       margin: 5%;
+     }
+
+     /* Projects Section */
+     #projectRow2{
+       padding-top: 0;
      }
    }
 
+/* Selection */
   ::selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);}
   ::-moz-selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);}