Merge pull request 'Always have some margin left and right of the page content.' (#11) from haheute/friendica-wp-theme:width-and-missing-space into master

Reviewed-on: friendica/friendica-wp-theme#11
Reviewed-by: Hypolite Petovan <hypolite@mrpetovan.com>

.gitignore

@@ -1 +1,2 @@
 .DS*
+work/*

assets/css/fira.css

@@ -0,0 +1,39 @@
+@font-face{
+    font-family: 'Fira Sans';
+    src: local('Fira Sans Light'),
+         url('../fonts/fira/woff/FiraSans-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face{
+    font-family: 'Fira Sans';
+    src: local('Fira Sans Regular'),
+         url('../fonts/fira/woff/FiraSans-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face{
+    font-family: 'Fira Sans';
+    src: local('Fira Sans Regular Italic'),
+         url('../fonts/fira/woff/FiraSans-Italic.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face{
+    font-family: 'Fira Sans';
+    src: local('Fira Sans Bold'),
+         url('../fonts/fira/woff/FiraSans-Bold.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face{
+    font-family: 'Fira Sans';
+    src: local('Fira Sans Bold Italic'),
+         url('../fonts/fira/woff/FiraSans-BoldItalic.woff') format('woff');
+    font-weight: 700;
+    font-style: italic;
+}

assets/css/main.css

@@ -2,7 +2,7 @@
 
 /*
 	Theory by TEMPLATED
-	templated.co @templatedco
+	templated.co @templatedcoc
 	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
 */
 
@@ -1583,9 +1583,9 @@
 /* Type */
 
 	body, input, select, textarea {
-		color: #444;
-		font-family: "Raleway", Arial, Helvetica, sans-serif;
-		font-size: 13pt;
+		color: #111;
+		font-family: "Fira Sans", Arial, Helvetica, sans-serif;
+		font-size: 14pt;
 		font-weight: 300;
 		line-height: 1.65;
 	}
@@ -1593,7 +1593,7 @@
 		@media screen and (max-width: 1680px) {
 
 			body, input, select, textarea {
-				font-size: 11pt;
+				font-size: 14pt;
 			}
 
 		}
@@ -1601,7 +1601,7 @@
 		@media screen and (max-width: 1280px) {
 
 			body, input, select, textarea {
-				font-size: 11pt;
+				font-size: 14pt;
 			}
 
 		}
@@ -1751,18 +1751,11 @@
 	}
 
 	.inner {
+		width: 90%;
 		max-width: 75em;
 		margin: 0 auto;
 	}
 
-		@media screen and (max-width: 1280px) {
-
-			.inner {
-				max-width: 90%;
-			}
-
-		}
-
 		@media screen and (max-width: 480px) {
 
 			.inner {
@@ -1902,6 +1895,13 @@
 		justify-content: space-between;
 	}
 
+		.flex.center {
+			-moz-justify-content: center;
+			-webkit-justify-content: center;
+			-ms-justify-content: center;
+			justify-content: center;
+		}
+
 		.flex.flex-2 article {
 			width: 47%;
 		}
@@ -2228,14 +2228,6 @@
 		position: relative;
 	}
 
-		.icon:before {
-			-moz-osx-font-smoothing: grayscale;
-			-webkit-font-smoothing: antialiased;
-			font-family: FontAwesome;
-			font-style: normal;
-			font-weight: normal;
-			text-transform: none !important;
-		}
 
 		.icon > .label {
 			display: none;
@@ -2732,7 +2724,6 @@
 
 	#header {
 		color: rgba(255,255,255,0.8);
-		background-color: rgba(0,0,0,0.2);
 		cursor: default;
 		height: 3.25em;
 		left: 0;
@@ -2843,9 +2834,13 @@
 	}
 
 /* Nav */
+    #nav > ul,
     #nav > .menu > ul { display: inline-block; padding:0; margin: 0; }
+    #nav > ul > li,
     #nav > .menu > ul > li { display: inline-block; }
+    #nav > ul > li .sub-menu,
     #nav > .menu > ul > li .children { display: none; }
+    #nav > ul > li:hover .sub-menu,
     #nav > .menu > ul > li:hover .children {
         display: block;
         margin: 0;
@@ -2858,8 +2853,11 @@
         top: 2.5em;
         min-width: 100px;
     }
+    #nav .sub-menu li,
     #nav .children li { padding: 0; line-height: 2em; }
-    #nav .children a { color: #333; padding: 0.4em; width: 100%; text-align: left; }
+    #nav .sub-menu a ,
+    #nav .children a { color: #333; padding: 0.4em; width: 100%; text-align: left; white-space: nowrap; }
+    #nav .sub-menu a:hover,
     #nav .children a:hover{ color: #fff; background-color: #5385c1; }
 
 	@media screen and (max-width: 980px) {
@@ -2964,7 +2962,7 @@
 
 	#banner {
 		padding: 12em 0 10em 0;
-		background-image: url('../../images/banner-blu.orig.jpg');
+		background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url('../../images/banner-blu.orig.jpg');
 		background-size: cover;
 		background-position: center;
 		/*background-attachment: fixed;*/
@@ -2975,7 +2973,7 @@
 
 		#banner h1 {
 			font-size: 3.5em;
-			font-weight: 100;
+			font-weight: 400;
 			color: #ffffff;
 			line-height: 1em;
 			margin: 0 0 0.5em 0;

assets/css/raleway.css

@@ -1,18 +0,0 @@
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Raleway Thin'), local('Raleway-Thin'), url(../fonts/Raleway-Thin.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Raleway Light'), local('Raleway-Light'), url(../fonts/Raleway-Light.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 600;
-  src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url(../fonts/Raleway-SemiBold.ttf) format('truetype');
-}

