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

css/design.css

+7 −7
Original line number Original line Diff line number Diff line
@@ -294,7 +294,7 @@ form .small{ 
	background-color: #f0f0f0;

	background-color: #f0f0f0;

}

}





#paging{

.paging{

	width: 80%;

	width: 80%;

	display: flex;

	display: flex;

	max-width: 400px;

	max-width: 400px;
@@ -304,34 +304,34 @@ form .small{ 
	justify-content: space-around;

	justify-content: space-around;

}

}





#paging em, #paging a, #paging span{

.paging em, .paging a, .paging span{

	width: 30px;

	width: 30px;

}

}





#paging em, #paging a{

.paging em, .paging a{

	margin: 3px;

	margin: 3px;

	padding: 5px;

	padding: 5px;

	text-align: center;

	text-align: center;

}

}





#paging a{

.paging a{

	text-decoration: none;

	text-decoration: none;

	background-color: rgba(240, 240, 240, 0.8);

	background-color: rgba(240, 240, 240, 0.8);

	border-bottom: 0px solid rgba(12, 12, 12, 0.4);

	border-bottom: 0px solid rgba(12, 12, 12, 0.4);

	transition: border-bottom 0.1s, padding-bottom 0.1s;

	transition: border-bottom 0.1s, padding-bottom 0.1s;

}

}





#paging a:hover{

.paging a:hover{

	padding-bottom: 0;

	padding-bottom: 0;

	border-bottom-width: 5px;

	border-bottom-width: 5px;

	transition: border-bottom 0.1s, padding-bottom 0.1s;

	transition: border-bottom 0.1s, padding-bottom 0.1s;

}

}





#paging em{

.paging em{

	color: rgba(12, 12, 12, 0.5);

	color: rgba(12, 12, 12, 0.5);

}

}





#paging .current{

.paging .current{

	opacity: 1;

	opacity: 1;

	background-color: #ccc;

	background-color: #ccc;

}

}

css/optimized.css

0 → 100644
+99 −0
Original line number Original line Diff line number Diff line 
*{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

+46 −32
Original line number Original line Diff line number Diff line 
<VirtualHost *:80>

<VirtualHost *:80>



        ServerName l3m.local

        ServerName l3m.local

	Serveralias www.l3m.local

        Redirect permanent / https://l3m.local/

	ServerAdmin addr@exp.ext

	DocumentRoot /var/www/directory



    Options FollowSymLinks

    Redirect permanent / https://l3m.local

</VirtualHost>

</VirtualHost>





<VirtualHost *:443>

<VirtualHost *:443>





        ServerName l3m.local

        ServerName l3m.local

        Serveralias www.l3m.local

        Serveralias www.l3m.local

	ServerAdmin addr@exp.ext



	DocumentRoot /var/www/directory

        ServerAdmin corentin@244466666.xyz

        DocumentRoot /path/to/l3m-website





        Options FollowSymLinks MultiViews

        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

        ErrorDocument 404 /index.php?action=404

        RedirectMatch 404 /\.git

        RedirectMatch 404 /\.git





	#ExpiresActive On

        # Add correct content-type for fonts

	#ExpiresByType image/png "access plus 1 year"

        AddType application/x-font-ttf .ttf

	#ExpiresByType text/css "access plus 1 year"

        # Compress compressible fonts

	#ExpiresByType text/javascript "access plus 1 year"

        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

        RewriteEngine On

        RewriteRule ^/(about|changelog|rss|projects|contact|patate|eplucher)$ /index.php?action=$1

        RewriteRule ^/(about|changelog|rss|projects|contact|patate|eplucher)$ /index.php?action=$1
@@ -35,4 +39,14 @@ 
        RewriteRule ^/project/([-a-z0-9]+)$ /index.php?action=project&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)/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

        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>
 
</VirtualHost>

site/layout/layout.php

+1 −1
Original line number Original line Diff line number Diff line
@@ -5,7 +5,7 @@ 
	<meta name="description" content="<?php echo $description; ?>" />

	<meta name="description" content="<?php echo $description; ?>" />

	<meta name="viewport" content="width=device-width" />

	<meta name="viewport" content="width=device-width" />

	<title>l3m website &ndash; <?php echo $pageName[0]; // voir getPageName() dans mainController ?></title>

	<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 ?>

	<?php if($pageName[1] == 404){ // le css pour la page 404 ?>

	<link rel="stylesheet" href="/css/404.css" />

	<link rel="stylesheet" href="/css/404.css" />

	<?php } ?>

	<?php } ?>

site/view/public/blogPagingView.php

+5 −5
Original line number Original line Diff line number Diff line
@@ -4,14 +4,14 @@ 
		exit();

		exit();

	}

	}

?>

?>

<nav id="paging">

<nav class="paging">

<?php

<?php





	// flèche gauche

	// flèche gauche

	if($paging['first'])

	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

	else

		echo '<em>⬅️</em>';

		echo '<em>&#8606;️</em>'; // ↞





	// pages précédentes

	// pages précédentes

	for($i = 0; $i < 2 - count($paging['before']); $i++)

	for($i = 0; $i < 2 - count($paging['before']); $i++)
@@ -33,8 +33,8 @@ 




	// flèche droite

	// flèche droite

	if($paging['last'])

	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

	else

		echo '<em>➡️</em>';

		echo '<em>&#8608;️</em>'; // ↠

?>

?>

</nav>
 
</nav>
 
 No newline at end of file