Improve responsiveness of homepage, add description and logo

3 years ago · b4c5697bf6
3 changed files with 70 additions and 10 deletions
--- a/templates/themes/categories/frames.html
+++ b/templates/themes/categories/frames.html
@ -8,21 +8,38 @@
    <link rel="stylesheet" media="screen" href="/stylesheets/dark_red.css">
    <style type="text/css">
        .sidebar {
+          grid-column: 1;
+          grid-row: 1 / 3;
            width: 200px;
            border-right-color: gray;
            border-right-style: solid;
            border-width: 2px;
            margin-right: 15px;
        }
-
+        
+        .introduction {
+          grid-column: 2 / 9;
+          grid-row: 1;
+          width: 100%;
+         }
+         
        .content {
+          grid-column: 2 / 9;
+          grid-row: 2;
            width: 100%;
        }

        body {
-            display: flex;
+            display: grid;
+            grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+            gap: 20px;
            height: 100vh;
        }
+        
+        .modlog {
+            width: 50%;
+            text-align: left;
+        }

        fieldset {
            margin: 10px;
@ -54,13 +71,45 @@
        }
        
        @media (max-width:768px) {
+            body{
+                display: grid;
+                grid-template-columns: none;
+                gap: 20px;
+                height: 100vh;
+                width: 100%;
+            }
+            
+             .introduction {
+              grid-column: 1;
+              grid-row: 1;
+              width: 100%;
+             }
+
            .sidebar {
-                width: 80vw;
-                border: none;
+              grid-column: 1;
+              grid-row: 2;
+              width: 100%;
+              border-width: 2px;
            }
-            .main {
-                flex-direction: column;
-                align-items: center;
+
+            .content {
+              grid-column: 1;
+              grid-row: 3;
+              width: 100%;
+            }
+            
+            .modlog {
+                width: 100%;
+                text-align: center;
+            }
+            
+            table {
+                table-layout: fixed;
+            }
+            
+            table.modlog tr th {
+                white-space: normal;
+                word-wrap: break-word;
            }

            .boardlist {
@ -73,9 +122,11 @@
        }
    </style>
    <title>{{ settings.title }}</title>
+    <meta name="description" content="{{ description }}">
 </head>
 <body>
    {% include 'themes/categories/' ~ settings.file_sidebar %}
    {% include 'themes/categories/' ~ settings.file_news %}
 </body>
 </html>
+
--- a/templates/themes/categories/news.html
+++ b/templates/themes/categories/news.html
@ -1,13 +1,16 @@
 {% filter remove_whitespace %}
-<div class="content">
+<div class="introduction">
 	{{ boardlist.top }}
 	<header>
 		<h1>{{ settings.title }}</h1>
 		<div class="subtitle">{{ settings.subtitle }}</div>
 		<link rel="stylesheet" media="screen" href="{{ config.url_stylesheet }}">
 		<link rel="stylesheet" media="screen" href="/stylesheets/dark_red.css">
+		<p style="margin:20px auto 0 auto;text-align:center;max-width:700px;">{{ description }}</p>
 	</header>
-
+	<img src="{{ config.logo }}" alt="logo" style="display:block;margin:auto;min-width:100px;width:15%;">
+</div>
+<div class="content">
 	<div class="ban">
 		{% if not news %}
 			<p style="text-align:center" class="unimportant">{% trans %}(No news to show.){% endtrans %}</p>
@ -31,7 +34,7 @@
 				{% trans "Post Statistics" %}
 				</h1>
 			</div>
-			<table class="modlog" style="width: 50%; text-align: left;">
+			<table class="modlog">
 				<thead>
 					<tr>
 						<th>{% trans "Board" %}</th>
@ -91,3 +94,4 @@
 	</footer>
 </div>
 {% endfilter %}
+
--- a/templates/themes/categories/theme.php
+++ b/templates/themes/categories/theme.php
@ -34,6 +34,9 @@
 		// Build homepage
 		public static function homepage($settings) {
 			global $config;
+			$description = 'Leftypol is a fun and enjoyable space where users can post anonymously.<br>' .
+			               'We engage in both serious political discourse and less serious informal discussions ' .
+			               'on various topics related to leftist thought.';
 			$query = query("SELECT * FROM ``news`` ORDER BY `time` DESC") or error(db_error());
 			$news = $query->fetchAll(PDO::FETCH_ASSOC);
 			$stats = Categories::getPostStatistics($settings);
@ -42,6 +45,7 @@
 				Array(
 					'config' => $config,
 					'settings' => $settings,
+					'description' => $description,
 					'categories' => Categories::getCategories($config),
 					'news' => $news,
 					'stats' => $stats,
@ -160,3 +164,4 @@
 	};

 ?>
+