Design fixes

Author: Beelink

css/index.css

@@ -365,10 +365,15 @@ footer span {
     header .links {
         float: none;
         margin-top: 32px;
+        display: flex;
+    }
+
+    header .links a {
+        flex: 1;
     }
 
     header .links .link {
-        margin: 0 16px;
+        margin: 0;
     }
 
     .tile-section {
@@ -399,15 +404,13 @@ footer span {
 
     .tile-section .tile .links, .mfp-title .links {
         float: none;
-        margin-top: 16px;
     }
 
     .mfp-title {
         text-align: center;
     }
 
     .tile-section .tile .screenshot {
-        height: 200px;
         width: calc(100% + 32px);
     }
 
@@ -440,17 +443,17 @@ footer span {
         padding: 60px 8px;
     }
 
-    .tile-section .tile .screenshot {
-        height: 140px;
-    }
-
     .container h2 {
         margin: 64px 0 32px 0;
     }
 }
 
 /* magnific popup */
 
+.mfp-zoom-out-cur {
+    overflow: hidden;
+}
+
 img.mfp-img {
     padding-bottom: 120px;
     pointer-events: none;
@@ -466,8 +469,7 @@ img.mfp-img {
 
 .mfp-figure:after {
     box-shadow: none;
-    border-radius: 0 0 32px 32px;
-    background: rgba(0, 0, 0, 0.1);
+    background: none;
 }
 
 .mfp-arrow-right:before {

index.html

@@ -33,13 +33,13 @@
                 </div>
             </a>
             <div class="links">
-                <a href="https://www.patreon.com/moduleart" title="Patreon">
+                <a href="https://www.patreon.com/moduleart">
                     <div class="link">Patreon</div>
                 </a>
-                <a href="https://www.buymeacoffee.com/ModuleArt" title="Buy me a coffee">
+                <a href="https://www.buymeacoffee.com/ModuleArt">
                     <div class="link">Buy me a coffee</div>
                 </a>
-                <a href="https://github.com/ModuleArt" title="GitHub">
+                <a href="https://github.com/ModuleArt">
                     <div class="link">GitHub</div>
                 </a>
             </div>