describe snake game in portfolio

.obsidian/config

@@ -0,0 +1 @@
+{"baseFontSize":16,"pluginEnabledStatus":{"file-explorer":true,"global-search":true,"switcher":true,"graph":true,"backlink":true,"page-preview":true,"command-palette":true,"markdown-importer":true,"word-count":true,"open-with-default-app":true,"file-recovery":true},"alwaysUpdateLinks":true,"promptDelete":false}

.obsidian/workspace

@@ -0,0 +1,97 @@
+{
+  "main": {
+    "id": "cff797892302acf3",
+    "type": "split",
+    "children": [
+      {
+        "id": "5b8b6fab2d3ff4a9",
+        "type": "leaf",
+        "state": {
+          "type": "markdown",
+          "state": {
+            "file": "content/portfolio/Snake.md",
+            "mode": "source"
+          }
+        }
+      }
+    ],
+    "direction": "vertical"
+  },
+  "left": {
+    "id": "d289b0a88f9473dc",
+    "type": "split",
+    "children": [
+      {
+        "id": "917ad6055d9b702c",
+        "type": "tabs",
+        "children": [
+          {
+            "id": "27d5bbbb56d13c3f",
+            "type": "leaf",
+            "state": {
+              "type": "file-explorer",
+              "state": {}
+            }
+          },
+          {
+            "id": "f59f8c4e127a9cbf",
+            "type": "leaf",
+            "state": {
+              "type": "search",
+              "state": {
+                "query": "",
+                "matchingCase": false,
+                "explainSearch": false,
+                "collapseAll": false,
+                "extraContext": false,
+                "sortOrder": "alphabetical"
+              }
+            }
+          }
+        ]
+      }
+    ],
+    "direction": "horizontal",
+    "width": 300
+  },
+  "right": {
+    "id": "e8413990fdd4f098",
+    "type": "split",
+    "children": [
+      {
+        "id": "5c222fe5f229e203",
+        "type": "tabs",
+        "children": [
+          {
+            "id": "91d89a62fd6b5ea1",
+            "type": "leaf",
+            "state": {
+              "type": "backlink",
+              "state": {
+                "file": "content/portfolio/Snake.md",
+                "collapseAll": false,
+                "extraContext": false,
+                "sortOrder": "alphabetical",
+                "showSearch": false,
+                "searchQuery": "",
+                "backlinkCollapsed": false,
+                "unlinkedCollapsed": true
+              }
+            }
+          }
+        ]
+      }
+    ],
+    "direction": "horizontal",
+    "width": 300,
+    "collapsed": true
+  },
+  "active": "5b8b6fab2d3ff4a9",
+  "lastOpenFiles": [
+    "content/portfolio/Snake.md",
+    "content/portfolio/Hole.md",
+    "content/portfolio/AnkiLan.md",
+    "content/portfolio/snake/snake-desktop 1.png",
+    "content/portfolio/Pasted image 20210606223013.png"
+  ]
+}

assets/css/basic.scss

@@ -46,6 +46,9 @@ p code, quote code, q code{
   padding: 0 6px;
 }
 
+img {
+    width: 100%;
+}
 @import "logo";
 @import "elements/page-links";
 @import "elements/recent-list";

assets/css/elements/blog-post.scss

