From 3781cf7a6af13e67ff8ad4a06e7536b726105692 Mon Sep 17 00:00:00 2001 From: Vlad Faust Date: Fri, 17 Jun 2016 13:45:25 +0300 Subject: [PATCH] Social media icons, improved responsivity --- img/em.svg | 65 +++++++++++++++++++++++++++++++++++++++++++ img/gh.svg | 40 ++++++++++++++++++++++++++ img/ig.svg | 41 +++++++++++++++++++++++++++ img/sk.svg | 38 +++++++++++++++++++++++++ img/tg.svg | 38 +++++++++++++++++++++++++ img/tw.svg | 35 +++++++++++++++++++++++ img/vk.svg | 36 ++++++++++++++++++++++++ index.html | 26 +++++++++++++++-- stylesheets/style.css | 36 +++++++++++++++++++----- 9 files changed, 345 insertions(+), 10 deletions(-) create mode 100644 img/em.svg create mode 100644 img/gh.svg create mode 100644 img/ig.svg create mode 100644 img/sk.svg create mode 100644 img/tg.svg create mode 100644 img/tw.svg create mode 100644 img/vk.svg diff --git a/img/em.svg b/img/em.svg new file mode 100644 index 0000000..ee315c1 --- /dev/null +++ b/img/em.svg @@ -0,0 +1,65 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/img/gh.svg b/img/gh.svg new file mode 100644 index 0000000..d75a04f --- /dev/null +++ b/img/gh.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/ig.svg b/img/ig.svg new file mode 100644 index 0000000..718e53d --- /dev/null +++ b/img/ig.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/sk.svg b/img/sk.svg new file mode 100644 index 0000000..d3af088 --- /dev/null +++ b/img/sk.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/tg.svg b/img/tg.svg new file mode 100644 index 0000000..d134c91 --- /dev/null +++ b/img/tg.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/tw.svg b/img/tw.svg new file mode 100644 index 0000000..f0ef8db --- /dev/null +++ b/img/tw.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/vk.svg b/img/vk.svg new file mode 100644 index 0000000..5859316 --- /dev/null +++ b/img/vk.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 73aea0a..a39536d 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ @vladfaust - + @@ -15,8 +15,28 @@
@vladfaust
-
- hello@vladfaust.com +
+ +
diff --git a/stylesheets/style.css b/stylesheets/style.css index 5957f61..5cd5902 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -18,10 +18,7 @@ body { display: flex; align-items: center; justify-content: center; -} - -.flex-row { - width: auto; + text-align: center; } .title { @@ -38,14 +35,29 @@ body { background-color: #e9573f; } -.footer a { - font-size: 1.5em; +.footer .email-link { + display: none; } .footer a:link, .footer a:visited, .footer a:active, .footer a:focus { color: white; } +.footer .social-icon { + display: inline-block; + text-decoration: none; + vertical-align: middle; +} + +.footer .social-icon:not(:first-child) { + margin-left: 0.6em; +} + +.footer .social-icon img { + height: 2.2em; + margin-bottom: -0.2em; +} + @media (min-width: 767px) { .title { font-size: 5em; @@ -55,7 +67,17 @@ body { height: 4em; } - .footer a { + .footer .email-link { + display: inline-block; + vertical-align: middle; font-size: 1.5em; } + + .footer .social-icons { + display: inline-block; + } + + .footer .social-icons .email-icon { + display: none; + } }