SCSS refactoring, docs corrections

GREAT-DNG · Feb 28, 2024 · f360e67 · f360e67
1 parent 31048d8
commit f360e67
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 49 deletions.
diff --git a/_sass/_dark.scss b/_sass/_dark.scss
@@ -1,15 +1,15 @@
-/**
+/*
  * Dark theme variables
  */
 
 :root {
   --base-color: #DBDBDB;
   --border: solid 2px var(--base-color);
   --selection-background: var(--base-color);
-  --selection-text: #000;
+  --selection-text: #000; 
   --background-color: #000;
-  --code-background-color: #252525;
-  --text-color: var(--base-color);
+  --code-background-color: #252525; 
+  --text-color: var(--base-color); 
   --placeholder-color: var(--base-color);
   --link-color: var(--base-color);
   --code-color-1: #aaaaaa;
@@ -21,13 +21,13 @@
   --code-color-7: #e4e477;
   --code-color-8: #000080;
   --code-color-9: #05ca05;
-  --code-color-10: #888888;
+  --code-color-10: #888888; 
   --code-color-11: #555555;
-  --code-color-12: #800080;
+  --code-color-12: #800080; 
   --code-color-13: #00d4d4;
-  --code-color-14: #00c1c1;
+  --code-color-14: #00c1c1; 
   --code-color-15: #ed9d13;
-  --code-color-16: #1e90ff;
+  --code-color-16: #1e90ff; 
   --code-color-17: #800000;
   --code-color-18: #bbbbbb;
 }
diff --git a/_sass/_light.scss b/_sass/_light.scss
@@ -1,4 +1,4 @@
-/**
+/*
  * Light theme variables
  */
 

diff --git a/_sass/base.scss b/_sass/base.scss
@@ -1,60 +1,163 @@
 @charset "utf-8";
 @import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@300');
 
-/**
+/*
  * Style variables
  */
-$base-font-family:     'Martian Mono', monospace !default;
-$base-font-size:       14px !default;
-$mobile-font-size:     14px !default;
-$base-line-height:     1.5 !default;
-$container-width:      100% !default;
-$container-max-width:  1000px !default;
-
-/**
+
+$base-font-family:      'Martian Mono', monospace !default;
+$base-font-size:        14px !default;
+$mobile-font-size:      14px !default;
+$base-line-height:      1.5 !default;
+$container-width:       100% !default;
+$container-max-width:   1000px !default;
+
+/*
  * Global
  */
-body { background-color: var(--background-color);  margin: 0 auto;  padding: 0;  font-family: $base-font-family;  font-size: $base-font-size;  color: var(--text-color);  text-align: left;  line-height: $base-line-height !important; }
-h1 { font-size: $base-font-size + 4.5;  margin-top: 20px;  font-weight: bold;  color: var(--text-color); }
-h2 { font-size: $base-font-size + 3;  margin-top: 20px;  font-weight: bold;  color: var(--text-color); }
-h3 { font-size: $base-font-size + 1.5;  margin-top: 20px;  font-weight: bold;  color: var(--text-color); }
-p, ul, ol { color: var(--text-color); }
-a { text-decoration: underline;  color: var(--link-color); }
-a:hover { color: var(--background-color); background-color: var(--base-color); }
-@media only screen and (max-device-width: 500px) { * { font-size: $mobile-font-size !important; } }
-
-/**
+
+body {
+    background-color: var(--background-color);
+    margin: 0 auto;
+    padding: 0;
+    font-family: $base-font-family;
+    font-size: $base-font-size;
+    color: var(--text-color);
+    text-align: left;
+    line-height: $base-line-height !important;
+}
+
+h1, h2, h3 {
+    margin-top: 20px;
+    font-weight: bold;
+    color: var(--text-color);
+}
+
+h1 {
+    font-size: $base-font-size + 4.5;
+}
+
+h2 {
+    font-size: $base-font-size + 3;
+}
+
+h3 {
+    font-size: $base-font-size + 1.5;
+}
+
+p, ul, ol {
+    color: var(--text-color);
+}
+
+a {
+    text-decoration: underline;
+    color: var(--link-color);
+}
+
+a:hover {
+    color: var(--background-color);
+    background-color: var(--base-color);
+}
+
+/*
  * Layout
  */
