diff --git a/src/assets/stylesheets/chem-elements.scss b/src/assets/stylesheets/chem-elements.scss index 5c46be7..cd961e6 100644 --- a/src/assets/stylesheets/chem-elements.scss +++ b/src/assets/stylesheets/chem-elements.scss @@ -1,25 +1,25 @@ .chem-element { - background: rgba(255,163,163,.09); - border-radius: .25em; - box-shadow: 0 0 0.1em 0.1em rgba(0,0,0,.05); + background: rgba(255, 163, 163, 0.09); + border-radius: 0.25em; + box-shadow: 0 0 0.1em 0.1em rgba(0, 0, 0, 0.05); color: #fff; - margin-right: .1em; - padding: .35em .1em .35em .35em; - transition-duration: .5s; + margin-left: -0.35em; + margin-right: 0.1em; + padding: 0.2em 0.1em 0.2em 0.35em; + transition-duration: 0.5s; } .chem-element:hover { - box-shadow: 0 0 0.2em 0.2em rgba(255,255,255,.05); - transform: translate(1em,1em); + box-shadow: 0 0 0.2em 0.2em rgba(255, 255, 255, 0.05); } -.chem-element[element=sodium]::before { - content: '11'; - font-size: .45em; - vertical-align: -.5em; +.chem-element[element="neon"]::before { + content: '10'; + font-size: 0.45em; + vertical-align: -0.5em; } -.chem-element[element="sodium"]:hover { +.chem-element[element="neon"]:hover { background: #faa3a3; } diff --git a/src/assets/stylesheets/footer.scss b/src/assets/stylesheets/footer.scss index 7fe2e0c..ae2d54c 100644 --- a/src/assets/stylesheets/footer.scss +++ b/src/assets/stylesheets/footer.scss @@ -4,7 +4,7 @@ } .copyright { - background: #004d1a; + background: #354c64; color: #aaa; font-size: 0.9em; line-height: 2em; @@ -12,7 +12,7 @@ } .hosting { - background: #00802b; + background: #354c64; color: #ddd; font-size: 0.9em; font-weight: normal; diff --git a/src/assets/stylesheets/header.scss b/src/assets/stylesheets/header.scss index 2fe2b5f..a582fd2 100644 --- a/src/assets/stylesheets/header.scss +++ b/src/assets/stylesheets/header.scss @@ -1,24 +1,47 @@ .header { - background: #006080; + background: #466685; box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125); - padding-bottom: 1.6em; + margin-top: -3.2em; padding-top: 1.6em; + padding-bottom: 1.4em; } -.header .greeting { +.header .split { + padding: 0 0.75em; +} + +.header .name { color: #f5f5f5; + display: inline-block; font-weight: 300; line-height: 1.25em; - margin: 0; + margin: 0.25em 0; + margin-right: 0.5em; text-shadow: 2px 2px 4px rgba(0,0,0,.25); } -.header .greeting:last-of-type { - margin-bottom: 1em; +.header .name .chem-element { + text-decoration: none; } -.header .greeting .chem-element { - text-decoration: none; +.header .name::after { + bottom: 0em; + color: #aaa; + display: inline-block; + font-size: 0.5em; + position: relative; +} + +.header .name.lang-cn::after { + content: 'zh-CN'; +} + +.header .name.lang-en::after { + content: 'en-US'; +} + +.header .name.lang-ja::after { + content: 'ja-JP'; } .header .picture { @@ -26,7 +49,6 @@ border-radius: 50%; box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.15); box-sizing: content-box; - display: block; padding: 3%; width: 94%; } diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss index 971bd54..4095472 100644 --- a/src/assets/stylesheets/index.scss +++ b/src/assets/stylesheets/index.scss @@ -7,6 +7,7 @@ @import "footer.scss"; @import "header.scss"; @import "identities.scss"; +@import "intro.scss"; @import "labels.scss"; @import "chem-elements.scss"; @@ -27,7 +28,7 @@ html { } #container { - background: url('../images/nat-pants-ng.png'); + background: rgba(255, 255, 255, 0.98); background-position: center; box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125); margin: 1.5em auto; diff --git a/src/assets/stylesheets/intro.scss b/src/assets/stylesheets/intro.scss new file mode 100644 index 0000000..b2fe92a --- /dev/null +++ b/src/assets/stylesheets/intro.scss @@ -0,0 +1,18 @@ +.intro .block { + display: flex; +} + +.intro .block .split { + align-self: center; + padding: 1em; +} + +.intro p { + border-left: 0.25em solid #006080; + color: #555; + font-size: 1.2em; + font-weight: 300; + line-height: 1.75em; + overflow: auto; + padding: 0.5em 0.5em; +} diff --git a/src/assets/stylesheets/labels.scss b/src/assets/stylesheets/labels.scss index 9683be0..9c2dc99 100644 --- a/src/assets/stylesheets/labels.scss +++ b/src/assets/stylesheets/labels.scss @@ -1,3 +1,7 @@ +.small-labels { + display: inline-block; +} + .small-labels a { text-decoration: none; } diff --git a/src/index.html b/src/index.html index 921ac0f..db2dde9 100644 --- a/src/index.html +++ b/src/index.html @@ -10,31 +10,35 @@
+ Cursed Network Engineering student.
+ Has few experience in full-stack development.
+ Operating own autonomous system.
+ Contact me if you're interested to hire :D
+
+ Music game is LIFE!
+ Love FPS and simulation games.
+ Ingress mission collector.
+