Minor example file tweaks, add smooth scrolling to browsers that support it

app/config/config.toml.example

@@ -15,7 +15,7 @@ show_anime_collection = true
 show_manga_collection = false
 
 # cache driver for api calls (NullDriver, SQLDriver, RedisDriver)
-cache_driver = NullDriver
+cache_driver = "NullDriver"
 
 # path to public directory on the server
 asset_dir = "/../../public"

public/css/base.css

@@ -424,7 +424,7 @@ h1 a {
   text-align: center;
   width: 220px;
   height: 319px;
-  margin: 0.25em;
+  margin: 0.25em 0.125em;
 }
 
 .media .edit_buttons > button {
@@ -438,7 +438,7 @@ h1 a {
   text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
   background: rgba(0, 0, 0, 0.45);
   color: #ffffff;
-  padding: 0.25em;
+  padding: 0.25em 0.125em;
   text-align: right;
 }
 
@@ -481,7 +481,6 @@ h1 a {
 }
 
 .media > .name > a {
-  /*text-align:justify;*/
   background: none;
   color: #fff;
   text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
@@ -676,3 +675,23 @@ h1 a {
 .details td:nth-child(even) {
   text-align: left;
 }
+
+/* ----------------------------------------------------------------------------
+	Viewport-based styles
+-----------------------------------------------------------------------------*/
+
+@media screen and (max-width: 40em) {
+  nav a {
+    line-height: 4em;
+    line-height: 4rem;
+  }
+
+  .media {
+    margin: 2px 0;
+  }
+
+  main {
+    padding: 0 0,5em 0.5em;
+    padding: 0 0.5rem 0.5rem;
+  }
+}

public/css/base.myth.css

@@ -3,10 +3,11 @@
 	--shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
 	--title-overlay: rgba(0, 0, 0, 0.45);
 	--text-color: #ffffff;
-	--normal-padding: 0.25em;
+	--normal-padding: 0.25em 0.125em;
 	--link-hover-color: #7d12db;
 	--edit-link-hover-color: #db7d12;
 	--edit-link-color: #12db18;
+	--radius: 5px;
 }
 
 template, [hidden="hidden"], .media[hidden] {display:none}
@@ -352,7 +353,6 @@ a:hover, a:active {
 		}
 
 		.media > .name > a {
-			/*text-align:justify;*/
 			background:none;
 			color:#fff;
 			text-shadow: var(--shadow);
@@ -528,3 +528,23 @@ a:hover, a:active {
 .details td:nth-child(even) {
 	text-align:left;
 }
+
+/* ----------------------------------------------------------------------------
+	Viewport-based styles
+-----------------------------------------------------------------------------*/
+
+@media screen and (max-width: 40em) {
+	nav a {
+		line-height:4em;
+		line-height:4rem;
+	}
+
+	.media {
+		margin:2px 0;
+	}
+
+	main {
+		padding:0 0,5em 0.5em;
+		padding:0 0.5rem 0.5rem;
+	}
+}

public/css/marx.myth.css

@@ -9,6 +9,7 @@
 	line-height:1.4;
 	overflow-y:scroll;
 	text-size-adjust:100%;
+	scroll-behavior: smooth;
 }
 
 audio:not([controls])