marko10_000
/
homepageTheme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Support mobile

master
Marko Semet 2019-07-25 22:15:55 +02:00
parent 6ae9a47cbb
commit bf9327349a
3 changed files with 138 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
theme/static/css/light.css
View File

@ -38,9 +38,15 @@ header nav > ul > li {
header nav > ul > li > div > a {
background: #000;
}
header > label > div {
font-weight: bold;
font-size: 120%;
}
/* Page */
.page_title {
font-size: 200%;
font-weight: bold;
border-bottom: #000 solid 0.1em;
}
.page_title a {
@ -57,3 +63,71 @@ header nav > ul > li > div > a {
color: #888;
font-style: italic;
}
article h1 {
font-size: 180%;
border-bottom: #000 solid 0.1em;
}
article h2 {
font-size: 150%;
border-bottom: #000 solid 0.1em;
}
article h3 {
font-size: 130%;
border-bottom: #000 solid 0.1em;
}
article h4 {
font-size: 120%;
border-bottom: #000 solid 0.1em;
}
article h5 {
font-size: 110%;
border-bottom: #000 solid 0.1em;
}
article h6 {
font-size: 100%;
border-bottom: #000 solid 0.1em;
}
/*
* Mobile
*/
@media (hover: none) {
header > label {
font-weight: bold;
font-size: 120%;
}
header nav > ul > li {
background: #000;
font-weight: bold;
}
header nav > ul > li.active a {
font-style: italic;
}
}
@media only screen and (max-width: 500px) {
/* Titles size */
.page_title {
font-size: 150%;
}
.page_title .translations {
font-size: 66%;
}
article h1 {
font-size: 150%;
}
article h2 {
font-size: 140%;
}
article h3 {
font-size: 130%;
}
article h4 {
font-size: 120%;
}
article h5 {
font-size: 110%;
}
article h6 {
font-size: 100%;
}
}

65
theme/static/css/main.css
View File

@ -35,6 +35,18 @@ body > * {
}
/* header */
#header_menu {
display: none;
}
#header_menu ~ label {
display: none;
}
header > label {
display: block;
padding: 0;
margin: 0;
border: 0;
}
header nav ul {
padding: 0;
border: 0;
@ -80,11 +92,56 @@ main {
.translations {
float: right;
}
.page_title {
font-size: 200%;
font-weight: bold;
}
.details {
display: inline-grid;
grid-template-columns: auto auto;
}
/*
* Mobile
*/
@media (hover: none) {
#header_menu ~ label {
display: block;
}
#header_menu ~ nav {
display: none;
}
#header_menu:checked ~ nav {
display: block;
}
header nav > ul {
padding-top: 0.25em;
margin-left: 0;
}
header nav > ul > li {
display: block;
float: none;
margin-left: 0;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 2em;
}
header nav > ul > li.page {
float: none;
}
header nav > ul > li > div {
margin-bottom: 0;
}
header nav > ul > li > div > a {
display: inline-block;
position: relative;
padding-bottom: 0;
top: 0;
}
header nav > ul > li:hover > div > a, header nav > ul > li.active > div > a {
top: 0;
}
}
@media only screen and (max-width: 500px) {
/* Shrink border */
body > * {
padding: 0;
}
}

3
theme/templates/base.html
View File

@ -29,12 +29,15 @@
<link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_RSS.format(slug=tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" />
{% endif %}
{% endblock head %}
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/main.css" />
<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/light.css" />
</head>
<body>
<header>
<h1><a href="{{ SITEURL }}/">{{ SITENAME }} <strong>{{ SITESUBTITLE }}</strong></a></h1>
<input id="header_menu" type="checkbox" name="header_menu" />
<label for="header_menu">Menü</label>
<nav>
<ul>
{% for title, link in (MENUITEMS if MENUITEMS else [])[::-1] %}