diff --git a/.gitignore b/.gitignore index d88fa77..6df3b6d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .htaccess .idea +robots.txt diff --git a/cesiumVersions.php b/cesiumVersions.php index 859623c..bf38d46 100644 --- a/cesiumVersions.php +++ b/cesiumVersions.php @@ -1,10 +1,10 @@ '1.7.6', - 'android' => '1.7.6', - 'debian' => '1.7.6', + 'home' => '1.7.13', + 'android' => '1.7.13', + 'debian' => '1.7.13', 'arch' => '1.6.1', - 'windows' => '1.7.6', - 'web' => '1.7.6' + 'windows' => '1.7.13', + 'web' => '1.7.13' ]; diff --git a/config.php b/config.php index 5dc07ba..1e6e66c 100644 --- a/config.php +++ b/config.php @@ -6,6 +6,7 @@ // Duniter : 78ZwwgpgdH5uLZLbThUQH7LKwPgjMunYfLiCfUCySkM8 // Cesium : CitdnuQgZ45tNFCagay7Wh12gwwHM8VLej1sWmfHWnQX define('FUNDING_TARGET', 20*60+230); +define('CESIUM_PLUS_NODE', 'https://g1.data.e-is.pro'); // for avatars serving $legalNotice = [ diff --git a/doc/en/install.md b/doc/en/install.md index 9cc46e7..f533a34 100644 --- a/doc/en/install.md +++ b/doc/en/install.md @@ -1,23 +1,115 @@ How to install Cesium website on your computer === -## How to install the web server le serveur web -To run Cesium website on your computer, you will need install a web server, and PHP ; the later converts the source code contained in *.php files into HTML the browser can understand. +## (optional) Configure multilang -Linux users will need two packages: +``` +# Root, on Debian +echo -e "ca_ES.UTF-8 UTF-8\nde_DE.UTF-8 UTF-8\nen_GB.UTF-8 UTF-8\neo UTF-8\nes_ES.UTF-8 UTF-8\nit_IT.UTF-8 UTF-8\nfr_FR.UTF-8 UTF-8" >> /etc/locale.gen +locale-gen +update-locale +service php*-fpm restart +``` + +## config.php + +In ̀`config.php`, edit $rootURL var according to your setup. + +```php +if ($_SERVER['SERVER_NAME'] == 'localhost') { + // Adaptez la ligne suivante à votre configuration (sans slash à la fin) + $rootURL = '/cesium_website'; +} else { + $rootURL = ''; +} +``` + +## Installer PHP + +To run Cesium website on your computer, you will need install and PHP, which converts the source code contained in *.php files into HTML the browser can understand. + + +Windows users can use [WAMP Serveur](https://www.wampserver.com/), which comes with a web server + +## How to install a web server + +To run Cesium website on your computer, you will also need a web server + +You can choose one of the following: - apache2 -- php +- nginx + +## Nginx + +Linux users will have to install the `nginx` package. For instance, Debian-like (Ubuntu, Linux Mint, etc.) users will have to run: ``` -sudo apt install apache2 php +sudo apt install nginx ``` -Windows users can use [WAMP Serveur](https://www.wampserver.com/). +Go to `/etc/nginx/sites-available/`. + +Edit the `default` file to add the bloc that follows `# Configuration for /cesium_website`. + +The `/var/www/localhost` part is assuming this is where is stored `cesium_website` (`localhost` would probably be a symbolic link). + +```txt +server { + + listen 80; + + root /var/www/localhost; + + index index.php index.html index.htm index.nginx-debian.html; + + server_name localhost; + + location / { + # First attempt to serve request as file, then + # as directory, then fall back to displaying a 404. + try_files $uri $uri/ =404; + } -## .htaccess + # Configuration for /cesium_website + location /cesium_website { + + if (!-e $request_filename) { + + rewrite ^/cesium_website/([^/]+)/(.*)$ /cesium_website/index.php?lang=$1&page=/$2 last; + rewrite ^/cesium_website/([^/]+)$ /cesium_website/index.php?lang=fr&page=/$1 last; + } + + location ~ \.php$ { + include snippets/fastcgi-php.conf; + fastcgi_pass unix:/var/run/php/php8.1-fpm.sock; # Assurez-vous de vérifier et d'utiliser la version correcte de PHP + fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; + include fastcgi_params; + } + } +} +``` + +Note : don't forget to change `php8.1` for the version of PHP you installed. + +Restart nginx : +``` +sudo service nginx restart +``` + +## Apache + +Linux users will have to install the `apache2` package. + +For instance, Debian-like (Ubuntu, Linux Mint, etc.) users will have to run: + +``` +sudo apt install apache2 +``` + +### .htaccess Create a .htaccess in cesium_website directory, with the following text : @@ -62,17 +154,3 @@ with : Require all granted ``` - -## config.php - -In ̀`config.php`, edit $rootURL var according to your setup. - -## Configure multilang - -``` -# Root, on Debian -echo -e "ca_ES.UTF-8 UTF-8\nde_DE.UTF-8 UTF-8\nen_GB.UTF-8 UTF-8\neo UTF-8\nes_ES.UTF-8 UTF-8\nit_IT.UTF-8 UTF-8\nfr_FR.UTF-8 UTF-8" >> /etc/locale.gen -locale-gen -update-locale -service php*-fpm restart -``` diff --git a/doc/fr/installation.md b/doc/fr/installation.md index f3c336e..b05d337 100644 --- a/doc/fr/installation.md +++ b/doc/fr/installation.md @@ -1,23 +1,204 @@ Installer le site sur son ordinateur === -## Installer le serveur web +## (optionnel) Configurer le multilangue -Pour faire tourner ce site sur votre ordinateur, vous aurez besoin d'installer un serveur web ainsi que PHP, qui transforme le code source contenu dans les fichiers *.php en HTML que le navigateur du visiteur peut comprendre. +``` +# En root, sur Debian +echo -e "ca_ES.UTF-8 UTF-8\nde_DE.UTF-8 UTF-8\nen_GB.UTF-8 UTF-8\neo UTF-8\nes_ES.UTF-8 UTF-8\nit_IT.UTF-8 UTF-8\nfr_FR.UTF-8 UTF-8" >> /etc/locale.gen +locale-gen +update-locale +service php*-fpm restart +``` + +## config.php + +Dans le fichier `config.php`, modifiez la variable `$rootURL` pour qu'elle corresponde à la façon dont vous servez le site web : +```php +if ($_SERVER['SERVER_NAME'] == 'localhost') { + // Adaptez la ligne suivante à votre configuration (sans slash à la fin) + $rootURL = '/cesium_website'; +} else { + $rootURL = ''; +} +``` + +## Installer PHP + +Pour faire tourner ce site sur votre ordinateur, vous aurez besoin d'installer PHP, qui transformera le code source contenu dans les fichiers *.php en HTML que le navigateur du visiteur peut comprendre. -Sous Linux, il vous faudra installer les paquets : +Sous Linux, il vous faudra installer le paquet `php`. + +Par exemple, sous une Debian-like (Ubuntu, Linux Mint, etc.) : + +``` +sudo apt install php +``` + +Les utilisateurs de Windows peuvent utiliser [WAMP Serveur](https://www.wampserver.com/), qui vient aussi avec son serveur web. + + +## Installer un serveur web + +Pour faire tourner ce site sur votre ordinateur, vous aurez besoin d'installer un serveur web. + +Vous avez le choix entre : +- nginx - apache2 -- php + +## Nginx + +Sous Linux, il vous faudra installer le paquet `nginx`. Par exemple, sous une Debian-like (Ubuntu, Linux Mint, etc.) : ``` -sudo apt install apache2 php +sudo apt install nginx +``` + +### configurer Nginx + +Les fichiers de configuration de Nginx se trouvent dans `/etc/nginx/sites-available/`. + +#### option 1 : modifier `default` + +Vous avez probablement dans ce répertoire un fichier `default` auquel vous pouvez ajouter le bloc d'instruction qui suit le commentaire `# Configuration pour /cesium_website`. + + +```txt +server { + + listen 80; + + root /var/www/localhost; + + # Le premier fichier d'index recherché est index.php + index index.php index.html index.htm index.nginx-debian.html; + + server_name localhost; + + location / { + # First attempt to serve request as file, then + # as directory, then fall back to displaying a 404. + try_files $uri $uri/ =404; + } + + # Configuration pour /cesium_website + location /cesium_website { + + # Si le fichier ou le répertoire n'existe pas + if (!-e $request_filename) { + + # Réécriture d'URL + rewrite ^/cesium_website/([^/]+)/(.*)$ /cesium_website/index.php?lang=$1&page=/$2 last; + rewrite ^/cesium_website/([^/]+)$ /cesium_website/index.php?lang=fr&page=/$1 last; + } + + # Traitement des fichiers PHP + location ~ \.php$ { + include snippets/fastcgi-php.conf; + fastcgi_pass unix:/var/run/php/php8.1-fpm.sock; # Assurez-vous de vérifier et d'utiliser la version correcte de PHP + fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; + include fastcgi_params; + } + } +} +``` + +Note : pensez à remplacer `php8.1` par la version de PHP que vous avez installée. + +Redémarrez nginx : +``` +sudo service nginx restart +``` + +#### option 2 : créer un fichier de configuration dédié + +Vous pouvez aussi créer un nouveau fichier de configuration, et un nouveau nom de serveur local. + +Commencez par créer un lien symbolique vers l'emplacement approprié : +``` +ln -s /var/www/cesium_website /home/votre_nom_d_utilisateur/projets/cesium_website +``` +en remplçant le chemin de destination par l'emplacement où vous avez téléchargé le dossier `cesium_website`. + +Auquel cas il vous faudra modifier votre fichier `/etc/hosts` : ``` +sudo nano /etc/hosts +``` + +pour y ajouter une ligne du style : +```txt +127.0.0.1 cesiumwebsite +``` + +Créez le fichier de configuration : +``` +sudo nano /etc/nginx/sites-available/cesium_website +``` + +et ajoutez-y le contenu idoine : +```txt +server { -Les utilisateurs de Windows peuvent utiliser [WAMP Serveur](https://www.wampserver.com/). + listen 80; -## .htaccess + root /var/www/cesium_website; + + # Le premier fichier d'index recherché est index.php + index index.php index.html index.htm index.nginx-debian.html; + + server_name cesiumwebsite; + + location / { + # First attempt to serve request as file, then + # as directory, then fall back to displaying a 404. + try_files $uri $uri/ =404; + } + + # Configuration pour / + location / { + + # Si le fichier ou le répertoire n'existe pas + if (!-e $request_filename) { + + # Réécriture d'URL + rewrite ^/([^/]+)/(.*)$ /index.php?lang=$1&page=/$2 last; + rewrite ^/([^/]+)$ /index.php?lang=fr&page=/$1 last; + } + + # Traitement des fichiers PHP + location ~ \.php$ { + include snippets/fastcgi-php.conf; + fastcgi_pass unix:/var/run/php/php8.1-fpm.sock; # Assurez-vous de vérifier et d'utiliser la version correcte de PHP + fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; + include fastcgi_params; + } + } +} +``` + +sans oublier de créer un lien symbolique pour rendre le site disponible : +``` +sudo ln -s /etc/nginx/sites-enabled/cesium_website /etc/nginx/sites-available/cesium_website +``` + +…et de redémarrer nginx : +``` +sudo service nginx restart +``` + +## Apache + +Sous Linux, il vous faudra installer le paquet `apache2`. + +Par exemple, sous une Debian-like (Ubuntu, Linux Mint, etc.) : + +``` +sudo apt install apache2 +``` + +### configurer le fichier `.htaccess` Le fichier `.htaccess` est celui qui gère la réécriture d'URL, qui permet d'afficher au visiteur une structure compréhensible par un être humain dans sa barre d'adresse. @@ -74,19 +255,3 @@ Redémarrez Apache : ``` systemctl restart apache2 ``` - -## config.php - -Modifiez la variable $rootURL de la même façon. - -## Configurer le multilangue - -``` -# En root, sur Debian -echo -e "ca_ES.UTF-8 UTF-8\nde_DE.UTF-8 UTF-8\nen_GB.UTF-8 UTF-8\neo UTF-8\nes_ES.UTF-8 UTF-8\nit_IT.UTF-8 UTF-8\nfr_FR.UTF-8 UTF-8" >> /etc/locale.gen -locale-gen -update-locale -service php*-fpm restart -``` - - diff --git a/head.php b/head.php index 11624ce..3d7d380 100644 --- a/head.php +++ b/head.php @@ -17,7 +17,7 @@ <?php echo $pageTitle; ?> - + @@ -105,16 +105,16 @@ $element = $pageIsHome ? 'h1' : 'h2'; echo ' - <'. $element .'> + <'. $element .' class="site-title"> Cesium Ğ1 '; ?> -