@@ -1,17 +1,18 @@
 .blog-header{
     color: $header-color;
-    font-family: $main-font;
+    font-family: "Mononoki Bold", "Twitter Color Emoji", "Twemoji", sans-serif;
     font-size: 2em;
     display: inline-flex;
     justify-content: center;
     text-align:center;
     margin: 0 auto;
+    margin-top: 32px;
 
 }
 
 .blog-post{
    time{
-        font-family: $main-font;
+        font-family: $blog-font;
         display: flex;
         align-content: center;
         justify-content: center;

assets/css/fonts.scss

@@ -30,3 +30,4 @@ url('../fonts/mononoki-Regular.woff') format('woff');
   font-family: 'Twemoji';
 src: url('../fonts/Twemoji.ttf') format('truetype');
 }
+@import url('https://fonts.googleapis.com/css2?family=Cuprum:ital,wght@0,400;0,700;1,400;1,700&display=swap');

assets/css/variables.scss

@@ -33,4 +33,5 @@ $ascii-line-height: 1.115em;
 $ascii-line-height-mobile: 1.112em;
 $header-color: var(--green);
 $main-font: 'Mononoki', 'Twemoji', monospace;
+$blog-font: 'Cuprum', 'Mononoki', 'Twemoji', monospace;
 $link-color: var(--cyan);

config.toml

@@ -16,7 +16,8 @@ summaryLength=10
     noClasses = true
     style = "fruity"
     tabWidth = 2
-
+[markup.goldmark.renderer]
+	unsafe= true
 
 [[menu.social]]
   name = "Twitter"

content/portfolio/Snake.md

@@ -3,4 +3,16 @@ title: "Snake game 🐍  "
 date: 2019-11-01T00:00:00+03:00
 type: portfolio
 description: "Snake game written with P5js"
+tags: ["game", "javascript"]
 ---
+
+The simple snake game which working on both desktop 🖥 and mobile 📲
+
+
+<div class="with-images" style="display: flex; flex-wrap: wrap; justify-content: center;" >
+<img src="./snake-desktop.png"style="max-width: 600px; height: max-content;"  alt="snake on desktop screenshot">
+<img src="./snake-mobile.png" style="max-width: 250px" alt="snake on mobile screenshot">
+</div>
+
+On mobile there's a support for playing via swipes 👆
+

layouts/_default/single.html

@@ -6,15 +6,15 @@
 			<div>
 				{{ .Content }}
 			</div>
-			{{ with .Params.tags }}
+			<!-- {{ with .Params.tags }} -->
-			<div>
+			<!-- <div> -->
-				<ul id="tags">
+			<!-- 	<ul id="tags"> -->
-					{{ range . }}
+			<!-- 		{{ range . }} -->
-					<li><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a></li>
+			<!-- 		<li><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a></li> -->
-					{{ end }}
+			<!-- 		{{ end }} -->
-				</ul>
+			<!-- 	</ul> -->
-			</div>
+			<!-- </div> -->
-			{{ end }}
+			<!-- {{ end }} -->
 			{{ with .Site.DisqusShortname }}
 			<div>
 				{{ template "_internal/disqus.html" . }}

layouts/_default/summary.html

@@ -3,7 +3,7 @@
 		<a class="article__link" href="{{ .Permalink }}">{{ .Title }}</a>
 	</div>
 	<time class="recent-block__time">{{ .Date.Format "02.01.2006 15:04" }}</time>
-	{{ range .Params.tags }}
+	<!-- {{ range .Params.tags }} -->
-	<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
+	<!-- <\!-- <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> -\-> -->
-	{{ end }}
+	<!-- {{ end }} -->
 </article>

layouts/portfolio/summary.html

@@ -6,6 +6,6 @@
 	<time class="recent-block__time">{{ .Date.Format "02.01.2006 15:04" }}</time>
 	
 	{{ range .Params.tags }}
-	<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
+	<!-- <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> -->
 	{{ end }}
 </li>

resources/_gen/assets/scss/css/basic.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -16,6 +16,7 @@
 }
 */
 /* Gruvbox theme */
+@import url("https://fonts.googleapis.com/css2?family=Cuprum:ital,wght@0,400;0,700;1,400;1,700&display=swap");
 :root {
   --background: #282828 ;
   --comment: #458588 ;
@@ -82,6 +83,9 @@ p code, quote code, q code {
   border-radius: 3px;
   padding: 0 6px; }
 
+img {
+  width: 100%; }
+
 .logo--wrapper {
   display: grid;
   font-family: Mononoki, 'Fira Code',monospace, Ubuntu; }
@@ -333,19 +337,20 @@ p code, quote code, q code {
 
 .blog-header {
   color: var(--green);
-  font-family: "Mononoki", "Twemoji", monospace;
+  font-family: "Mononoki Bold", "Twitter Color Emoji", "Twemoji", sans-serif;
   font-size: 2em;
   display: inline-flex;
   justify-content: center;
   text-align: center;
-  margin: 0 auto; }
+  margin: 0 auto;
+  margin-top: 32px; }
 
 .blog-post {
   padding: 0px 30px;
   font-size: 22px;
   font-family: Ubuntu; }
   .blog-post time {
-    font-family: "Mononoki", "Twemoji", monospace;
+    font-family: "Cuprum", "Mononoki", "Twemoji", monospace;
     display: flex;
     align-content: center;
     justify-content: center;