Home Explore Help
Sign In
Sv443
/
sv443.net-Mirror
mirror of https://github.com/Sv443-Network/sv443.net
1
0
Fork 0
Files
Browse Source

made kofi button smaller

Sven 3 years ago
parent
8c47f849cc
commit
5b34b47e8d
2 changed files with 28 additions and 12 deletions
Unified View Show Diff Stats
  1. 19 4
      css/index.css
  2. 9 8
      index.html

+ 19 - 4
css/index.css
View File 

@@ -4,21 +4,32 @@
 
 .img-link {
 
 .img-link {
 
     text-decoration: none;
 
     text-decoration: none;
 
     color: initial;
 
     color: initial;
 
-    transition: transform 0.2s;
 
     cursor: pointer;
 
     cursor: pointer;
 
 }
 
 }
 
 
 
-.img-link:hover {
 
+.img-link:not(.not-block) {
 
+    transition: transform 0.2s;
 
+}
 
+
 
+.img-link:not(.not-block):hover {
 
     transform: scale(1.1);
 
     transform: scale(1.1);
 
     transition: transform 0.5s;
 
     transition: transform 0.5s;
 
-    color: initial;
 
-    text-decoration: initial;
 
 }
 
 }
 
 
 
 .img-link:visited {
 
 .img-link:visited {
 
     color: initial;
 
     color: initial;
 
 }
 
 }
 
 
 
+.img-link > div.ilb {
 
+    display: inline-block;
 
+    transition: transform 0.2s;
 
+}
 
+
 
+.img-link > div.ilb:hover {
 
+    transform: scale(1.1);
 
+    transition: transform 0.5s;
 
+}
 
+
 
 p {
 
 p {
 
     word-wrap: break-word;
 
     word-wrap: break-word;
 
 }
 
 }
 
@@ -198,6 +209,10 @@ main {
 
     margin: 0;
 
     margin: 0;
 
 }
 
 }
 
 
 
+#kofi-img {
 
+    width: 250px;
 
+}
 
+
 
 img.circle {
 
 img.circle {
 
     width: 65px;
 
     width: 65px;
 
     height: 65px;
 
     height: 65px;

+ 9 - 8
index.html
View File 

@@ -27,10 +27,11 @@
 
     <link rel="stylesheet" href="./css/global.css">
 
     <link rel="stylesheet" href="./css/global.css">
 
     <link rel="stylesheet" href="./css/index.css">
 
     <link rel="stylesheet" href="./css/index.css">
 
     <title>Sv443 Network - Homepage</title>
 
     <title>Sv443 Network - Homepage</title>
 
+
 
     <script src="https://unpkg.com/phosphor-icons"></script>
 
     <script src="https://unpkg.com/phosphor-icons"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
 
-    <script type="text/javascript" src="js/index.js"></script>
 
-        
+    <script src="js/index.js"></script>
 
+
 
     <link rel="apple-touch-icon" sizes="180x180" href="./resources/favicons/apple-touch-icon.png">
 
     <link rel="apple-touch-icon" sizes="180x180" href="./resources/favicons/apple-touch-icon.png">
 
     <link rel="icon" type="image/png" sizes="32x32" href="./resources/favicons/favicon-32x32.png">
 
     <link rel="icon" type="image/png" sizes="32x32" href="./resources/favicons/favicon-32x32.png">
 
     <link rel="icon" type="image/png" sizes="194x194" href="./resources/favicons/favicon-194x194.png">
 
     <link rel="icon" type="image/png" sizes="194x194" href="./resources/favicons/favicon-194x194.png">
 
@@ -44,8 +45,6 @@
 
     <meta name="theme-color" content="#101747">
 
     <meta name="theme-color" content="#101747">
 
 </head>
 
 </head>
 
 <body onload="indexonload();">
 
 <body onload="indexonload();">
 
-    <!-- TODO: replace all webp images with png -->
 
-    <!-- TODO: make footer non-sticky -->
 
     <header>
 
     <header>
 
         <div id="options">
 
         <div id="options">
 
             <div id="themebtn" onclick="theme.change()" title="Switch to dark theme">
 
             <div id="themebtn" onclick="theme.change()" title="Switch to dark theme">
 
@@ -64,10 +63,12 @@
 
                 <div id="logo"></div>
 
                 <div id="logo"></div>
 
             </div>
 
             </div>
 
             <div style="display: flex; flex-direction: column;">
 
             <div style="display: flex; flex-direction: column;">
 
-                <p>A small network offering free to use and open source applications and services</p>
 
-                <a href="./ko-fi" class="img-link" target="_blank"><div>
 
-                    <img style="max-width: 100%;" src="./resources/images/ko-fi_button.png" alt="Ko-fi button">
 
-                </div></a>
 
+                <p>A small network offering free to use and open source applications and services.</p>
 
+                <a href="./ko-fi" class="img-link not-block" target="_blank">
 
+                    <div class="ilb">
 
+                        <img id="kofi-img" style="max-width: 100%;" src="./resources/images/ko-fi_button.png" alt="Ko-fi button">
 
+                    </div>
 
+                </a>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
         <div id="projects">
 
         <div id="projects">