godotengine/godot-website-cover-generator
1
0
Fork 0
mirror of https://github.com/godotengine/godot-website-cover-generator.git synced 2026-09-03 23:33:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add usage hints and asset credits

Browse Source
This commit is contained in:
Yuri Sizov
2023-10-24 15:02:49 +02:00
parent 28f658da67
commit 007dce2099
5 changed files with 49 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
temp/

BIN
assets/ui/mouse-middle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/ui/pointer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

23
index.html
View File

@@ -1,4 +1,4 @@
<html> <html>
<head> <head>
<title>Article cover generator - Godot Engine</title> <title>Article cover generator - Godot Engine</title>
<link rel="stylesheet" href="styles/normalize.css" /> <link rel="stylesheet" href="styles/normalize.css" />
@@ -73,11 +73,26 @@
</div> </div>
</div> </div>
<div class="canvas-container"> <div class="editor">
<canvas id="generator"></canvas> <div class="canvas-container">
<canvas id="render-target" style="display:none;"></canvas> <canvas id="generator"></canvas>
<canvas id="render-target" style="display:none;"></canvas>
</div>
<div class="editor-hint">
<img src="assets/ui/pointer.png" heigth="24" width="24" />
<span>Click and drag to adjust the image</span>
<span></span>
<img src="assets/ui/mouse-middle.png" heigth="24" width="24" />
<span>Use the scrollwheel to scale the image</span>
</div>
</div> </div>
</div> </div>
<div class="credits">
Godot Logo by <a href="https://github.com/godotengine/godot/blob/master/LOGO_LICENSE.txt" target="_blank">Andrea Calabró</a>
●
Assets by <a href="https://kenney.nl/" target="_blank">Kenney</a>
</div>
</body> </body>
</html> </html>

29
styles/main.css
View File

@@ -25,6 +25,18 @@ body {
padding: 16px 24px; padding: 16px 24px;
} }
.credits {
position: absolute;
right: 0;
bottom: 0;
background: var(--background-color);
border-radius: 4px 0 0 0;
color: var(--text-faint-color);
font-size: 12px;
padding: 2px 4px;
text-align: right;
}
/* TOOLBAR STYLING. */ /* TOOLBAR STYLING. */
.toolbar { .toolbar {
@@ -97,6 +109,23 @@ body {
text-align: right; text-align: right;
} }
/* EDITOR AREA STYLING. */
.editor {
display: flex;
flex-direction: column;
gap: 8px;
}
.editor-hint {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 4px;
font-size: 14px;
}
/* CANVAS STYLING. */ /* CANVAS STYLING. */
.canvas-container { .canvas-container {