godotengine/godot-website-cover-generator
1
0
Fork 0
mirror of https://github.com/godotengine/godot-website-cover-generator.git synced 2026-02-24 18:34:41 +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>
<title>Article cover generator - Godot Engine</title>
<link rel="stylesheet" href="styles/normalize.css" />
@@ -73,11 +73,26 @@
</div>
</div>
<div class="canvas-container">
<canvas id="generator"></canvas>
<canvas id="render-target" style="display:none;"></canvas>
<div class="editor">
<div class="canvas-container">
<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 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>
</html>

29
styles/main.css
View File

@@ -25,6 +25,18 @@ body {
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 {
@@ -97,6 +109,23 @@ body {
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-container {