[www-doc] [Git][VideoLAN.org/websites][master] Improve design of social buttons
Felix Paul Kühne
gitlab at videolan.org
Wed Apr 27 14:21:12 CEST 2016
Felix Paul Kühne pushed to branch master at VideoLAN organization / websites
Commits:
883a026b by David Loiret at 2016-04-27T14:21:00+02:00
Improve design of social buttons
Signed-off-by: Felix Paul Kühne <fkuehne at videolan.org>
- - - - -
7 changed files:
- + www.videolan.org/images/icons/social/facebook.svg
- + www.videolan.org/images/icons/social/google-plus.svg
- + www.videolan.org/images/icons/social/twitter.svg
- www.videolan.org/include/footer.php
- www.videolan.org/include/header.php
- www.videolan.org/index.php
- www.videolan.org/style/style.scss
Changes:
=====================================
www.videolan.org/images/icons/social/facebook.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/social/facebook.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
+<path fill="#fff" d="M22.605 9.28l-0.332 6.221h-4.767v15.558h-6.223v-15.558h-3.112v-6.221h3.112v-1.689c0-1.279 0.517-3.251 1.44-4.473 0.983-1.295 2.568-2.176 4.878-2.176 3.769 0 5.474 0.536 5.474 0.536l-0.691 4.427c0 0-1.379-0.361-2.539-0.361-1.159 0-2.339 0.415-2.339 1.578v2.158h5.099z"></path>
+</svg>
=====================================
www.videolan.org/images/icons/social/google-plus.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/social/google-plus.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
+<path fill="#fff" d="M17.471 2c0 0-6.28 0-8.373 0-3.754 0-7.287 2.844-7.287 6.138 0 3.366 2.559 6.083 6.378 6.083 0.266 0 0.524-0.005 0.776-0.024-0.248 0.475-0.425 1.009-0.425 1.564 0 0.936 0.503 1.694 1.14 2.313-0.481 0-0.945 0.014-1.452 0.014-4.649-0-8.228 2.961-8.228 6.032 0 3.024 3.923 4.916 8.573 4.916 5.301 0 8.228-3.008 8.228-6.032 0-2.425-0.715-3.877-2.928-5.442-0.757-0.536-2.204-1.839-2.204-2.604 0-0.897 0.256-1.34 1.607-2.395 1.385-1.082 2.365-2.603 2.365-4.372 0-2.106-0.938-4.159-2.699-4.837h2.655l1.874-1.355zM14.546 22.483c0.066 0.28 0.103 0.569 0.103 0.863 0 2.444-1.575 4.353-6.093 4.353-3.214 0-5.535-2.035-5.535-4.478 0-2.395 2.879-4.389 6.093-4.354 0.75 0.008 1.449 0.129 2.083 0.334 1.745 1.213 2.996 1.899 3.349 3.281zM9.401 13.368c-2.157-0.065-4.207-2.413-4.58-5.246s1.074-5.001 3.231-4.937c2.157 0.065 4.207 2.338 4.58 5.171s-1.075 5.077-3.231 5.012zM26 8v-6h-2v6h-6v2h6v6h2v-6h6v-2z"></path>
+</svg>
=====================================
www.videolan.org/images/icons/social/twitter.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/social/twitter.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
+<path fill="#fff" d="M27.969 9.864c0.013 0.264 0.020 0.532 0.020 0.797 0 8.157-6.21 17.565-17.564 17.565-3.486 0-6.728-1.026-9.462-2.776 0.482 0.060 0.975 0.084 1.473 0.084 2.892 0 5.557-0.99 7.666-2.647-2.7-0.046-4.981-1.831-5.768-4.283 0.376 0.069 0.762 0.11 1.162 0.11 0.567 0 0.493-0.073 1.011-0.216-2.825-0.565-5.573-3.057-5.573-6.046 0-0.027 0-0.054 0-0.080 3.302 0.462 2.407 0.739 3.418 0.774-1.657-1.106-2.438-2.995-2.438-5.137 0-1.129 0.459-2.193 0.991-3.103 3.044 3.733 7.668 6.193 12.802 6.448-0.109-0.45-0.122-0.922-0.122-1.407 0-3.412 2.787-6.175 6.188-6.175 1.782 0 3.392 0.75 4.52 1.953 1.404-0.278 2.729-0.793 3.925-1.499-0.462 1.443-1.442 2.65-2.713 3.417 1.248-0.15 2.441-0.484 3.548-0.972-0.829 1.235-1.874 2.321-3.085 3.193z"></path>
+</svg>
=====================================
www.videolan.org/include/footer.php
=====================================
--- a/www.videolan.org/include/footer.php
+++ b/www.videolan.org/include/footer.php
@@ -8,8 +8,22 @@ function footer($tag = "", $alternate_lang=array()) {
<div id='footer'>
<div class="container">
<div class="row">
- <a class="col-sm-12 col-md-3" href="<?php getLink('/'); ?>">
- <?php image( 'logoGrey.png', 'Association VideoLAN', 'center-xs center-sm' ); ?></a>
+ <div class="col-sm-12 col-md-3">
+ <a href="<?php getLink('/'); ?>">
+ <?php image( 'logoGrey.png', 'Association VideoLAN', 'center-xs center-sm' ); ?>
+ </a>
+ <div class="social-box">
+ <a class="social" href="https://plus.google.com/+vlc">
+ <i class="icon-google-plus"></i>
+ </a>
+ <a class="social" href="http://www.facebook.com/vlc.media.player">
+ <i class="icon-facebook"></i>
+ </a>
+ <a class="social" href="http://www.twitter.com/videolan">
+ <i class="icon-twitter"></i>
+ </a>
+ </div>
+ </div>
<div class="col-xs-6 col-md-2">
<div class='footerHeading'>VLC media player</div>
<ul>
=====================================
www.videolan.org/include/header.php
=====================================
--- a/www.videolan.org/include/header.php
+++ b/www.videolan.org/include/header.php
@@ -290,13 +290,6 @@ function start_body( $body_color, $language, $b_show_donate = true, $nobanner, $
<?php
echo 'VideoLAN, '. _('a project and a').' <a href="//www.videolan.org/videolan/" class="noUnderline">'._('non-profit organization').'.</a> ';?>
</div>
- <div class="social-box">
- <div id='plusone' style="padding: 3px 10px;">
- <g:plusone size="medium" annotation="none" href="http://www.videolan.org"></g:plusone>
- </div>
- <div style="padding: 3px 14px;"><a href="http://www.facebook.com/vlc.media.player" style="padding-top: 10px;"><?php image( 'facebook.png', "Facebook" );?></a></div>
- <div style="padding: 2px 12px;"><a href="http://www.twitter.com/videolan"><?php image( 'twitter.png', "Twitter" );?></a></div>
- </div>
</div>
<?php
}
=====================================
www.videolan.org/index.php
=====================================
--- a/www.videolan.org/index.php
+++ b/www.videolan.org/index.php
@@ -250,8 +250,12 @@ include($_SERVER["DOCUMENT_ROOT"] . "/include/magpierss/rss_fetch.inc");
} else {
echo ' style="padding-right: 20px;"';
} ?>>
- <a href="http://www.twitter.com/videolan"><?php image('twitter.png', "Twitter"); ?></a>
- <a href="http://www.facebook.com/vlc.media.player"><?php image('facebook.png', "Facebook"); ?></a>
+ <a class="social" href="http://www.twitter.com/videolan">
+ <i class="icon-twitter"></i>
+ </a>
+ <a class="social" href="http://www.facebook.com/vlc.media.player">
+ <i class="icon-facebook"></i>
+ </a>
</span>
</h1>
<?php
=====================================
www.videolan.org/style/style.scss
=====================================
--- a/www.videolan.org/style/style.scss
+++ b/www.videolan.org/style/style.scss
@@ -904,9 +904,49 @@ img, .normalButton {
/* ============================ SOCIAL BOX =========================== */
.social-box {
- position: absolute;
- top: -12px;
- right: 10px;
+ margin-top: 10px;
+ text-align: center;
+}
+
+ at media (min-width: 992px) {
+ .social-box {
+ width: 183px;
+ }
+}
+
+a.social {
+ color: #fff;
+ display: inline-block;
+ margin: 5px;
+ i {
+ background-color: #777777;
+ display: block;
+ width: 32px;
+ height: 32px;
+ background-repeat: no-repeat;
+ background-position: center;
+ border-radius: 50%;
+ background-size: 20px;
+ border-radius: 50%;
+ }
+ .icon-facebook {
+ background-image: url('//images.videolan.org/images/icons/social/facebook.svg');
+ &:hover {
+ background-color: #3B5998;
+ }
+ }
+ .icon-google-plus {
+ background-image: url('//images.videolan.org/images/icons/social/google-plus.svg');
+ &:hover {
+ background-color: #DD4B39;
+ }
+ }
+ .icon-twitter {
+ background-image: url('//images.videolan.org/images/icons/social/twitter.svg');
+ &:hover {
+ background-color: #00ACED;
+ }
+ }
}
/* ================================= DONATE BOX ================================== */
View it on GitLab: https://code.videolan.org/VideoLAN.org/websites/commit/883a026ba4d29b8901a9471dcc7e563751f6532d
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman.videolan.org/pipermail/www-doc/attachments/20160427/9dbc0d95/attachment.html>
More information about the www-doc
mailing list