initial commit - 2021-02-23
This commit is contained in:
fanyx
commit
1999104d97
|
|
@ -0,0 +1,137 @@
|
||||||
|
* {
|
||||||
|
margin: 0px 0px 0px 0px;
|
||||||
|
padding: 0px 0px 0px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
padding: 3px 3px 3px 3px;
|
||||||
|
|
||||||
|
background-color: #D8DBE2;
|
||||||
|
|
||||||
|
font-family: Monospace;
|
||||||
|
font-size: 10pt;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 7fr;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-template-areas: "header header"
|
||||||
|
"nav main";
|
||||||
|
grid-gap: 3px 3px;
|
||||||
|
justify-items: stretch;
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
width: 65%;
|
||||||
|
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
padding: 4px;
|
||||||
|
|
||||||
|
border-width: 2px;
|
||||||
|
border-color: #212738;
|
||||||
|
border-style: solid;
|
||||||
|
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
grid-area: header;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > #encrypt {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
grid-area: nav;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.content_section_text {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
grid-area: main;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.content_section_text {
|
||||||
|
margin: 4px;
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: dotted;
|
||||||
|
border-color: #000000;
|
||||||
|
background-color: #F5F6F7;
|
||||||
|
|
||||||
|
color: #000000;
|
||||||
|
font-size: 100%;
|
||||||
|
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.content_section_text a {
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.content_section_text a:link,
|
||||||
|
div.content_section_text a:visited,
|
||||||
|
div.content_section_text a:active {
|
||||||
|
background-color: #DCDFE6;
|
||||||
|
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.content_section_text a:hover {
|
||||||
|
background-color: #000000;
|
||||||
|
|
||||||
|
color: #DCDFE6;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.section_header {
|
||||||
|
margin: 0px 0px 0px 0px;
|
||||||
|
padding: 3px 6px 3px 6px;
|
||||||
|
|
||||||
|
background-color: #8E9CB2;
|
||||||
|
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 112%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #000000;
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.section_header_red {
|
||||||
|
background-color: #CD214F;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.section_header_grey {
|
||||||
|
background-color: #9F9386;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1510px) {
|
||||||
|
main {
|
||||||
|
grid-template-columns: auto;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
grid-template-areas: "header"
|
||||||
|
"nav"
|
||||||
|
"main";
|
||||||
|
#width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,162 @@
|
||||||
|
/*
|
||||||
|
@keyframes flicker {
|
||||||
|
0% {
|
||||||
|
opacity: 0.27861;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
opacity: 0.34769;
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
opacity: 0.23604;
|
||||||
|
}
|
||||||
|
15% {
|
||||||
|
opacity: 0.90626;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
opacity: 0.18128;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
opacity: 0.83891;
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
opacity: 0.65583;
|
||||||
|
}
|
||||||
|
35% {
|
||||||
|
opacity: 0.67807;
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
opacity: 0.26559;
|
||||||
|
}
|
||||||
|
45% {
|
||||||
|
opacity: 0.84693;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.96019;
|
||||||
|
}
|
||||||
|
55% {
|
||||||
|
opacity: 0.08594;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
opacity: 0.20313;
|
||||||
|
}
|
||||||
|
65% {
|
||||||
|
opacity: 0.71988;
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
opacity: 0.53455;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
opacity: 0.37288;
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
opacity: 0.71428;
|
||||||
|
}
|
||||||
|
85% {
|
||||||
|
opacity: 0.70419;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
opacity: 0.7003;
|
||||||
|
}
|
||||||
|
95% {
|
||||||
|
opacity: 0.36108;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0.24387;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
@keyframes textShadow {
|
||||||
|
0% {
|
||||||
|
text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
15% {
|
||||||
|
text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
35% {
|
||||||
|
text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
45% {
|
||||||
|
text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
55% {
|
||||||
|
text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
65% {
|
||||||
|
text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
85% {
|
||||||
|
text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
95% {
|
||||||
|
text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.crt::after {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(18, 16, 16, 0.1);
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 2;
|
||||||
|
pointer-events: none;
|
||||||
|
animation: flicker 0.15s infinite;
|
||||||
|
}
|
||||||
|
.crt::before {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
|
||||||
|
z-index: 2;
|
||||||
|
background-size: 100% 2px, 3px 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.crt {
|
||||||
|
animation: textShadow 1.6s infinite;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
<title> ~ fanyx ~ </title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="apache2.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<header>
|
||||||
|
<div class="section_header section_header_red"> ~ fanyx ~ </div>
|
||||||
|
<div id="encrypt">encrypt everything</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav id="links">
|
||||||
|
<div class="section_header"> links </div>
|
||||||
|
<div class="content_section_text">
|
||||||
|
<p>/mail/</p>
|
||||||
|
<p> -- <a href="mailto:me@fanyx.xyz">me@fanyx.xyz</a></p>
|
||||||
|
<br>
|
||||||
|
<p>/discord/</p>
|
||||||
|
<p> -- <a href="https://discord.gg/PthyyYp">fanyx.comf.d#2732</a></p>
|
||||||
|
<br>
|
||||||
|
<p>/twitter/</p>
|
||||||
|
<p> -- <a href="https://twitter.com/fanyxcomfd">@fanyxcomfd</a></p>
|
||||||
|
<br>
|
||||||
|
<p>/reddit/</p>
|
||||||
|
<p> -- <a href="https://www.reddit.com/user/fanyx_">u/fanyx_</a></p>
|
||||||
|
<br>
|
||||||
|
<p>/steam/</p>
|
||||||
|
<p> -- <a href="https://steamcommunity.com/id/fanyx_">id/fanyx_</a></p>
|
||||||
|
<br>
|
||||||
|
<p>/twitch/</p>
|
||||||
|
<p> -- <a href="https://www.twitch.tv/fanyx_">fanyx_</a></p>
|
||||||
|
<br>
|
||||||
|
<p>/xmpp/</p>
|
||||||
|
<p> -- fanyx@404.city</p>
|
||||||
|
<br>
|
||||||
|
<p>/fediverse/</p>
|
||||||
|
<p> -- <a href="https://social.fanyx.xyz/fanyx">fanyx@social.fanyx.xyz</a></p>
|
||||||
|
<br>
|
||||||
|
<p>/github/</p>
|
||||||
|
<p> -- <a href="https://github.com/fanyx">fanyx</a></p>
|
||||||
|
<br>
|
||||||
|
<p>/last.fm/</p>
|
||||||
|
<p> -- <a href="https://last.fm/user/fanyx_">fanyx_</a></p>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- main section -->
|
||||||
|
<article>
|
||||||
|
<!-- section about me -->
|
||||||
|
<section id="portfolio">
|
||||||
|
<div class="section_header"> about me </div>
|
||||||
|
<div class="content_section_text">
|
||||||
|
<p>/in construction/</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- section projects -->
|
||||||
|
<section id="projects">
|
||||||
|
<div class="section_header"> projects </div>
|
||||||
|
<!-- Pleroma -->
|
||||||
|
<div class="content_section_text">
|
||||||
|
<p>/Pleroma/</p>
|
||||||
|
<br>
|
||||||
|
<p>With my prior instance shutting down at the end of July 2020, i've decided to create my own.</p>
|
||||||
|
<br>
|
||||||
|
<p>Themed after the color schemes found in NieR:AutomatA, this will be my new home for days to come.</p>
|
||||||
|
<p>You can find my profile in the <a href="#links">links</a> section.</p>
|
||||||
|
<p>Otherwise, feel free to check out the main page and register if you feel like it.</p>
|
||||||
|
<br>
|
||||||
|
<p>/Link/</p>
|
||||||
|
<p> -- <a href="https://social.fanyx.xyz">social.fanyx.xyz</a></p>
|
||||||
|
</div>
|
||||||
|
<!-- Trackmania -->
|
||||||
|
<div class="content_section_text">
|
||||||
|
<p>/Trackmania Nations Forever - Championship/</p>
|
||||||
|
<br>
|
||||||
|
<p>A friend and i created and are actively maintaining a game server and an accompanying telegram group, where track times are recorded and notifications released.</p>
|
||||||
|
<br>
|
||||||
|
<p>The entirety of this project is based on Docker technology and below are links to the created images and software used.</p>
|
||||||
|
<br>
|
||||||
|
<p>/Trackmania Nations Forever Server/</p>
|
||||||
|
<p> -- <a href="https://github.com/fanyx/docker-tmserver">docker-tmserver</a></p>
|
||||||
|
<p> -- <a href="https://github.com/fanyx/docker-xaseco">docker-xaseco</a></p>
|
||||||
|
<br>
|
||||||
|
<p>/Telegram Bot/</p>
|
||||||
|
<p> -- <a href="https://github.com/Excidion/trackmania_nations_challenge_bot">trackmania_nations_challenge_bot</a></p>
|
||||||
|
<p> -- <a href="https://github.com/fanyx/docker-tmnationsbot">docker-tmnationsbot</a></p>
|
||||||
|
<br>
|
||||||
|
<p>This would not have been possible without the work of Xymph, the creator of the server controller XAseco.</p>
|
||||||
|
<br>
|
||||||
|
<p>/XAseco/</p>
|
||||||
|
<p> -- <a href="https://www.xaseco.org/">XAseco</a></p>
|
||||||
|
</div>
|
||||||
|
<!-- Calibre -->
|
||||||
|
<div class="content_section_text">
|
||||||
|
<p>/Calibre Web/</p>
|
||||||
|
<br>
|
||||||
|
<p>My personal library of technology books, guides, comics and cookbooks.</p>
|
||||||
|
<p>I will happily share them with people i know in person.</p>
|
||||||
|
<br>
|
||||||
|
<p>/Link/</p>
|
||||||
|
<p> -- <a href="https://lib.fanyx.xyz">lib.fanyx.xyz</a></p>
|
||||||
|
</div>
|
||||||
|
<!-- Funkwhale -->
|
||||||
|
<div class="content_section_text">
|
||||||
|
<p>/Funkwhale/Subsonic/</p>
|
||||||
|
<br>
|
||||||
|
<p>Since Spotify is useless when all you would do is listen to your own acquired music anyways, i've setup my own audio server with <a href="https://funkwhale.audio/">Funkwhale</a>.</p>
|
||||||
|
<br>
|
||||||
|
<p>I've used Gonic before but went back to Funkwhale after seeing that it supports a cmdline importer that can watch for filesystem changes.</p>
|
||||||
|
<p>This way i can upload my music to my Nextcloud instance and the importer picks it up automatically so i don't have to waste double the space for files.</p>
|
||||||
|
<br>
|
||||||
|
<p>The interface is easy to get in for people that have used Spotify or Google Music before. Just plain old web music player.</p>
|
||||||
|
<p>Another plus is the Subsonic API implementation, which lets you use any compatible app you want to listen to your music on the go.</p>
|
||||||
|
<p>I recommend using <a href="https://f-droid.org/en/packages/org.moire.ultrasonic/">UltraSonic</a> on Android and getting it via F-Droid, 'cause FOSS. Works like a charm.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Sektion Keys -->
|
||||||
|
<section id="keys">
|
||||||
|
<div class="section_header"> keys </div>
|
||||||
|
<div class="content_section_text">
|
||||||
|
<p>/pgp/</p>
|
||||||
|
<p> -- me@fanyx.xyz</p>
|
||||||
|
<br>
|
||||||
|
<p>fingerprint: 3CD2 F85C 6EAE 78E1 F1AD F98A A544 D188 1D47 D794</p>
|
||||||
|
<p>download: <a href="/me@fanyx.xyz.pgp">me@fanyx.xyz.pgp</a></p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
-----BEGIN PGP PUBLIC KEY BLOCK-----
|
||||||
|
Version: OpenPGP.js v4.10.4
|
||||||
|
Comment: https://openpgpjs.org
|
||||||
|
|
||||||
|
xjMEXwm2ExYJKwYBBAHaRw8BAQdA0f8r/2sZSLdE/3vtWBJB9UWaiuYIHE85
|
||||||
|
SsAgX9um56vNG21lQGZhbnl4Lnh5eiA8bWVAZmFueXgueHl6PsJ4BBAWCgAg
|
||||||
|
BQJfCbYTBgsJBwgDAgQVCAoCBBYCAQACGQECGwMCHgEACgkQpUTRiB1H15Rc
|
||||||
|
2gD+Jwtsm39ZGY1x+h1CzeOnbMHhXTc04swIkWBB8NGWNw4A/2afBu0DpCJa
|
||||||
|
pvgE+aJEtVGhsEn5w/QRQzJd3u/VfFAJzjgEXwm2ExIKKwYBBAGXVQEFAQEH
|
||||||
|
QHDFDhHvzUQLtdNxywDG2t09zTNm4BnojNTqhnDPU2cAAwEIB8JhBBgWCAAJ
|
||||||
|
BQJfCbYTAhsMAAoJEKVE0YgdR9eU4DsA/Rtaq/LyTZprXgZ7T/CLeqvS1nrw
|
||||||
|
OHZE+VTHletWEPURAQDkxE5f7djKNPBwzrH4laW9++UA6EnOD3lQVusbU/EK
|
||||||
|
Aw==
|
||||||
|
=XAbX
|
||||||
|
-----END PGP PUBLIC KEY BLOCK-----
|
||||||
Binary file not shown.
|
|
@ -0,0 +1,140 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===================
|
||||||
|
キャラ詳細ページ
|
||||||
|
===================== */
|
||||||
|
|
||||||
|
body {
|
||||||
|
width:930px;
|
||||||
|
height:710px;
|
||||||
|
margin:0 auto;
|
||||||
|
background:url(http://fsv-static.autoc-one.jp/syanago/assets/pc/images/character/chara_bg.png) left top repeat;
|
||||||
|
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
|
||||||
|
font-size:18px;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chara_wrap {
|
||||||
|
width:900px;
|
||||||
|
height:auto;
|
||||||
|
margin:10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* キャラ名前まわり */
|
||||||
|
h1, h2 {
|
||||||
|
text-decoration:none;
|
||||||
|
}
|
||||||
|
.chara_name {
|
||||||
|
width:100%;
|
||||||
|
height:60px;
|
||||||
|
background:url(http://fsv-static.autoc-one.jp/syanago/assets/pc/images/character/chara_name_bg.png) left top no-repeat;
|
||||||
|
padding:15px 20px;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chara_name .brand, .chara_name .carname, .chara_name .carmodel {
|
||||||
|
color:#0e76b2;
|
||||||
|
display:table-cell;
|
||||||
|
padding-bottom:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chara_name .brand, .chara_name .carname {
|
||||||
|
font-size:30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chara_name .brand {
|
||||||
|
padding-right:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chara_name .carname {
|
||||||
|
padding-right:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chara_name .carmodel {
|
||||||
|
font-size:16px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chara_name .cast, .chara_name .illustrator {
|
||||||
|
display:table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
}
|
||||||
|
.chara_name .cast {
|
||||||
|
padding-right:15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*キャライラスト*/
|
||||||
|
.charaillust {
|
||||||
|
width:900px;
|
||||||
|
margin:0 auto;
|
||||||
|
z-index:1;
|
||||||
|
text-align:right;
|
||||||
|
position:absolute;
|
||||||
|
top:20px;
|
||||||
|
}
|
||||||
|
.charaimg {
|
||||||
|
max-height:640px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*フレーバーテキスト*/
|
||||||
|
.ftext, .sdwrap, .sdwrap img, .sdwrap p {
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ftext {
|
||||||
|
margin:15px 0 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sdwrap {
|
||||||
|
position:relative;
|
||||||
|
z-index:2;
|
||||||
|
width:510px;
|
||||||
|
height:170px;
|
||||||
|
background:url(http://fsv-static.autoc-one.jp/syanago/assets/pc/images/character/chara_ftext_bg.png) right top no-repeat;
|
||||||
|
margin-top:20px;
|
||||||
|
margin-left:-20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sdwrap p{
|
||||||
|
width:290px;
|
||||||
|
height:115px;
|
||||||
|
margin:15px 0 0 25px;
|
||||||
|
line-height:1.4em;
|
||||||
|
letter-spacing:0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*実車について*/
|
||||||
|
.cardetail, .cardetail img, .cardetail p {
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardetail {
|
||||||
|
width:650px;
|
||||||
|
height:284px;
|
||||||
|
background:url(http://fsv-static.autoc-one.jp/syanago/assets/pc/images/character/chara_car_bg.png) right top no-repeat;
|
||||||
|
margin:0;
|
||||||
|
position:relative;
|
||||||
|
z-index:3;
|
||||||
|
}
|
||||||
|
.cardetail img {
|
||||||
|
width:290px;
|
||||||
|
height:auto;
|
||||||
|
position:absolute;
|
||||||
|
left:20px;
|
||||||
|
top:80px;
|
||||||
|
}
|
||||||
|
.cardetail p {
|
||||||
|
width:300px;
|
||||||
|
height:190px;
|
||||||
|
margin:80px 0 0 24px;
|
||||||
|
font-size:16px;
|
||||||
|
line-height:1.4em;
|
||||||
|
letter-spacing:0.05em;
|
||||||
|
position:absolute;
|
||||||
|
left:300px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
|
v2.0 | 20110126
|
||||||
|
License: none (public domain)
|
||||||
|
*/
|
||||||
|
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,em,img,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
border:0;
|
||||||
|
font-size:100%;
|
||||||
|
font:inherit;
|
||||||
|
vertical-align:baseline;
|
||||||
|
}
|
||||||
|
body{line-height:1;}
|
||||||
|
table{border-collapse:collapse;border-spacing:0;}
|
||||||
|
label{cursor:pointer;}
|
||||||
|
select,input,button,textarea{font-size:99%;}
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after, q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
input[type=image] {
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*-- 2014.10.10.一旦削除 --*/
|
||||||
|
|
||||||
|
/*--
|
||||||
|
img.side_banner {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
--*/
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,119 @@
|
||||||
|
/*-------------------------------------
|
||||||
|
|
||||||
|
character
|
||||||
|
|
||||||
|
-------------------------------------*/
|
||||||
|
|
||||||
|
if(typeof syanago === "undefined"){
|
||||||
|
var syanago={};
|
||||||
|
}
|
||||||
|
|
||||||
|
$(function(){
|
||||||
|
|
||||||
|
syanago.character={};
|
||||||
|
syanago.character.currentIllust = $(".illust");
|
||||||
|
syanago.character.move = function(px){
|
||||||
|
syanago.character.currentIllust.animate({left:px + "px"},300);
|
||||||
|
};
|
||||||
|
|
||||||
|
var flg = "default",
|
||||||
|
flg2 = "default",
|
||||||
|
flg3 = "default",
|
||||||
|
flg4 = "default",
|
||||||
|
flg5 = "default",
|
||||||
|
fit = $(".fit"),
|
||||||
|
passo = $(".passo"),
|
||||||
|
leaf = $(".leaf"),
|
||||||
|
axela = $(".axela"),
|
||||||
|
outlander = $(".outlander"),
|
||||||
|
|
||||||
|
currentIllust = $(".illust"),
|
||||||
|
|
||||||
|
fitPoint = $(".fit .point_button"),
|
||||||
|
fitPointarea = $(".fit .pointarea"),
|
||||||
|
passoPoint = $(".passo .point_button"),
|
||||||
|
passoPointarea = $(".passo .pointarea"),
|
||||||
|
leafPoint = $(".leaf .point_button"),
|
||||||
|
leafPointarea = $(".leaf .pointarea"),
|
||||||
|
axelaPoint = $(".axela .point_button"),
|
||||||
|
axelaPointarea = $(".axela .pointarea"),
|
||||||
|
outlanderPoint = $(".outlander .point_button"),
|
||||||
|
outlanderPointarea = $(".outlander .pointarea"),
|
||||||
|
|
||||||
|
honda_button = $(".car_list ul li:eq(0) img"),
|
||||||
|
toyota_button = $(".car_list ul li:eq(1) img"),
|
||||||
|
nissan_button = $(".car_list ul li:eq(2) img"),
|
||||||
|
mazda_button = $(".car_list ul li:eq(3) img"),
|
||||||
|
mitsubishi_button = $(".car_list ul li:eq(4) img");
|
||||||
|
|
||||||
|
$(".pointarea").css('opacity','0');
|
||||||
|
|
||||||
|
fitPoint.on('click',function() {
|
||||||
|
if(flg == "default"){
|
||||||
|
fitPointarea.animate({opacity:1},700);
|
||||||
|
$(".fit .serif").stop().animate({opacity:0},"fast");
|
||||||
|
$(".fit .point_button img").attr("src","http://fsv-static.autoc-one.jp/syanago/assets/pc/images/character/button_point_current.png");
|
||||||
|
flg = "changed";
|
||||||
|
}else{
|
||||||
|
fitPointarea.animate({opacity:0},700);
|
||||||
|
$(".fit .serif").stop().animate({opacity:1},"fast");
|
||||||
|
$(".fit .point_button img").attr("src","http://fsv-static.autoc-one.jp/syanago/assets/pc/images/character/button_point.png");
|
||||||
|
flg = "default";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
passoPoint.on('click',function() {
|
||||||
|
if(flg2 == "default"){
|
||||||
|
passoPointarea.animate({opacity:1},700);
|
||||||
|
$(".passo .serif").stop().animate({opacity:0},"fast");
|
||||||
|
$(".passo .point_button img").attr("src","http://fsv-static.autoc-one.jp/syanago/assets/pc/images/character/button_point_current.png");
|
||||||
|
flg2 = "changed";
|
||||||
|
}else{
|
||||||
|
passoPointarea.animate({opacity:0},700);
|
||||||
|
$(".passo .serif").stop().animate({opacity:1},"fast");
|
||||||
|
$(".passo .point_button img").attr("src","http://fsv-static.autoc-one.jp/syanago/assets/pc/images/character/button_point.png");
|
||||||
|
flg2 = "default";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
leafPoint.on('click',function() {
|
||||||
|
if(flg3 == "default"){
|
||||||
|
leafPointarea.animate({opacity:1},700);
|
||||||
|
$(".leaf .serif").stop().animate({opacity:0},"fast");
|
||||||
|
$(".leaf .point_button img").attr("src","http://fsv-static.autoc-one.jp/syanago/assets/pc/images/character/button_point_current.png");
|
||||||
|
flg3 = "changed";
|
||||||
|
}else{
|
||||||
|
leafPointarea.animate({opacity:0},700);
|
||||||
|
$(".leaf .serif").stop().animate({opacity:1},"fast");
|
||||||
|
$(".leaf .point_button img").attr("src","http://fsv-static.autoc-one.jp/syanago/assets/pc/images/character/button_point.png");
|
||||||
|
flg3 = "default";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
axelaPoint.on('click',function() {
|
||||||
|
if(flg4 == "default"){
|
||||||
|
axelaPointarea.animate({opacity:1},700);
|
||||||
|
$(".axela .serif").stop().animate({opacity:0},"fast");
|
||||||
|
$(".axela .point_button img").attr("src","http://fsv-static.autoc-one.jp/syanago/assets/pc/images/character/button_point_current.png");
|
||||||
|
flg4 = "changed";
|
||||||
|
}else{
|
||||||
|
axelaPointarea.animate({opacity:0},700);
|
||||||
|
$(".axela .serif").stop().animate({opacity:1},"fast");
|
||||||
|
$(".axela .point_button img").attr("src","http://fsv-static.autoc-one.jp/syanago/assets/pc/images/character/button_point.png");
|
||||||
|
flg4 = "default";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
outlanderPoint.on('click',function() {
|
||||||
|
if(flg5 == "default"){
|
||||||
|
outlanderPointarea.animate({opacity:1},700);
|
||||||
|
$(".outlander .serif").stop().animate({opacity:0},"fast");
|
||||||
|
$(".outlander .point_button img").attr("src","http://fsv-static.autoc-one.jp/syanago/assets/pc/images/character/button_point_current.png");
|
||||||
|
flg5 = "changed";
|
||||||
|
}else{
|
||||||
|
outlanderPointarea.animate({opacity:0},700);
|
||||||
|
$(".outlander .serif").stop().animate({opacity:1},"fast");
|
||||||
|
$(".outlander .point_button img").attr("src","http://fsv-static.autoc-one.jp/syanago/assets/pc/images/character/button_point.png");
|
||||||
|
flg5 = "default";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head>
|
||||||
|
<title>キャラクター紹介 日産 スカイライン GT-R （CV：飯田里穂 イラスト：どくりんごぬこ）｜【車なごコレクション】公式サイト</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<meta name="description" content="キャラクター紹介、日産 スカイライン GT-R スカイラインGT-R！見参！サンニーなんて可愛いあだ名がついてるけど、私はあのレースに勝つためにいるの！いきますよ、監督！｜「車なごコレクション」 -車なコレ-公式サイト" />
|
||||||
|
<meta name="keywords" content="日産,スカイライン GT-R,飯田里穂,どくりんごぬこ,車なごコレクション,車なコレ,しゃなごこれくしょん,しゃなこれ,オートックワン,Autoc-one," />
|
||||||
|
<meta property="og:title" content="キャラクター紹介 日産 スカイライン GT-R （CV：飯田里穂 イラスト：どくりんごぬこ）｜「車なごコレクション」 -車なコレ-公式サイト">
|
||||||
|
<meta property="og:image" content="http://fsv-static.autoc-one.jp/syanago/assets/pc/images/common/og_image.jpg" />
|
||||||
|
<meta property="og:description" content="キャラクター紹介、日産 スカイライン GT-R スカイラインGT-R！見参！サンニーなんて可愛いあだ名がついてるけど、私はあのレースに勝つためにいるの！いきますよ、監督！｜「車なごコレクション」 -車なコレ-公式サイト">
|
||||||
|
<meta property="og:locale" content="ja_JP"><meta property="og:type" content="website">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="content-script-type" content="text/javascript">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
|
<link href="assets/pc/css/reset.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="assets/pc/css/charadetails.css" rel="stylesheet" type="text/css">
|
||||||
|
<link rel="shortcut icon" href="assets/pc/images/favicon.ico" />
|
||||||
|
<script type="text/javascript" src="assets/pc/js/syanago_character.js" charset="UTF-8"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="chara_wrap">
|
||||||
|
<div class="chara_name">
|
||||||
|
<h1><span class="brand">日産</span>
|
||||||
|
<span class="carname">スカイラインGT-R</span>
|
||||||
|
<span class="carmodel">[型式：E-BNR32]</span></h1>
|
||||||
|
<div class="clear"></div>
|
||||||
|
<h2><span class="cast">CV：飯田里穂</span>
|
||||||
|
<span class="illustrator">イラスト：どくりんごぬこ</span></h2>
|
||||||
|
</div>
|
||||||
|
<div class="ftext">
|
||||||
|
<img src="assets/pc/images/character/ftext.png" width="441" height="67" alt="いつでもあなたの心のポールポジション！日産 スカイラインGT-Rです！" class="ftextimg"/>
|
||||||
|
<div class="clear"></div>
|
||||||
|
<div class="sdwrap">
|
||||||
|
<img src="assets/pc/images/character/sd.gif" width="180" height="180" alt="日産 スカイラインGT-R"/>
|
||||||
|
<p>スカイラインGT-R！見参！サンニーなんて可愛いあだ名がついてるけど、私はあのレースに勝つためにいるの！いきますよ、監督！</p></div>
|
||||||
|
</div>
|
||||||
|
<div class="cardetail">
|
||||||
|
<img src="assets/pc/images/character/car.png" width="345" alt="日産 スカイラインGT-R" class="carimg"/>
|
||||||
|
<p>1989年に16年ぶりの復活を遂げたGT-R。当時のグループAレースを勝つために開発され、ベース車より60mm幅広となるブリスターフェンダーに加え、専用のフロントスポイラー＆リアスポイラーを採用。エンジンは2.6Lの直6に、インタークーラー付きツインターボチャージャーを装着し日本車最強の280psというパワーを獲得した。</p>
|
||||||
|
</div>
|
||||||
|
<div class="charaillust">
|
||||||
|
<img src="assets/pc/images/character/chara.png" height="640px" alt="日産 スカイラインGT-R" class="charaimg"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue