From 032b84a552966cc2de8902f9d82cb50edac94257 Mon Sep 17 00:00:00 2001 From: amphineko Date: Sat, 17 Nov 2018 02:21:29 +0800 Subject: [PATCH] another update --- assets/images/nat-pants-ng.png | Bin 0 -> 2111 bytes assets/stylesheets/footer.scss | 26 +++ assets/stylesheets/header.scss | 12 +- assets/stylesheets/identities.scss | 2 +- assets/stylesheets/index.bundle.css | 102 +++++---- assets/stylesheets/index.bundle.min.css | 2 +- assets/stylesheets/index.scss | 56 ++--- assets/stylesheets/labels.scss | 21 +- index.html | 263 +++++++++++++----------- 9 files changed, 285 insertions(+), 199 deletions(-) create mode 100644 assets/images/nat-pants-ng.png create mode 100644 assets/stylesheets/footer.scss diff --git a/assets/images/nat-pants-ng.png b/assets/images/nat-pants-ng.png new file mode 100644 index 0000000000000000000000000000000000000000..21ea61fa89ba8dc7adda73f324ea79db11570f7f GIT binary patch literal 2111 zcmb_de`wrP9M9lzvpQv{qmDU3sl3eaCccEu#?{2-DUM=mh-c}V~US94(?~<6L zy=#U3p%WbS5I02}!~HQq=$!ResZey_bWCNVY@MJm3Y)(>**`-6@JD?~?v7U4Z4LuT zzVG`!@B96Hf4uh&^mKP^Y}(R95X8oGD$$Govh!~6;qP|~PtN1t?M7;^MG$w~%Bxz8x;Ar?B2_s?^@lQS z#)zYWni@4x-)MIhjt;`8Otn8kwpB!IpoDBdR!T+95-TyvwJT!TQ8N_jLhQj9)!{fK zbD178uA7Jq`NK5if&o&9`nfP04Fp@s0LuvsD=-{Svz*9=MLtT_9twLiWku{w?5g>~ zqZn1NZ9`<3a=Gj;^M2jTGh8$pW!L}{2+$ZoTO*ncDzs*`)GZ{C1x?kkRb3+;i$Kzc z>==cadLfjIhFQ(3r3ojDsQ`oF{Hzm_3zT64XAGG|*SQQCR754D*%rof4XjbnZQUy9 zYnX0KuW*1t$=lGB`>A8^tJGvk1*`G$&-8nngsO--*90>p?TRtSTd` zL3sgJcm)(Uj0|jWL$C}*MK? zBy^kX0;-04?je_HCL^Xb%LW=m=|qgeS@El?EJ~1r2t*Vbg;|9TNkNI0BsPdYLPP>c zh_E54zCNMDA*c5B^)g?i1PLIkDDsqd!TsB zcAOpQG>w>2EnLo#+Mek{&(x%%O1ga_0_gOAjDk+#kxbRp>M9wyxd=S70BS9Y0Tu_#1Bm@y1k-`cc0YO|+AS;L!>VdCD zoDYe?P`yF_JMmgdVF74)gbz}Ny7f?Qt_#<$!HT{1e}%$0r>ECj%)i^tom+O&;v%{# ze0)1%Y_qTLz~w(qPOSgp(CcH{ z_U&FeXn%0^iMeh2!Ts-rPc6RIyL-o_z6UNApA)+-dis`W z(aO!ZkSj|A#}_@ww|}K3J)h%?S3mJszVr9w#Ya6#KQ4{^;!V#SeYt1gmA#)+!Moby zZ+XBYW9Pcnq_SyzcKh(=AAa>LUjAun-*n)mNhi$Hcc0tJ=e~Y^Vvlphr<2`@cRQbc F?jK&k#N7Y@ literal 0 HcmV?d00001 diff --git a/assets/stylesheets/footer.scss b/assets/stylesheets/footer.scss new file mode 100644 index 0000000..7fe2e0c --- /dev/null +++ b/assets/stylesheets/footer.scss @@ -0,0 +1,26 @@ +.footer.fab, .footer .fas, .footer .far { + text-align: center; + width: 1.25em; +} + +.copyright { + background: #004d1a; + color: #aaa; + font-size: 0.9em; + line-height: 2em; + padding: 0.5em 1em; +} + +.hosting { + background: #00802b; + color: #ddd; + font-size: 0.9em; + font-weight: normal; + display: block; + padding: 0.75em 1em; + text-decoration: none; +} + +.hosting .link { + color: #acd; +} diff --git a/assets/stylesheets/header.scss b/assets/stylesheets/header.scss index d1cb129..2fe2b5f 100644 --- a/assets/stylesheets/header.scss +++ b/assets/stylesheets/header.scss @@ -1,5 +1,5 @@ .header { - background: rgba(71, 102, 133, 0.99); + background: #006080; box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125); padding-bottom: 1.6em; padding-top: 1.6em; @@ -8,11 +8,19 @@ .header .greeting { color: #f5f5f5; font-weight: 300; - line-height: 1.6em; + line-height: 1.25em; margin: 0; text-shadow: 2px 2px 4px rgba(0,0,0,.25); } +.header .greeting:last-of-type { + margin-bottom: 1em; +} + +.header .greeting .chem-element { + text-decoration: none; +} + .header .picture { background: white; border-radius: 50%; diff --git a/assets/stylesheets/identities.scss b/assets/stylesheets/identities.scss index 16f5859..84f9b94 100644 --- a/assets/stylesheets/identities.scss +++ b/assets/stylesheets/identities.scss @@ -1,5 +1,5 @@ .identities { - background: #fafafa; + background: transparent; } .identities .small-labels { diff --git a/assets/stylesheets/index.bundle.css b/assets/stylesheets/index.bundle.css index 1534399..473a3ba 100644 --- a/assets/stylesheets/index.bundle.css +++ b/assets/stylesheets/index.bundle.css @@ -5026,8 +5026,31 @@ readers do not read off random characters that represent icons */ clear: both; width: 100%; } } +.footer.fab, .footer .fas, .footer .far { + text-align: center; + width: 1.25em; } + +.copyright { + background: #004d1a; + color: #aaa; + font-size: 0.9em; + line-height: 2em; + padding: 0.5em 1em; } + +.hosting { + background: #00802b; + color: #ddd; + font-size: 0.9em; + font-weight: normal; + display: block; + padding: 0.75em 1em; + text-decoration: none; } + +.hosting .link { + color: #acd; } + .header { - background: rgba(71, 102, 133, 0.99); + background: #006080; box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125); padding-bottom: 1.6em; padding-top: 1.6em; } @@ -5035,10 +5058,16 @@ readers do not read off random characters that represent icons */ .header .greeting { color: #f5f5f5; font-weight: 300; - line-height: 1.6em; + line-height: 1.25em; margin: 0; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); } +.header .greeting:last-of-type { + margin-bottom: 1em; } + +.header .greeting .chem-element { + text-decoration: none; } + .header .picture { background: white; border-radius: 50%; @@ -5052,7 +5081,7 @@ readers do not read off random characters that represent icons */ padding: 2em; } .identities { - background: #fafafa; } + background: transparent; } .identities .small-labels { padding: 1em; } @@ -5064,13 +5093,13 @@ readers do not read off random characters that represent icons */ text-decoration: none; } .small-labels .label { - color: white; + color: #333; font-weight: 300; padding: 0.5em 0; vertical-align: bottom; } .small-labels .label .content { - color: #ccc; } + color: #555; } .small-labels .label .link { color: #a8d2ff; } @@ -5079,6 +5108,9 @@ readers do not read off random characters that represent icons */ display: inline-block; position: relative; } +.small-labels .group > *, .small-labels > * { + vertical-align: middle; } + .small-labels .label > * { margin-right: .25em; } @@ -5086,20 +5118,22 @@ readers do not read off random characters that represent icons */ margin: 0; } .small-labels > .group, .small-labels > .label { - background: #333; + background: #eee; border-radius: 0.35em; border-bottom-left-radius: 0; border-top-left-radius: 0; box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.1); line-height: 1em; - margin-right: 0.5em; - margin-top: 1.75em; + margin: 0.5em; + margin-left: 0; padding-left: 0.75em; padding-right: 0.75em; } +.small-labels > .group.alt, .small-labels > .label.alt { + margin-top: 1.75em; } + /* label alt text */ -.small-labels .group::before, .small-labels .label::before { - color: #ccc; +.small-labels .group.alt::before, .small-labels .label.alt::before { content: attr(alt); font-size: 0.8em; left: 0; @@ -5130,38 +5164,34 @@ readers do not read off random characters that represent icons */ body { font-size: 1em; - margin: 0; } + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; } html { background: url("../images/nat-pants.png"); + background-position: center; font-family: "Helvetica Neue", Helvetica, Arial, PingFangTC-Light, "Microsoft YaHei", 微软雅黑, "STHeiti Light", STXihei, "华文细黑", Heiti, 黑体, sans-serif; } -.copyright { - background: #2b5045; - color: #ddd; - font-size: 0.9em; - line-height: 2em; - padding: 0.5em 1em; } - -.header .greeting .chem-element { - text-decoration: none; } - -.hosting { - background: #38685a; - color: #eee; - font-size: 0.9em; - font-weight: normal; - display: block; - padding: 0.75em 1em; - text-decoration: none; } - -.hosting .link { - color: #acd; } +#container { + background: url("../images/nat-pants-ng.png"); + background-position: center; + box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125); + margin: 1.5em auto; + max-width: 64em; } .no-wrap { display: inline-block; } -.section { - box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125); - margin: 0.5em auto; - max-width: 64em; } +#container, #container > *:first-child { + border-top-left-radius: 2em; } + +#container, #container > *:last-child, #container > *:last-child > *:last-child { + border-bottom-right-radius: 2em; } + +.header .small-labels .group::before, .header .small-labels .label::before { + color: #eee; } + +.identities .small-labels .group::before, .identities .small-labels .label::before { + color: #333; } diff --git a/assets/stylesheets/index.bundle.min.css b/assets/stylesheets/index.bundle.min.css index ce413ce..9d502e3 100644 --- a/assets/stylesheets/index.bundle.min.css +++ b/assets/stylesheets/index.bundle.min.css @@ -10,4 +10,4 @@ */@font-face{font-family:'Font Awesome 5 Free';font-style:normal;font-weight:400;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-family:'Font Awesome 5 Free';font-weight:400}/*! * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) - */@font-face{font-family:'Font Awesome 5 Free';font-style:normal;font-weight:900;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.fas{font-family:'Font Awesome 5 Free';font-weight:900}@media (max-width:400px){@-ms-viewport{width:320px}}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after,.clearfix:before,.grid-100:after,.grid-100:before,.grid-10:after,.grid-10:before,.grid-15:after,.grid-15:before,.grid-20:after,.grid-20:before,.grid-25:after,.grid-25:before,.grid-30:after,.grid-30:before,.grid-33:after,.grid-33:before,.grid-35:after,.grid-35:before,.grid-40:after,.grid-40:before,.grid-45:after,.grid-45:before,.grid-50:after,.grid-50:before,.grid-55:after,.grid-55:before,.grid-5:after,.grid-5:before,.grid-60:after,.grid-60:before,.grid-65:after,.grid-65:before,.grid-66:after,.grid-66:before,.grid-70:after,.grid-70:before,.grid-75:after,.grid-75:before,.grid-80:after,.grid-80:before,.grid-85:after,.grid-85:before,.grid-90:after,.grid-90:before,.grid-95:after,.grid-95:before,.grid-container:after,.grid-container:before,.grid-offset:after,.grid-offset:before,.mobile-grid-100:after,.mobile-grid-100:before,.mobile-grid-10:after,.mobile-grid-10:before,.mobile-grid-15:after,.mobile-grid-15:before,.mobile-grid-20:after,.mobile-grid-20:before,.mobile-grid-25:after,.mobile-grid-25:before,.mobile-grid-30:after,.mobile-grid-30:before,.mobile-grid-33:after,.mobile-grid-33:before,.mobile-grid-35:after,.mobile-grid-35:before,.mobile-grid-40:after,.mobile-grid-40:before,.mobile-grid-45:after,.mobile-grid-45:before,.mobile-grid-50:after,.mobile-grid-50:before,.mobile-grid-55:after,.mobile-grid-55:before,.mobile-grid-5:after,.mobile-grid-5:before,.mobile-grid-60:after,.mobile-grid-60:before,.mobile-grid-65:after,.mobile-grid-65:before,.mobile-grid-66:after,.mobile-grid-66:before,.mobile-grid-70:after,.mobile-grid-70:before,.mobile-grid-75:after,.mobile-grid-75:before,.mobile-grid-80:after,.mobile-grid-80:before,.mobile-grid-85:after,.mobile-grid-85:before,.mobile-grid-90:after,.mobile-grid-90:before,.mobile-grid-95:after,.mobile-grid-95:before{content:".";display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0}.clearfix:after,.grid-100:after,.grid-10:after,.grid-15:after,.grid-20:after,.grid-25:after,.grid-30:after,.grid-33:after,.grid-35:after,.grid-40:after,.grid-45:after,.grid-50:after,.grid-55:after,.grid-5:after,.grid-60:after,.grid-65:after,.grid-66:after,.grid-70:after,.grid-75:after,.grid-80:after,.grid-85:after,.grid-90:after,.grid-95:after,.grid-container:after,.grid-offset:after,.mobile-grid-100:after,.mobile-grid-10:after,.mobile-grid-15:after,.mobile-grid-20:after,.mobile-grid-25:after,.mobile-grid-30:after,.mobile-grid-33:after,.mobile-grid-35:after,.mobile-grid-40:after,.mobile-grid-45:after,.mobile-grid-50:after,.mobile-grid-55:after,.mobile-grid-5:after,.mobile-grid-60:after,.mobile-grid-65:after,.mobile-grid-66:after,.mobile-grid-70:after,.mobile-grid-75:after,.mobile-grid-80:after,.mobile-grid-85:after,.mobile-grid-90:after,.mobile-grid-95:after{clear:both}.grid-container{margin-left:auto;margin-right:auto;max-width:1200px;padding-left:10px;padding-right:10px}.grid-10,.grid-100,.grid-15,.grid-20,.grid-25,.grid-30,.grid-33,.grid-35,.grid-40,.grid-45,.grid-5,.grid-50,.grid-55,.grid-60,.grid-65,.grid-66,.grid-70,.grid-75,.grid-80,.grid-85,.grid-90,.grid-95,.mobile-grid-10,.mobile-grid-100,.mobile-grid-15,.mobile-grid-20,.mobile-grid-25,.mobile-grid-30,.mobile-grid-33,.mobile-grid-35,.mobile-grid-40,.mobile-grid-45,.mobile-grid-5,.mobile-grid-50,.mobile-grid-55,.mobile-grid-60,.mobile-grid-65,.mobile-grid-66,.mobile-grid-70,.mobile-grid-75,.mobile-grid-80,.mobile-grid-85,.mobile-grid-90,.mobile-grid-95{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:10px;padding-right:10px}.grid-parent{padding-left:0;padding-right:0}.grid-offset{clear:both;margin-left:-10px;margin-right:-10px}@media (max-width:767px){.mobile-pull-10,.mobile-pull-15,.mobile-pull-20,.mobile-pull-25,.mobile-pull-30,.mobile-pull-33,.mobile-pull-35,.mobile-pull-40,.mobile-pull-45,.mobile-pull-5,.mobile-pull-50,.mobile-pull-55,.mobile-pull-60,.mobile-pull-65,.mobile-pull-66,.mobile-pull-70,.mobile-pull-75,.mobile-pull-80,.mobile-pull-85,.mobile-pull-90,.mobile-pull-95,.mobile-push-10,.mobile-push-15,.mobile-push-20,.mobile-push-25,.mobile-push-30,.mobile-push-33,.mobile-push-35,.mobile-push-40,.mobile-push-45,.mobile-push-5,.mobile-push-50,.mobile-push-55,.mobile-push-60,.mobile-push-65,.mobile-push-66,.mobile-push-70,.mobile-push-75,.mobile-push-80,.mobile-push-85,.mobile-push-90,.mobile-push-95{position:relative}.hide-on-mobile{display:none!important}.mobile-grid-5{float:left;width:5%}.mobile-prefix-5{margin-left:5%}.mobile-suffix-5{margin-right:5%}.mobile-push-5{left:5%}.mobile-pull-5{left:-5%}.mobile-grid-10{float:left;width:10%}.mobile-prefix-10{margin-left:10%}.mobile-suffix-10{margin-right:10%}.mobile-push-10{left:10%}.mobile-pull-10{left:-10%}.mobile-grid-15{float:left;width:15%}.mobile-prefix-15{margin-left:15%}.mobile-suffix-15{margin-right:15%}.mobile-push-15{left:15%}.mobile-pull-15{left:-15%}.mobile-grid-20{float:left;width:20%}.mobile-prefix-20{margin-left:20%}.mobile-suffix-20{margin-right:20%}.mobile-push-20{left:20%}.mobile-pull-20{left:-20%}.mobile-grid-25{float:left;width:25%}.mobile-prefix-25{margin-left:25%}.mobile-suffix-25{margin-right:25%}.mobile-push-25{left:25%}.mobile-pull-25{left:-25%}.mobile-grid-30{float:left;width:30%}.mobile-prefix-30{margin-left:30%}.mobile-suffix-30{margin-right:30%}.mobile-push-30{left:30%}.mobile-pull-30{left:-30%}.mobile-grid-35{float:left;width:35%}.mobile-prefix-35{margin-left:35%}.mobile-suffix-35{margin-right:35%}.mobile-push-35{left:35%}.mobile-pull-35{left:-35%}.mobile-grid-40{float:left;width:40%}.mobile-prefix-40{margin-left:40%}.mobile-suffix-40{margin-right:40%}.mobile-push-40{left:40%}.mobile-pull-40{left:-40%}.mobile-grid-45{float:left;width:45%}.mobile-prefix-45{margin-left:45%}.mobile-suffix-45{margin-right:45%}.mobile-push-45{left:45%}.mobile-pull-45{left:-45%}.mobile-grid-50{float:left;width:50%}.mobile-prefix-50{margin-left:50%}.mobile-suffix-50{margin-right:50%}.mobile-push-50{left:50%}.mobile-pull-50{left:-50%}.mobile-grid-55{float:left;width:55%}.mobile-prefix-55{margin-left:55%}.mobile-suffix-55{margin-right:55%}.mobile-push-55{left:55%}.mobile-pull-55{left:-55%}.mobile-grid-60{float:left;width:60%}.mobile-prefix-60{margin-left:60%}.mobile-suffix-60{margin-right:60%}.mobile-push-60{left:60%}.mobile-pull-60{left:-60%}.mobile-grid-65{float:left;width:65%}.mobile-prefix-65{margin-left:65%}.mobile-suffix-65{margin-right:65%}.mobile-push-65{left:65%}.mobile-pull-65{left:-65%}.mobile-grid-70{float:left;width:70%}.mobile-prefix-70{margin-left:70%}.mobile-suffix-70{margin-right:70%}.mobile-push-70{left:70%}.mobile-pull-70{left:-70%}.mobile-grid-75{float:left;width:75%}.mobile-prefix-75{margin-left:75%}.mobile-suffix-75{margin-right:75%}.mobile-push-75{left:75%}.mobile-pull-75{left:-75%}.mobile-grid-80{float:left;width:80%}.mobile-prefix-80{margin-left:80%}.mobile-suffix-80{margin-right:80%}.mobile-push-80{left:80%}.mobile-pull-80{left:-80%}.mobile-grid-85{float:left;width:85%}.mobile-prefix-85{margin-left:85%}.mobile-suffix-85{margin-right:85%}.mobile-push-85{left:85%}.mobile-pull-85{left:-85%}.mobile-grid-90{float:left;width:90%}.mobile-prefix-90{margin-left:90%}.mobile-suffix-90{margin-right:90%}.mobile-push-90{left:90%}.mobile-pull-90{left:-90%}.mobile-grid-95{float:left;width:95%}.mobile-prefix-95{margin-left:95%}.mobile-suffix-95{margin-right:95%}.mobile-push-95{left:95%}.mobile-pull-95{left:-95%}.mobile-grid-33{float:left;width:33.33333%}.mobile-prefix-33{margin-left:33.33333%}.mobile-suffix-33{margin-right:33.33333%}.mobile-push-33{left:33.33333%}.mobile-pull-33{left:-33.33333%}.mobile-grid-66{float:left;width:66.66667%}.mobile-prefix-66{margin-left:66.66667%}.mobile-suffix-66{margin-right:66.66667%}.mobile-push-66{left:66.66667%}.mobile-pull-66{left:-66.66667%}.mobile-grid-100{clear:both;width:100%}}@media (min-width:768px){.pull-10,.pull-15,.pull-20,.pull-25,.pull-30,.pull-33,.pull-35,.pull-40,.pull-45,.pull-5,.pull-50,.pull-55,.pull-60,.pull-65,.pull-66,.pull-70,.pull-75,.pull-80,.pull-85,.pull-90,.pull-95,.push-10,.push-15,.push-20,.push-25,.push-30,.push-33,.push-35,.push-40,.push-45,.push-5,.push-50,.push-55,.push-60,.push-65,.push-66,.push-70,.push-75,.push-80,.push-85,.push-90,.push-95{position:relative}.hide-on-desktop{display:none!important}.grid-5{float:left;width:5%}.prefix-5{margin-left:5%}.suffix-5{margin-right:5%}.push-5{left:5%}.pull-5{left:-5%}.grid-10{float:left;width:10%}.prefix-10{margin-left:10%}.suffix-10{margin-right:10%}.push-10{left:10%}.pull-10{left:-10%}.grid-15{float:left;width:15%}.prefix-15{margin-left:15%}.suffix-15{margin-right:15%}.push-15{left:15%}.pull-15{left:-15%}.grid-20{float:left;width:20%}.prefix-20{margin-left:20%}.suffix-20{margin-right:20%}.push-20{left:20%}.pull-20{left:-20%}.grid-25{float:left;width:25%}.prefix-25{margin-left:25%}.suffix-25{margin-right:25%}.push-25{left:25%}.pull-25{left:-25%}.grid-30{float:left;width:30%}.prefix-30{margin-left:30%}.suffix-30{margin-right:30%}.push-30{left:30%}.pull-30{left:-30%}.grid-35{float:left;width:35%}.prefix-35{margin-left:35%}.suffix-35{margin-right:35%}.push-35{left:35%}.pull-35{left:-35%}.grid-40{float:left;width:40%}.prefix-40{margin-left:40%}.suffix-40{margin-right:40%}.push-40{left:40%}.pull-40{left:-40%}.grid-45{float:left;width:45%}.prefix-45{margin-left:45%}.suffix-45{margin-right:45%}.push-45{left:45%}.pull-45{left:-45%}.grid-50{float:left;width:50%}.prefix-50{margin-left:50%}.suffix-50{margin-right:50%}.push-50{left:50%}.pull-50{left:-50%}.grid-55{float:left;width:55%}.prefix-55{margin-left:55%}.suffix-55{margin-right:55%}.push-55{left:55%}.pull-55{left:-55%}.grid-60{float:left;width:60%}.prefix-60{margin-left:60%}.suffix-60{margin-right:60%}.push-60{left:60%}.pull-60{left:-60%}.grid-65{float:left;width:65%}.prefix-65{margin-left:65%}.suffix-65{margin-right:65%}.push-65{left:65%}.pull-65{left:-65%}.grid-70{float:left;width:70%}.prefix-70{margin-left:70%}.suffix-70{margin-right:70%}.push-70{left:70%}.pull-70{left:-70%}.grid-75{float:left;width:75%}.prefix-75{margin-left:75%}.suffix-75{margin-right:75%}.push-75{left:75%}.pull-75{left:-75%}.grid-80{float:left;width:80%}.prefix-80{margin-left:80%}.suffix-80{margin-right:80%}.push-80{left:80%}.pull-80{left:-80%}.grid-85{float:left;width:85%}.prefix-85{margin-left:85%}.suffix-85{margin-right:85%}.push-85{left:85%}.pull-85{left:-85%}.grid-90{float:left;width:90%}.prefix-90{margin-left:90%}.suffix-90{margin-right:90%}.push-90{left:90%}.pull-90{left:-90%}.grid-95{float:left;width:95%}.prefix-95{margin-left:95%}.suffix-95{margin-right:95%}.push-95{left:95%}.pull-95{left:-95%}.grid-33{float:left;width:33.33333%}.prefix-33{margin-left:33.33333%}.suffix-33{margin-right:33.33333%}.push-33{left:33.33333%}.pull-33{left:-33.33333%}.grid-66{float:left;width:66.66667%}.prefix-66{margin-left:66.66667%}.suffix-66{margin-right:66.66667%}.push-66{left:66.66667%}.pull-66{left:-66.66667%}.grid-100{clear:both;width:100%}}.header{background:rgba(71,102,133,.99);box-shadow:0 0 .15em .15em rgba(0,0,0,.125);padding-bottom:1.6em;padding-top:1.6em}.header .greeting{color:#f5f5f5;font-weight:300;line-height:1.6em;margin:0;text-shadow:2px 2px 4px rgba(0,0,0,.25)}.header .picture{background:#fff;border-radius:50%;box-shadow:0 0 .15em .15em rgba(0,0,0,.15);box-sizing:content-box;display:block;padding:3%;width:94%}.header .picture-container{padding:2em}.identities{background:#fafafa}.identities .small-labels{padding:1em}.identities .small-labels .group::before,.identities .small-labels .label::before{color:#333}.small-labels a{text-decoration:none}.small-labels .label{color:#fff;font-weight:300;padding:.5em 0;vertical-align:bottom}.small-labels .label .content{color:#ccc}.small-labels .label .link{color:#a8d2ff}.small-labels .group,.small-labels .label{display:inline-block;position:relative}.small-labels .label>*{margin-right:.25em}.small-labels .group .label{margin:0}.small-labels>.group,.small-labels>.label{background:#333;border-radius:.35em;border-bottom-left-radius:0;border-top-left-radius:0;box-shadow:0 0 .15em .15em rgba(0,0,0,.1);line-height:1em;margin-right:.5em;margin-top:1.75em;padding-left:.75em;padding-right:.75em}.small-labels .group::before,.small-labels .label::before{color:#ccc;content:attr(alt);font-size:.8em;left:0;position:absolute;text-shadow:2px 2px 4px rgba(0,0,0,.25);top:-1.75em}.chem-element{background:rgba(255,163,163,.09);border-radius:.25em;box-shadow:0 0 .1em .1em rgba(0,0,0,.05);color:#fff;margin-right:.1em;padding:.35em .1em .35em .35em;transition-duration:.5s}.chem-element:hover{box-shadow:0 0 .2em .2em rgba(255,255,255,.05);transform:translate(1em,1em)}.chem-element[element=sodium]::before{content:'11';font-size:.45em;vertical-align:-.5em}.chem-element[element=sodium]:hover{background:#faa3a3}body{font-size:1em;margin:0}html{background:url(../images/nat-pants.png);font-family:"Helvetica Neue",Helvetica,Arial,PingFangTC-Light,"Microsoft YaHei",微软雅黑,"STHeiti Light",STXihei,"华文细黑",Heiti,黑体,sans-serif}.copyright{background:#2b5045;color:#ddd;font-size:.9em;line-height:2em;padding:.5em 1em}.header .greeting .chem-element{text-decoration:none}.hosting{background:#38685a;color:#eee;font-size:.9em;font-weight:400;display:block;padding:.75em 1em;text-decoration:none}.hosting .link{color:#acd}.no-wrap{display:inline-block}.section{box-shadow:0 0 .15em .15em rgba(0,0,0,.125);margin:.5em auto;max-width:64em} \ No newline at end of file + */@font-face{font-family:'Font Awesome 5 Free';font-style:normal;font-weight:900;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.fas{font-family:'Font Awesome 5 Free';font-weight:900}@media (max-width:400px){@-ms-viewport{width:320px}}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after,.clearfix:before,.grid-100:after,.grid-100:before,.grid-10:after,.grid-10:before,.grid-15:after,.grid-15:before,.grid-20:after,.grid-20:before,.grid-25:after,.grid-25:before,.grid-30:after,.grid-30:before,.grid-33:after,.grid-33:before,.grid-35:after,.grid-35:before,.grid-40:after,.grid-40:before,.grid-45:after,.grid-45:before,.grid-50:after,.grid-50:before,.grid-55:after,.grid-55:before,.grid-5:after,.grid-5:before,.grid-60:after,.grid-60:before,.grid-65:after,.grid-65:before,.grid-66:after,.grid-66:before,.grid-70:after,.grid-70:before,.grid-75:after,.grid-75:before,.grid-80:after,.grid-80:before,.grid-85:after,.grid-85:before,.grid-90:after,.grid-90:before,.grid-95:after,.grid-95:before,.grid-container:after,.grid-container:before,.grid-offset:after,.grid-offset:before,.mobile-grid-100:after,.mobile-grid-100:before,.mobile-grid-10:after,.mobile-grid-10:before,.mobile-grid-15:after,.mobile-grid-15:before,.mobile-grid-20:after,.mobile-grid-20:before,.mobile-grid-25:after,.mobile-grid-25:before,.mobile-grid-30:after,.mobile-grid-30:before,.mobile-grid-33:after,.mobile-grid-33:before,.mobile-grid-35:after,.mobile-grid-35:before,.mobile-grid-40:after,.mobile-grid-40:before,.mobile-grid-45:after,.mobile-grid-45:before,.mobile-grid-50:after,.mobile-grid-50:before,.mobile-grid-55:after,.mobile-grid-55:before,.mobile-grid-5:after,.mobile-grid-5:before,.mobile-grid-60:after,.mobile-grid-60:before,.mobile-grid-65:after,.mobile-grid-65:before,.mobile-grid-66:after,.mobile-grid-66:before,.mobile-grid-70:after,.mobile-grid-70:before,.mobile-grid-75:after,.mobile-grid-75:before,.mobile-grid-80:after,.mobile-grid-80:before,.mobile-grid-85:after,.mobile-grid-85:before,.mobile-grid-90:after,.mobile-grid-90:before,.mobile-grid-95:after,.mobile-grid-95:before{content:".";display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0}.clearfix:after,.grid-100:after,.grid-10:after,.grid-15:after,.grid-20:after,.grid-25:after,.grid-30:after,.grid-33:after,.grid-35:after,.grid-40:after,.grid-45:after,.grid-50:after,.grid-55:after,.grid-5:after,.grid-60:after,.grid-65:after,.grid-66:after,.grid-70:after,.grid-75:after,.grid-80:after,.grid-85:after,.grid-90:after,.grid-95:after,.grid-container:after,.grid-offset:after,.mobile-grid-100:after,.mobile-grid-10:after,.mobile-grid-15:after,.mobile-grid-20:after,.mobile-grid-25:after,.mobile-grid-30:after,.mobile-grid-33:after,.mobile-grid-35:after,.mobile-grid-40:after,.mobile-grid-45:after,.mobile-grid-50:after,.mobile-grid-55:after,.mobile-grid-5:after,.mobile-grid-60:after,.mobile-grid-65:after,.mobile-grid-66:after,.mobile-grid-70:after,.mobile-grid-75:after,.mobile-grid-80:after,.mobile-grid-85:after,.mobile-grid-90:after,.mobile-grid-95:after{clear:both}.grid-container{margin-left:auto;margin-right:auto;max-width:1200px;padding-left:10px;padding-right:10px}.grid-10,.grid-100,.grid-15,.grid-20,.grid-25,.grid-30,.grid-33,.grid-35,.grid-40,.grid-45,.grid-5,.grid-50,.grid-55,.grid-60,.grid-65,.grid-66,.grid-70,.grid-75,.grid-80,.grid-85,.grid-90,.grid-95,.mobile-grid-10,.mobile-grid-100,.mobile-grid-15,.mobile-grid-20,.mobile-grid-25,.mobile-grid-30,.mobile-grid-33,.mobile-grid-35,.mobile-grid-40,.mobile-grid-45,.mobile-grid-5,.mobile-grid-50,.mobile-grid-55,.mobile-grid-60,.mobile-grid-65,.mobile-grid-66,.mobile-grid-70,.mobile-grid-75,.mobile-grid-80,.mobile-grid-85,.mobile-grid-90,.mobile-grid-95{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:10px;padding-right:10px}.grid-parent{padding-left:0;padding-right:0}.grid-offset{clear:both;margin-left:-10px;margin-right:-10px}@media (max-width:767px){.mobile-pull-10,.mobile-pull-15,.mobile-pull-20,.mobile-pull-25,.mobile-pull-30,.mobile-pull-33,.mobile-pull-35,.mobile-pull-40,.mobile-pull-45,.mobile-pull-5,.mobile-pull-50,.mobile-pull-55,.mobile-pull-60,.mobile-pull-65,.mobile-pull-66,.mobile-pull-70,.mobile-pull-75,.mobile-pull-80,.mobile-pull-85,.mobile-pull-90,.mobile-pull-95,.mobile-push-10,.mobile-push-15,.mobile-push-20,.mobile-push-25,.mobile-push-30,.mobile-push-33,.mobile-push-35,.mobile-push-40,.mobile-push-45,.mobile-push-5,.mobile-push-50,.mobile-push-55,.mobile-push-60,.mobile-push-65,.mobile-push-66,.mobile-push-70,.mobile-push-75,.mobile-push-80,.mobile-push-85,.mobile-push-90,.mobile-push-95{position:relative}.hide-on-mobile{display:none!important}.mobile-grid-5{float:left;width:5%}.mobile-prefix-5{margin-left:5%}.mobile-suffix-5{margin-right:5%}.mobile-push-5{left:5%}.mobile-pull-5{left:-5%}.mobile-grid-10{float:left;width:10%}.mobile-prefix-10{margin-left:10%}.mobile-suffix-10{margin-right:10%}.mobile-push-10{left:10%}.mobile-pull-10{left:-10%}.mobile-grid-15{float:left;width:15%}.mobile-prefix-15{margin-left:15%}.mobile-suffix-15{margin-right:15%}.mobile-push-15{left:15%}.mobile-pull-15{left:-15%}.mobile-grid-20{float:left;width:20%}.mobile-prefix-20{margin-left:20%}.mobile-suffix-20{margin-right:20%}.mobile-push-20{left:20%}.mobile-pull-20{left:-20%}.mobile-grid-25{float:left;width:25%}.mobile-prefix-25{margin-left:25%}.mobile-suffix-25{margin-right:25%}.mobile-push-25{left:25%}.mobile-pull-25{left:-25%}.mobile-grid-30{float:left;width:30%}.mobile-prefix-30{margin-left:30%}.mobile-suffix-30{margin-right:30%}.mobile-push-30{left:30%}.mobile-pull-30{left:-30%}.mobile-grid-35{float:left;width:35%}.mobile-prefix-35{margin-left:35%}.mobile-suffix-35{margin-right:35%}.mobile-push-35{left:35%}.mobile-pull-35{left:-35%}.mobile-grid-40{float:left;width:40%}.mobile-prefix-40{margin-left:40%}.mobile-suffix-40{margin-right:40%}.mobile-push-40{left:40%}.mobile-pull-40{left:-40%}.mobile-grid-45{float:left;width:45%}.mobile-prefix-45{margin-left:45%}.mobile-suffix-45{margin-right:45%}.mobile-push-45{left:45%}.mobile-pull-45{left:-45%}.mobile-grid-50{float:left;width:50%}.mobile-prefix-50{margin-left:50%}.mobile-suffix-50{margin-right:50%}.mobile-push-50{left:50%}.mobile-pull-50{left:-50%}.mobile-grid-55{float:left;width:55%}.mobile-prefix-55{margin-left:55%}.mobile-suffix-55{margin-right:55%}.mobile-push-55{left:55%}.mobile-pull-55{left:-55%}.mobile-grid-60{float:left;width:60%}.mobile-prefix-60{margin-left:60%}.mobile-suffix-60{margin-right:60%}.mobile-push-60{left:60%}.mobile-pull-60{left:-60%}.mobile-grid-65{float:left;width:65%}.mobile-prefix-65{margin-left:65%}.mobile-suffix-65{margin-right:65%}.mobile-push-65{left:65%}.mobile-pull-65{left:-65%}.mobile-grid-70{float:left;width:70%}.mobile-prefix-70{margin-left:70%}.mobile-suffix-70{margin-right:70%}.mobile-push-70{left:70%}.mobile-pull-70{left:-70%}.mobile-grid-75{float:left;width:75%}.mobile-prefix-75{margin-left:75%}.mobile-suffix-75{margin-right:75%}.mobile-push-75{left:75%}.mobile-pull-75{left:-75%}.mobile-grid-80{float:left;width:80%}.mobile-prefix-80{margin-left:80%}.mobile-suffix-80{margin-right:80%}.mobile-push-80{left:80%}.mobile-pull-80{left:-80%}.mobile-grid-85{float:left;width:85%}.mobile-prefix-85{margin-left:85%}.mobile-suffix-85{margin-right:85%}.mobile-push-85{left:85%}.mobile-pull-85{left:-85%}.mobile-grid-90{float:left;width:90%}.mobile-prefix-90{margin-left:90%}.mobile-suffix-90{margin-right:90%}.mobile-push-90{left:90%}.mobile-pull-90{left:-90%}.mobile-grid-95{float:left;width:95%}.mobile-prefix-95{margin-left:95%}.mobile-suffix-95{margin-right:95%}.mobile-push-95{left:95%}.mobile-pull-95{left:-95%}.mobile-grid-33{float:left;width:33.33333%}.mobile-prefix-33{margin-left:33.33333%}.mobile-suffix-33{margin-right:33.33333%}.mobile-push-33{left:33.33333%}.mobile-pull-33{left:-33.33333%}.mobile-grid-66{float:left;width:66.66667%}.mobile-prefix-66{margin-left:66.66667%}.mobile-suffix-66{margin-right:66.66667%}.mobile-push-66{left:66.66667%}.mobile-pull-66{left:-66.66667%}.mobile-grid-100{clear:both;width:100%}}@media (min-width:768px){.pull-10,.pull-15,.pull-20,.pull-25,.pull-30,.pull-33,.pull-35,.pull-40,.pull-45,.pull-5,.pull-50,.pull-55,.pull-60,.pull-65,.pull-66,.pull-70,.pull-75,.pull-80,.pull-85,.pull-90,.pull-95,.push-10,.push-15,.push-20,.push-25,.push-30,.push-33,.push-35,.push-40,.push-45,.push-5,.push-50,.push-55,.push-60,.push-65,.push-66,.push-70,.push-75,.push-80,.push-85,.push-90,.push-95{position:relative}.hide-on-desktop{display:none!important}.grid-5{float:left;width:5%}.prefix-5{margin-left:5%}.suffix-5{margin-right:5%}.push-5{left:5%}.pull-5{left:-5%}.grid-10{float:left;width:10%}.prefix-10{margin-left:10%}.suffix-10{margin-right:10%}.push-10{left:10%}.pull-10{left:-10%}.grid-15{float:left;width:15%}.prefix-15{margin-left:15%}.suffix-15{margin-right:15%}.push-15{left:15%}.pull-15{left:-15%}.grid-20{float:left;width:20%}.prefix-20{margin-left:20%}.suffix-20{margin-right:20%}.push-20{left:20%}.pull-20{left:-20%}.grid-25{float:left;width:25%}.prefix-25{margin-left:25%}.suffix-25{margin-right:25%}.push-25{left:25%}.pull-25{left:-25%}.grid-30{float:left;width:30%}.prefix-30{margin-left:30%}.suffix-30{margin-right:30%}.push-30{left:30%}.pull-30{left:-30%}.grid-35{float:left;width:35%}.prefix-35{margin-left:35%}.suffix-35{margin-right:35%}.push-35{left:35%}.pull-35{left:-35%}.grid-40{float:left;width:40%}.prefix-40{margin-left:40%}.suffix-40{margin-right:40%}.push-40{left:40%}.pull-40{left:-40%}.grid-45{float:left;width:45%}.prefix-45{margin-left:45%}.suffix-45{margin-right:45%}.push-45{left:45%}.pull-45{left:-45%}.grid-50{float:left;width:50%}.prefix-50{margin-left:50%}.suffix-50{margin-right:50%}.push-50{left:50%}.pull-50{left:-50%}.grid-55{float:left;width:55%}.prefix-55{margin-left:55%}.suffix-55{margin-right:55%}.push-55{left:55%}.pull-55{left:-55%}.grid-60{float:left;width:60%}.prefix-60{margin-left:60%}.suffix-60{margin-right:60%}.push-60{left:60%}.pull-60{left:-60%}.grid-65{float:left;width:65%}.prefix-65{margin-left:65%}.suffix-65{margin-right:65%}.push-65{left:65%}.pull-65{left:-65%}.grid-70{float:left;width:70%}.prefix-70{margin-left:70%}.suffix-70{margin-right:70%}.push-70{left:70%}.pull-70{left:-70%}.grid-75{float:left;width:75%}.prefix-75{margin-left:75%}.suffix-75{margin-right:75%}.push-75{left:75%}.pull-75{left:-75%}.grid-80{float:left;width:80%}.prefix-80{margin-left:80%}.suffix-80{margin-right:80%}.push-80{left:80%}.pull-80{left:-80%}.grid-85{float:left;width:85%}.prefix-85{margin-left:85%}.suffix-85{margin-right:85%}.push-85{left:85%}.pull-85{left:-85%}.grid-90{float:left;width:90%}.prefix-90{margin-left:90%}.suffix-90{margin-right:90%}.push-90{left:90%}.pull-90{left:-90%}.grid-95{float:left;width:95%}.prefix-95{margin-left:95%}.suffix-95{margin-right:95%}.push-95{left:95%}.pull-95{left:-95%}.grid-33{float:left;width:33.33333%}.prefix-33{margin-left:33.33333%}.suffix-33{margin-right:33.33333%}.push-33{left:33.33333%}.pull-33{left:-33.33333%}.grid-66{float:left;width:66.66667%}.prefix-66{margin-left:66.66667%}.suffix-66{margin-right:66.66667%}.push-66{left:66.66667%}.pull-66{left:-66.66667%}.grid-100{clear:both;width:100%}}.footer .far,.footer .fas,.footer.fab{text-align:center;width:1.25em}.copyright{background:#004d1a;color:#aaa;font-size:.9em;line-height:2em;padding:.5em 1em}.hosting{background:#00802b;color:#ddd;font-size:.9em;font-weight:400;display:block;padding:.75em 1em;text-decoration:none}.hosting .link{color:#acd}.header{background:#006080;box-shadow:0 0 .15em .15em rgba(0,0,0,.125);padding-bottom:1.6em;padding-top:1.6em}.header .greeting{color:#f5f5f5;font-weight:300;line-height:1.25em;margin:0;text-shadow:2px 2px 4px rgba(0,0,0,.25)}.header .greeting:last-of-type{margin-bottom:1em}.header .greeting .chem-element{text-decoration:none}.header .picture{background:#fff;border-radius:50%;box-shadow:0 0 .15em .15em rgba(0,0,0,.15);box-sizing:content-box;display:block;padding:3%;width:94%}.header .picture-container{padding:2em}.identities{background:0 0}.identities .small-labels{padding:1em}.identities .small-labels .group::before,.identities .small-labels .label::before{color:#333}.small-labels a{text-decoration:none}.small-labels .label{color:#333;font-weight:300;padding:.5em 0;vertical-align:bottom}.small-labels .label .content{color:#555}.small-labels .label .link{color:#a8d2ff}.small-labels .group,.small-labels .label{display:inline-block;position:relative}.small-labels .group>*,.small-labels>*{vertical-align:middle}.small-labels .label>*{margin-right:.25em}.small-labels .group .label{margin:0}.small-labels>.group,.small-labels>.label{background:#eee;border-radius:.35em;border-bottom-left-radius:0;border-top-left-radius:0;box-shadow:0 0 .15em .15em rgba(0,0,0,.1);line-height:1em;margin:.5em;margin-left:0;padding-left:.75em;padding-right:.75em}.small-labels>.group.alt,.small-labels>.label.alt{margin-top:1.75em}.small-labels .group.alt::before,.small-labels .label.alt::before{content:attr(alt);font-size:.8em;left:0;position:absolute;text-shadow:2px 2px 4px rgba(0,0,0,.25);top:-1.75em}.chem-element{background:rgba(255,163,163,.09);border-radius:.25em;box-shadow:0 0 .1em .1em rgba(0,0,0,.05);color:#fff;margin-right:.1em;padding:.35em .1em .35em .35em;transition-duration:.5s}.chem-element:hover{box-shadow:0 0 .2em .2em rgba(255,255,255,.05);transform:translate(1em,1em)}.chem-element[element=sodium]::before{content:'11';font-size:.45em;vertical-align:-.5em}.chem-element[element=sodium]:hover{background:#faa3a3}body{font-size:1em;margin:0;display:flex;flex-direction:column;justify-content:center}html{background:url(../images/nat-pants.png);background-position:center;font-family:"Helvetica Neue",Helvetica,Arial,PingFangTC-Light,"Microsoft YaHei",微软雅黑,"STHeiti Light",STXihei,"华文细黑",Heiti,黑体,sans-serif}#container{background:url(../images/nat-pants-ng.png);background-position:center;box-shadow:0 0 .15em .15em rgba(0,0,0,.125);margin:1.5em auto;max-width:64em}.no-wrap{display:inline-block}#container,#container>:first-child{border-top-left-radius:2em}#container,#container>:last-child,#container>:last-child>:last-child{border-bottom-right-radius:2em}.header .small-labels .group::before,.header .small-labels .label::before{color:#eee}.identities .small-labels .group::before,.identities .small-labels .label::before{color:#333} \ No newline at end of file diff --git a/assets/stylesheets/index.scss b/assets/stylesheets/index.scss index d9de8e4..86abf6e 100644 --- a/assets/stylesheets/index.scss +++ b/assets/stylesheets/index.scss @@ -4,6 +4,7 @@ @import "fontawesome/solid.scss"; @import "../../node_modules/unsemantic/assets/sass/unsemantic-grid-responsive.scss"; +@import "footer.scss"; @import "header.scss"; @import "identities.scss"; @import "labels.scss"; @@ -13,45 +14,44 @@ body { font-size: 1em; margin: 0; + + display: flex; + flex-direction: column; + justify-content: center; } html { background: url('../images/nat-pants.png'); + background-position: center; font-family: "Helvetica Neue", Helvetica, Arial, PingFangTC-Light, "Microsoft YaHei", 微软雅黑, "STHeiti Light", STXihei, "华文细黑", Heiti, 黑体, sans-serif; } -.copyright { - background: #2b5045; - color: #ddd; - font-size: 0.9em; - line-height: 2em; - padding: 0.5em 1em; -} - -.header .greeting .chem-element { - text-decoration: none; -} - -.hosting { - background: #38685a; - color: #eee; - font-size: 0.9em; - font-weight: normal; - display: block; - padding: 0.75em 1em; - text-decoration: none; -} - -.hosting .link { - color: #acd; +#container { + background: url('../images/nat-pants-ng.png'); + background-position: center; + box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125); + margin: 1.5em auto; + max-width: 64em; } .no-wrap { display: inline-block; } -.section { - box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125); - margin: 0.5em auto; - max-width: 64em; +$section-border-radius: 2em; + +#container, #container>*:first-child { + border-top-left-radius: $section-border-radius; } + +#container, #container>*:last-child, #container>*:last-child>*:last-child { + border-bottom-right-radius: $section-border-radius; +} + +.header .small-labels .group::before, .header .small-labels .label::before { + color: #eee; +} + +.identities .small-labels .group::before, .identities .small-labels .label::before { + color: #333; +} \ No newline at end of file diff --git a/assets/stylesheets/labels.scss b/assets/stylesheets/labels.scss index 3ef3d98..f9a5663 100644 --- a/assets/stylesheets/labels.scss +++ b/assets/stylesheets/labels.scss @@ -3,14 +3,14 @@ } .small-labels .label { - color: white; + color: #333; font-weight: 300; padding: 0.5em 0; vertical-align: bottom; } .small-labels .label .content { - color: #ccc; + color: #555; } .small-labels .label .link { @@ -22,6 +22,10 @@ position: relative; } +.small-labels .group>*, .small-labels>* { + vertical-align: middle; +} + .small-labels .label>* { margin-right: .25em; } @@ -33,22 +37,25 @@ .small-labels>.group, .small-labels>.label { $small-label-group-padding-left: 0.75em; - background: #333; + background: #eee; border-radius: 0.35em; border-bottom-left-radius: 0; border-top-left-radius: 0; box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.1); line-height: 1em; - margin-right: 0.5em; - margin-top: 1.75em; + margin: 0.5em; + margin-left: 0; padding-left: $small-label-group-padding-left; padding-right: $small-label-group-padding-left; } +.small-labels>.group.alt, .small-labels>.label.alt { + margin-top: 1.75em; +} + /* label alt text */ -.small-labels .group::before, .small-labels .label::before { - color: #ccc; +.small-labels .group.alt::before, .small-labels .label.alt::before { content: attr(alt); font-size: 0.8em; left: 0; diff --git a/index.html b/index.html index 813a0a9..0b81640 100644 --- a/index.html +++ b/index.html @@ -8,143 +8,158 @@ -
-
- - - -
-
-

- Hey, it's - - Naoki - Kobayashi -

-

- 好耶， - 是饼干 - (<ゝω·) ~☆ - -

-
- - - Maeeko Laboratory - //futa.moe/maeeko/ +
+
+
+ + -
- - 汉语 / 漢語 / English -
-
-
- - current - undergraduate -
-
-
-
- - chrome -
-
- - spaces -
-
-
- - 10 +
+

+ Hey, it's + + Naoki +

+

+ 好耶， + 是饼干 + (<ゝω·) ~☆ + +

+
+
+ + 汉语 & 漢語 & English
-
- - debian +
+ + current + undergraduate
-
- - high sierra +
+
+ + + Maeeko Laboratory + //futa.moe/maeeko/ + + + + AS205058 + AS396303 + +
+
+
+ + multiple fullstack
+
+ + spaces +
+
+
+
+
+ + 10 +
+
+ + high sierra +
+
+ + debian +
+
+
+
+ + + latest +
+
+
+
+
-
-
-
- - - GitHub - @amphineko - - - - Telegram - @amphineko - - - - Twitter - amphineko - -
-
-
-
- - BEMANI +
+
+ + + GitHub + @amphineko + + + + Telegram + @amphineko + + + + Twitter + amphineko + +
+
+
+
+ + DJ-ID + NekoSauc +
-
- - SEGA -
-
- - TAiTO -
-
- NekoSauc + + + osu! + Rukatan + +
+ + + Ingress + REDACTED
- - - osu! - Rukatan - -
- - - Ingress - REDACTED +
+ + + Steam + NekoSauce + + + + CS:GO + + + + Uplay + NekoSauce2 + + + + R6:S +
- - - Steam - - CS:GO - NekoSauce - - - - Uplay - - R6:Siege - NekoSauce2 -
-
-
- - Fork this template on GitHub -
-
- - Hosted by Maeeko Laboratory - //futa.moe/maeeko - -
- Copyright © 2015-2018 amphineko. Illustrations have their own licenses. +
+ + Fork this template on GitHub +
+
+ + Hosted by Maeeko Laboratory + //futa.moe/maeeko + +
+ + Copyright © 2015-2018 amphineko. Illustrations have their own licenses. +