From f360e673e569edadfb49c16a6eac883ca023a005 Mon Sep 17 00:00:00 2001 From: GREAT-DNG Date: Wed, 28 Feb 2024 15:11:02 +0700 Subject: [PATCH] SCSS refactoring, docs corrections --- _sass/_dark.scss | 16 ++-- _sass/_light.scss | 2 +- _sass/base.scss | 175 +++++++++++++++++++++++++++++++-------- docs/creating-levels.md | 2 +- docs/multiplayer-game.md | 4 +- 5 files changed, 150 insertions(+), 49 deletions(-) diff --git a/_sass/_dark.scss b/_sass/_dark.scss index fd8588e..617110a 100644 --- a/_sass/_dark.scss +++ b/_sass/_dark.scss @@ -1,4 +1,4 @@ -/** +/* * Dark theme variables */ @@ -6,10 +6,10 @@ --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 index 527ebbf..a8ef775 100644 --- 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 index 2d3196b..2ca0ba3 100644 --- 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 index 2bfb025..b34b9ce 100644 --- 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 index 9c76028..fe1177c 100644 --- 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. \ No newline at end of file