paramecio/cuchulublog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fixes for mobiles

Browse source
This commit is contained in:
Antonio de la Rosa 2021-12-15 19:51:57 +01:00
parent 664842d309
commit 5f815907e1
3 changed files with 163 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

119
media/css/layout.css
View file

@ -79,6 +79,48 @@ nav#nav_home li {
}
nav#nav_mobile ul {
list-style-type: none;
padding:0px;
margin:0px;
width:100%;
}
nav#nav_mobile li {
display:block;
color: #fff;
}
nav#nav_mobile li a{
display:block;
width:100%;
background:#6e84ff;
color: #fff;
padding:5px 10px;
border: solid #fbfbfb;
border-width: 1px 0px 0px 0px;
}
nav#nav_mobile li a:active{
background:#7f95ff;
}
nav#nav_mobile li a i{
display:inline-block;
width:20px;
text-align:center;
}
.header_nav {
background: #253062;
@ -162,6 +204,12 @@ nav#nav_home a:hover {
}
#logo {
position:relative;
}
#logo img {
width:250px;
@ -315,3 +363,74 @@ a.button {
}
#nav_home_mobile {
display:none;
}
/*Layout*/
@media only screen and (max-width: 1040px) {
nav#nav_home {
display: none;
}
.container {
width:100%;
max-width:100%;
min-width:100%;
}
#nav_home_mobile {
display:inline-block;
position:absolute;
/*width:50px;*/
/*border: solid #f00 1px;*/
right:5px;
/*right:50px;*/
}
#nav_home_mobile a {
color: #fff;
display:block;
font-size: 32px;
}
.column_50 {
width:100%;
margin-top:15px;
}
.logo {
/*width:200px;
position:absolute;
top:0px;
left:0px;
z-index:20;
clear:both;*/
width:100%;
}
#menu_big {
display:none;
}
}

4
templates/about.phtml
View file

@ -2,10 +2,10 @@
<%block name="content">
<div align="center" style="padding-top:40px;min-height:90vh;">
<img src="${make_media_url('images/logo.png', 'cuchulublog')}" />
<h1>About</h1>
<h1>${lang('cuchulublog', 'about', 'About')}</h1>
<section>
<p><strong>Antonio de la Rosa Caballero</strong></p>
<p style="max-width:500px;">${lang('cuchulublog', 'geek_enthusiast_linux_user', 'Geek enthusiast. Linux user, <strong>Debian user, Archlinux user, Gentoo user, Fedora user</strong>. <strong>Free software supporter</strong>. Specialized in <strong>Linux</strong> sysadmin, backend, and frontend')}.</p>
<p style="max-width:500px;">${lang('cuchulublog', 'geek_enthusiast_linux_user', 'Geek enthusiast. Linux user, <strong>Debian user, Archlinux user, Gentoo user, Fedora user</strong>. <strong>Free software supporter</strong>. Specialized in <strong>Linux</strong> sysadmin, backend, and frontend')|n}.</p>
<h2>${lang('cuchulublog', 'projects', 'Projects')}</h2>

42
templates/home.phtml
View file

@ -29,9 +29,12 @@
<div class="column_left logo">
<div class="center_flex" style="height:50px;font-size:24px;font-family:Open Sans;background: #253062;color: #fff;">
Cuchulu.com
<div id="nav_home_mobile">
<a href="#" id="nav_button"><i class="fa fa-bars" aria-hidden="true"></i></a>
</div>
</div>
<div class="column_content">
</div>
<div class="column_content" id="menu_big">
<div class="right_flex header_nav">
<nav id="nav_home">
<ul>
@ -54,6 +57,25 @@
</nav>
</div>
</div>
<nav id="nav_mobile" style="display:none;">
<ul>
<li>
<a href="${url_for('.cuchulublog_home')}"><i class="fa fa-home" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'home', 'Home')}</a>
</li>
<li>
<a href="${url_for('.cuchulublog_projects')}"><i class="fa fa-globe" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'projects', 'Projects')}</a>
</li>
<li>
<a href="${url_for('.cuchulublog_all_posts')}"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'blog', 'Blog')}</a>
</li>
<li>
<a href="${url_for('.cuchulublog_contact')}"><i class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'contact', 'Contact')}</a>
</li>
<li>
<a href="${url_for('.cuchulublog_about')}"><i class="fa fa-info" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'about', 'About')}</a>
</li>
</ul>
</nav>
<div id="content_home">
<%block name="content">
@ -103,6 +125,24 @@
</div>
</div>
<script language="Javascript" src="${make_media_url('js/jquery.min.js', 'admin')}"></script>
<script>
$('a#nav_button').click(function () {
if($('#nav_mobile').css('display')=='none') {
$('#nav_mobile').show();
}
else {
$('#nav_mobile').hide();
}
return false;
});
</script>
<%block name="js_footer">
<script>