-.container { width: $container-width;  max-width: $container-max-width;  margin-right: auto;  margin-left: auto; }
-p { word-wrap: break-word;  word-break: break-word;  white-space: pre-wrap;  margin: 10px; }
-footer { color: var(--text-color);  border-top: var(--border);  margin-top: 10px;  margin-bottom: 10px;  padding-top: 10px;  text-align: right; }
-header { margin-top: 10px;  margin-bottom: 10px; }
 
-/**
+.container {
+    width: $container-width;
+    max-width: $container-max-width;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+p {
+    word-wrap: break-word;
+    word-break: break-word;
+    white-space: pre-wrap;
+    margin: 10px;
+}
+
+footer {
+    color: var(--text-color);
+    border-top: var(--border);
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-top: 10px;
+    text-align: right;
+}
+
+header {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+/*
  * Highlight/Markup
  */
-::selection { background: var(--selection-background);  color: var(--selection-text); }
-::-moz-selection { background: var(--selection-background);  color: var(--selection-text); }
 
-/**
+::selection {
+    background: var(--selection-background);
+    color: var(--selection-text);
+}
+
+::-moz-selection {
+    background: var(--selection-background);
+    color: var(--selection-text);
+}
+
+/*
  * Lists
  */
-ol { margin-left: 0px; }
-:not(.menu) > ul { list-style: none;  list-style-type: "- "; }
 
-/**
+ol {
+    margin-left: 0px;
+}
+
+:not(.menu) > ul {
+    list-style: none;
+    list-style-type: "- ";
+}
+
+/*
  * Header/Navigation
  */
-.menu { border-top: var(--border);  border-bottom: var(--border);  margin-bottom: 25px; }
-.menu ul { margin-top: 15px;  margin-bottom: 15px;  padding-left: 10px;  list-style-type: none;  text-align: center;  font-weight: bold; font-size: $base-font-size + 3; }
-.menu ul li { display: inline;  margin-left: 10px; }
-.menu ul li a { text-decoration: none;  color: var(--text-color); }
-.menu ul li a:hover { text-decoration: none; color: var(--background-color); background-color: var(--base-color); }
 
-/**
+.menu {
+    border-top: var(--border);
+    border-bottom: var(--border);
+    margin-bottom: 25px;
+}
+
+.menu ul {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    padding-left: 10px;
+    list-style-type: none;
+    text-align: center;
+    font-weight: bold;
+    font-size: $base-font-size + 3;
+}
+
+.menu ul li {
+    display: inline;
+    margin-left: 10px;
+}
+
+.menu ul li a {
+    text-decoration: none;
+    color: var(--text-color);
+}
+
+.menu ul li a:hover {
+    text-decoration: none;
+    color: var(--background-color);
+    background-color: var(--base-color);
+}
+
+/*
  * Code and syntax highlighting
  */
+
 .lineno { color: var(--code-color-1); margin-right: 15px; }
 figure.highlight { margin: 5px 0; }
 code.language-plaintext { background-color: var(--code-background-color);  border-radius: 5px;  padding: 1px;  overflow:auto;  color: var(--text-color); }

diff --git a/docs/creating-levels.md b/docs/creating-levels.md
@@ -46,7 +46,7 @@ const LEVELS: Dictionary = {
 1. Create the walls and floors of the level in the `BlocksTileMap` tile map. Recommendations:
 - Compose the tiles so that the line on them is on the player's side;
 - Create floors under the guides;
-2. Create a background in the `EnvironmentTileMap` tile map. Recommendations (the tile numbers correspond to the file names (starting from zero) in `res://Sprites/Environment/` and the order in the tailset):
+2. Create a background in the `EnvironmentTileMap` tile map. Recommendations (the tile numbers correspond to the file names (starting from zero) in `res://Sprites/Environment/` and the order in the tileset):
 - Use the first tile for the outdoor floor;
 - Use the second tile for the background walls inside the room;
 - Use the third tile for transitions from indoors to outdoors;

diff --git a/docs/multiplayer-game.md b/docs/multiplayer-game.md
@@ -5,10 +5,8 @@ permalink: /docs/multiplayer-game/
 
 # Multiplayer game
 
-*The article is still in development*
-
 This article is intended for those who want to play over the internet. When playing on the local network everything works without additional manipulations.
 
-It is necessary to perform port forwarding (`49094`, UDP protocol) and/or get a white ip address. For more information about port forwarding, please refer to your router's documentation.
+It is necessary to perform port forwarding (`49094`, UDP protocol) and get a white ip address. For more information about port forwarding, please refer to your router's documentation.
 
 Or you can create a virutal network between the players' computers.