Увеличение ширины с социальными кнопками

Добавлен линк на галерею
Добавлен линк на Matrix
2024-09-14 21:30:35 +03:00 · 2024-09-14 21:20:17 +03:00 · 2024-05-29 14:31:53 +03:00 · 2023-07-26 19:07:27 +03:00 · 2023-07-26 16:11:33 +03:00 · 2023-07-26 16:09:23 +03:00
43 changed files with 44 additions and 29 deletions
--- a/css/style.css
+++ b/css/style.css
@ -24,6 +24,7 @@ body {
    margin: 0;
    opacity: 0;
    font-family: ProblematicPiercer;
+    cursor: default;
 }

 div.row {
@ -66,45 +67,39 @@ div.social {
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
-    width: 800px;
+    width: 960px;
 }

 .social div {
    width: 50px;
    height: 50px;
-    background-size: contain;
+    background-repeat: no-repeat;
    cursor: pointer;
-    transition: 0.2s;
+    transition: transform 0.2s;
+    background-size: 100px auto;
 }

 .social div:hover {
    transform: scale(1.5);
+    background-position: -50px 0;
 }

-.mastodon { background-image: url(../images/social/mastodon-off.png); }
-.mastodon:hover { background-image: url(../images/social/mastodon-on.png); }
-.twitter { background-image: url(../images/social/twitter-off.png); }
-.twitter:hover { background-image: url(../images/social/twitter-on.png); }
-.linkedin { background-image: url(../images/social/linkedin-off.png); }
-.linkedin:hover { background-image: url(../images/social/linkedin-on.png); }
-.facebook { background-image: url(../images/social/facebook-off.png); }
-.facebook:hover { background-image: url(../images/social/facebook-on.png); }
-.instagram { background-image: url(../images/social/instagram-off.png); }
-.instagram:hover { background-image: url(../images/social/instagram-on.png); }
-.git { background-image: url(../images/social/git-off.png); }
-.git:hover { background-image: url(../images/social/git-on.png); }
-.github { background-image: url(../images/social/github-off.png); }
-.github:hover { background-image: url(../images/social/github-on.png); }
-.telegram { background-image: url(../images/social/telegram-off.png); }
-.telegram:hover { background-image: url(../images/social/telegram-on.png); }
-.solus { background-image: url(../images/social/linux-off.png); }
-.solus:hover { background-image: url(../images/social/linux-on.png); }
-.blog { background-image: url(../images/social/blog-off.png); }
-.blog:hover { background-image: url(../images/social/blog-on.png); }
-.ftp { background-image: url(../images/social/ftp-off.png); }
-.ftp:hover { background-image: url(../images/social/ftp-on.png); }
-.email { background-image: url(../images/social/email-off.png); }
-.email:hover { background-image: url(../images/social/email-on.png); }
+.mastodon { background-image: url(../images/social/mastodon.png); }
+.twitter { background-image: url(../images/social/twitter.png); }
+.linkedin { background-image: url(../images/social/linkedin.png); }
+.facebook { background-image: url(../images/social/facebook.png); }
+.instagram { background-image: url(../images/social/instagram.png); }
+.git { background-image: url(../images/social/git.png); }
+.github { background-image: url(../images/social/github.png); }
+.telegram { background-image: url(../images/social/telegram.png); }
+.solus { background-image: url(../images/social/linux.png); }
+.blog { background-image: url(../images/social/blog.png); }
+.ftp { background-image: url(../images/social/ftp.png); }
+.band { background-image: url(../images/social/band.png); }
+.soundcloud { background-image: url(../images/social/soundcloud.png); }
+.email { background-image: url(../images/social/email.png); }
+.matrix { background-image: url(../images/social/matrix.png); }
+.gallery { background-image: url(../images/social/gallery.png); }

 .tooltip {
    position: relative;
--- a/images/social/band.png
+++ b/images/social/band.png
--- a/images/social/blog-off.png
+++ b/images/social/blog-off.png
--- a/images/social/blog-on.png
+++ b/images/social/blog-on.png
--- a/images/social/blog.png
+++ b/images/social/blog.png
--- a/images/social/email-off.png
+++ b/images/social/email-off.png
--- a/images/social/email-on.png
+++ b/images/social/email-on.png
--- a/images/social/email.png
+++ b/images/social/email.png
--- a/images/social/facebook-off.png
+++ b/images/social/facebook-off.png
--- a/images/social/facebook-on.png
+++ b/images/social/facebook-on.png
--- a/images/social/facebook.png
+++ b/images/social/facebook.png
--- a/images/social/ftp-off.png
+++ b/images/social/ftp-off.png
--- a/images/social/ftp-on.png
+++ b/images/social/ftp-on.png
--- a/images/social/ftp.png
+++ b/images/social/ftp.png
--- a/images/social/gallery.png
+++ b/images/social/gallery.png
--- a/images/social/git-off.png
+++ b/images/social/git-off.png
--- a/images/social/git-on.png
+++ b/images/social/git-on.png
--- a/images/social/git.png
+++ b/images/social/git.png
--- a/images/social/github-off.png
+++ b/images/social/github-off.png
--- a/images/social/github-on.png
+++ b/images/social/github-on.png
--- a/images/social/github.png
+++ b/images/social/github.png
--- a/images/social/instagram-off.png
+++ b/images/social/instagram-off.png
--- a/images/social/instagram-on.png
+++ b/images/social/instagram-on.png
--- a/images/social/instagram.png
+++ b/images/social/instagram.png
--- a/images/social/linkedin-off.png
+++ b/images/social/linkedin-off.png
--- a/images/social/linkedin-on.png
+++ b/images/social/linkedin-on.png
--- a/images/social/linkedin.png
+++ b/images/social/linkedin.png
--- a/images/social/linux-off.png
+++ b/images/social/linux-off.png
--- a/images/social/linux-on.png
+++ b/images/social/linux-on.png
--- a/images/social/linux.png
+++ b/images/social/linux.png
--- a/images/social/mastodon-off.png
+++ b/images/social/mastodon-off.png
--- a/images/social/mastodon-on.png
+++ b/images/social/mastodon-on.png
--- a/images/social/mastodon.png
+++ b/images/social/mastodon.png
--- a/images/social/matrix.png
+++ b/images/social/matrix.png
--- a/images/social/soundcloud.png
+++ b/images/social/soundcloud.png
--- a/images/social/telegram-off.png
+++ b/images/social/telegram-off.png
--- a/images/social/telegram-on.png
+++ b/images/social/telegram-on.png
--- a/images/social/telegram.png
+++ b/images/social/telegram.png
--- a/images/social/twitter-off.png
+++ b/images/social/twitter-off.png
--- a/images/social/twitter-on.png
+++ b/images/social/twitter-on.png
--- a/images/social/twitter.png
+++ b/images/social/twitter.png
--- a/index.html
+++ b/index.html
@ -10,7 +10,7 @@
        <script src="js/jquery-ui.min.js"></script>
        <script src="js/script.js"></script>
    </head>
-    <body>
+    <body onselectstart="return false" onmousedown="return false">
        <div class="row">
            <div class="photo"></div>
            <div class="info">
@ -29,13 +29,17 @@
            <div class="tooltip linkedin"><span class="tooltiptext">LinkedIn</span></div>
            <div class="tooltip facebook"><span class="tooltiptext">Facebook</span></div>
            <div class="tooltip instagram"><span class="tooltiptext">Instagram</span></div>
+            <div class="tooltip matrix"><span class="tooltiptext">Matrix</span></div>
            <div class="tooltip telegram"><span class="tooltiptext">Telegram</span></div>
            <div class="tooltip git"><span class="tooltiptext">Git</span></div>
            <div class="tooltip github"><span class="tooltiptext">GitHub</span></div>
            <div class="tooltip solus"><span class="tooltiptext">Solus Linux</span></div>
            <!-- <div class="tooltip blog"><span class="tooltiptext">Blog</span></div> -->
-            <!-- <div class="tooltip ftp"><span class="tooltiptext">FTP</span></div> -->
+            <div class="tooltip ftp"><span class="tooltiptext">FTP</span></div>
+            <div class="tooltip band"><span class="tooltiptext">Band</span></div>
+            <div class="tooltip soundcloud"><span class="tooltiptext">Soundcloud</span></div>
            <!-- <div class="tooltip email"><span class="tooltiptext">Email</span></div> -->
+            <div class="tooltip gallery"><span class="tooltiptext">Gallery</span></div>
        </div>
    </body>
 </html>
--- a/js/script.js
+++ b/js/script.js
@ -46,7 +46,23 @@ $(document).ready(function(){
        window.open("https://ftp.zhirov.kz");
    });

+    $(".band").on( "click", function() {
+        window.open("https://www.realrocks.ru/formaldehyde");
+    });
+
+    $(".soundcloud").on( "click", function() {
+        window.open("https://soundcloud.com/alexanderzhirov");
+    });
+
    $(".email").on( "click", function() {
        window.open("");
    });
+
+    $(".matrix").on( "click", function() {
+        window.open("https://matrix.to/#/@alexanderzhirov:matrix.org");
+    });
+
+    $(".gallery").on( "click", function() {
+        window.open("https://piwigo.zhirov.kz");
+    });
 });
Author	SHA1	Message	Date
Alexander Zhirov	1e4751f487	Увеличение ширины с социальными кнопками	2024-09-14 21:30:35 +03:00
Alexander Zhirov	bce7224732	Добавлен линк на галерею	2024-09-14 21:20:17 +03:00
Alexander Zhirov	5e56eb4511	Добавлен линк на Matrix	2024-05-29 14:31:53 +03:00
Alexander Zhirov	77f600cac4	soundcloud icon	2023-07-26 19:07:27 +03:00
Alexander Zhirov	4518e23261	width to 900 px	2023-07-26 16:11:33 +03:00
Alexander Zhirov	e981de36ba	soundcloud link	2023-07-26 16:09:23 +03:00
Alexander Zhirov	baf23872b9	band link	2023-07-26 14:38:30 +03:00
Alexander Zhirov	ee4b0cc660	иконки переведены на спрайты	2023-05-08 12:17:34 +03:00
Alexander Zhirov	a3bbe8399d	disable selection	2023-05-02 03:32:10 +03:00
Alexander Zhirov	8919e8f1a2	Merge pull request 'dev' (#1 ) from dev into master Reviewed-on: #1	2023-05-02 00:11:57 +00:00