+

diff --git a/i18n/fr_FR/contents/accueil/avis/leger-defaut.html b/i18n/fr_FR/contents/accueil/avis/leger-defaut.html index 83b5202..a76f7a4 100644 --- a/i18n/fr_FR/contents/accueil/avis/leger-defaut.html +++ b/i18n/fr_FR/contents/accueil/avis/leger-defaut.html @@ -1,2 +1,2 @@ super appli simple à l'utilisation. peut-être quelques améliorations sur ergonomie/interface homme-machine ? merci aux dev's et vive la monnaie libre ! -Jean-Michel FAIVREJean-Michel FAIVRE diff --git a/img/logo.small.cs.dune.200x200.png b/img/logo.small.cs.dune.200x200.png new file mode 100644 index 0000000..a5e54e9 Binary files /dev/null and b/img/logo.small.cs.dune.200x200.png differ diff --git a/lib/jquery-3.4.1.min.js b/lib/jquery-3.4.1.min.js deleted file mode 100755 index a1c07fd..0000000 --- a/lib/jquery-3.4.1.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */ -!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],E=C.document,r=Object.getPrototypeOf,s=t.slice,g=t.concat,u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.4.1",k=function(e,t){return new k.fn.init(e,t)},p=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;function d(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp($),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+$),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),ne=function(e,t,n){var r="0x"+t-65536;return r!=r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(m.childNodes),m.childNodes),t[m.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&((e?e.ownerDocument||e:m)!==C&&T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!A[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&U.test(t)){(s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=k),o=(l=h(t)).length;while(o--)l[o]="#"+s+" "+xe(l[o]);c=l.join(","),f=ee.test(t)&&ye(e.parentNode)||e}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){A(t,!0)}finally{s===k&&e.removeAttribute("id")}}}return g(t.replace(B,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[k]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:m;return r!==C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),m!==C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=k,!C.getElementsByName||!C.getElementsByName(k).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+k+"-]").length||v.push("~="),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+k+"+*").length||v.push(".#.+[+~]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",$)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e===C||e.ownerDocument===m&&y(m,e)?-1:t===C||t.ownerDocument===m&&y(m,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e===C?-1:t===C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]===m?-1:s[r]===m?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if((e.ownerDocument||e)!==C&&T(e),d.matchesSelector&&E&&!A[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){A(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=p[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&p(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?k.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?k.grep(e,function(e){return e===n!==r}):"string"!=typeof n?k.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(k.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||q,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:L.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof k?t[0]:t,k.merge(this,k.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),D.test(r[1])&&k.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(k):k.makeArray(e,this)}).prototype=k.fn,q=k(E);var H=/^(?:parents|prev(?:Until|All))/,O={children:!0,contents:!0,next:!0,prev:!0};function P(e,t){while((e=e[t])&&1!==e.nodeType);return e}k.fn.extend({has:function(e){var t=k(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i,ge={option:[1,""],thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?k.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;nx",y.noCloneChecked=!!me.cloneNode(!0).lastChild.defaultValue;var Te=/^key/,Ce=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Ee=/^([^.]*)(?:\.(.+)|)/;function ke(){return!0}function Se(){return!1}function Ne(e,t){return e===function(){try{return E.activeElement}catch(e){}}()==("focus"===t)}function Ae(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)Ae(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=Se;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return k().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=k.guid++)),e.each(function(){k.event.add(this,t,i,r,n)})}function De(e,i,o){o?(Q.set(e,i,!1),k.event.add(e,i,{namespace:!1,handler:function(e){var t,n,r=Q.get(this,i);if(1&e.isTrigger&&this[i]){if(r.length)(k.event.special[i]||{}).delegateType&&e.stopPropagation();else if(r=s.call(arguments),Q.set(this,i,r),t=o(this,i),this[i](),r!==(n=Q.get(this,i))||t?Q.set(this,i,!1):n={},r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n.value}else r.length&&(Q.set(this,i,{value:k.event.trigger(k.extend(r[0],k.Event.prototype),r.slice(1),this)}),e.stopImmediatePropagation())}})):void 0===Q.get(e,i)&&k.event.add(e,i,ke)}k.event={global:{},add:function(t,e,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Q.get(t);if(v){n.handler&&(n=(o=n).handler,i=o.selector),i&&k.find.matchesSelector(ie,i),n.guid||(n.guid=k.guid++),(u=v.events)||(u=v.events={}),(a=v.handle)||(a=v.handle=function(e){return"undefined"!=typeof k&&k.event.triggered!==e.type?k.event.dispatch.apply(t,arguments):void 0}),l=(e=(e||"").match(R)||[""]).length;while(l--)d=g=(s=Ee.exec(e[l])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=k.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=k.event.special[d]||{},c=k.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&k.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||((p=u[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(t,r,h,a)||t.addEventListener&&t.addEventListener(d,a)),f.add&&(f.add.call(t,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),k.event.global[d]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Q.hasData(e)&&Q.get(e);if(v&&(u=v.events)){l=(t=(t||"").match(R)||[""]).length;while(l--)if(d=g=(s=Ee.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d){f=k.event.special[d]||{},p=u[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;while(o--)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||k.removeEvent(e,d,v.handle),delete u[d])}else for(d in u)k.event.remove(e,d+t[l],n,r,!0);k.isEmptyObject(u)&&Q.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=k.event.fix(e),u=new Array(arguments.length),l=(Q.get(this,"events")||{})[s.type]||[],c=k.event.special[s.type]||{};for(u[0]=s,t=1;t\x20\t\r\n\f]*)[^>]*)\/>/gi,qe=/\s*$/g;function Oe(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&k(e).children("tbody")[0]||e}function Pe(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function Re(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Me(e,t){var n,r,i,o,a,s,u,l;if(1===t.nodeType){if(Q.hasData(e)&&(o=Q.access(e),a=Q.set(t,o),l=o.events))for(i in delete a.handle,a.events={},l)for(n=0,r=l[i].length;n")},clone:function(e,t,n){var r,i,o,a,s,u,l,c=e.cloneNode(!0),f=oe(e);if(!(y.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||k.isXMLDoc(e)))for(a=ve(c),r=0,i=(o=ve(e)).length;r").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Vt,Gt=[],Yt=/(=)\?(?=&|$)|\?\?/;k.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Gt.pop()||k.expando+"_"+kt++;return this[e]=!0,e}}),k.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Yt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Yt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Yt,"$1"+r):!1!==e.jsonp&&(e.url+=(St.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||k.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?k(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Gt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((Vt=E.implementation.createHTMLDocument("").body).innerHTML="
",2===Vt.childNodes.length),k.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=D.exec(e))?[t.createElement(i[1])]:(i=we([e],t,o),o&&o.length&&k(o).remove(),k.merge([],i.childNodes)));var r,i,o},k.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(k.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},k.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){k.fn[t]=function(e){return this.on(t,e)}}),k.expr.pseudos.animated=function(t){return k.grep(k.timers,function(e){return t===e.elem}).length},k.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=k.css(e,"position"),c=k(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=k.css(e,"top"),u=k.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,k.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},k.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){k.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===k.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===k.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=k(e).offset()).top+=k.css(e,"borderTopWidth",!0),i.left+=k.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-k.css(r,"marginTop",!0),left:t.left-i.left-k.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===k.css(e,"position"))e=e.offsetParent;return e||ie})}}),k.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;k.fn[t]=function(e){return _(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),k.each(["top","left"],function(e,n){k.cssHooks[n]=ze(y.pixelPosition,function(e,t){if(t)return t=_e(e,n),$e.test(t)?k(e).position()[n]+"px":t})}),k.each({Height:"height",Width:"width"},function(a,s){k.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){k.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return _(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?k.css(e,t,i):k.style(e,t,n,i)},s,n?e:void 0,n)}})}),k.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){k.fn[n]=function(e,t){return 0 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/lib/style.css b/lib/style.css index a05787a..6e6d7d1 100644 --- a/lib/style.css +++ b/lib/style.css @@ -1,74 +1,76 @@ :root { - --bp1: 576px; - --bp2: 768px; - --bp3: 992px; - --bp4: 1200px; - --screenshot-ratio: 1.62091503; - --screenshot-laptop-keyboard-ratio: 0.90151515; + --bp1: 576px; + --bp2: 768px; + --bp3: 992px; + --bp4: 1200px; + --screenshot-ratio: 1.62091503; + --screenshot-laptop-keyboard-ratio: 0.90151515; + --header-height: 5.625rem; + /* 90px/16px/rem */ } @font-face { - font-family: 'FontAwesome'; - font-style: normal; - font-weight: 900; - font-display: auto; - 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"); + font-family: 'FontAwesome'; + font-style: normal; + font-weight: 900; + font-display: auto; + 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"); } /* ======= COMMON ======= */ body { - background: hsl(0, 0%, 6.7%); - padding: 0; - margin: 0; - font-family: "Open Sans", sans-serif; - color: hsl(210, 10.8%, 14.5%); - overflow-x: hidden; + background: hsl(0, 0%, 6.7%); + padding: 0; + margin: 0; + font-family: "Open Sans", sans-serif; + color: hsl(210, 10.8%, 14.5%); + overflow-x: hidden; } body main { - background: hsl(256, 65.5%, 27.3%); + background: hsl(256, 65.5%, 27.3%); } body a, body a:focus, body a:active, body a:visited { - color: hsl(179, 75%, 35%); - text-decoration: none; + color: hsl(179, 75%, 35%); + text-decoration: none; } body a:focus { - outline: 0; + outline: 0; } body a:hover { - color: hsl(179, 100%, 35%); - transition: color 0.25s ease-in-out; + color: hsl(179, 100%, 35%); + transition: color 0.25s ease-in-out; } body p.CTA-button { - text-align: center; - margin-left: auto; - margin-right: auto; + text-align: center; + margin-left: auto; + margin-right: auto; } body p.CTA-button a, body p.CTA-button button { - background-color: hsl(45, 100%, 51.4%); - color: black; - text-shadow: 0px 0px 15px white; - transition: box-shadow 0.666s, color 0.666s; - padding: 1rem 2rem; - font-size: 0.8203125rem; - line-height: 1.5; - border: 0; - border-radius: 0; - cursor: pointer; - letter-spacing: 0.05em; - text-transform: uppercase; - display: inline-block; - vertical-align: middle; - text-decoration: none; + background-color: hsl(45, 100%, 51.4%); + color: black; + text-shadow: 0px 0px 15px white; + transition: box-shadow 0.666s, color 0.666s; + padding: 1rem 2rem; + font-size: 0.8203125rem; + line-height: 1.5; + border: 0; + border-radius: 0; + cursor: pointer; + letter-spacing: 0.05em; + text-transform: uppercase; + display: inline-block; + vertical-align: middle; + text-decoration: none; } body p.CTA-button a:hover, body p.CTA-button button:hover { - /*color: #fcfcfc;*/ - box-shadow: 0 0 15px #fcfcfc; - background-color: #ffc107; - text-decoration: none; + /*color: #fcfcfc;*/ + box-shadow: 0 0 15px #fcfcfc; + background-color: #ffc107; + text-decoration: none; } body h1, body h2, @@ -76,84 +78,84 @@ body h3, body h4, body h5, body h6 { - font-weight: 500; + font-weight: 500; } body iframe { - border: 0; + border: 0; } body code, body pre { - background-color: #424242; - color: #efefef; - padding: 0.375em 0.75em; + background-color: #424242; + color: #efefef; + padding: 0.375em 0.75em; } body pre { - margin: 0.375em 0; + margin: 0.375em 0; } body pre.console:before { - content: "$ "; + content: "$ "; } body h1 { - text-align: center; - margin: 0; - padding: 1.5em 0 1.5em; - font-size: 3rem; - font-weight: 500; - color: #fcfcfc; + text-align: center; + margin: 0; + padding: 1.5em 0 1.5em; + font-size: 3rem; + font-weight: 500; + color: #fcfcfc; } body table { - border-collapse: collapse; + border-collapse: collapse; } body table td, body table th { - border: 1px solid #ccc; - padding: 0.5rem; + border: 1px solid #ccc; + padding: 0.5rem; } body table th { - background: #f7f7f7; + background: #f7f7f7; } body [colspan] { - text-align: center; + text-align: center; } body img { - display: block; - margin: auto; + display: block; + margin: auto; } body mark { - background: yellow; + background: yellow; } body mark:nth-of-type(2n) { - background: pink; + background: pink; } /* ======= CONTENTS (like thank you page) ======= */ .text-box, section.text-box { - background-color: #FDF5E6; - color: #424242; - font-size: 1.25rem; - line-height: 1.75rem; - max-width: 800px; - margin: auto; - padding: 0 0 0.001rem 0; + background-color: #FDF5E6; + color: #424242; + font-size: 1.25rem; + line-height: 1.75rem; + max-width: 800px; + margin: auto; + padding: 0 0 0.001rem 0; } section.text-box { - padding: 2em; + padding: 2em; } .text-box section { - margin-top: 0rem; - margin-bottom: 3rem; + margin-top: 0rem; + margin-bottom: 3rem; } .text-box section h2 { - background: #201b18; - color: white; - font-weight: bold; - padding: 2rem; - margin-bottom: 1em; + background: #201b18; + color: white; + font-weight: bold; + padding: 2rem; + margin-bottom: 1em; } .text-box section h3 { - font-weight: bold; - margin-top: 1em; - padding: 0.5rem 1rem; + font-weight: bold; + margin-top: 1em; + padding: 0.5rem 1rem; } .text-box section p, .text-box section h3, @@ -164,971 +166,977 @@ section.text-box { .text-box section ol, .text-box section dl, .text-box section table { - margin-left: 2rem; - margin-right: 2rem; - width: auto; + margin-left: 2rem; + margin-right: 2rem; + width: auto; } .text-box section p, .text-box section ul, .text-box section ol, .text-box section dl, .text-box section table { - text-align: justify; + text-align: justify; } .text-box section td { - background: white; - color: black; + background: white; + color: black; } .text-box section th { - background: #212121; - color: white; - text-align: center; + background: #212121; + color: white; + text-align: center; } .text-box section [colspan] { - text-align: center; + text-align: center; } .text-box section .warning { - color: orange; + color: orange; } .text-box section h3.warning { - background-color: orange; - color: white; + background-color: orange; + color: white; } .text-box section .bad { - color: red; + color: red; } /* ======= FOOTER ======= */ body > footer { - z-index: 999; - position: relative; - background: #111111; - overflow: hidden; - color: #ccc; - font-size: 0.9rem; - padding-bottom: 2rem; - padding-top: 3rem; + z-index: 999; + position: relative; + background: #111111; + overflow: hidden; + color: #ccc; + font-size: 0.9rem; + padding-bottom: 2rem; + padding-top: 3rem; } body > footer ul, body > footer p { - padding: 0; - margin: 0.5rem 0; - list-style-type: none; + padding: 0; + margin: 0.5rem 0; + list-style-type: none; } body > footer ul li { - padding: 0; - margin: 0; - line-height: 1.5em; + padding: 0; + margin: 0; + line-height: 1.5em; } body > footer div { - display: flex; - flex-wrap: wrap; - margin: auto; + display: flex; + flex-wrap: wrap; + margin: auto; } @media (max-width: 575px) { - body > footer div { - padding-left: 1rem; - padding-right: 1rem; - box-sizing: border-box; - } - body > footer div > * { - flex-basis: 50%; - } + body > footer div { + padding-left: 1rem; + padding-right: 1rem; + box-sizing: border-box; + } + body > footer div > * { + flex-basis: 50%; + } } @media (min-width: 576px) { - body > footer div { - padding-left: 1rem; - padding-right: 1rem; - box-sizing: border-box; - } - body > footer div > * { - flex-basis: 33.333%; - flex-shrink: 1; - } + body > footer div { + padding-left: 1rem; + padding-right: 1rem; + box-sizing: border-box; + } + body > footer div > * { + flex-basis: 33.333%; + flex-shrink: 1; + } } @media (min-width: 1200px) { - body > footer div { - max-width: calc(1140px - 5rem); - } + body > footer div { + max-width: calc(1140px - 5rem); + } } body > footer h5 { - color: #e4c380; - font-size: 1.05rem; - margin-bottom: 0.5rem; + color: #e4c380; + font-size: 1.05rem; + margin-bottom: 0.5rem; } body > footer a, body > footer a:hover, body > footer a:focus, body > footer a:active, body > footer a:visited { - color: #00A09D; - text-decoration: none; + color: #00A09D; + text-decoration: none; } /* ======= BARRE DE LANGUES ======= */ @media (max-width: 575px) { - nav#langSelector ul li > * span:first-child { - display: none; - } + nav#langSelector ul li > * span:first-child { + display: none; + } } nav#langSelector ul li:hover, nav#langSelector ul li:hover * { - cursor: pointer; + cursor: pointer; } nav#langSelector ul li:last-of-type:after { - content: ""; - margin-left: 0; + content: ""; + margin-left: 0; } nav#langSelector ul li a, nav#langSelector ul li a:hover, nav#langSelector ul li a:focus, nav#langSelector ul li a:active, nav#langSelector ul li a:visited { - text-decoration: none; + text-decoration: none; } @media (min-width: 576px) { - nav#langSelector { - position: fixed; - right: 0; - bottom: 0; - z-index: 1010; - text-align: right; - background: rgba(0, 0, 0, 0.8); - border-top-left-radius: 1em; - height: auto; - } - nav#langSelector h5 { - display: none; - } - nav#langSelector ul { - margin: 0; - padding: 0.5em 0 0.25em 0; - } - nav#langSelector ul li { - display: block; - margin: 0 0 0 0; - padding: 0; - text-align: center; - } - nav#langSelector ul li > * { - display: block; - padding: 0.125em 0.75em; - } - nav#langSelector ul li > * span:last-child { - display: none; - } - nav#langSelector ul li a { - font-weight: bold; - color: white; - } - nav#langSelector ul li strong { - color: rgba(255, 255, 255, 0.7); - } - nav#langSelector ul li:hover, - nav#langSelector ul li:hover a, - nav#langSelector ul li:hover a span { - color: #ffc107; - } - nav#langSelector ul li:after { - color: white; - } - nav#langSelector ul li:last-of-type:after { - color: white; - } + nav#langSelector { + position: fixed; + right: 0; + bottom: 0; + z-index: 1010; + text-align: right; + background: rgba(0, 0, 0, 0.8); + border-top-left-radius: 1em; + height: auto; + } + nav#langSelector h5 { + display: none; + } + nav#langSelector ul { + margin: 0; + padding: 0.5em 0 0.25em 0; + } + nav#langSelector ul li { + display: block; + margin: 0 0 0 0; + padding: 0; + text-align: center; + } + nav#langSelector ul li > * { + display: block; + padding: 0.125em 0.75em; + } + nav#langSelector ul li > * span:last-child { + display: none; + } + nav#langSelector ul li a { + font-weight: bold; + color: white; + } + nav#langSelector ul li strong { + color: rgba(255, 255, 255, 0.7); + } + nav#langSelector ul li:hover, + nav#langSelector ul li:hover a, + nav#langSelector ul li:hover a span { + color: #ffc107; + } + nav#langSelector ul li:after { + color: white; + } + nav#langSelector ul li:last-of-type:after { + color: white; + } } /* ======= HEADER ======= */ body > header:first-child { - background: #311873; - overflow: hidden; - height: 120px; - padding: 0.5rem 1rem; - box-sizing: content-box; - display: flex; - align-items: center; - /* ==== HEADER : titre et logo ==== */ - /* ==== HEADER : menu ==== */ + background: #311873; + overflow: hidden; + height: var(--header-height); + padding: 0.5rem 1rem; + box-sizing: content-box; + display: flex; + align-items: center; + /* ==== HEADER : titre et logo ==== */ + /* ==== HEADER : menu ==== */ } body > header:first-child a, body > header:first-child a:hover { - color: white; - text-decoration: none; + color: white; + text-decoration: none; } body > header:first-child p, body > header:first-child p img { - height: 100%; + height: 100%; } body > header:first-child p img { - margin-left: 0.5em; - margin-right: 0.5em; + margin-left: 0.5em; + margin-right: 0.5em; } @media (max-width: 575px) { - body > header:first-child p img { - margin-left: 0; - } + body > header:first-child p img { + margin-left: 0; + } } -body > header:first-child > :nt-child(2) { - order: 1; +body > header:first-child > .site-logo { + order: 1; } -body > header:first-child > h1, -body > header:first-child > h2 { - order: 2; - flex-grow: 1; - text-align: left; - font-size: 2.25rem; -} -@media (max-width: 575px) { - body > header:first-child > h1, - body > header:first-child > h2 { - font-size: 2rem; - } +body > header:first-child > .site-title { + order: 2; + flex-grow: 1; + text-align: left; + font-size: 2rem; + margin-left: 4px; } body > header:first-child nav { - order: 3; - flex-grow: 0; + order: 3; + flex-grow: 0; } body > header:first-child nav ul { - list-style: none; - text-align: right; + list-style: none; + text-align: right; } body > header:first-child nav ul li a, body > header:first-child nav ul li a:hover { - color: #e4c380; - text-decoration: none; + color: #e4c380; + text-decoration: none; } @media (max-width: 1139px) { - body > header:first-child nav ul li.support-us a { - color: hsl(349, 89%, 53%); - } + body > header:first-child nav ul li.support-us a { + color: hsl(349, 89%, 53%); + } } @media (min-width: 1140px) { - body > header:first-child nav ul li.support-us { - border: 0; - } - body > header:first-child nav ul li.support-us a { - margin: 0; - padding: 1em; - display: block; - border-radius: 1em; - color: #f2f2f2; - background: hsl(349, 89%, 53%); - } - body > header:first-child nav ul li.support-us.active a { - color: hsl(349, 89%, 53%); - background: white; - } + body > header:first-child nav ul li.support-us a { + margin: 0; + padding: 1em; + display: block; + border-radius: 1em; + color: #f2f2f2; + background-color: hsl(349, 89%, 53%); + background-image: linear-gradient(0deg, hsl(349, 89%, 48%) 0%, hsla(349, 89%, 53%, 0) 100%); + background-position: bottom; + background-repeat: no-repeat; + background-size: 100% 0%; + transition-property: background-size; + transition-delay: 0s; + transition-duration: 0.25s; + transition-timing-function: ease-in-out; + } + body > header:first-child nav ul li.support-us a:hover { + border-bottom-color: transparent; + background-size: 100% 100%; + } + body > header:first-child nav ul li.support-us.active a { + color: hsl(349, 89%, 53%); + background: white; + } } @media (max-width: 1139px) { - body > header:first-child nav ul { - overflow: hidden; - position: absolute; - top: 120px; - right: 0; - width: 100vw; - background-color: hsl(256, 65.5%, 27.3%); - box-shadow: 0px 6px 5px hsl(256, 65.5%, 13%); - z-index: 10000; - padding: 0 1rem 0rem; - box-sizing: border-box; - transition: height 0.5s ease-out; - height: 0; - margin: 0; - } - body > header:first-child nav ul li { - margin: 0; - padding: 0; - } - body > header:first-child nav ul li a span { - height: 1rem; - padding: 0.5rem 0; - display: block; - } - body > header:first-child nav button { - order: 3; - display: block; - background-color: transparent; - color: rgba(255, 255, 255, 0.5); - width: 2rem; - height: 2rem; - cursor: pointer; - padding: 0; - margin: 0; - border: 0; - } - body > header:first-child nav button:after { - content: ""; - background-color: transparent; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); - background-repeat: repeat; - background-position: center center; - background-size: cover; - display: inline-block; - width: 2rem; - height: 2rem; - vertical-align: middle; - padding: 0; - margin: 0; - border-radius: 0.1rem; - } - body > header:first-child nav button span { - display: none; - } + body > header:first-child nav ul { + overflow: hidden; + position: absolute; + top: var(--header-height); + right: 0; + width: 100vw; + background-color: hsl(256, 65.5%, 27.3%); + box-shadow: 0px 6px 5px hsl(256, 65.5%, 13%); + z-index: 10000; + padding: 0 1rem 0rem; + box-sizing: border-box; + transition: height 0.5s ease-out; + height: 0; + margin: 0; + } + body > header:first-child nav ul li { + margin: 0; + padding: 0; + } + body > header:first-child nav ul li a span { + height: 1rem; + padding: 0.5rem 0; + display: block; + } + body > header:first-child nav button { + order: 3; + display: block; + background-color: transparent; + color: rgba(255, 255, 255, 0.5); + width: 2rem; + height: 2rem; + cursor: pointer; + padding: 0; + margin: 0; + border: 0; + } + body > header:first-child nav button:after { + content: ""; + background-color: transparent; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); + background-repeat: repeat; + background-position: center center; + background-size: cover; + display: inline-block; + width: 2rem; + height: 2rem; + vertical-align: middle; + padding: 0; + margin: 0; + border-radius: 0.1rem; + } + body > header:first-child nav button span { + display: none; + } } @media (min-width: 1140px) { - body > header:first-child nav button { - display: none; - } - body > header:first-child nav ul li { - display: inline-block; - margin: 0 0.666rem; - } - body > header:first-child nav ul li a:hover { - border-bottom: 1px solid rgba(228, 195, 128, 0.33); - } - body > header:first-child nav ul li a:focus { - border-bottom: 1px solid rgba(228, 195, 128, 0.66); - } - body > header:first-child nav ul li.active a { - border-bottom: 1px solid #e4c380; - } - body > header:first-child nav ul li a { - padding: 0.5rem 0rem; - } + body > header:first-child nav button { + display: none; + } + body > header:first-child nav ul li { + display: inline-block; + margin: 0 0.666rem; + } + body > header:first-child nav ul li a { + padding: 0.5rem 0rem; + border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-color: transparent; + } + body > header:first-child nav ul li a:hover { + border-bottom-color: rgba(228, 195, 128, 0.33); + } + body > header:first-child nav ul li a:focus { + border-bottom-color: rgba(228, 195, 128, 0.66); + } + body > header:first-child nav ul li.active a { + border-bottom-color: #e4c380; + } } /* ======= HOME ======= */ :root { - --home-text-color: #212529; - --home-bg-color: #e9ecef; + --home-text-color: #212529; + --home-bg-color: #e9ecef; } body#home { - font-size: 1rem; - /* ======= Homepage : showcase ======= */ - /* ======= Homepage : below showcase ======= */ + font-size: 1rem; + /* ======= Homepage : showcase ======= */ + /* ======= Homepage : below showcase ======= */ } body#home #showcase { - color: white; + color: white; } body#home #showcase *:not(.CTA-button) > a, body#home #showcase *:not(.CTA-button) > a:focus, body#home #showcase *:not(.CTA-button) > a:active, body#home #showcase *:not(.CTA-button) > a:visited { - color: hsl(179, 75%, 50%); + color: hsl(179, 75%, 50%); } body#home #showcase *:not(.CTA-button) > a:hover { - color: hsl(179, 100%, 50%); - transition: color 0.25s ease-in-out; + color: hsl(179, 100%, 50%); + transition: color 0.25s ease-in-out; } @media screen and (max-width: 879px), screen and (orientation: portrait) { - body#home #showcase div { - display: flex; - flex-wrap: wrap; - justify-content: center; - text-align: center; - flex-direction: row; - padding-bottom: 2rem; - } - body#home #showcase div * { - flex-basis: 100%; - flex-shrink: 0; - } - body#home #showcase div figure { - padding: 0 5%; - box-sizing: border-box; - margin: auto; - } - body#home #showcase div figure img { - max-width: 100%; - } + body#home #showcase div { + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; + flex-direction: row; + padding-bottom: 2rem; + } + body#home #showcase div * { + flex-basis: 100%; + flex-shrink: 0; + } + body#home #showcase div figure { + padding: 0 5%; + box-sizing: border-box; + margin: auto; + } + body#home #showcase div figure img { + max-width: 100%; + } } @media screen and (min-width: 880px) and (orientation: landscape) { - body#home #showcase { - overflow: visible; - } - body#home #showcase div { - text-align: center; - box-sizing: border-box; - display: flex; - flex-direction: column; - flex-wrap: wrap; - position: relative; - justify-content: center; - width: 100%; - overflow: visible; - } - body#home #showcase div h2#USP { - margin-top: 0; - margin-bottom: 0; - } - body#home #showcase div > * { - margin-left: 50%; - margin-right: 0; - width: 50%; - background: transparent; - } - body#home #showcase div figure { - position: absolute; - overflow: visible; - height: 100%; - margin-left: 0; - margin-top: 0; - margin-bottom: 0; - padding: 0; - } - body#home #showcase div figure img { - position: absolute; - align-self: center; - /*max-height: calc(~"90vh - 120px");*/ - height: 100%; - } - body#home #showcase div aside * { - display: inline; - } - body#home #showcase div aside + div { - clear: both; - height: 0; - } + body#home #showcase { + overflow: visible; + } + body#home #showcase div { + text-align: center; + box-sizing: border-box; + display: flex; + flex-direction: column; + flex-wrap: wrap; + position: relative; + justify-content: center; + width: 100%; + overflow: visible; + } + body#home #showcase div h2#USP { + margin-top: 0; + margin-bottom: 0; + } + body#home #showcase div > * { + margin-left: 50%; + margin-right: 0; + width: 50%; + background: transparent; + } + body#home #showcase div figure { + position: absolute; + overflow: visible; + height: 100%; + margin-left: 0; + margin-top: 0; + margin-bottom: 0; + padding: 0; + } + body#home #showcase div figure img { + position: absolute; + align-self: center; + /*max-height: calc(~"90vh - var(--header-height)");*/ + height: 100%; + } + body#home #showcase div aside * { + display: inline; + } + body#home #showcase div aside + div { + clear: both; + height: 0; + } } @media screen and (min-width: 880px) and (orientation: landscape) { - body#home #showcase div figure { - order: 1; - } - body#home #showcase div h2 { - order: 2; - } - body#home #showcase div *:nth-child(n+3) { - order: 3; - } + body#home #showcase div figure { + order: 1; + } + body#home #showcase div h2 { + order: 2; + } + body#home #showcase div *:nth-child(n+3) { + order: 3; + } } @media screen and (min-width: 880px) and (orientation: landscape) { - body#home #showcase { - --screenshot-height: calc(50vw / var(--screenshot-ratio)); - --screenshot-top-offset: calc((1 - var(--screenshot-laptop-keyboard-ratio)) * var(--screenshot-height)); - height: calc(50vw / var(--screenshot-ratio) + var(--screenshot-top-offset)); - background-color: hsl(67, 33.3%, 95.3%); - } - body#home #showcase div { - background-color: hsl(256, 65.5%, 27.3%); - height: calc(50vw / var(--screenshot-ratio)); - } - body#home #showcase div figure { - width: var(--screenshot-width); - top: var(--screenshot-top-offset); - } + body#home #showcase { + --screenshot-height: calc(50vw / var(--screenshot-ratio)); + --screenshot-top-offset: calc((1 - var(--screenshot-laptop-keyboard-ratio)) * var(--screenshot-height)); + height: calc(50vw / var(--screenshot-ratio) + var(--screenshot-top-offset)); + background-color: hsl(67, 33.3%, 95.3%); + } + body#home #showcase div { + background-color: hsl(256, 65.5%, 27.3%); + height: calc(50vw / var(--screenshot-ratio)); + } + body#home #showcase div figure { + width: var(--screenshot-width); + top: var(--screenshot-top-offset); + } } @media (max-width: 575px) { - body#home #showcase h2#USP { - font-size: 2rem; - } + body#home #showcase h2#USP { + font-size: 2rem; + } } @media (min-width: 576px) { - body#home #showcase h2#USP { - font-size: 2.5rem; - } + body#home #showcase h2#USP { + font-size: 2.5rem; + } } @media screen and (max-width: 767px) { - body#home #showcase h2#USP { - padding-top: 1.5rem; - padding-bottom: 0rem; - } + body#home #showcase h2#USP { + padding-top: 1.5rem; + padding-bottom: 0rem; + } } @media screen and (min-width: 768px) { - body#home #showcase h2#USP { - padding-top: 1rem; - padding-bottom: 0rem; - } + body#home #showcase h2#USP { + padding-top: 1rem; + padding-bottom: 0rem; + } } @media screen and (min-width: 880px) and (orientation: landscape) { - body#home #showcase h2#USP { - font-size: 2rem; - } + body#home #showcase h2#USP { + font-size: 2rem; + } } @media screen and (min-width: 992px) and (orientation: landscape) { - body#home #showcase h2#USP { - font-size: 2.5rem; - } + body#home #showcase h2#USP { + font-size: 2.5rem; + } } body#home #showcase h2#USP + p { - margin-top: 0rem; - margin-bottom: 1rem; + margin-top: 0rem; + margin-bottom: 1rem; } @media (max-width: 575px) { - body#home #showcase h2#USP + p { - margin-top: 1rem; - margin-bottom: 0.5rem; - } + body#home #showcase h2#USP + p { + margin-top: 1rem; + margin-bottom: 0.5rem; + } } body#home #showcase #licence { - color: hsla(0, 0%, 100%, 0.75); - font-size: 0.9rem; + color: hsla(0, 0%, 100%, 0.75); + font-size: 0.9rem; } body#home main > section:nth-child(n+2) { - color: var(--home-text-color); - background-color: var(--home-bg-color); - background: linear-gradient(0deg, hsl(67, 20%, 92.2%) 0%, hsl(67, 33.3%, 95.3%) 100%); - padding-bottom: 1rem; - /*overflow: hidden;*/ - /* ====== Homepage : reviews ====== */ - /* ====== Homepage : gallery ====== */ - /* ======= Homepage : steps ======= */ - /* ======= Homepage : features... ======= */ + color: var(--home-text-color); + background-color: var(--home-bg-color); + background: linear-gradient(0deg, hsl(67, 20%, 92.2%) 0%, hsl(67, 33.3%, 95.3%) 100%); + padding-bottom: 1rem; + /*overflow: hidden;*/ + /* ====== Homepage : reviews ====== */ + /* ====== Homepage : gallery ====== */ + /* ======= Homepage : steps ======= */ + /* ======= Homepage : features... ======= */ } @media screen and (min-width: 1200px) { - body#home main > section:nth-child(n+2) > div { - max-width: 1140px; - margin: auto; - } + body#home main > section:nth-child(n+2) > div { + max-width: 1140px; + margin: auto; + } } body#home main > section:nth-child(n+2) h2 { - text-align: center; - padding: 3rem 0 2rem; - margin: 0; - font-size: 2rem; + text-align: center; + padding: 3rem 0 2rem; + margin: 0; + font-size: 2rem; } @media (max-width: 575px) { - body#home main > section:nth-child(n+2) h2 { - font-size: 1.5rem; - padding: 2rem 0 1rem; - } + body#home main > section:nth-child(n+2) h2 { + font-size: 1.5rem; + padding: 2rem 0 1rem; + } } body#home main > section:nth-child(n+2)#reviews blockquote div:before, body#home main > section:nth-child(n+2)#reviews blockquote:before { - position: absolute; - left: 50%; - font-size: 6rem; - width: 6rem; - font-family: cursive; - color: #222; + position: absolute; + left: 50%; + font-size: 6rem; + width: 6rem; + font-family: cursive; + color: #222; } body#home main > section:nth-child(n+2)#reviews blockquote div:before { - content: '«'; - float: left; - margin-left: calc(-50vh - 6rem); - margin-top: 1.2rem; - /* FTGCM */ - transform: rotate(15deg); + content: '«'; + float: left; + margin-left: calc(-50vh - 6rem); + margin-top: 1.2rem; + /* FTGCM */ + transform: rotate(15deg); } body#home main > section:nth-child(n+2)#reviews blockquote:before { - content: '»'; - margin-left: 50vh; - transform: rotate(-15deg); - text-align: right; + content: '»'; + margin-left: 50vh; + transform: rotate(-15deg); + text-align: right; } body#home main > section:nth-child(n+2)#reviews blockquote div { - line-height: 1.75em; - background: repeating-linear-gradient(#fffff2, #fffff2 1.65em, rgba(92, 91, 129, 0.05) 1.65em, rgba(92, 91, 129, 0.05) 1.75em); - box-shadow: 1px 1px 2px hsl(0, 0%, 25%); - padding: 0.4em 0.5rem; - font-family: cursive; - max-width: 100vh; - margin: auto; - box-sizing: border-box; - border: 1.75em solid #fffff2; - text-indent: 1.75em; + line-height: 1.75em; + background: repeating-linear-gradient(#fffff2, #fffff2 1.65em, rgba(92, 91, 129, 0.05) 1.65em, rgba(92, 91, 129, 0.05) 1.75em); + box-shadow: 1px 1px 2px hsl(0, 0%, 25%); + padding: 0.4em 0.5rem; + font-family: cursive; + max-width: 100vh; + margin: auto; + box-sizing: border-box; + border: 1.75em solid #fffff2; + text-indent: 1.75em; } body#home main > section:nth-child(n+2)#reviews blockquote cite { - display: block; - text-align: right; - font-style: normal; + display: block; + text-align: right; + font-style: normal; } body#home main > section:nth-child(n+2)#reviews blockquote cite:before { - content: "— "; + content: "— "; } body#home main > section:nth-child(n+2)#gallery { - padding-bottom: 0; + padding-bottom: 0; } body#home main > section:nth-child(n+2)#gallery div { - display: flex; - flex-wrap: wrap; - max-width: 100%; - border: 0; - z-index: 161803; - box-shadow: -2px 2px 5px black; + display: flex; + flex-wrap: wrap; + max-width: 100%; + border: 0; + z-index: 161803; + box-shadow: -2px 2px 5px black; } body#home main > section:nth-child(n+2)#gallery h2 { - padding-bottom: 2rem; + padding-bottom: 2rem; } body#home main > section:nth-child(n+2)#gallery figure { - margin: 0; - flex-shrink: 1; - overflow: hidden; - display: flex; - padding: 0 0; - background: black; + margin: 0; + flex-shrink: 1; + overflow: hidden; + display: flex; + padding: 0 0; + background: black; } body#home main > section:nth-child(n+2)#gallery figure span { - display: flex; - height: auto; - border-radius: 0.5rem; - overflow: hidden; + display: flex; + height: auto; + border-radius: 0.5rem; + overflow: hidden; } body#home main > section:nth-child(n+2)#gallery figure img { - align-self: center; + align-self: center; } body#home main > section:nth-child(n+2)#gallery figure#bar { - order: 3; + order: 3; } body#home main > section:nth-child(n+2)#gallery figure#djoliba { - order: 4; + order: 4; } body#home main > section:nth-child(n+2)#gallery figure#boat { - order: 1; + order: 1; } body#home main > section:nth-child(n+2)#gallery figure#vietnam { - order: 2; + order: 2; } @media (max-width: 575px) { - body#home main > section:nth-child(n+2)#gallery { - /* ====== Fine-tuning (c'est magique) ====== */ - } - body#home main > section:nth-child(n+2)#gallery div { - padding: 0 39px; - background: url("film-y.png") repeat-y left -11px, url("film-y.png") repeat-y right -11px; - position: relative; - top: 3rem; - } - body#home main > section:nth-child(n+2)#gallery h2 { - padding-bottom: 0; - } - body#home main > section:nth-child(n+2)#gallery figure { - border-top: 0.75rem solid black; - border-bottom: 0.75rem solid black; - flex-basis: calc(100%); - height: calc(100vw - 2*39px); - } - body#home main > section:nth-child(n+2)#gallery figure img { - height: 100%; - } - body#home main > section:nth-child(n+2)#gallery figure#bar img { - transform: translateX(calc(0% - 2/10 * 100%)); - } - body#home main > section:nth-child(n+2)#gallery figure#djoliba img { - transform: translateX(calc(0% - 3/7 * 100%)); - } - body#home main > section:nth-child(n+2)#gallery figure#vietnam img { - transform: translateX(calc(0% - 2/5 * 100%)); - } + body#home main > section:nth-child(n+2)#gallery { + /* ====== Fine-tuning (c'est magique) ====== */ + } + body#home main > section:nth-child(n+2)#gallery div { + padding: 0 39px; + background: url("film-y.png") repeat-y left -11px, url("film-y.png") repeat-y right -11px; + position: relative; + top: 3rem; + } + body#home main > section:nth-child(n+2)#gallery h2 { + padding-bottom: 0; + } + body#home main > section:nth-child(n+2)#gallery figure { + border-top: 0.75rem solid black; + border-bottom: 0.75rem solid black; + flex-basis: calc(100%); + height: calc(100vw - 2*39px); + } + body#home main > section:nth-child(n+2)#gallery figure img { + height: 100%; + } + body#home main > section:nth-child(n+2)#gallery figure#bar img { + transform: translateX(calc(0% - 2/10 * 100%)); + } + body#home main > section:nth-child(n+2)#gallery figure#djoliba img { + transform: translateX(calc(0% - 3/7 * 100%)); + } + body#home main > section:nth-child(n+2)#gallery figure#vietnam img { + transform: translateX(calc(0% - 2/5 * 100%)); + } } @media (min-width: 576px) { - body#home main > section:nth-child(n+2)#gallery { - /* ====== Fine-tuning (c'est magique) ====== */ - } - body#home main > section:nth-child(n+2)#gallery div { - padding: 39px 0; - background: url("film.png") repeat-x -11px top, url("film.png") repeat-x -11px bottom; - } - body#home main > section:nth-child(n+2)#gallery figure { - border-right: 1.5rem solid black; - flex-basis: calc(25% - 1.5rem); - height: calc(25vw - 1.5rem); - } - body#home main > section:nth-child(n+2)#gallery figure img { - height: 100%; - } - body#home main > section:nth-child(n+2)#gallery div { - transform: rotate(0.5deg) scaleX(1.05) scaleY(1.05); - position: relative; - top: 0.5rem; - } - body#home main > section:nth-child(n+2)#gallery figure#bar img { - transform: translateX(calc(0% - 1/10 * 100%)); - } - body#home main > section:nth-child(n+2)#gallery figure#djoliba img { - transform: translateX(calc(0% - 3/7 * 100%)); - } - body#home main > section:nth-child(n+2)#gallery figure#vietnam img { - transform: translateX(calc(0% - 1/5 * 100%)); - } + body#home main > section:nth-child(n+2)#gallery { + /* ====== Fine-tuning (c'est magique) ====== */ + } + body#home main > section:nth-child(n+2)#gallery div { + padding: 39px 0; + background: url("film.png") repeat-x -11px top, url("film.png") repeat-x -11px bottom; + } + body#home main > section:nth-child(n+2)#gallery figure { + border-right: 1.5rem solid black; + flex-basis: calc(25% - 1.5rem); + height: calc(25vw - 1.5rem); + } + body#home main > section:nth-child(n+2)#gallery figure img { + height: 100%; + } + body#home main > section:nth-child(n+2)#gallery div { + transform: rotate(0.5deg) scaleX(1.05) scaleY(1.05); + position: relative; + top: 0.5rem; + } + body#home main > section:nth-child(n+2)#gallery figure#bar img { + transform: translateX(calc(0% - 1/10 * 100%)); + } + body#home main > section:nth-child(n+2)#gallery figure#djoliba img { + transform: translateX(calc(0% - 3/7 * 100%)); + } + body#home main > section:nth-child(n+2)#gallery figure#vietnam img { + transform: translateX(calc(0% - 1/5 * 100%)); + } } body#home main > section:nth-child(n+2)#steps div { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } body#home main > section:nth-child(n+2)#steps div h2 { - flex-basis: 100%; - flex-shrink: 0; + flex-basis: 100%; + flex-shrink: 0; } body#home main > section:nth-child(n+2)#steps div figure { - box-sizing: border-box; - overflow: hidden; - display: block; - background-color: white; - border: 1px solid rgba(0, 0, 0, 0.125); - border-radius: 0.25rem; + box-sizing: border-box; + overflow: hidden; + display: block; + background-color: white; + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 0.25rem; } @media (max-width: 767px) { - body#home main > section:nth-child(n+2)#steps div figure { - margin: 1em 10%; - flex-basis: 80%; - flex-shrink: 1; - } + body#home main > section:nth-child(n+2)#steps div figure { + margin: 1em 10%; + flex-basis: 80%; + flex-shrink: 1; + } } @media (min-width: 768px) { - body#home main > section:nth-child(n+2)#steps div figure { - margin: 1em; - flex-basis: calc(33.333% - 2em); - flex-shrink: 1; - } + body#home main > section:nth-child(n+2)#steps div figure { + margin: 1em; + flex-basis: calc(33.333% - 2em); + flex-shrink: 1; + } } body#home main > section:nth-child(n+2)#steps div figure h3, body#home main > section:nth-child(n+2)#steps div figure p { - padding-left: 1rem; - padding-right: 1rem; + padding-left: 1rem; + padding-right: 1rem; } body#home main > section:nth-child(n+2)#steps div figure h3 { - margin-top: 1rem; - color: black; + margin-top: 1rem; + color: black; } body#home main > section:nth-child(n+2)#steps div figure img { - max-width: 100%; + max-width: 100%; } body#home main > section:nth-child(n+2).features-list div { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } body#home main > section:nth-child(n+2).features-list div h2 { - flex-basis: 100%; - flex-shrink: 0; + flex-basis: 100%; + flex-shrink: 0; } body#home main > section:nth-child(n+2).features-list div dl { - display: flex; - flex-direction: row; - flex-wrap: wrap; - text-align: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; + text-align: center; } body#home main > section:nth-child(n+2).features-list div dl dt { - font-weight: 500; - font-size: 1.25rem; + font-weight: 500; + font-size: 1.25rem; } body#home main > section:nth-child(n+2).features-list div dl dt:before { - color: white; - width: 6rem; - height: 6rem; - line-height: 6rem; - font-size: 3rem; - display: block; - margin: 1rem auto; - font-family: 'FontAwesome'; + color: white; + width: 6rem; + height: 6rem; + line-height: 6rem; + font-size: 3rem; + display: block; + margin: 1rem auto; + font-family: 'FontAwesome'; } body#home main > section:nth-child(n+2).features-list div dl dt.feature-secured:before { - background-color: hsl(139, 32%, 50%); - text-shadow: 0px 0px 3px hsl(139, 32%, 30%); - box-shadow: -2px 2px 0px hsl(0, 0%, 100%); - /* ~effet bouton enfoncé */ - border-radius: 50%; - content: "\f023"; - /* lock */ + background-color: hsl(139, 32%, 50%); + text-shadow: 0px 0px 3px hsl(139, 32%, 30%); + box-shadow: -2px 2px 0px hsl(0, 0%, 100%); + /* ~effet bouton enfoncé */ + border-radius: 50%; + content: "\f023"; + /* lock */ } body#home main > section:nth-child(n+2).features-list div dl dt.feature-gratis:before { - background-color: hsl(349, 89%, 53%); - text-shadow: 0px 0px 3px hsl(349, 89%, 33%); - box-shadow: 0px 1px 2px hsl(0, 0%, 100%); - /* ~effet bouton enfoncé */ - border-radius: 0.25rem; - content: "\f06b"; - /* gift */ + background-color: hsl(349, 89%, 53%); + text-shadow: 0px 0px 3px hsl(349, 89%, 33%); + box-shadow: 0px 1px 2px hsl(0, 0%, 100%); + /* ~effet bouton enfoncé */ + border-radius: 0.25rem; + content: "\f06b"; + /* gift */ } body#home main > section:nth-child(n+2).features-list div dl dt.feature-libre:before { - background-color: hsl(191, 79%, 70%); - text-shadow: 0px 0px 3px hsl(191, 79%, 50%); - box-shadow: 1px 1px 2px hsl(0, 0%, 100%); - /* ~effet bouton enfoncé */ - border-top-left-radius: 3rem; - border-bottom-right-radius: 3rem; - content: "\f126"; - /* code-fork */ + background-color: hsl(191, 79%, 70%); + text-shadow: 0px 0px 3px hsl(191, 79%, 50%); + box-shadow: 1px 1px 2px hsl(0, 0%, 100%); + /* ~effet bouton enfoncé */ + border-top-left-radius: 3rem; + border-bottom-right-radius: 3rem; + content: "\f126"; + /* code-fork */ } body#home main > section:nth-child(n+2).features-list div dl dd { - padding: 0; + padding: 0; } @media (max-width: 575px) { - body#home main > section:nth-child(n+2).features-list div dl > * { - margin: 0rem 1rem 1rem; - flex-basis: calc(100% - 2rem); - } + body#home main > section:nth-child(n+2).features-list div dl > * { + margin: 0rem 1rem 1rem; + flex-basis: calc(100% - 2rem); + } } @media (min-width: 576px) { - body#home main > section:nth-child(n+2).features-list div dl > * { - margin: 0rem 1rem 1rem; - flex-basis: calc(33.333% - 2rem); - } - body#home main > section:nth-child(n+2).features-list div dl dt { - order: 1; - } - body#home main > section:nth-child(n+2).features-list div dl dd { - order: 2; - } + body#home main > section:nth-child(n+2).features-list div dl > * { + margin: 0rem 1rem 1rem; + flex-basis: calc(33.333% - 2rem); + } + body#home main > section:nth-child(n+2).features-list div dl dt { + order: 1; + } + body#home main > section:nth-child(n+2).features-list div dl dd { + order: 2; + } } /* ======= Features page ======= */ article#features { - font-size: 1.2rem; + font-size: 1.2rem; } article#features figure { - display: flex; - flex-wrap: wrap; - flex-direction: row; - align-items: center; - width: 100%; - margin: 0; + display: flex; + flex-wrap: wrap; + flex-direction: row; + align-items: center; + width: 100%; + margin: 0; } @media (max-width: 991px) { - article#features figure { - padding: 1rem 5% 2rem; - } + article#features figure { + padding: 1rem 5% 2rem; + } } @media (min-width: 992px) { - article#features figure { - min-height: 100vh; - } + article#features figure { + min-height: 100vh; + } } article#features figure:nth-of-type(odd) { - background: #ddd; + background: #ddd; } article#features figure:nth-of-type(even) { - background: #eee; + background: #eee; } article#features figure:nth-of-type(odd), article#features figure:nth-of-type(even) { - background: linear-gradient(0deg, #dddddd 0%, #eeeeee 100%); + background: linear-gradient(0deg, #dddddd 0%, #eeeeee 100%); } @media (min-width: 992px) { - article#features figure:nth-of-type(odd) img { - order: 2; - } - article#features figure:nth-of-type(odd) figcaption { - order: 1; - } + article#features figure:nth-of-type(odd) img { + order: 2; + } + article#features figure:nth-of-type(odd) figcaption { + order: 1; + } } article#features figure * { - flex-shrink: 1; - box-sizing: border-box; + flex-shrink: 1; + box-sizing: border-box; } @media (max-width: 991px) { - article#features figure * { - flex-basis: 100%; - } + article#features figure * { + flex-basis: 100%; + } } @media (max-width: 991px) { - article#features figure img { - order: 2; - max-width: 100%; - } + article#features figure img { + order: 2; + max-width: 100%; + } } @media (min-width: 992px) { - article#features figure img { - width: 60%; - padding: 3rem 2.5%; - box-sizing: border-box; - margin: 0; - max-height: 100%; - text-align: center; - } + article#features figure img { + width: 60%; + padding: 3rem 2.5%; + box-sizing: border-box; + margin: 0; + max-height: 100%; + text-align: center; + } } @media (max-width: 991px) { - article#features figure figcaption { - order: 1; - } + article#features figure figcaption { + order: 1; + } } @media (min-width: 992px) { - article#features figure figcaption { - width: 40%; - padding: 3rem 5%; - box-sizing: border-box; - } + article#features figure figcaption { + width: 40%; + padding: 3rem 5%; + box-sizing: border-box; + } } article#features figure figcaption h2 { - margin-bottom: 1em; - font-size: 1.8rem; - font-weight: 600; + margin-bottom: 1em; + font-size: 1.8rem; + font-weight: 600; } /* ======= Download page ======= */ #download { - display: flex; - margin: 0 auto; - box-sizing: border-box; - height: auto; - flex-wrap: wrap; - justify-content: center; +display: flex; +margin: 0 auto; +box-sizing: border-box; +height: auto; +flex-wrap: wrap; +justify-content: center; } @media (max-width: 991px) { - #download { - width: 100%; - } + #download { + width: 100%; + } } @media (min-width: 992px) { - #download { - width: 80%; - } + #download { + width: 80%; + } } #download section { - box-sizing: content-box; - border: 1px solid rgba(0, 0, 0, 0.125); - min-width: 200px; - text-align: center; - background-color: white; - border-radius: 0.25rem; +box-sizing: content-box; +border: 1px solid rgba(0, 0, 0, 0.125); +min-width: 200px; +text-align: center; +background-color: white; +border-radius: 0.25rem; } #download section h3, #download section p { - padding-left: 1rem; - padding-right: 1rem; +padding-left: 1rem; +padding-right: 1rem; } #download section h3 { - margin-top: 1rem; - color: black; +margin-top: 1rem; +color: black; } #download section img { - max-width: 100%; +max-width: 100%; } @media (max-width: 991px) { - #download section { - margin: 1em; - flex-basis: calc(33.333% - 2em - 2px); - flex-grow: 1; - max-width: 300px; - } + #download section { + margin: 1em; + flex-basis: calc(33.333% - 2em - 2px); + flex-grow: 1; + max-width: 300px; + } } @media (min-width: 992px) { - #download section { - margin: 1em; - flex-basis: calc(33.333% - 2em - 2px); - flex-shrink: 1; - flex-grow: 0; - } + #download section { + margin: 1em; + flex-basis: calc(33.333% - 2em - 2px); + flex-shrink: 1; + flex-grow: 0; + } } /* ======= Funding page ======= */ article#funding { - overflow: auto; - background-color: hsl(39.1, 85.2%, 94.7%); - /* - #copyButton, - #supportButton - { - background: #111; - color: white; - border: 0; - font-weight: light; - height: 3rem; - line-height: 3rem; - font-size: 1rem; - width: 100%; - margin-bottom: 0.5rem; - } - */ + overflow: auto; + background-color: hsl(39.1, 85.2%, 94.7%); + /* + * #copyButton, + * #supportButton + * { + * background: #111; + * color: white; + * border: 0; + * font-weight: light; + * height: 3rem; + * line-height: 3rem; + * font-size: 1rem; + * width: 100%; + * margin-bottom: 0.5rem; +} +*/ } article#funding h1 { - color: black; + color: black; } article#funding h2 { - margin-top: 4rem; - text-align: center; - font-weight: bold; - font-size: 1.75rem; + margin-top: 4rem; + text-align: center; + font-weight: bold; + font-size: 1.75rem; } article#funding p { - text-align: justify; + text-align: justify; } article#funding p.CTA-button { - text-align: center; + text-align: center; } article#funding h2 { - text-align: center; + text-align: center; } article#funding p, article#funding h1, @@ -1137,366 +1145,366 @@ article#funding h3, article#funding h4, article#funding h5, article#funding h6 { - margin-left: 2rem; - margin-right: 2rem; + margin-left: 2rem; + margin-right: 2rem; } @media screen and (min-width: 960px) { - article#funding p, - article#funding h1, - article#funding h2, - article#funding h3, - article#funding h4, - article#funding h5, - article#funding h6 { - max-width: 940px; - margin-left: auto; - margin-right: auto; - } + article#funding p, + article#funding h1, + article#funding h2, + article#funding h3, + article#funding h4, + article#funding h5, + article#funding h6 { + max-width: 940px; + margin-left: auto; + margin-right: auto; + } } article#funding .donorsList { - list-style: none; - font-family: sans-serif; - margin-left: 0; - margin-right: 0; - padding-left: 0; - padding-right: 0; - margin-top: 2rem; - margin-bottom: 2rem; - /* - display: flex; - flex-wrap: wrap; - */ - justify-content: center; - display: grid; - grid-row-gap: 1rem; + list-style: none; + font-family: sans-serif; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + margin-top: 2rem; + margin-bottom: 2rem; + /* + * display: flex; + * flex-wrap: wrap; + */ + justify-content: center; + display: grid; + grid-row-gap: 1rem; } @media screen and (min-width: 448px) { - article#funding .donorsList { - grid-template-columns: repeat(2, 204px); - grid-column-gap: 20px; - } - article#funding .donorsList > li:nth-of-type(2n+1) { - grid-column: 1; - } - article#funding .donorsList > li:nth-of-type(2n+2) { - grid-column: 2; - } + article#funding .donorsList { + grid-template-columns: repeat(2, 204px); + grid-column-gap: 20px; + } + article#funding .donorsList > li:nth-of-type(2n+1) { + grid-column: 1; + } + article#funding .donorsList > li:nth-of-type(2n+2) { + grid-column: 2; + } } @media screen and (min-width: 672px) { - article#funding .donorsList { - grid-template-columns: repeat(3, 204px); - grid-column-gap: 20px; - } - article#funding .donorsList > li:nth-of-type(3n+1) { - grid-column: 1; - } - article#funding .donorsList > li:nth-of-type(3n+2) { - grid-column: 2; - } - article#funding .donorsList > li:nth-of-type(3n+3) { - grid-column: 3; - } + article#funding .donorsList { + grid-template-columns: repeat(3, 204px); + grid-column-gap: 20px; + } + article#funding .donorsList > li:nth-of-type(3n+1) { + grid-column: 1; + } + article#funding .donorsList > li:nth-of-type(3n+2) { + grid-column: 2; + } + article#funding .donorsList > li:nth-of-type(3n+3) { + grid-column: 3; + } } @media screen and (min-width: 896px) { - article#funding .donorsList { - grid-template-columns: repeat(4, 204px); - grid-column-gap: 20px; - } - article#funding .donorsList > li:nth-of-type(4n+1) { - grid-column: 1; - } - article#funding .donorsList > li:nth-of-type(4n+2) { - grid-column: 2; - } - article#funding .donorsList > li:nth-of-type(4n+3) { - grid-column: 3; - } - article#funding .donorsList > li:nth-of-type(4n+4) { - grid-column: 4; - } + article#funding .donorsList { + grid-template-columns: repeat(4, 204px); + grid-column-gap: 20px; + } + article#funding .donorsList > li:nth-of-type(4n+1) { + grid-column: 1; + } + article#funding .donorsList > li:nth-of-type(4n+2) { + grid-column: 2; + } + article#funding .donorsList > li:nth-of-type(4n+3) { + grid-column: 3; + } + article#funding .donorsList > li:nth-of-type(4n+4) { + grid-column: 4; + } } @media screen and (min-width: 1120px) { - article#funding .donorsList { - grid-template-columns: repeat(5, 204px); - grid-column-gap: 20px; - } - article#funding .donorsList > li:nth-of-type(5n+1) { - grid-column: 1; - } - article#funding .donorsList > li:nth-of-type(5n+2) { - grid-column: 2; - } - article#funding .donorsList > li:nth-of-type(5n+3) { - grid-column: 3; - } - article#funding .donorsList > li:nth-of-type(5n+4) { - grid-column: 4; - } - article#funding .donorsList > li:nth-of-type(5n+5) { - grid-column: 5; - } + article#funding .donorsList { + grid-template-columns: repeat(5, 204px); + grid-column-gap: 20px; + } + article#funding .donorsList > li:nth-of-type(5n+1) { + grid-column: 1; + } + article#funding .donorsList > li:nth-of-type(5n+2) { + grid-column: 2; + } + article#funding .donorsList > li:nth-of-type(5n+3) { + grid-column: 3; + } + article#funding .donorsList > li:nth-of-type(5n+4) { + grid-column: 4; + } + article#funding .donorsList > li:nth-of-type(5n+5) { + grid-column: 5; + } } @media screen and (min-width: 1344px) { - article#funding .donorsList { - grid-template-columns: repeat(6, 204px); - grid-column-gap: 20px; - } - article#funding .donorsList > li:nth-of-type(6n+1) { - grid-column: 1; - } - article#funding .donorsList > li:nth-of-type(6n+2) { - grid-column: 2; - } - article#funding .donorsList > li:nth-of-type(6n+3) { - grid-column: 3; - } - article#funding .donorsList > li:nth-of-type(6n+4) { - grid-column: 4; - } - article#funding .donorsList > li:nth-of-type(6n+5) { - grid-column: 5; - } - article#funding .donorsList > li:nth-of-type(6n) { - grid-column: 6; - } + article#funding .donorsList { + grid-template-columns: repeat(6, 204px); + grid-column-gap: 20px; + } + article#funding .donorsList > li:nth-of-type(6n+1) { + grid-column: 1; + } + article#funding .donorsList > li:nth-of-type(6n+2) { + grid-column: 2; + } + article#funding .donorsList > li:nth-of-type(6n+3) { + grid-column: 3; + } + article#funding .donorsList > li:nth-of-type(6n+4) { + grid-column: 4; + } + article#funding .donorsList > li:nth-of-type(6n+5) { + grid-column: 5; + } + article#funding .donorsList > li:nth-of-type(6n) { + grid-column: 6; + } } article#funding .donorsList li { - /* - flex-basis: var(--base-width); - flex-grow: 0; - - display: flex; - align-items: center; - */ - background-color: white; - overflow: hidden; - border: 2px solid hsl(0, 0%, 90%); - box-shadow: -1px 1px 10px hsla(0, 0%, 0%, 0.2); - margin: 0; - text-align: center; - border-radius: 1em; + /* + * flex-basis: var(--base-width); + * flex-grow: 0; + * + * display: flex; + * align-items: center; + */ + background-color: white; + overflow: hidden; + border: 2px solid hsl(0, 0%, 90%); + box-shadow: -1px 1px 10px hsla(0, 0%, 0%, 0.2); + margin: 0; + text-align: center; + border-radius: 1em; } article#funding .donorsList li a { - width: 100%; - color: hsl(0, 0%, 10%); - text-decoration: none; - font-size: 0.9em; + width: 100%; + color: hsl(0, 0%, 10%); + text-decoration: none; + font-size: 0.9em; } article#funding .donorsList li a img { - background-color: #1a237e; - width: 100%; + background-color: #1a237e; + width: 100%; } article#funding .donorsList li a img, article#funding .donorsList li a .name { - width: 100%; + width: 100%; } article#funding .donorsList li a .name { - display: block; - padding: 1rem 0; - font-weight: bold; - text-align: center; + display: block; + padding: 1rem 0; + font-weight: bold; + text-align: center; } article#funding .donorsList li a .name span { - display: inline-block; - padding: 0 1em; - text-align: left; + display: inline-block; + padding: 0 1em; + text-align: left; } article#funding #supportButtonContainer, article#funding #projectStatus { - height: 100%; - overflow: hidden; - transition-property: opacity, height; - transition-delay: 0s, 0.5s; - transition-duration: 0.49s, 0s; + height: 100%; + overflow: hidden; + transition-property: opacity, height; + transition-delay: 0s, 0.5s; + transition-duration: 0.49s, 0s; } article#funding #pubkey-and-copy-button { - /*opacity: 0; - height: 0;*/ - transition-property: opacity, height; - transition-delay: 0.51s, 0.51s; - transition-duration: 0.5s, 0s; + /*opacity: 0; + * height: 0;*/ + transition-property: opacity, height; + transition-delay: 0.51s, 0.51s; + transition-duration: 0.5s, 0s; } article#funding #pubkey { - font-family: monospace; - padding: 8px 0; - border-radius: 5px; - border: transparent; - background: transparent; - font-size: 1rem; - display: block; - width: 100%; - text-align: center; - margin: 0.5em auto; + font-family: monospace; + padding: 8px 0; + border-radius: 5px; + border: transparent; + background: transparent; + font-size: 1rem; + display: block; + width: 100%; + text-align: center; + margin: 0.5em auto; } article#funding #successMsg { - opacity: 0; - /*height: 0;*/ - line-height: 1.5em; - transition-property: opacity, height; - transition-duration: 1.5s, 0.5s; + opacity: 0; + /*height: 0;*/ + line-height: 1.5em; + transition-property: opacity, height; + transition-duration: 1.5s, 0.5s; } article#funding input#pubkey { - color: black; + color: black; } article#funding input#pubkey::selection { - color: black; - background: transparent; + color: black; + background: transparent; } article#funding input#pubkey:after { - content: "..."; + content: "..."; } article#funding .crowdfunding-widget { - margin: auto; - border: white; - background: white; - background: linear-gradient(0deg, hsl(39, 85.2%, 90%) 0%, hsl(240, 100%, 100%) 95%); - padding: 1em; - box-shadow: -2px 2px 5px black; + margin: auto; + border: white; + background: white; + background: linear-gradient(0deg, hsl(39, 85.2%, 90%) 0%, hsl(240, 100%, 100%) 95%); + padding: 1em; + box-shadow: -2px 2px 5px black; } @media (min-width: 1200px) { - article#funding .crowdfunding-widget { - max-width: 450px; - } + article#funding .crowdfunding-widget { + max-width: 450px; + } } article#funding .crowdfunding-widget .progress-meter { - width: 100%; - height: 0.5em; - background-color: red; + width: 100%; + height: 0.5em; + background-color: red; } article#funding .crowdfunding-widget strong { - display: block; - font-size: 2rem; + display: block; + font-size: 2rem; } article#funding .crowdfunding-widget > p:nth-of-type(3) span:first-child { - display: none; + display: none; } article#funding .crowdfunding-widget .progress-container { - background-color: hsl(210, 15.8%, 92.5%); - border: 1px solid hsl(210, 10.3%, 32.7%); - height: 2rem; - border-radius: 0; - display: -ms-flexbox; - display: flex; - overflow: hidden; - font-size: 0.75rem; + background-color: hsl(210, 15.8%, 92.5%); + border: 1px solid hsl(210, 10.3%, 32.7%); + height: 2rem; + border-radius: 0; + display: -ms-flexbox; + display: flex; + overflow: hidden; + font-size: 0.75rem; } @keyframes progress-bar-stripes { - from { - background-position: 1rem 0; - } - to { - background-position: 0 0; - } + from { + background-position: 1rem 0; + } + to { + background-position: 0 0; + } } article#funding .crowdfunding-widget .progress-bar { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - color: #fff; - text-align: center; - white-space: nowrap; - background-color: hsl(45, 100%, 51.4%); - transition: width 0.6s ease; - -webkit-animation: progress-bar-stripes 1s linear infinite; - animation: progress-bar-stripes 1s linear infinite; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: center; + justify-content: center; + color: #fff; + text-align: center; + white-space: nowrap; + background-color: hsl(45, 100%, 51.4%); + transition: width 0.6s ease; + -webkit-animation: progress-bar-stripes 1s linear infinite; + animation: progress-bar-stripes 1s linear infinite; } /* ======= Tutorial page ======= */ #tuto { - display: flex; - flex-wrap: wrap; - font-size: 1rem; +display: flex; +flex-wrap: wrap; +font-size: 1rem; } #tuto img { - max-width: 100%; +max-width: 100%; } #tuto nav { - background: white; - padding: 1em 2%; - align-self: flex-start; +background: white; +padding: 1em 2%; +align-self: flex-start; } #tuto nav li { - margin-top: 0.5em; - margin-bottom: 0.5em; +margin-top: 0.5em; +margin-bottom: 0.5em; } #tuto nav li ul { - display: none; +display: none; } #tuto nav li.active > a { - font-weight: bold; +font-weight: bold; } #tuto nav li.current > ul { - display: block; +display: block; } #tuto nav > ul { - list-style: none; - padding-left: 0; +list-style: none; +padding-left: 0; } #tuto nav > ul > li { - margin-top: 1em; - margin-bottom: 1em; +margin-top: 1em; +margin-bottom: 1em; } #tuto article { - flex-grow: 1; - background-color: white; - color: black; - padding: 0 1em 1.5em; - align-self: flex-start; +flex-grow: 1; +background-color: white; +color: black; +padding: 0 1em 1.5em; +align-self: flex-start; } #tuto article h1 { - color: black; - font-size: 2rem; - font-weight: bold; - padding-bottom: 1em; +color: black; +font-size: 2rem; +font-weight: bold; +padding-bottom: 1em; } #tuto article li { - margin-top: 1em; - margin-bottom: 1em; +margin-top: 1em; +margin-bottom: 1em; } #tuto article li img { - margin-top: 1em; - margin-bottom: 1em; +margin-top: 1em; +margin-bottom: 1em; } #tuto article dl dt { - font-weight: bold; - margin-bottom: 0.5em; +font-weight: bold; +margin-bottom: 0.5em; } #tuto article dl dd { - margin-bottom: 1.5em; +margin-bottom: 1.5em; } @media (max-width: 991px) { - #tuto > * { - flex-basis: 100%; - } - #tuto nav { - order: 2; - } - #tuto article { - order: 1; - } + #tuto > * { + flex-basis: 100%; + } + #tuto nav { + order: 2; + } + #tuto article { + order: 1; + } } @media (min-width: 992px) { - #tuto > * { - margin: 2rem 1%; - } - #tuto nav { - position: sticky; - top: 1em; - flex-shrink: 0; - flex-grow: 1; - flex-basis: 25%; - } - #tuto article { - position: sticky; - top: 1em; - flex-shrink: 0; - flex-basis: 60%; - } + #tuto > * { + margin: 2rem 1%; + } + #tuto nav { + position: sticky; + top: 1em; + flex-shrink: 0; + flex-grow: 1; + flex-basis: 25%; + } + #tuto article { + position: sticky; + top: 1em; + flex-shrink: 0; + flex-basis: 60%; + } } /* ======= Legal Notice page ======= */ #legal-notice dt { - font-weight: bold; - font-size: 1.25rem; +font-weight: bold; +font-size: 1.25rem; } diff --git a/lib/style.less b/lib/style.less index 67a53e3..8855f17 100644 --- a/lib/style.less +++ b/lib/style.less @@ -6,7 +6,7 @@ --bp4: 1200px; --screenshot-ratio: 1.620915033; --screenshot-laptop-keyboard-ratio: 0.901515152; - + --header-height: 5.625rem; /* 90px/16px/rem */ @font-face { @@ -497,7 +497,7 @@ body > header:first-child { background: #311873; overflow: hidden; - height: 120px; + height: var(--header-height); padding: 0.5rem 1rem; box-sizing: content-box; display: flex; @@ -527,26 +527,21 @@ body > header:first-child { } } - > :nt-child(2) + + /* ==== HEADER : titre et logo ==== */ + + > .site-logo { order: 1; } - /* ==== HEADER : titre et logo ==== */ - - > h1, - > h2 + > .site-title { order: 2; flex-grow: 1; text-align: left; - font-size: 2.25rem; - - - @media (max-width: 575px) { - - font-size: 2rem; - } + font-size: 2rem; + margin-left: 4px; } /* ==== HEADER : menu ==== */ @@ -580,9 +575,6 @@ body > header:first-child { } @media (min-width: 1140px) { - - border: 0; - a { @@ -592,7 +584,28 @@ body > header:first-child { border-radius: 1em; color: #f2f2f2; - background: hsl(349, 89%, 53%); + background-color: hsl(349, 89%, 53%); + background-image: + linear-gradient( + 0deg, + hsla(349, 89%, 48%, 1) 0%, + hsla(349, 89%, 53%, 0) 100% + ); + background-position: bottom; + background-repeat: no-repeat; + background-size: 100% 0%; + + transition-property: background-size; + transition-delay: 0s; + transition-duration: 0.25s; + transition-timing-function: ease-in-out; + } + + a:hover + { + + border-bottom-color: transparent; + background-size: 100% 100%; } &.active a { @@ -614,7 +627,7 @@ body > header:first-child { { overflow: hidden; position: absolute; - top: 120px; + top: var(--header-height); right: 0; width: 100vw; background-color: hsl(256, 65.5%, 27.3%); @@ -699,24 +712,28 @@ body > header:first-child { margin: 0 0.666rem; } + ul li a { + + padding: 0.5rem 0rem; + + border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-color: transparent; + } + ul li a:hover { - border-bottom: 1px solid rgba(228, 195, 128, 0.33); + border-bottom-color: rgba(228, 195, 128, 0.33); } ul li a:focus { - border-bottom: 1px solid rgba(228, 195, 128, 0.66); + border-bottom-color: rgba(228, 195, 128, 0.66); } ul li.active a { - border-bottom: 1px solid rgb(228, 195, 128); - } - - ul li a - { - padding: 0.5rem 0rem; + border-bottom-color: rgb(228, 195, 128); } @@ -847,7 +864,7 @@ body#home { position: absolute; align-self: center; - /*max-height: calc(~"90vh - 120px");*/ + /*max-height: calc(~"90vh - var(--header-height)");*/ height: 100%; } diff --git a/tpl/features.php b/tpl/features.php index b392305..f21753b 100644 --- a/tpl/features.php +++ b/tpl/features.php @@ -67,14 +67,6 @@ ], 'img' => _('/recevoir.png') ], - [ - 'name' => _('Trouvez des membres près de chez vous'), - 'desc' => [ - _("Consultez la carte des membres afin de trouver les membres les plus proches de chez vous."), - _("Vous pouvez les contacter pour faire vos premiers échanges ou demander des certifications."), - ], - 'img' => $mapFileName - ], [ 'name' => _('Recherche par nom'), 'desc' => [ @@ -128,6 +120,16 @@ ], 'img' => _('/suivre-d-autres-portefeuilles.png') ], + /* + [ + 'name' => _('Trouvez des membres près de chez vous'), + 'desc' => [ + _("Consultez la carte des membres afin de trouver les membres les plus proches de chez vous."), + _("Vous pouvez les contacter pour faire vos premiers échanges ou demander des certifications."), + ], + 'img' => $mapFileName + ], + */ ); foreach ($features as $f) diff --git a/tpl/funding-orig.php b/tpl/funding-orig.php index 543d346..df96b13 100644 --- a/tpl/funding-orig.php +++ b/tpl/funding-orig.php @@ -26,10 +26,34 @@ } ?> -

- -

Les développeurs remercient chaleureusement toutes les personnes qui, le mois dernier, ont financé en Ğ1 le projet Duniter :

- +

+ +

+ Si vous souhaitez soutenir le projet Duniter, c'est simple : +

+ +
+

+ Copiez la clef suivante dans votre presse-papier : + + +

+ +

+ +

+ +
+

Et maintenant collez-la dans l'annuaire Cesium afin de faire votre don 😉

+

Merci pour votre générosité ❤️

+
+
+ + +

+ format('Y-m-d'), $lastMonthEnd->format('Y-m-d')); - $donors = $lastMonthCF->getDonors(); + try { - if (empty($donors)) { + $donors = $lastMonthCF->getDonors(); - echo _('Pas encore de donateurs'); + if (empty($donors)) { - } else { - - echo ''; + } + + } catch (Exception $e) { + + echo ' +

+ ' . _("Nous n'avons pas réussi à récupérer la liste des donateurs.") . ' +

+

+ + '. _('Voir les dons dans Cesium') .' + +

'; + } + ?>

Progression du crowdfunding du mois en cours

@@ -120,8 +159,6 @@ - - - --> - - - -