diff options
author | neodarz <neodarz@neodarz.net> | 2017-05-05 23:29:08 +0200 |
---|---|---|
committer | neodarz <neodarz@neodarz.net> | 2017-05-05 23:29:08 +0200 |
commit | 951971a6bf173ca8cc601abdd9ca8d33da93e657 (patch) | |
tree | d2aaad1fe776c6a652ba0a8c68996d0a5a762bab /source | |
parent | a25f6bb704265207f57f8a7677d69ac56a73f3d6 (diff) | |
download | my_new_personal_website-951971a6bf173ca8cc601abdd9ca8d33da93e657.tar.xz my_new_personal_website-951971a6bf173ca8cc601abdd9ca8d33da93e657.zip |
Adapt design
Diffstat (limited to 'source')
-rw-r--r-- | source/blog/2016-06-04-Mode-kiosk-sur-une-Raspberry-Pi-1.md | 6 | ||||
-rw-r--r-- | source/css/theme.css | 102 | ||||
-rw-r--r-- | source/template.html | 19 |
3 files changed, 106 insertions, 21 deletions
diff --git a/source/blog/2016-06-04-Mode-kiosk-sur-une-Raspberry-Pi-1.md b/source/blog/2016-06-04-Mode-kiosk-sur-une-Raspberry-Pi-1.md index 8944f5b1..77b5ee7d 100644 --- a/source/blog/2016-06-04-Mode-kiosk-sur-une-Raspberry-Pi-1.md +++ b/source/blog/2016-06-04-Mode-kiosk-sur-une-Raspberry-Pi-1.md @@ -4,7 +4,7 @@ date: 2016-06-04T00:37:05+02:00 date_display: Jun 04, 2016 --- -# Mise en place du système +# Le système Pour l'un de mes stages il y a quelques semaines, je devais réaliser un écran connecté afin de faire un show room pour une entreprise mais le matériel fournis étant une Raspberry Pi 1, je me suis tout de suite douté qu'il risquait d'avoir des problèmes de performances. De plus pour faire cet écran connecté, le chef de projet avait décidé de le faire en web, peut être qu'il aurait été préférable de le faire avec une autre techno, je ne sais pas car je n'ai pas étudié la question. @@ -43,7 +43,7 @@ Et pour la partie serveur web : * php-mcrypt * apache -# Mise en place du démarrage automatique du navigateur lors de la connexion +# Démarrage auto Bon avant d'automatiser le tout nous allons faire en sorte que notre interface graphique démarre sans encombre. Pour ça nous allons créer le fichier `.xinitrc` ou le modifier si celui-ci est déja présent, voila à quoi ressemble mon fichier de conf: @@ -69,7 +69,7 @@ done; Je précise que dans le cas actuel ma boucle permet de redémarer le navigateur en cas de crash de celui-ci au cas où... Et pour démarrer cette interface graphique un simple coup de `startx` et c'est plié. -# Configuration du navigateur +# Le navigateur On va s'occuper de l'étape où j'ai passé la plus part de mon temps, la configuration du navigateur. Car après m'être littéralement battu avec eux j'ai enfin trouvé la solution ! Sur la Raspberry Pi 1 seulement midori et firefox pouvaient tourner mais le problème est le suivant : diff --git a/source/css/theme.css b/source/css/theme.css index dc273960..1b245620 100644 --- a/source/css/theme.css +++ b/source/css/theme.css @@ -51,10 +51,9 @@ only screen and ( min-resolution: 1.25dppx) { .nav { position: fixed; - left: 5%; - top: 90px; + left: 2.5%; height: 150px; - width: 100px; + width: 200px; text-align: center; } @@ -111,11 +110,68 @@ only screen and ( min-resolution: 1.25dppx) { content: "by neodarz"; } -.content, .content-separator, .footer { +.nav li { + + list-style: none; +} + +.nav li a { + text-decoration: none; +} + +.left-lia { + float: left; +} + +.left-lia::after { + content: "█▓▒░"; +} + +.right-lia { + float: right; +} + +.right-lia::after { + content: "░▒▓█"; +} + +.lia { + text-decoration: none; +} + +.lia-border { + border: 1px solid white; +} + +.lia-border ul { + padding: 0px; + margin: 0; +} + +.lia-border hr { + background-color: white; + margin: 0; + padding: 0; +} + +.lia:hover li{ + background-color: white; + color: black; +} + +.content pre, .content ul, .content p, .content-separator, .footer { width: 60%; margin: 0 auto; } +.content .sourceCode { + margin: 0 auto; +} + +.header { + width: 100%; +} + hr { border: 0; height: 1px; @@ -135,6 +191,7 @@ h1 { text-align: center; font-size: 160%; font-weight: bold; + width: 100% } .h1 { @@ -353,7 +410,6 @@ table { .right-h1 { float: right; - margin-right: -1.6%; font-weight: bold; font-size: 24.4px; } @@ -371,9 +427,17 @@ table { /*** Wide screen ***/ @media screen and (min-width: 1441px) { - .content, .content-separator, .footer { + .content pre, .content ul, .content p, .content-separator, .footer { width: 50%; } + + .content .sourceCode { + + } + + .header { + width: 100%; + } } /*** Narrow screen ***/ @@ -407,9 +471,13 @@ table { pointer-events: none; } - .content, .content-separator, .footer { + p, .content-separator, .footer { width: 80%; } + + .header { + width: 100%; + } } /*** Ultranarrow screen ***/ @@ -419,10 +487,18 @@ table { display: none; } - .content, .content-separator, .footer { + .content pre, .content ul, .content p, .content-separator, .footer { width: 90%; } + .content .sourceCode { + + } + + .header { + width: 100%; + } + .blog-index-yearly-index { margin-left: 0; } @@ -449,10 +525,18 @@ table { -webkit-print-color-adjust: exact; } - .content, .content-separator, .footer { + .content pre, .content ul, .content p, .content-separator, .footer { width: 90%; } + .content .sourceCode { + + } + + .header { + width: 100%; + } + .nav, .rss-icon, .atom-icon, .cc-icon, #archival-notice { display: none; } diff --git a/source/template.html b/source/template.html index 543142f2..986ce492 100644 --- a/source/template.html +++ b/source/template.html @@ -40,15 +40,16 @@ $endif$ ░░ ░░░░░ ░░ ░░░ ░░ ░░░░░ ░░ </code></pre></div></a> <nav class="nav"> - <a class="nav-title" href="/" title="Home"><!--blog title--></a> - -- generate menu here -- - <hr> - <ul> - <li><a href="/blog">blog</a></li> - <li><a href="/notes">notes</a></li> - <li><a href="https://shaarli.neodarz.net/">shaarli</a></li> - <li><a href="https://git.neodarz.net">code</a></li> - </ul> + <div class="lia-border"> + -- generate menu here -- + <hr> + <ul> + <a href="/blog" class='lia'><li><span class='left-lia'></span><span class='center-lia'>blog</span><span class='right-lia'></span></li></a> + <a href="/notes" class='lia'><li><span class='left-lia'></span><span class='center-lia'>notes</span><span class='right-lia'></span></a> + <a href="https://shaarli.neodarz.net/" class='lia'><li><span class='left-lia'></span><span class='center-lia'>shaarli</span><span class='right-lia'></span></a> + <a href="https://git.neodarz.net" class='lia'><li><span class='left-lia'></span><span class='center-lia'>code</span><span class='right-lia'></span></a> + </ul> + </div> </nav> <div class="bodya"> |