diff --git a/themes/varia/static/css/main.css b/themes/varia/static/css/main.css
index ad8500346..88d53c731 100644
--- a/themes/varia/static/css/main.css
+++ b/themes/varia/static/css/main.css
@@ -404,4 +404,110 @@ sup span{
 }
 	sup span p{
 		display: inline;
-	}
\ No newline at end of file
+	}
+
+/****************************/
+/*mobile style*/
+
+@media only screen
+  and (min-device-width: 320px)
+  and (max-device-width: 480px) {
+
+	/*home page*/
+
+	html, body {
+		padding: 0;
+	}
+
+	body {
+		min-width: auto;
+		width: 100%;
+	}
+
+	.buttons.top {
+		margin-top: 30px;
+		text-align: left;
+		margin-left: 15px;
+	}
+
+	.buttons.top li {
+		margin: 0;
+		padding: 0;
+	}
+
+	.buttons.top.left {
+		margin-top: 0;
+		right: auto;
+		left: 0;
+	}
+
+	#banner {
+		width: calc(100% - 30px);
+		padding: 100px 15px 0 15px;
+		font-size: 20px;
+		margin-top: 0;
+	}
+
+	#content {
+		padding: 15px;
+		width: calc(100% - 30px);
+	}
+
+	.hentry.current, .hentry.article, .hentry.artikel, .hentry.current .article-info, .hentry.current .featured-image img {
+		width: 100%;
+	}
+
+	.hentry {
+		width: 85%;
+		margin-right: 0;
+	}
+
+	.hentry.article, .hentry.artikel {
+		width: 90%;
+	}
+
+	.hentry pre {
+		font-size: 9px;
+	}
+
+
+	/*single page*/
+
+	#content.body .entry-title {
+		font-size: 24px;
+		margin: 0;
+		width: 100%;
+	}
+
+	#content.body .article-info {
+		float: none;
+		width: 100%;
+		margin-top: 15px;
+		margin-bottom: 30px;
+	}
+
+	.entry-content-container, #page-content-container {
+		float: none;
+		width: 100%;
+		padding: 0;
+		font-size: 16px;
+	}
+
+	.entry-content, #page-content {
+		margin: 0;
+	}
+
+	.entry-content img, #page-content img {
+		max-width: 100%;
+		height: auto;
+	}
+
+	/*about*/
+
+	.entry-content, #page-content p, .entry-content, #page-content h1 {
+		font-size: 16px;
+		padding: 0 15px;
+	}
+
+
+}
diff --git a/themes/varia/templates/index.html b/themes/varia/templates/index.html
index 374fd4031..9839ddf73 100644
--- a/themes/varia/templates/index.html
+++ b/themes/varia/templates/index.html
@@ -26,32 +26,33 @@
 <div id="post-list">
 {% for article in articles_page.object_list %}
     {% set thumb_size = '/thumb' %}
-    {% if article.category %}      
+    {% if article.category %}
 
         {% if article.event_start %}
             {% set event_status = '' %}
-            {% if article.event_start < article.date.now() %}
+            {% set now = article.date.now() | string %}
+            {% if article.event_start < now %}
                 {% set event_status = ' past' %}
             {% endif %}
-            {% if article.event_start >= article.date.now() %}
+            {% if article.event_start >= now %}
                 {% set event_status = ' current' %}
                 {% set thumb_size = '/thumb2x' %}
-            {% endif %}   
+            {% endif %}
         {% endif %}
-    
+
         {% if article.category == 'article' %}
             {% set thumb_size = '/thumb2x' %}
         {% endif %}
-    
+
     <article class="hentry {{article.category}}{{event_status}}">
-    
+
     {% endif %}
 
         <div class="article-info">
             <span class="entry-title"><a href="/{% if article.lang == 'en' %}en/{% endif %}{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></span>
             {% if article.event_start %}
                 <div class="event-details">
-                    {{ article.event_start  | strftime('%d %B %Y') }}
+                    <!-- article.event_start  | strftime('%d %B %Y') -->
                 </div>
             {% else %}
                 <div class="event-details"></div>
@@ -68,7 +69,7 @@
                 {% endif %}
             </div>
         </div>
-   
+
         <div class="summary {{ article.category }}">{{ article.summary }}
             <span class="read_more">
                 {% if DEFAULT_LANG == 'en' %}
@@ -90,7 +91,7 @@
                         {% endif %}
                     </span>
                 </span>
-            {% endif %} 
+            {% endif %}
             {% if article.tags %}
                 <span class="tags">
                     {{ glob.related_to }}
@@ -104,7 +105,7 @@
                                 <a href="/{{ tag.url }}" rel="tag">{{ tag }}</a>
                             </span>
                         {% endif %}
-                        
+
                     {% endfor %}
                 </span>
             {% endif %}