diff --git a/assets/css/index.v2.css b/assets/css/index.v2.css new file mode 100644 index 0000000..c5f467a --- /dev/null +++ b/assets/css/index.v2.css @@ -0,0 +1,179 @@ +body, html { + margin: 0; + padding: 0; +} + +body { + background: url('../images/darknoise.png'); + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, Arial, 'Microsoft YaHei', STXihei, 华文细黑, 微软雅黑, SimSun, 宋体, Heiti, 黑体, sans-serif; + padding: 2em 0; +} + +.account a { + text-decoration: none; +} + +.account a, .account i { + display: inline-block; + line-height: 1.5em; + vertical-align: baseline; +} + +.account i { + font-size: 1.3em; + text-align: center; + width: 1.5em; +} + +.account-dark a { + color: #264566; +} + +.account-dark i { + color: #480808; +} + +.account-dark span { + color: #333; +} + +.account-white a { + color: #FAFAFA; +} + +.account-white i { + color: #EAEAEA; +} + +.block-blue { + background: #385068; +} + +.block-grey { + background: #333; +} + +.block-shadow { + box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15); +} + +.block-white { + background: #FAFAFA; +} + +.footer { + color: #EAEAEA; + font-size: 0.8em; + line-height: 3em; +} + +.footer span a { + color: #759BC2; + text-decoration: none; +} + +.link-showcase { + border-bottom: 2px dashed #385068; + padding: 0.5em 0.5em 0.6em 0.5em; +} + +.link-showcase .entry { + display: block; + text-decoration: none; + transition-duration: 0.25s; +} + +.link-showcase .entry .link { + color: #3E3B49; + display: block; + font-size: 1.1em; + line-height: 3em; + text-align: center; + text-decoration: none; + transition-duration: 0.25s; +} + +.link-showcase .entry .link:hover::after, .link-showcase .entry a:hover::before { + color: #1E3B59; + display: inline-block; + margin: 0 0.5em; + transition-duration: 0.25s; + vertical-align: baseline; +} + +.link-showcase .entry .link:hover::after { + content: ']'; +} + +.link-showcase .entry .link:hover::before { + content: '['; +} + +.link-showcase .entry .disabled { + cursor: not-allowed; +} + +.link-showcase .entry i { + text-align: center; + vertical-align: middle; + width: 1.6em; +} + +.header { + padding-bottom: 1em; + padding-top: 1em; +} + +.header .title { + color: #DDD; + font-size: 1.5em; + font-weight: 300; +} + +.header .title .name { + color: #EEE; + font-size: 1.2em; +} + +.margin-wrap { + margin: 0 auto; + max-width: 64em; +} + +.picture-container { + margin: 0 auto; + max-height: 16em; + max-width: 16em; + position: relative; +} + +.picture-container::before { + content: ""; + display: block; + padding-top: 100%; +} + +.picture { + background: url('../images/headpic.png'); + background-size: 100%; + box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25); + border-radius: 50%; + bottom: 1em; + display: block; + left: 1em; + position: absolute; + right: 1em; + top: 1em; +} + +.tile { + color: #333; + line-height: 2em; + padding-bottom: 2em; + padding-top: 1em; +} + +.tile .title { + color: #222; + font-weight: 300; +} diff --git a/index.html b/index.html index 8d43e9a..f60869f 100644 --- a/index.html +++ b/index.html @@ -4,46 +4,46 @@ - + Naoki Rinmous is here! -
-