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