Browse Source

feat: Added animation, pretty background placement, pixiv logo icon and links to pixiv page for background

master
Dale 1 month ago
parent
commit
ac1db38461
3 changed files with 53 additions and 11 deletions
  1. +15
    -11
      index.html
  2. BIN
      pixiv_logo.png
  3. +38
    -0
      style.css

+ 15
- 11
index.html View File

@@ -15,12 +15,12 @@
</head>
<body class="backgroundYuuka">
<div id="panel">
From Dale with &nbsp;<i class="fas fa-heart" style="color: red"></i>
From Dale with &nbsp;<i class="fas fa-fw fa-heart" style="color: red"></i>
<br />
<a href="https://steamcommunity.com/id/praise_chanka/" target="_blank">
&nbsp;<i class="fab fa-steam"></i>&nbsp; Steam
&nbsp;<i class="fab fa-fw fa-steam"></i>&nbsp; Steam
</a><br />
&nbsp;<i class="fas fa-lightbulb"></i>&nbsp; Jabber: deiru@gensokyo.social
&nbsp;<i class="fas fa-fw fa-lightbulb"></i>&nbsp; Jabber: deiru@gensokyo.social
<br />
<a target="_blank" rel="me" class="social-url" href="https://blog.deiru.tokyo">Blog</a><span class="social-separator">&#124;</span><a rel="me" target="_blank" class="social-url" href="https://gensokyo.social/@Deiru">Social</a><span class="social-separator">&#124;</span><a target="_blank" rel="me" class="social-url" href="https://code.gensokyo.social/Deiru">Git</a><br />
<br />
@@ -34,19 +34,23 @@
<br /><br />
Favicon:&nbsp;
<a href="https://twitter.com/official_shiro/status/986282563177152512" target="_blank">
<i class="fa fa-image"></i>&nbsp;Kazami Yuuka
</a> by
<i class="fa fa-fw fa-image"></i><i class="fab fa-fw fa-twitter"></i>&nbsp;Kazami Yuuka
</a> by <br class="mobile-break" />
<a target="_blank" href="https://twitter.com/official_shiro">
<i class="fa fa-user"></i>&nbsp;Shiro
<i class="fa fa-fw fa-user"></i><i class="fab fa-fw fa-twitter"></i>&nbsp;Shiro
</a><br />
<span class="bg-desktop">
Background Image:&nbsp;
Background Image:<br />
<a href="https://mastodon.art/@basicbishoujo/104076645456557026" target="_blank">
<i class="fa fa-image"></i>&nbsp;Yuuka
</a> by
<i class="fa fa-fw fa-image"></i><i class="fab fa-fw fa-twitter"></i>&nbsp;Yuuka
</a> (<a href="https://www.pixiv.net/en/artworks/81136137" target="_blank">
<i class="pixiv"></i> Pixiv
</a>) by <br class="mobile-break" />
<a href="https://mastodon.art/@basicbishoujo" target="_blank">
&nbsp;<i class="fa fa-user"></i>&nbsp;Basic Bishoujo
</a>
<i class="fa fa-fw fa-user"></i><i class="fab fa-fw fa-twitter"></i>&nbsp;Basic Bishoujo
</a> (<a href="https://www.pixiv.net/en/users/20117536" target="_blank">
<i class="pixiv"></i> Pixiv
</a>)
<!-- a href="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=65376834" target="_blank">
<i class="fa fa-image"></i>&nbsp;BANG!
</a> by


BIN
pixiv_logo.png View File

Before After
Width: 1000  |  Height: 1000  |  Size: 21KB

+ 38
- 0
style.css View File

@@ -19,6 +19,7 @@ a {
background-position-y: bottom;
background-repeat: no-repeat;
background-size: auto 100%;
transition: background-position .5s ease;
}

#panel {
@@ -50,11 +51,48 @@ a {
margin-right: 0px;
}

.pixiv {
display: inline-block;
height: 13px;
width: 13px;
content: '';
background-image: url('./pixiv_logo.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0);
}

.mobile-break {
display: none;
}

@media screen and (min-width: 750px) and (max-width: 819px) {
.backgroundYuuka {
background-position-x: -10vw;
}
}

@media screen and (min-width: 820px) and (max-width: 949px) {
.backgroundYuuka {
background-position-x: left;
}
}

@media screen and (min-width: 950px) and (max-width: 1200px) {
.backgroundYuuka {
background-position-x: 10vw;
}
}

@media (max-width: 425px) {
html, body {
height: initial;
min-height: 100%;
}
.mobile-break {
display: initial;
}
/* .bg-desktop {
display: none;
}


Loading…
Cancel
Save