xtaodada/Homepage
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

validation

Browse Source
This commit is contained in:
amphineko 2019-04-08 20:58:32 +09:00
parent 34ba195775
commit 6e30e57342
4 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/images/header-background.svg
View File

@ -1,4 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="768" viewBox="0 0 1024 768">
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="header-background-svg-root" width="1024" height="768" viewBox="0 0 1024 768">
<path d="M0.014,331.486l1075-538.5v1077Z" fill="#354c74"/>
<path d="M0,0.015l460.923,921.97H-460.923Z" fill="#414c64"/>
<path d="M1449.99,187.736L709.6,804.994,511.985-35.994Z" fill="#413c64"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 303 B

After

Width:  |  Height:  |  Size: 559 B

4
src/assets/stylesheets/chem-elements.scss
View File

@ -14,12 +14,12 @@
}
.chem-element[element="neon"]::before {
.chem-element[data-element="neon"]::before {
content: '10';
font-size: 0.45em;
vertical-align: -0.5em;
}
.chem-element[element="neon"]:hover {
.chem-element[data-element="neon"]:hover {
background: #faa3a3;
}

2
src/assets/stylesheets/labels.scss
View File

@ -60,7 +60,7 @@
/* label alt text */
.small-labels .group.alt::before, .small-labels .label.alt::before {
content: attr(alt);
content: attr(data-alt);
font-size: 0.8em;
left: 0;
position: absolute;

33
src/index.html
View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
@ -12,14 +13,14 @@
<div class="section header grid-container grid-parent">
<div class="split picture-container grid-30">
<a href="assets/images/amphineko.png">
<img class="picture" src="assets/images/amphineko@1x.jpg">
<img alt="picture of amphineko" class="picture" src="assets/images/amphineko@1x.jpg">
</a>
</div>
<div class="split grid-70">
<div class="names">
<h1 class="name lang-en">
<span class="no-wrap"><a class="chem-element" element="neon"
<span class="no-wrap"><a class="chem-element" data-element="neon"
href="https://en.wikipedia.org/wiki/Sodium">Ne</span>komimi-Relay
</h1>
</div>
@ -33,29 +34,29 @@
</div>
<div class="small-labels">
<div alt="languages" class="label alt">
<div data-alt="languages" class="label alt">
<i aria-hidden="true" class="fas fa-language"></i>
<span class="title">汉语 & 漢語 & English</span>
</div>
<div alt="status" class="label alt">
<div data-alt="status" class="label alt">
<i aria-hidden="true" class="fas fa-university"></i>
<span class="content">undergraduate</span>
</div>
</div>
<div class="small-labels">
<a alt="organization" class="label alt" href="//futa.moe/maeeko/">
<a data-alt="organization" class="label alt" href="//futa.moe/maeeko/">
<i aria-hidden="true" class="fas fa-map-marker"></i>
<span class="title">Maeeko Laboratory</span>
<span class="link">//futa.moe/maeeko/</span>
</a>
<a alt="noc-operator" class="label alt" href="#">
<a data-alt="noc-operator" class="label alt" href="#">
<i class="fas fa-network-wired"></i>
<span class="content">AS205058</span>
<span class="content"><del>AS396303</del></span>
</a>
</div>
<div class="small-labels">
<div alt="platforms::desktop" class="group alt">
<div data-alt="platforms::desktop" class="group alt">
<div class="label">
<i aria-hidden="true" class="fab fa-windows"></i>
<span class="content">10</span>
@ -69,7 +70,7 @@
<span class="content">debian</span>
</div>
</div>
<div alt="platforms::handsets" class="group alt">
<div data-alt="platforms::handsets" class="group alt">
<div class="label">
<i aria-hidden="true" class="fab fa-apple"></i>
<i aria-hidden="true" class="fab fa-android"></i>
@ -92,18 +93,18 @@
</div>
<div class="split small-labels grid-50 mobile-grid-100">
<a alt="social network" class="label alt" href="https://github.com/amphineko">
<a data-alt="social network" class="label alt" href="https://github.com/amphineko">
<i class="fab fa-github"></i>
<span class="title">GitHub</span>
<span class="content">@amphineko</span>
</a>
<br />
<a alt="instant messaging" class="label alt" href="https://telegram.me/amphineko">
<a data-alt="instant messaging" class="label alt" href="https://telegram.me/amphineko">
<i class="fab fa-telegram"></i>
<span class="title">Telegram</span>
<span class="content">@amphineko</span>
</a>
<a alt="social network" class="label alt" href="https://twitter.com/amphineko">
<a data-alt="social network" class="label alt" href="https://twitter.com/amphineko">
<i class="fab fa-twitter"></i>
<span class="title">Twitter</span>
<span class="content">amphineko</span>
@ -121,21 +122,21 @@
</div>
<div class="split small-labels grid-50 mobile-grid-100">
<div alt="arcade" class="group alt">
<div data-alt="arcade" class="group alt">
<div class="label">
<i class="fas fa-compact-disc"></i>
<span class="title">K/S/T</span>
<span class="content">NekoSauc</span>
</div>
</div>
<a alt="?" class="label alt" href="https://osu.ppy.sh/u/Rukatan">
<a data-alt="?" class="label alt" href="https://osu.ppy.sh/u/Rukatan">
<i class="fab fa-accessible-icon"></i>
<span class="title">osu!</span>
<span class="content">Rukatan</span>
</a>
<br />
<a alt="platform::steam" class="label alt" href="https://steamcommunity.com/id/Amphineko">
<a data-alt="platform::steam" class="label alt" href="https://steamcommunity.com/id/Amphineko">
<i class="fab fa-steam"></i>
<span class="title">Steam</span>
<span class="content">NekoSauce</span>
@ -144,7 +145,7 @@
<i class="fas fa-heart"></i>
<span class="title">CS:GO</span>
</a>
<a alt="platform::uplay" class="label alt" href="https://club.ubisoft.com/profile/NekoSauce2">
<a data-alt="platform::uplay" class="label alt" href="https://club.ubisoft.com/profile/NekoSauce2">
<i class="fas fa-user-check"></i>
<span class="title">Uplay</span>
<span class="content">NekoSauce2</span>
@ -155,7 +156,7 @@
</a>
<br />
<div alt="mobile game" class="label alt">
<div data-alt="mobile game" class="label alt">
<i class="fas fa-bicycle"></i>
<i class="fas fa-plane"></i>
<span class="title">Ingress</span>