footer.php

@@ -10,8 +10,9 @@
                     <?php echo sprintf( __( '%1$s %2$s %3$s. All Rights Reserved.', 'friendica' ), '&copy;', date( 'Y' ), esc_html( get_bloginfo( 'name' ) ) ); echo sprintf( __( ' Original Design: %1$s.', 'friendica' ), '<a href="https://templated.co">TEMPLATED</a>' ); ?>
                 </div>
                 <ul class="icons">
-                    <li><a href="https://github.com/friendica/" class="icon fa-github"><span class="label">GitGub</span></a></li>
-
+                    <li><a href="https://github.com/friendica/" title="GitHub">
+                        <i class="fa fa-github" aria-hidden="true"></i>
+                    </a></li>
                 </ul>
             </div>
         </div>

functions.php

@@ -1,4 +1,3 @@
-
 <?php
 add_action('after_setup_theme', 'friendica_setup');
 

header-home.php

@@ -62,5 +62,5 @@
                                 ?>
                                 </span>
                                 </h1>				<p><?php echo esc_html(get_bloginfo('description')); ?></p>
-                <p><a href="https://github.com/friendica/friendica/releases" class="button special">Download</a> <a href="http://dir.friendica.social/servers" class="button">Try It</a></p>
+                <p><a href="#try" class="button special">Try It!</a></p>
 			</section>

page-home.php

@@ -1,7 +1,8 @@
 <?php get_header("home"); ?>
 
-        <!-- One -->
-            <section id="one" class="wrapper">
+
+            <!-- intro -->
+            <section class="wrapper">
                 <div class="inner">
                     <div class="flex flex-3">
                         <article>
@@ -26,7 +27,7 @@
                             <header>
                                 <h3>Interoperability</h3>
                             </header>
-                            <p>Built-in support for StatusNet, GNU social, Quitter, and diaspora*.</p>
+                            <p>Built-in support for ActivityPub (e.g. Funkwhale, Hubzilla, Mastodon, Pleroma, Pixelfed), OStatus (e.g. StatusNet, GNU social, Quitter) and diaspora* protocols.</p>
                             <p>Support for email contacts and communications (two-way) via IMAP4rev1/ESMTP.</p>
                             <p>Import arbitrary websites and blogs into your social stream via RSS/Atom feeds.</p>
                             <p>Support for other services via plugins.</p>
@@ -35,11 +36,12 @@
                 </div>
             </section>
 
-        <!-- Two -->
-            <section id="two" class="wrapper style1 special">
+
+            <!-- more key feature -->
+            <section class="wrapper style1 special">
                 <div class="inner">
                     <header>
-                        <h2>A personal social network</h2>
+                        <h2>A decentralized social network</h2>
                         <p>Keep in contact with people you care about.</p>
                     </header>
                     <div class="flex flex-4">
@@ -78,8 +80,25 @@
                 </div>
             </section>
 
-        <!-- Three -->
-            <section id="three" class="wrapper special">
+            <!-- try friendica -->
+            <section id="try" class="wrapper style1 special">
+                <div class="inner">
+                    <header>
+                        <h2>Try Friendica</h2>
+                    </header>
+                    <div class="flex center flex-3">
+                        <article>
+                            <p>Do you want to try Friendica but don't have the technical knowledge to install your server?
+                            You can create an account on one of the many servers out there which accept new users!</p>
+                            
+                        </article>
+                    </div>
+                    <p><a href="https://dir.friendica.social/servers" class="button">Have a look at the list of public servers</a></p>
+                </div>
+            </section>
+        
+            <!-- technical -->
+            <section class="wrapper special">
                 <div class="inner">
                     <header class="align-center">
                         <h2>Free software &mdash; Free protocols</h2>
@@ -91,10 +110,10 @@
                                 <img src="<?php echo  get_template_directory_uri(); ?>/images/pic2.png" alt="Stack">
                             </div>
                             <header>
-                                <h3>PHP &amp; MySQL</h3>
+                                <h3>PHP &amp; MariaDB</h3>
                             </header>
                             <p>Run your personal Friendica node on shared hosts.</p>
-                            <p>Friendica runs on PHP with MySQL as a database. If you can run WordPress, you can run Friendica.</p>
+                            <p>Friendica runs on PHP with MariaDB as a database. If you can run WordPress, you can run Friendica.</p>
                             <footer>
                                 <a href="/requirements/" class="button special">More</a>
                             </footer>
@@ -115,9 +134,19 @@
                     </div>
                     </div>
             </section>
+            <section id="run">
+                <div class="inner">
+                    <header class="align-center">
+                        <h2>Run your own server</h2>
+                        <p>Be part of the network, host a Friendica server for you, your family and your friends!</p>
+                        <p><a href="/resources/installation/" class="button special">Installation guide</a></p>
+                    </header>
+                </div>
+            </section>
 
             <hr>
-            <!-- Four -->
+
+            <!-- Last news -->
             <?php
             $args = array(
                 'post_type' => "post"

style.css

@@ -4,13 +4,13 @@ Theme URI: https://git.friendi.ca/friendica/friendica-wp-theme
 Author: Friendica
 Author URI: https://friendi.ca/
 Description: This is the theme for Friendica main site.<br>Based on https://templated.co/theory
-Version: 1.1.3
+Version: 1.1.6
 License: GNU General Public License
 License URI: https://www.gnu.org/licenses/gpl.html
 Text Domain: friendica
 
 */
 
-@import url(./assets/css/fork-awesome.min.css);
-@import url(./assets/css/raleway.css);
+@import url(./assets/css/fork-awesome.min.css?v=1.1.7);
+@import url(./assets/css/fira.css);
 @import url(./assets/css/main.css);