Skip to content

GitLab

Commit 71c01a12 authored by Corentin Bettiol's avatar Corentin Bettiol 💻
Browse files

minify design, change apache2 config file (compress+cache fonts), change arrows look

parent 29200dc0
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 46 deletions
css/design.css
View file @ 71c01a12
......@@ -294,7 +294,7 @@ form .small{
background-color: #f0f0f0;
}
#paging{
.paging{
width: 80%;
display: flex;
max-width: 400px;
......@@ -304,34 +304,34 @@ form .small{
justify-content: space-around;
}
#paging em, #paging a, #paging span{
.paging em, .paging a, .paging span{
width: 30px;
}
#paging em, #paging a{
.paging em, .paging a{
margin: 3px;
padding: 5px;
text-align: center;
}
#paging a{
.paging a{
text-decoration: none;
background-color: rgba(240, 240, 240, 0.8);
border-bottom: 0px solid rgba(12, 12, 12, 0.4);
transition: border-bottom 0.1s, padding-bottom 0.1s;
}
#paging a:hover{
.paging a:hover{
padding-bottom: 0;
border-bottom-width: 5px;
transition: border-bottom 0.1s, padding-bottom 0.1s;
}
#paging em{
.paging em{
color: rgba(12, 12, 12, 0.5);
}
#paging .current{
.paging .current{
opacity: 1;
background-color: #ccc;
}
......
css/optimized.css 0 → 100644
View file @ 71c01a12
*{color:#1f1f2e}
#page{padding:0;width:100%;margin:auto;font-size:1.5em;font-family:ubuntulight;background-color:#ddd}
#header{padding:2px;display:flex;flex-direction:row;align-items:center;font-family:ubuntumono;background-color:#f0f0f0;border-bottom:5px solid #aaa;justify-content:space-between}
article p,#pageTitle,article h3,article ul,#listAdmin,article pre,article h4{width:90%;max-width:1000px;margin:30px auto}
.input{width:90%;margin:30px auto}
article section{margin-left:15px}
#logo,#title{vertical-align:middle}
#logo{width:45px;height:45px;margin-right:15px}
#title{width:auto;margin:auto;display:flex;color:#2E2E2E;text-shadow:0 0 3px #69f}
#menu{margin:auto}
h2{margin:0;padding:0;font-size:1.5em;max-width:280px;overflow:hidden;font-weight:400;white-space:nowrap;display:inline-block;text-overflow:ellipsis}
h3 a{text-decoration:none;transition:color .3s;text-shadow:0 0 1px #69f}
h3 a:hover{color:#47476b;transition:color .3s;text-shadow:0 0 1px #69f}
#listMenu{padding:0;display:flex;margin:15px 0;flex-wrap:wrap;flex-direction:row;list-style-type:none;justify-content:space-around}
#listMenu a{padding:7px;margin:10px;text-decoration:none;border-bottom:0 solid #888;transition:color 0.2s,background-color 0.2s,padding 0.1s,border-bottom .1s}
#listMenu a:hover{color:#47476b;padding-bottom:2px;border-bottom-width:5px;background-color:#f0f0f0;transition:color 0.2s,background-color 0.2s,padding 0.1s,border-bottom .1s}
article{margin:20px 0;padding:5px 15px;overflow-wrap:anywhere;background-color:#f0f0f0;border-bottom:3px solid #aaa}
#listMenu .selected{padding-bottom:2px;border-bottom:5px solid #aaa}
article .postInfos{font-size:.8em}
#footer{width:98%;padding:1%;margin:auto;font-size:.8em;text-align:center;background-color:#f0f0f0}
a{transition:color .3s}
a:hover{color:#55a;transition:color .3s}
#editContent{margin-top:5px;min-height:1em;max-height:10em;overflow:scroll;white-space:pre-wrap;display:inline-block}
input,textarea,.wysiwyg{width:50%;border:none;padding:10px;display:block;font-size:1em;margin:15px auto;padding-left:13px;box-sizing:border-box;background-color:#fff;border-left:0 solid #ccc;border-bottom:3px solid #aaa;transition:border-left 0.05s,padding-left .05s}
.input input,.input textarea,.wysiwyg{margin:0 0 0 20px}
.wysiwyg{display:flex;align-items:center;flex-direction:column}
.wysiwyg button{border:none;padding:2px;font-size:1em;margin:0 2px;cursor:pointer;min-width:20px;text-align:center;display:inline-block;background-color:#ccc}
#editContent{width:100%}
input:hover,input:focus,textarea:hover,textarea:focus{border-left:3px solid #ccc;transition:border-left .05s}
input[type="submit"]{border:none;padding-left:13px;background-color:#ccc;transition:background-color .3s}
input[type="submit"]:hover{background-color:#ddd;transition:background-color .3s}
label{width:250px;padding:10px;display:inline-block;background-color:#d9d9d9}
label .large{width:300px}
form .small{font-size:.7em}
.input{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}
#listAdmin{display:flex;flex-wrap:wrap}
#listAdmin article{flex:50%;box-sizing:border-box}
#listAdmin h3{margin:auto;text-align:center}
#listAdmin article:first-child{padding-right:-5px;border-right:5px solid #ccc}
.listAdmin{display:flex;align-items:center;justify-content:space-evenly}
.listAdmin b{width:50%;display:inline-block;border-right:1px solid #ccc}
.listAdmin span{padding:3px}
.listAdmin .postInfos{width:200px}
.button{padding:5px;margin-left:2px;text-decoration:none;background-color:#d9d9d9;transition:background-color 0.3s,color .3s}
.button:hover{background-color:#f0f0f0;transition:background-color 0.3s,color .3s}
#toggle,.nav-label{height:0;display:none;background-color:#f0f0f0}
.paging{width:80%;display:flex;max-width:400px;font-size:1.5em;margin:20px auto;font-family:monospace;justify-content:space-around}
.paging em,.paging a,.paging span{width:30px}
.paging em,.paging a{margin:3px;padding:5px;text-align:center}
.paging a{text-decoration:none;background-color:rgba(240,240,240,0.8);border-bottom:0 solid rgba(12,12,12,0.4);transition:border-bottom 0.1s,padding-bottom .1s}
.paging a:hover{padding-bottom:0;border-bottom-width:5px;transition:border-bottom 0.1s,padding-bottom .1s}
.paging em{color:rgba(12,12,12,0.5)}
.paging .current{opacity:1;background-color:#ccc}
.alignleft{text-align:left}
.aligncenter{text-align:center}
.alignright{text-align:right}
.tag a{margin:2px;padding:2px 7px;text-decoration:none;background-color:#ddd;transition:background-color .2s}
.tag a:hover{background-color:#f0f0f0;transition:background-color .2s}
img{max-width:75%}
@media all and (max-width: 1500px) {
*{font-size:.9em}
#title{font-size:1.3em;justify-content:space-around}
#header{font-size:1.2em}
}
@media all and (max-width: 1075px) {
#logo{margin:0}
#header,#title{padding-top:5px;flex-direction:column}
#title{margin:0;text-align:center}
#logo{width:auto;height:auto}
}
@media all and (max-width: 700px) {
input,textarea,label,#editContent,.wysiwyg{width:100%}
label{margin-right:20px}
#menu{width:100%}
#listMenu{flex-direction:column;justify-content:center}
#listMenu a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#listMenu li,#listMenu h2,#listMenu a{padding:0;width:90%;display:block;margin:2px auto;text-align:center}
#listMenu a:hover{padding-bottom:2px}
}
@media all and (max-width: 500px) {
article{padding:5px}
#logo{width:45px;height:45px}
#header{margin-top:30px}
#toggle{left:-9999px;position:absolute}
.nav-label{top:0;padding:0;width:50px;height:50px;opacity:.6;position:fixed;display:inline-block;background-size:50px 50px;background-size:50px 50px;transition:transform .3s ease;background-image:url(/img/mobile-menu-icon.png)}
#listMenu{top:0;width:100%;margin:auto;position:fixed;background-color:#f0f0f0;transition:border-bottom .3s}
#listMenu li{max-height:0;margin:0 auto;transition:max-height .45s}
#listMenu a{opacity:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease,opacity 0.3s,padding .3s}
#listMenu a:hover{padding:0;border-bottom:0}
#listMenu .selected{padding:0;opacity:.5;max-height:300px;border-bottom:0 solid #000}
#listMenu .selected:hover{padding:0;border-bottom:0 solid #000}
#toggle:checked ~ #listMenu{border-bottom:5px solid #aaa;transition:border-bottom .3s}
#toggle:checked ~ #listMenu li{max-height:300px;transition:max-height .45s}
#toggle:checked ~ #listMenu a{opacity:1;padding:3px 0;max-height:300px;transition:max-height 0.3s,opacity 0.3s,padding .3s}
#toggle:checked ~ .nav-label{transform:rotate(180deg);background-size:50px 50px;transition:transform .3s ease;background-image:url(/img/mobile-menu-icon-close.png)}
#toggle:checked ~ #listMenu .selected{background-color:#ccc}
}
@font-face{font-family:ubuntulight;src:url(../fonts/Ubuntu-L.ttf)}
@font-face{font-family:ubuntumono;src:url(../fonts/UbuntuMono.ttf)}
\ No newline at end of file
l3m-website-dist.conf
View file @ 71c01a12
<VirtualHost *:80>
ServerName l3m.local
Serveralias www.l3m.local
ServerAdmin addr@exp.ext
DocumentRoot /var/www/directory
Options FollowSymLinks
Redirect permanent / https://l3m.local
ServerName l3m.local
Redirect permanent / https://l3m.local/
</VirtualHost>
<VirtualHost *:443>
ServerName l3m.local
Serveralias www.l3m.local
ServerAdmin addr@exp.ext
DocumentRoot /var/www/directory
Options FollowSymLinks MultiViews
ErrorDocument 404 /index.php?action=404
RedirectMatch 404 /\.git
#ExpiresActive On
#ExpiresByType image/png "access plus 1 year"
#ExpiresByType text/css "access plus 1 year"
#ExpiresByType text/javascript "access plus 1 year"
RewriteEngine On
RewriteRule ^/(about|changelog|rss|projects|contact|patate|eplucher)$ /index.php?action=$1
RewriteRule ^/rss/(blog|projets)$ /rss/$1.xml
RewriteRule ^/tag/([-a-z0-9]+)$ /index.php?action=tags&title=$1
RewriteRule ^/page/([0-9]+)$ /index.php?action=blog&page=$1
RewriteRule ^/article/([-a-z0-9]+)$ /index.php?action=blog&title=$1
RewriteRule ^/project/([-a-z0-9]+)$ /index.php?action=project&title=$1
RewriteRule ^/patate/(blog|project)/submit$ /index.php?action=patate&type=$1submit
RewriteRule ^/patate/(blog|project)/([-a-z0-9]+)/(edit|delete)$ /index.php?action=patate&type=$1$3&title=$2
ServerName l3m.local
Serveralias www.l3m.local
ServerAdmin corentin@244466666.xyz
DocumentRoot /path/to/l3m-website
Options FollowSymLinks MultiViews
# redirect old uploaded files to new upload page
RedirectMatch /p/up/files/(.+)$ https://up.l3m.in/file/$1
ErrorDocument 404 /index.php?action=404
RedirectMatch 404 /\.git
# Add correct content-type for fonts
AddType application/x-font-ttf .ttf
# Compress compressible fonts
AddOutputFilterByType DEFLATE application/x-font-ttf
ExpiresActive On
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
RewriteEngine On
RewriteRule ^/(about|changelog|rss|projects|contact|patate|eplucher)$ /index.php?action=$1
RewriteRule ^/rss/(blog|projets)$ /rss/$1.xml
RewriteRule ^/tag/([-a-z0-9]+)$ /index.php?action=tags&title=$1
RewriteRule ^/page/([0-9]+)$ /index.php?action=blog&page=$1
RewriteRule ^/article/([-a-z0-9]+)$ /index.php?action=blog&title=$1
RewriteRule ^/project/([-a-z0-9]+)$ /index.php?action=project&title=$1
RewriteRule ^/patate/(blog|project)/submit$ /index.php?action=patate&type=$1submit
RewriteRule ^/patate/(blog|project)/([-a-z0-9]+)/(edit|delete)$ /index.php?action=patate&type=$1$3&title=$2
SSLEngine On
SSLCertificateFile /path/to/cert/cert.pem
SSLCertificateKeyFile /path/to/cert/privkey.pem
SSLCertificateChainFile /path/to/cert/chain.pem
SSLCACertificateFile /path/to/cert/fullchain.pem
SSLProtocol all -SSLv2 -SSLv3
SSLCipherSuite ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE$
SSLHonorCipherOrder on
</VirtualHost>
site/layout/layout.php
View file @ 71c01a12
......@@ -5,7 +5,7 @@
<meta name="description" content="<?php echo $description; ?>" />
<meta name="viewport" content="width=device-width" />
<title>l3m website &ndash; <?php echo $pageName[0]; // voir getPageName() dans mainController ?></title>
<link rel="stylesheet" href="/css/design.css" />
<link rel="stylesheet" href="/css/optimized.css" /><!-- readable design file in /css/design.css -->
<?php if($pageName[1] == 404){ // le css pour la page 404 ?>
<link rel="stylesheet" href="/css/404.css" />
<?php } ?>
......
site/view/public/blogPagingView.php
View file @ 71c01a12
......@@ -4,14 +4,14 @@
exit();
}
?>
<nav id="paging">
<nav class="paging">
<?php
// flèche gauche
if($paging['first'])
echo '<a href="/page/1" title="Première page du blog">⬅️</a>';
echo '<a href="/page/1" title="Première page du blog">&#8606;️</a>';
else
echo '<em>⬅️</em>';
echo '<em>&#8606;️</em>'; // ↞
// pages précédentes
for($i = 0; $i < 2 - count($paging['before']); $i++)
......@@ -33,8 +33,8 @@
// flèche droite
if($paging['last'])
echo '<a href="/page/'. $paging['last'] .'" title="Dernière page du blog">➡️</a>';
echo '<a href="/page/'. $paging['last'] .'" title="Dernière page du blog">&#8608;️</a>';
else
echo '<em>➡️</em>';
echo '<em>&#8608;️</em>'; // ↠
?>
</nav>
\ No newline at end of file
site/view/public/changelog.php
View file @ 71c01a12
<article>
<h3><a href="">09/04/19</a></h3>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/8d6ca2c5fa280e4da2d2700146243c451b7416ec">09/04/19</a></h3>
<ul>
<li>Minification du css (le css lisible reste disponible <a href="/css/design.css">ici</a>)</li>
<li>Activation du cache pour les polices d'écriture, mise à jour du fichier de config apache</li>
<li>Changement des flèches de pagination (pour éviter l'affichage sous forme d'emoji), transformation de l'id "paging" en class pour pouvoir l'utiliser deux fois</li>
</ul>
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/8d6ca2c5fa280e4da2d2700146243c451b7416ec">09/04/19</a></h3>
<ul>
<li>Changement de largeur du texte des billets de blog/des projets (petit écran & grand écran)</li>
<li>Léger changement de couleur pour les appareils avec un mauvais contraste</li>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment