mirror of
https://github.com/godotengine/godot-website.git
synced 2025-12-31 09:48:43 +03:00
Deploying to published from @ godotengine/godot-website@b42580d8cc 🚀
This commit is contained in:
Godot Organization
@@ -13,8 +13,8 @@ Item 3[/ol]
|
||||
[outline_color=red][outline_size=2]
|
||||
</code></pre></div></div><p>or combined in the single tag:<div class="language-plaintext highlighter-rouge"><div class=highlight><pre class=highlight><code>[font name=res://font.tres size=36 features=scap]
|
||||
</code></pre></div></div><p><img src=/storage/app/uploads/public/5fe/1a5/7e1/5fe1a57e1bc07058215711.png alt="Examples of varying font parameters"><h4 id=control-characters>Control characters</h4><p>Unicode control characters can be inserted to the text by inputting them directly (e.g. copy-pasting or using Godot input control context menu), or by using special tags (e.g. <code class="language-plaintext highlighter-rouge">[rlm]</code>, <code class="language-plaintext highlighter-rouge">[lrm]</code>, <code class="language-plaintext highlighter-rouge">[zwnj]</code>).<h4 id=dropcaps>Dropcaps</h4><p>Additionally, dropped capitals support is added to the <code class="language-plaintext highlighter-rouge">RichTextLabel</code>. Dropcaps support the same formatting options as the main text, and margins for precise placement control.<p><img src=/storage/app/uploads/public/5fe/1a5/8b1/5fe1a58b1a6d5796589718.png alt="Drop cap margins">
|
||||
<img src=/storage/app/uploads/public/5fe/1a5/905/5fe1a59051f29443168025.png alt="Example of Latin and Hebrew text using dropcaps"><h1 id=designing-custom-controls>Designing custom controls</h1><p>In addition to the text server interface and draw function in the <code class="language-plaintext highlighter-rouge">Font</code> class, <code class="language-plaintext highlighter-rouge">TextLine</code> and <code class="language-plaintext highlighter-rouge">TextParagraph</code> helper classes, which serve as the base for most Godot controls, are available for more convenient single and multiline text rendering and designing custom controls.<p><code class="language-plaintext highlighter-rouge">TextLine</code> and <code class="language-plaintext highlighter-rouge">TextParagraph</code> classes support the following features:<ul><li>Multiple fonts and font options, and multiple languages in the single line or paragraph. Spans of text with designated font and properties can be sequentially pushed to the text buffer.<div class="language-python highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=n>add_string</span><span class=p>(</span><span class=n>text</span><span class=p>,</span> <span class=n>font</span><span class=p>,</span> <span class=n>font_size</span><span class=p>,</span> <span class=n>opentype_features</span><span class=p>,</span> <span class=n>language</span><span class=p>)</span>
|
||||
</code></pre></div></div><li>Text buffers can embed user defined custom objects (e.g. images and tables, like <code class="language-plaintext highlighter-rouge">RichTextLabel</code> does) into the text flow. In the text, such objects are represented as <code class="language-plaintext highlighter-rouge">length</code> object replacement characters, and follow all <abbr title=Bi-Directional>BiDi</abbr> reordering rules. Text buffers handle object size, alignment and placement in the text, drawing and interaction should be implemented separately.<div class="language-python highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=n>add_object</span><span class=p>(</span><span class=n>key</span><span class=p>,</span> <span class=n>size</span><span class=p>,</span> <span class=n>inline_align</span><span class=p>,</span> <span class=n>length</span><span class=p>)</span>
|
||||
<img src=/storage/app/uploads/public/5fe/1a5/905/5fe1a59051f29443168025.png alt="Example of Latin and Hebrew text using dropcaps"><h1 id=designing-custom-controls>Designing custom controls</h1><p>In addition to the text server interface and draw function in the <code class="language-plaintext highlighter-rouge">Font</code> class, <code class="language-plaintext highlighter-rouge">TextLine</code> and <code class="language-plaintext highlighter-rouge">TextParagraph</code> helper classes, which serve as the base for most Godot controls, are available for more convenient single and multiline text rendering and designing custom controls.<p><code class="language-plaintext highlighter-rouge">TextLine</code> and <code class="language-plaintext highlighter-rouge">TextParagraph</code> classes support the following features:<ul><li>Multiple fonts and font options, and multiple languages in the single line or paragraph. Spans of text with designated font and properties can be sequentially pushed to the text buffer.<div class="language-python highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=nf>add_string</span><span class=p>(</span><span class=n>text</span><span class=p>,</span> <span class=n>font</span><span class=p>,</span> <span class=n>font_size</span><span class=p>,</span> <span class=n>opentype_features</span><span class=p>,</span> <span class=n>language</span><span class=p>)</span>
|
||||
</code></pre></div></div><li>Text buffers can embed user defined custom objects (e.g. images and tables, like <code class="language-plaintext highlighter-rouge">RichTextLabel</code> does) into the text flow. In the text, such objects are represented as <code class="language-plaintext highlighter-rouge">length</code> object replacement characters, and follow all <abbr title=Bi-Directional>BiDi</abbr> reordering rules. Text buffers handle object size, alignment and placement in the text, drawing and interaction should be implemented separately.<div class="language-python highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=nf>add_object</span><span class=p>(</span><span class=n>key</span><span class=p>,</span> <span class=n>size</span><span class=p>,</span> <span class=n>inline_align</span><span class=p>,</span> <span class=n>length</span><span class=p>)</span>
|
||||
</code></pre></div></div><p>The final object position in the text layout can be retrieved by using <code class="language-plaintext highlighter-rouge">get_object_rect(key)</code> function.</ul><p>Both <code class="language-plaintext highlighter-rouge">TextLine</code> and <code class="language-plaintext highlighter-rouge">TextParagraph</code> provide direct access to the text server buffer <code class="language-plaintext highlighter-rouge">RID</code>s to mix their usage with direct text server API calls (e.g. accessing individual glyphs).<p>Text server buffers, <code class="language-plaintext highlighter-rouge">TextLine</code> and <code class="language-plaintext highlighter-rouge">TextParagraph</code> use a lazy calculation model. No BiDi reordering, shaping, line breaking or any other kind of text processing is done until it’s necessary to do it for the <code class="language-plaintext highlighter-rouge">get_*</code> function call or buffer rendering. While layout text is immutable and can’t be changed without redoing BiDi reordering and reshaping, layout size and alignment as well as embedded object sizes can be changed dynamically. Doing so is much faster than new buffer creation.<h1 id=limited-vertical-text-support>Limited vertical text support</h1><p>While Godot controls are designed to work with horizontal text only, text server and <code class="language-plaintext highlighter-rouge">TextLine</code>/<code class="language-plaintext highlighter-rouge">TextParagraph</code> classes have limited vertical text support as well. Vertical layouts can be enabled by setting the <code class="language-plaintext highlighter-rouge">orientation</code> property of the text buffer or helper class.<p><img src=/storage/app/uploads/public/5fe/1a5/a77/5fe1a5a7744fe943517369.png alt="Example of vertical text orientation"><h1 id=input>Input</h1><p>Godot’s BiDi caret movement follows the logical order of characters (right arrow key always acts as movement forward). If the caret is located on the edge of RTL and LTR text segments, two carets are displayed. Each one indicating a position where newly inputted RTL and LTR characters will be displayed. The primary caret, which controls scrolling, is determined based on the direction of the last inputted character (or can be switched manually, by using <code class="language-plaintext highlighter-rouge">Ctrl/Cmd + ~</code>).<p><img src=/storage/app/uploads/public/5fe/1a5/ebc/5fe1a5ebc206a227345391.png alt="Dual caret at the intersection between LTR and RTL text segments"><p>By default, all input keys except <kbd>Backspace</kbd>, which always deletes a single character, move the caret over the whole grapheme (i.e. base character and combining diacritics):<p><img src=/storage/app/uploads/public/5fe/1a5/ee7/5fe1a5ee7ee8c255544417.png alt="Demonstration of caret movement"><p>This behavior can be changed by setting <code class="language-plaintext highlighter-rouge">mid_grapheme_caret</code> control property:<p><img src=/storage/app/uploads/public/5fe/1a5/f0c/5fe1a5f0c2620352609364.png alt="Demonstration of mid-grapheme caret positioning"><p><em>Note: depending on the OS and language and keyboard layout, some characters can be entered both as combining characters and single characters. In case of single character input, both backspace and movement will affect the whole character.</em><p>Input controls have various BiDi options available for the user via the context menu:<ul><li>Base direction.<li>Inserting control characters.<li>Enabling and disabling display of control characters.</ul><p><img src=/storage/app/uploads/public/5fe/1a5/f2d/5fe1a5f2d7c69213554132.png alt="BiDi options in context menu"><p>For the custom controls, the text server provides functions to determine caret positions, selection bounding rectangles and hit testing:<div class="language-cpp highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=n>shaped_text_get_carets</span><span class=p>(</span><span class=n>RID</span> <span class=n>p_text_buffer</span><span class=p>,</span> <span class=kt>int</span> <span class=n>p_position</span><span class=p>)</span>
|
||||
<span class=n>shaped_text_get_selection</span><span class=p>(</span><span class=n>RID</span> <span class=n>p_text_buffer</span><span class=p>,</span> <span class=kt>int</span> <span class=n>p_start</span><span class=p>,</span> <span class=kt>int</span> <span class=n>p_end</span><span class=p>)</span>
|
||||
<span class=n>shaped_text_hit_test_position</span><span class=p>(</span><span class=n>RID</span> <span class=n>p_text_buffer</span><span class=p>,</span> <span class=kt>float</span> <span class=n>p_coord</span><span class=p>)</span>
|
||||
|
||||
@@ -13,7 +13,7 @@ To increase or decrease the reference count, the methods <code class="language-p
|
||||
<span class=n>godot</span><span class=o>::</span><span class=n>register_method</span><span class=p>(</span><span class=s>"get_data"</span><span class=p>,</span> <span class=o>&</span><span class=n>Simple</span><span class=o>::</span><span class=n>get_data</span><span class=p>);</span>
|
||||
<span class=p>}</span>
|
||||
|
||||
<span class=kt>void</span> <span class=n>_init</span><span class=p>()</span> <span class=p>{</span>
|
||||
<span class=kt>void</span> <span class=nf>_init</span><span class=p>()</span> <span class=p>{</span>
|
||||
<span class=n>data</span> <span class=o>=</span> <span class=s>"Hello World from C++"</span><span class=p>;</span>
|
||||
<span class=p>}</span>
|
||||
|
||||
|
||||
@@ -11,12 +11,12 @@
|
||||
|
||||
<span class=kt>void</span> <span class=n>_init</span><span class=p>()</span> <span class=p>{}</span>
|
||||
|
||||
<span class=kt>void</span> <span class=n>_process</span><span class=p>(</span><span class=kt>float</span> <span class=n>delta</span><span class=p>)</span> <span class=p>{</span>
|
||||
<span class=kt>void</span> <span class=nf>_process</span><span class=p>(</span><span class=kt>float</span> <span class=n>delta</span><span class=p>)</span> <span class=p>{</span>
|
||||
<span class=n>Vector2</span> <span class=n>motion</span> <span class=o>=</span> <span class=n>direction</span> <span class=o>*</span> <span class=n>speed</span> <span class=o>*</span> <span class=n>delta</span><span class=p>;</span>
|
||||
<span class=n>owner</span><span class=o>-></span><span class=n>set_position</span><span class=p>(</span><span class=n>owner</span><span class=o>-></span><span class=n>get_position</span><span class=p>()</span> <span class=o>+</span> <span class=n>motion</span><span class=p>);</span>
|
||||
<span class=p>}</span>
|
||||
|
||||
<span class=k>static</span> <span class=kt>void</span> <span class=n>_register_methods</span><span class=p>()</span> <span class=p>{</span>
|
||||
<span class=k>static</span> <span class=kt>void</span> <span class=nf>_register_methods</span><span class=p>()</span> <span class=p>{</span>
|
||||
<span class=n>register_method</span><span class=p>(</span><span class=s>"_process"</span><span class=p>,</span> <span class=o>&</span><span class=n>MovingSprite</span><span class=o>::</span><span class=n>_process</span><span class=p>);</span>
|
||||
<span class=p>}</span>
|
||||
<span class=p>};</span>
|
||||
@@ -29,12 +29,12 @@
|
||||
|
||||
<span class=kt>void</span> <span class=n>_init</span><span class=p>()</span> <span class=p>{}</span>
|
||||
|
||||
<span class=kt>void</span> <span class=n>_process</span><span class=p>(</span><span class=kt>float</span> <span class=n>delta</span><span class=p>)</span> <span class=p>{</span>
|
||||
<span class=kt>void</span> <span class=nf>_process</span><span class=p>(</span><span class=kt>float</span> <span class=n>delta</span><span class=p>)</span> <span class=p>{</span>
|
||||
<span class=n>Vector2</span> <span class=n>motion</span> <span class=o>=</span> <span class=n>direction</span> <span class=o>*</span> <span class=n>speed</span> <span class=o>*</span> <span class=n>delta</span><span class=p>;</span>
|
||||
<span class=n>set_position</span><span class=p>(</span><span class=n>get_position</span><span class=p>()</span> <span class=o>+</span> <span class=n>motion</span><span class=p>);</span>
|
||||
<span class=p>}</span>
|
||||
|
||||
<span class=k>static</span> <span class=kt>void</span> <span class=n>_register_methods</span><span class=p>()</span> <span class=p>{</span>
|
||||
<span class=k>static</span> <span class=kt>void</span> <span class=nf>_register_methods</span><span class=p>()</span> <span class=p>{</span>
|
||||
<span class=n>register_method</span><span class=p>(</span><span class=s>"_process"</span><span class=p>,</span> <span class=o>&</span><span class=n>MovingSprite</span><span class=o>::</span><span class=n>_process</span><span class=p>);</span>
|
||||
<span class=p>}</span>
|
||||
|
||||
|
||||
@@ -12,8 +12,8 @@
|
||||
<span class=nt><canvas</span> <span class=na>id=</span><span class=s>"canvas"</span><span class=nt>></canvas></span>
|
||||
<span class=nt><script </span><span class=na>src=</span><span class=s>"$GODOT_URL"</span><span class=nt>></script></span>
|
||||
<span class=nt><script></span>
|
||||
<span class=kd>var</span> <span class=nx>engine</span> <span class=o>=</span> <span class=k>new</span> <span class=nx>Engine</span><span class=p>(</span><span class=nx>$GODOT_CONFIG</span><span class=p>);</span>
|
||||
<span class=nx>engine</span><span class=p>.</span><span class=nx>startGame</span><span class=p>();</span>
|
||||
<span class=kd>var</span> <span class=nx>engine</span> <span class=o>=</span> <span class=k>new</span> <span class=nc>Engine</span><span class=p>(</span><span class=nx>$GODOT_CONFIG</span><span class=p>);</span>
|
||||
<span class=nx>engine</span><span class=p>.</span><span class=nf>startGame</span><span class=p>();</span>
|
||||
<span class=nt></script></span>
|
||||
<span class=nt></body></span>
|
||||
<span class=nt></html></span>
|
||||
|
||||
@@ -70,8 +70,8 @@
|
||||
<span class=nt><script </span><span class=na>src=</span><span class=s>"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"</span><span class=nt>></script></span>
|
||||
<span class=c><!-- Custom function --></span>
|
||||
<span class=nt><script></span>
|
||||
<span class=kd>function</span> <span class=nx>myFunc</span><span class=p>()</span> <span class=p>{</span>
|
||||
<span class=nx>alert</span><span class=p>(</span><span class=dl>"</span><span class=s2>My func!</span><span class=dl>"</span><span class=p>);</span>
|
||||
<span class=kd>function</span> <span class=nf>myFunc</span><span class=p>()</span> <span class=p>{</span>
|
||||
<span class=nf>alert</span><span class=p>(</span><span class=dl>"</span><span class=s2>My func!</span><span class=dl>"</span><span class=p>);</span>
|
||||
<span class=p>}</span>
|
||||
<span class=nt></script></span>
|
||||
</code></pre></div></div><p><img src=/storage/app/uploads/public/60c/ddb/7a5/60cddb7a5c331340661868.png alt="HTML5 export head include setting"><p>We can then access both the library and the function from Godot, like we did in previous examples:<div class="language-gdscript highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=k>extends</span> <span class=n>Node</span>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<span class=by>Rémi Verschelde</span></div><span class=date data-post-date="2022-08-10 15:05:19 +0000">10 August 2022</span></div><div class=tags><a href=/blog/progress-report><div class="tag active">Progress Report</div></a></div></div><div class="card card-warning"><p>This article is from <strong>August 2022</strong>, some of its contents might be outdated and no longer accurate.<br>You can find up-to-date information about the engine in the <a href=https://docs.godotengine.org/en/stable/>official documentation</a>.</div><div class=article-body><p>Like in previous years, Godot is participating again in the <a href=https://summerofcode.withgoogle.com/>Google Summer of Code</a> program for its 2022 edition.<p>This year we selected 3 projects, and the 3 students and their mentors have now been working on their projects for two months. We asked them to write a progress report to present what they’re working on and the current status.<p>Here are the 3 projects/students with links to the relevant sections in this post:<ul><li><a href=#colorpicker>Refactor and UX updates of ColorPicker</a> by Vitika Soni (<a href=https://github.com/Vitika9>Vitika9</a>)<li><a href=#multiwindow>Multi window code editors</a> by <a href=https://github.com/trollodel>trollodel</a><li><a href=#gpu-lightmapper>GPU lightmapper enhancements</a> by Priyansh Rathi (<a href=https://github.com/techiepriyansh>techiepriyansh</a>)</ul><p>They’ve all been doing outstanding work so far, and we’re looking forward to integrating all those changes in the engine!<hr><p><a id=colorpicker></a><h2 id=refactor-and-ux-updates-of-colorpicker>Refactor and UX updates of ColorPicker</h2><ul><li>Project: Refactor and UX updates of ColorPicker<li>Student: Vitika Soni (<a href=https://github.com/Vitika9>Vitika9</a>)<li>Mentors: Rémi Verschelde (<a href=https://github.com/akien-mga>akien-mga</a>) and Tomasz Chabora (<a href=https://github.com/KoBeWi>KoBeWi</a>)<li>Branches: <a href=https://github.com/Vitika9/godot/tree/gsoc-colorpicker><code class="language-plaintext highlighter-rouge">Vitika9/gsoc-colorpicker</code></a>, <a href=https://github.com/Vitika9/godot/tree/gsoc-colorpicker-ux><code class="language-plaintext highlighter-rouge">Vitika9/gsoc-colorpicker-ux</code></a><li>PRs: <a href=https://github.com/godotengine/godot/pull/62075>#62075</a>, <a href=https://github.com/godotengine/godot/pull/62910>#62910</a></ul><h3 id=project-description>Project description</h3><p>RGB, HSV and Raw modes of <code class="language-plaintext highlighter-rouge">ColorPicker</code> were never properly separated, resulting in lots of messy code like this:<div class="language-c++ highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=k>if</span> <span class=p>(</span><span class=n>hsv_mode_enabled</span><span class=p>)</span> <span class=p>{</span>
|
||||
<span class=n>set_raw_mode</span><span class=p>(</span><span class=nb>false</span><span class=p>);</span>
|
||||
<span class=n>btn_raw</span><span class=o>-></span><span class=n>set_disabled</span><span class=p>(</span><span class=nb>true</span><span class=p>);</span>
|
||||
<span class=p>}</span> <span class=k>else</span> <span class=k>if</span> <span class=p>(</span><span class=n>raw_mode_enabled</span><span class=p>)</span> <span class=p>{</span>
|
||||
<span class=p>}</span> <span class=k>else</span> <span class=nf>if</span> <span class=p>(</span><span class=n>raw_mode_enabled</span><span class=p>)</span> <span class=p>{</span>
|
||||
<span class=n>set_hsv_mode</span><span class=p>(</span><span class=nb>false</span><span class=p>);</span>
|
||||
<span class=n>btn_hsv</span><span class=o>-></span><span class=n>set_disabled</span><span class=p>(</span><span class=nb>true</span><span class=p>);</span>
|
||||
<span class=p>}</span> <span class=k>else</span> <span class=p>{</span>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
943
assets/css/priorities/base.scss
Normal file
943
assets/css/priorities/base.scss
Normal file
@@ -0,0 +1,943 @@
|
||||
@use "sass:color";
|
||||
@use "sass:list";
|
||||
@use "sass:map";
|
||||
@use "sass:selector";
|
||||
---
|
||||
---
|
||||
// Fixes the parsing of the unusual front matter / SCSS file.
|
||||
*{};
|
||||
|
||||
//
|
||||
// Reset
|
||||
//
|
||||
ul {
|
||||
line-height: unset;
|
||||
padding-left: unset;
|
||||
}
|
||||
|
||||
//
|
||||
// Imports
|
||||
//
|
||||
@use "./details.css";
|
||||
|
||||
//
|
||||
// Variables
|
||||
//
|
||||
$large-min-width: 1200px;
|
||||
$mobile-max-width: 700px;
|
||||
$mobile-sm-max-width: 450px;
|
||||
$gap: 1.25rem;
|
||||
$border-radius: 15px;
|
||||
|
||||
$element-meta-planning-bar-width: 15%;
|
||||
$element-meta-ongoing-bar-width: 50%;
|
||||
|
||||
$color-background-light: #FFFFFF;
|
||||
$color-background-dark: rgb(51, 54, 57);
|
||||
$color-red: #f35774;
|
||||
|
||||
$color-category-level-1: hsl(206, 58%, 52%);
|
||||
$color-category-level-2-light: rgb(165, 173, 200);
|
||||
$color-category-level-2-dark: #202325;
|
||||
|
||||
$color-text-light: #4a5365;
|
||||
$color-text-dark: rgba(255, 255, 255, 0.9);
|
||||
|
||||
$color-element-background-light:
|
||||
color.adjust(#d5daea, $lightness: +7.5%);
|
||||
$color-element-background-dark: color.adjust(#202325, $lightness: +2.5%);
|
||||
|
||||
@function create-outline-rule($outline-color) {
|
||||
@return 0.125rem solid $outline-color;
|
||||
}
|
||||
$outline-color: #4080ff;
|
||||
$outline: create-outline-rule($outline-color: $outline-color);
|
||||
$outline-inverted: create-outline-rule($outline-color: color.adjust($color: color.invert($outline-color), $lightness: +10%));
|
||||
|
||||
$detail-color: (
|
||||
note: (rgb(26, 127, 55), rgb(45, 175, 71)),
|
||||
warning: (rgb(154, 103, 0), rgb(201, 135, 4)),
|
||||
links: (rgb(9, 105, 218), rgb(34, 119, 247)),
|
||||
trackers: (rgb(19, 136, 140), rgb(34, 240, 254)),
|
||||
prs: (rgb(130, 80, 223), rgb(148, 94, 249)),
|
||||
issues: (rgb(207, 34, 46), rgb(249, 62, 58)),
|
||||
proposals: (rgb(207, 106, 34), rgb(246, 118, 58)),
|
||||
);
|
||||
|
||||
//
|
||||
// Functions
|
||||
//
|
||||
|
||||
//
|
||||
// Mixins
|
||||
//
|
||||
@mixin is-dark() {
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin is-light() {
|
||||
@media screen and (prefers-color-scheme: light) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin is-large() {
|
||||
@media screen and (min-width: #{$large-min-width}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin is-mobile() {
|
||||
@media screen and (max-width: #{$mobile-max-width}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin is-mobile-sm() {
|
||||
@media screen and (max-width: #{$mobile-sm-max-width}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin is-retina() {
|
||||
@media screen and (min-resolution: 2x) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ---
|
||||
|
||||
@mixin anchor-icon($icon-color) {
|
||||
.anchor-icon {
|
||||
display: inline-block;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-out;
|
||||
|
||||
$size: 0.8rem;
|
||||
$min-size: 19px;
|
||||
mask-image: url(/assets/icons/link.svg);
|
||||
mask-size: 100% 100%;
|
||||
mask-repeat: no-repeat;
|
||||
height: $size;
|
||||
width: $size;
|
||||
min-height: $min-size;
|
||||
min-width: $min-size;
|
||||
|
||||
background-color: $icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin remove-markdown-margins() {
|
||||
> p {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin reset-lists() {
|
||||
> ul {
|
||||
// Force reset the style for the first list.
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
> ol {
|
||||
// Force reset the style for the first list.
|
||||
counter-reset: element-details-list-counter;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// General
|
||||
//
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
@media (prefers-reduced-motion) {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
scroll-padding-top: $gap;
|
||||
}
|
||||
|
||||
//
|
||||
// Main content.
|
||||
//
|
||||
.priorities-container {
|
||||
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
background-color: var(--card-background-color);
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
|
||||
> .priorities-intro {
|
||||
@mixin set-background($color, $url) {
|
||||
$color-with-alpha: color.change($color, $alpha: 0.866667);
|
||||
background:
|
||||
linear-gradient(to right, $color-with-alpha, $color-with-alpha),
|
||||
linear-gradient(to bottom, rgba(0,0,0,0) 25%, $color 100%),
|
||||
url($url);
|
||||
background-color: black;
|
||||
background-size: cover, cover, cover;
|
||||
background-repeat: repeat, repeat, repeat;
|
||||
}
|
||||
|
||||
@mixin setup-background($color) {
|
||||
@include set-background(
|
||||
$color: $color,
|
||||
$url: "/storage/priorities/images/page/map2-2048.webp"
|
||||
);
|
||||
@include is-retina() {
|
||||
@include set-background(
|
||||
$color: $color,
|
||||
$url: "/storage/priorities/images/page/map2-4096.webp"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@include setup-background($color: $color-background-light);
|
||||
@include is-dark() {
|
||||
@include setup-background($color: $color-background-dark);
|
||||
}
|
||||
|
||||
> .banner {
|
||||
.container {
|
||||
padding-top: 7rem;
|
||||
// padding-bottom: 7rem;
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.banner-last-updated {
|
||||
.label {
|
||||
.last-updated {
|
||||
display: inline;
|
||||
}
|
||||
.recently-updated {
|
||||
display: none;
|
||||
font-weight: 600;
|
||||
color: $color-red;
|
||||
}
|
||||
|
||||
@at-root #{selector.replace(&, ".banner-last-updated", ".banner-last-updated.recent")} {
|
||||
.last-updated {
|
||||
display: none;
|
||||
}
|
||||
.recently-updated {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .intro {
|
||||
.intro-text {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: $gap;
|
||||
margin-bottom: (3 * $gap);
|
||||
@include is-mobile() {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
.wishlist-btns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-areas:
|
||||
"donate howto contact";
|
||||
gap: $gap;
|
||||
|
||||
margin: (3 * $gap) 0;
|
||||
font-weight: 600;
|
||||
|
||||
@include is-mobile() {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-areas:
|
||||
"donate donate"
|
||||
"howto contact";
|
||||
}
|
||||
|
||||
@include is-mobile-sm() {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
grid-template-areas:
|
||||
"donate"
|
||||
"howto"
|
||||
"contact";
|
||||
}
|
||||
|
||||
.donate {
|
||||
grid-area: donate;
|
||||
}
|
||||
|
||||
.howto {
|
||||
grid-area: howto;
|
||||
}
|
||||
|
||||
.contact {
|
||||
grid-area: contact;
|
||||
}
|
||||
|
||||
.wishlist-btn-anchor {
|
||||
color: $color-red;
|
||||
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.wishlist-btn-text {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .navigation {
|
||||
top: 0px;
|
||||
z-index: 1000;
|
||||
background-color: $color-background-light;
|
||||
@include is-dark() {
|
||||
background-color: $color-background-dark;
|
||||
}
|
||||
|
||||
margin: $gap 0;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.navigation-list-container {
|
||||
position: relative;
|
||||
|
||||
.navigation-list {
|
||||
margin: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: $gap;
|
||||
|
||||
@include is-mobile() {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@include is-mobile-sm() {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
> li {
|
||||
list-style: none;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
.navigation-list-details {
|
||||
.navigation-list-summary {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
// Disable toggling.
|
||||
pointer-events: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
background-color: $color-element-background-light;
|
||||
@include is-dark() {
|
||||
background-color: $color-element-background-dark;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(117.5%);
|
||||
@include is-light() {
|
||||
filter: brightness(102%);
|
||||
}
|
||||
|
||||
&:has(.label a:hover) {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
border-radius: $border-radius;
|
||||
width: calc(100% - #{$gap * 2});
|
||||
height: 100%;
|
||||
padding: $gap $gap;
|
||||
cursor: pointer;
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
|
||||
a {
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle {
|
||||
// As we disabled the <details> tag, we remove the toggle icon visually.
|
||||
display: none;
|
||||
|
||||
flex-grow: 0;
|
||||
|
||||
.more {
|
||||
display: block;
|
||||
}
|
||||
.less {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@at-root #{selector.replace(&, ".navigation-list-details", ".navigation-list-details[open]")} {
|
||||
.more {
|
||||
display: none;
|
||||
}
|
||||
.less {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-sublist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $gap / 4;
|
||||
|
||||
margin-top: $gap / 2;
|
||||
margin-left: $gap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// i.e. "core", "rendering", or "physics"
|
||||
> .priorities {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $gap * 2;
|
||||
|
||||
padding: ($gap * 2) 0;
|
||||
|
||||
.category {
|
||||
> .container {
|
||||
> .category-details {
|
||||
> .category-summary {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"title anchor . icon";
|
||||
grid-template-columns:
|
||||
auto min-content 1fr min-content;
|
||||
gap: $gap;
|
||||
align-items: baseline;
|
||||
|
||||
border-radius: $border-radius;
|
||||
padding: 1rem 2rem;
|
||||
letter-spacing: -2px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
line-height: 3rem;
|
||||
|
||||
list-style: none;
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// .category.level-1
|
||||
@at-root #{selector.replace(&, ".category", ".category.level-1")} {
|
||||
font-size: 3rem;
|
||||
background-color: $color-category-level-1;
|
||||
}
|
||||
// .category.level-2
|
||||
@at-root #{selector.replace(&, ".category", ".category.level-2")} {
|
||||
font-size: 2.125rem;
|
||||
background-color: $color-category-level-2-light;
|
||||
@include is-dark() {
|
||||
background-color: $color-category-level-2-dark;
|
||||
}
|
||||
@include is-light() {
|
||||
&:hover {
|
||||
filter: brightness(105%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(117.5%);
|
||||
}
|
||||
|
||||
> .category-anchor-container {
|
||||
grid-area: anchor;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> .category-anchor {
|
||||
display: block;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
|
||||
.anchor-icon {
|
||||
@at-root #{selector.replace(&, ".category-summary", ".category-summary:hover")} {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@at-root #{selector.replace(&, ".category-anchor", ".category-anchor:focus")} {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
outline: $outline-inverted;
|
||||
}
|
||||
|
||||
$anchor-icon-color: white;
|
||||
@include anchor-icon($icon-color: white);
|
||||
}
|
||||
}
|
||||
|
||||
.category-title {
|
||||
grid-area: title;
|
||||
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
|
||||
@at-root #{selector.replace(&, ".category-summary", ".category-summary:focus")} {
|
||||
outline: $outline-inverted;
|
||||
}
|
||||
|
||||
.category-title-text {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
color: white;
|
||||
|
||||
@include remove-markdown-margins();
|
||||
}
|
||||
|
||||
.recent-icon {
|
||||
display: block;
|
||||
position: absolute;
|
||||
$size: 0.75rem;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: $size;
|
||||
top: ($size / 4);
|
||||
left: -(($size / 4) * 3);
|
||||
background-color: $color-red;
|
||||
}
|
||||
}
|
||||
|
||||
.category-accordion-toggle {
|
||||
grid-area: icon;
|
||||
|
||||
.more {
|
||||
display: block;
|
||||
}
|
||||
.less {
|
||||
display: none;
|
||||
}
|
||||
@at-root #{selector.replace(&, ".category-details", ".category-details[open]")} {
|
||||
.more {
|
||||
display: none;
|
||||
}
|
||||
.less {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-content {
|
||||
.element-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: $gap;
|
||||
@include is-large() {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
> .element-list-item {
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
|
||||
> .element {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"main";
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto;
|
||||
gap: $gap;
|
||||
|
||||
border-radius: $border-radius;
|
||||
background-color: $color-element-background-light;
|
||||
@include is-dark() {
|
||||
background-color: $color-element-background-dark;
|
||||
}
|
||||
|
||||
padding: 1.25rem 0;
|
||||
|
||||
@include is-mobile() {
|
||||
grid-template-areas:
|
||||
"main";
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
.element-main {
|
||||
grid-area: main;
|
||||
|
||||
.element-title {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"text toggle";
|
||||
grid-template-columns:
|
||||
1fr min-content;
|
||||
align-items: stretch;
|
||||
gap: $gap;
|
||||
|
||||
cursor: pointer;
|
||||
border-radius: $border-radius;
|
||||
color: $color-text-light;
|
||||
@include is-dark() {
|
||||
color: $color-text-dark;
|
||||
}
|
||||
background-color: $color-element-background-light;
|
||||
@include is-dark() {
|
||||
background-color: $color-element-background-dark;
|
||||
}
|
||||
|
||||
margin-top: -$gap;
|
||||
margin-bottom: -$gap;
|
||||
padding: $gap;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(117.5%);
|
||||
@include is-light() {
|
||||
filter: brightness(102%);
|
||||
}
|
||||
}
|
||||
|
||||
list-style: none;
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
grid-area: text;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.element-title-container {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.element-title-anchor {
|
||||
flex-grow: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
@include anchor-icon($icon-color: $color-text-light);
|
||||
@include is-dark() {
|
||||
@include anchor-icon($icon-color: $color-text-dark);
|
||||
}
|
||||
|
||||
@at-root #{selector.replace(&, ".element-title", ".element-title:hover")},
|
||||
&:focus {
|
||||
.anchor-icon {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.element-title-text {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
font-weight: 700;
|
||||
|
||||
@include remove-markdown-margins();
|
||||
|
||||
@at-root #{selector.replace(&, ".element-title", ".element-title:focus")} {
|
||||
outline: $outline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.element-accordion-toggle {
|
||||
grid-area: toggle;
|
||||
|
||||
flex-grow: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.less {
|
||||
display: none;
|
||||
}
|
||||
.more {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@at-root #{selector.replace(&, ".element-main", ".element-main[open]")} {
|
||||
.less {
|
||||
display: block;
|
||||
}
|
||||
.more {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.element-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $gap;
|
||||
|
||||
padding: 0 $gap;
|
||||
padding-top: $gap;
|
||||
|
||||
.element-description {
|
||||
font-size: 1rem;
|
||||
@include remove-markdown-margins();
|
||||
}
|
||||
|
||||
.element-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $gap;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
font-size: 0.9rem;
|
||||
|
||||
.detail-block {
|
||||
@mixin parent-is-type($current-selector, $type) {
|
||||
@at-root #{selector.replace($current-selector, ".detail-block", ".detail-block.#{$type}")} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
padding: 1rem 0 1rem 2rem;
|
||||
border-left: 2px solid;
|
||||
border-left-color: var(--detail-color);
|
||||
|
||||
p {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1.5rem;
|
||||
|
||||
li {
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-text-light;
|
||||
text-decoration-color: $color-text-light;
|
||||
@include is-dark() {
|
||||
color: $color-text-dark;
|
||||
text-decoration-color: $color-text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@include reset-lists();
|
||||
|
||||
// Detail types.
|
||||
@each $type in ("note", "warning", "links", "trackers", "prs", "issues", "proposals") {
|
||||
&.#{$type} {
|
||||
--detail-color: #{list.nth(map.get($detail-color, $type), 1)};
|
||||
@include is-dark() {
|
||||
--detail-color: #{list.nth(map.get($detail-color, $type), 2)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-block-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: $gap / 2;
|
||||
margin-bottom: $gap / 2;
|
||||
font-weight: bolder;
|
||||
|
||||
color: var(--detail-color);
|
||||
|
||||
.icon {
|
||||
@mixin octicon($icon-url) {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
mask-size: 24px;
|
||||
mask-position: center;
|
||||
mask-image: url($icon-url);
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
span[class^="godot-icon-"], span[class*=" godot-icon-"] {
|
||||
font-size: 150%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-block-content {
|
||||
@include reset-lists();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.element-edit {
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
font-size: 0.75rem;
|
||||
font-style: italic;
|
||||
color: color.adjust($color-text-light, $alpha: -0.33);
|
||||
@include is-dark() {
|
||||
color: color.adjust($color-text-dark, $alpha: -0.33);
|
||||
}
|
||||
|
||||
.element-edit-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.element-edit-entries {
|
||||
font-style: normal;
|
||||
border-collapse: collapse;
|
||||
|
||||
.element-edit-entry {
|
||||
vertical-align: baseline;
|
||||
|
||||
.element-edit-entry-time {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.element-edit-entry-content {
|
||||
@include remove-markdown-margins();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#scroll-to-top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
|
||||
--card-padding: $gap;
|
||||
@include is-mobile() {
|
||||
--card-padding: $gap / 2;
|
||||
}
|
||||
|
||||
.link {
|
||||
pointer-events: all;
|
||||
position: fixed;
|
||||
bottom: $gap;
|
||||
right: $gap;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: var(--card-padding);
|
||||
text-decoration: none;
|
||||
background-color: white;
|
||||
border-radius: $border-radius;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: rgba(0,0,0,25%) 1px 1px 5px;
|
||||
|
||||
color: black;
|
||||
font-size: 1.5em;
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
font-size: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
transition: font-size 0.2s ease-out;
|
||||
transform:
|
||||
translateY(-3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1 @@
|
||||
{
|
||||
"version": 3,
|
||||
"file": "noscript.css",
|
||||
"sources": [
|
||||
"noscript.scss"
|
||||
],
|
||||
"sourcesContent": [
|
||||
"// Fixes the parsing of the unusual front matter / SCSS file.\n*{};\n"
|
||||
],
|
||||
"names": [],
|
||||
"mappings": ""
|
||||
}
|
||||
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"noscript.css"}
|
||||
@@ -1,14 +1 @@
|
||||
{
|
||||
"version": 3,
|
||||
"file": "release.css",
|
||||
"sources": [
|
||||
"release.scss",
|
||||
"_sass/common/_release.scss"
|
||||
],
|
||||
"sourcesContent": [
|
||||
"@import \"common/release\";\n\nhtml {\n\tscroll-behavior: smooth;\n\n\t@media (prefers-reduced-motion) {\n\t\tscroll-behavior: auto;\n\t}\n}\n\n\n.release-container {\n\tposition: relative;\n\tfont-family: \"Montserrat\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n}\n",
|
||||
"//\n// Functions\n//\n@function offset-hue($color, $offset, $i: 1) {\n\t@return adjust-hue($color, $offset * $i);\n}\n\n/**\n * From a list $sections (video, foundation, outstanding, _2d),\n * it will return a map of sections with the $base-category being assigned with\n * a specific $base-color, and will $offset each section by n degrees.\n */\n@function r-generate-sections($sections, $base-category, $base-color, $offset) {\n\t$return-value: ();\n\t$base-category-i: index($sections, $base-category);\n\t@each $section in $sections {\n\t\t$i: index($sections, $section);\n\t\t$diff: $i - $base-category-i;\n\t\t$base-color-top: offset-hue($base-color, $offset, $diff);\n\t\t$base-color-bottom: adjust-color(\n\t\t\toffset-hue($base-color, $offset, $diff + 1),\n\t\t\t$lightness: -10\n\t\t);\n\t\t$color-top: adjust-color($base-color-top, $saturation: -10);\n\t\t$color-bottom: adjust-color($base-color-bottom, $saturation: -10);\n\t\t$color-top-muted: adjust-color($base-color-top, $saturation: -25);\n\t\t$color-bottom-muted: adjust-color($base-color-bottom, $saturation: -25);\n\t\t$color-selection: adjust-color($base-color-bottom, $saturation: -30);\n\t\t$color-selection--light: adjust-color(\n\t\t\t$base-color-bottom,\n\t\t\t$lightness: 40,\n\t\t\t$saturation: 30\n\t\t);\n\t\t$color-invert: adjust-color(\n\t\t\t$base-color-top,\n\t\t\t$hue: 180,\n\t\t\t$lightness: 0,\n\t\t\t$saturation: 30\n\t\t);\n\t\t$color-highlight: adjust-color(\n\t\t\t$base-color-top,\n\t\t\t$lightness: 0,\n\t\t\t$saturation: 30\n\t\t);\n\t\t$color-highlight--dark: adjust-color(\n\t\t\t$base-color-top,\n\t\t\t$lightness: 30,\n\t\t\t$saturation: 30\n\t\t);\n\t\t$color-invert-highlight: adjust-color(\n\t\t\t$color-invert,\n\t\t\t$lightness: 20,\n\t\t\t$saturation: 30\n\t\t);\n\t\t$return-value: map-merge(\n\t\t\t$return-value,\n\t\t\t(\n\t\t\t\t#{$section}: (\n\t\t\t\t\t\tcolor-top: $color-top,\n\t\t\t\t\t\tcolor-bottom: $color-bottom,\n\t\t\t\t\t\tcolor-top-muted: $color-top-muted,\n\t\t\t\t\t\tcolor-bottom-muted: $color-bottom-muted,\n\t\t\t\t\t\tcolor-selection: $color-selection,\n\t\t\t\t\t\tcolor-selection--light: $color-selection--light,\n\t\t\t\t\t\tcolor-invert: $color-invert,\n\t\t\t\t\t\tcolor-highlight: $color-highlight,\n\t\t\t\t\t\tcolor-highlight--dark: $color-highlight--dark,\n\t\t\t\t\t\tcolor-invert-highlight: $color-invert-highlight,\n\t\t\t\t\t)\n\t\t\t)\n\t\t);\n\t}\n\t@return $return-value;\n}\n\n@function r-desktop-mobile($sizes...) {\n\t@return (\"desktop\": nth($sizes, 1), \"mobile\": nth($sizes, 2));\n}\n\n@function r-get-desktop($value) {\n\t@return map-get($value, \"desktop\");\n}\n\n@function r-get-mobile($value) {\n\t@return map-get($value, \"mobile\");\n}\n\n//\n// Mixins\n//\n@mixin is-dark() {\n\t@media screen and (prefers-color-scheme: dark) {\n\t\t@content;\n\t}\n}\n\n@mixin is-light() {\n\t@media screen and (prefers-color-scheme: light) {\n\t\t@content;\n\t}\n}\n"
|
||||
],
|
||||
"names": [],
|
||||
"mappings": "AAEA,AAAA,IAAI,AAAC,CACJ,eAAe,CAAE,MAAM,CAKvB,AAHA,MAAM,yBAHP,CAAA,AAAA,IAAI,AAAC,CAIH,eAAe,CAAE,IAAI,CAEtB,CAAA,AAGD,AAAA,kBAAkB,AAAC,CAClB,QAAQ,CAAE,QAAQ,CAClB,WAAW,CAAE,iIAAiI,CAC9I"
|
||||
}
|
||||
{"version":3,"sourceRoot":"","sources":["release.scss"],"names":[],"mappings":"AAEA,KACC,uBAEA,+BAHD,KAIE,sBAKF,mBACC,kBACA","sourcesContent":["@use \"common/release\";\n\nhtml {\n\tscroll-behavior: smooth;\n\n\t@media (prefers-reduced-motion) {\n\t\tscroll-behavior: auto;\n\t}\n}\n\n\n.release-container {\n\tposition: relative;\n\tfont-family: \"Montserrat\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n}\n"],"file":"release.css"}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,12 +1 @@
|
||||
{
|
||||
"version": 3,
|
||||
"file": "4.3.noscript.css",
|
||||
"sources": [
|
||||
"4.3.noscript.scss"
|
||||
],
|
||||
"sourcesContent": [
|
||||
"#download-download {\n\t.release-card-media {\n\t\t.release-platform {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t\tmargin: 0 auto 40px;\n\t\t}\n\t}\n}\n"
|
||||
],
|
||||
"names": [],
|
||||
"mappings": "AAAA,AAEE,kBAFgB,CACjB,mBAAmB,CAClB,iBAAiB,AAAC,CACjB,OAAO,CAAE,IAAI,CACb,cAAc,CAAE,MAAM,CACtB,WAAW,CAAE,MAAM,CACnB,MAAM,CAAE,WAAW,CACnB"
|
||||
}
|
||||
{"version":3,"sourceRoot":"","sources":["4.3.noscript.scss"],"names":[],"mappings":"AAEE,yDACC,aACA,sBACA,mBACA","sourcesContent":["#download-download {\n\t.release-card-media {\n\t\t.release-platform {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t\tmargin: 0 auto 40px;\n\t\t}\n\t}\n}\n"],"file":"4.3.noscript.css"}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,12 +1 @@
|
||||
{
|
||||
"version": 3,
|
||||
"file": "4.4.noscript.css",
|
||||
"sources": [
|
||||
"4.4.noscript.scss"
|
||||
],
|
||||
"sourcesContent": [
|
||||
"#download-download {\n\t.release-card-media {\n\t\t.release-platform {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t}\n\t}\n}\n.comparison-range {\n\tdisplay: none !important;\n}\n"
|
||||
],
|
||||
"names": [],
|
||||
"mappings": "AAAA,AAEE,kBAFgB,CACjB,mBAAmB,CAClB,iBAAiB,AAAC,CACjB,OAAO,CAAE,IAAI,CACb,cAAc,CAAE,MAAM,CACtB,WAAW,CAAE,MAAM,CACnB,AAGH,AAAA,iBAAiB,AAAC,CACjB,OAAO,CAAE,eAAe,CACxB"
|
||||
}
|
||||
{"version":3,"sourceRoot":"","sources":["4.4.noscript.scss"],"names":[],"mappings":"AAEE,yDACC,aACA,sBACA,mBAIH,kBACC","sourcesContent":["#download-download {\n\t.release-card-media {\n\t\t.release-platform {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t}\n\t}\n}\n.comparison-range {\n\tdisplay: none !important;\n}\n"],"file":"4.4.noscript.css"}
|
||||
@@ -1 +1 @@
|
||||
header{box-shadow:none;margin-bottom:-70px;background-color:rgba(134,144,154,.15);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@media(max-width:1200px){input#nav_toggle_cb:checked~header{background-color:var(--navbar-background-color)}}nav#nav a{color:#fff}.nav-logo{display:none}.nav-logo.dark-logo{display:inline}#nav_toggle_btn{filter:invert(100%)saturate(0%)brightness(120%)}@media(max-width:1200px) and (prefers-color-scheme:light){nav#nav a{color:var(--navbar-link-color)}input#nav_toggle_cb:checked~header #nav_head #nav_toggle_btn{filter:none}input#nav_toggle_cb:checked~header #nav_head .nav-logo{display:inline}input#nav_toggle_cb:checked~header #nav_head .nav-logo.dark-logo{display:none}}@media(min-width:1200px){#nav .language-selector{background-image:url(/assets/icons/language.svg)!important}}
|
||||
header{box-shadow:none;margin-bottom:-70px;background-color:rgba(134,144,154,.15);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@media(max-width:1200px){input#nav_toggle_cb:checked~header{background-color:var(--navbar-background-color)}}nav#nav a{color:#fff}.nav-logo{display:none}.nav-logo.dark-logo{display:inline}#nav_toggle_btn{filter:invert(100%)saturate(0%)brightness(120%)}@media(max-width:1200px)and (prefers-color-scheme:light){nav#nav a{color:var(--navbar-link-color)}input#nav_toggle_cb:checked~header #nav_head #nav_toggle_btn{filter:none}input#nav_toggle_cb:checked~header #nav_head .nav-logo{display:inline}input#nav_toggle_cb:checked~header #nav_head .nav-logo.dark-logo{display:none}}@media(min-width:1200px){#nav .language-selector{background-image:url(/assets/icons/language.svg)!important}}
|
||||
@@ -1,12 +1 @@
|
||||
{
|
||||
"version": 3,
|
||||
"file": "transparent-nav.css",
|
||||
"sources": [
|
||||
"transparent-nav.scss"
|
||||
],
|
||||
"sourcesContent": [
|
||||
"/* Overwriting nav style */\nheader {\n\tbox-shadow: none;\n\tmargin-bottom: -70px;\n\tbackground-color: rgba(134, 144, 154, 0.15);\n\t-webkit-backdrop-filter: blur(4px);\n\tbackdrop-filter: blur(4px);\n}\n\n@media (max-width: 1200px) {\n\tinput#nav_toggle_cb:checked~header {\n\t\tbackground-color: var(--navbar-background-color);\n\t}\n}\n\nnav#nav {\n\ta {\n\t\tcolor: white;\n\t}\n}\n\n.nav-logo {\n\tdisplay: none;\n\t&.dark-logo {\n\t\tdisplay: inline;\n\t}\n}\n\n#nav_toggle_btn {\n\tfilter: invert(100%) saturate(0%) brightness(120%);\n}\n\n@media (max-width: 1200px) and (prefers-color-scheme: light) {\n\tnav#nav a {\n\t\tcolor: var(--navbar-link-color);\n\t}\n\n\tinput#nav_toggle_cb:checked~header #nav_head {\n\t\t#nav_toggle_btn {\n\t\t\tfilter: none;\n\t\t}\n\t\t.nav-logo {\n\t\t\tdisplay: inline;\n\t\t}\n\t\t.nav-logo.dark-logo {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n\n#nav .language-selector {\n\t@media (min-width: 1200px) {\n\t\tbackground-image: url(/assets/icons/language.svg) !important;\n\t}\n}"
|
||||
],
|
||||
"names": [],
|
||||
"mappings": "AACA,AAAA,MAAM,AAAC,CACN,UAAU,CAAE,IAAI,CAChB,aAAa,CAAE,KAAK,CACpB,gBAAgB,CAAE,sBAAyB,CAC3C,uBAAuB,CAAE,SAAS,CAClC,eAAe,CAAE,SAAS,CAC1B,AAED,MAAM,oBACL,CAAA,AAAA,KAAK,AAAA,cAAc,CAAC,OAAO,CAAC,MAAM,AAAC,CAClC,gBAAgB,CAAE,8BAA8B,CAChD,CAAA,AAGF,AACC,GADE,AAAA,IAAI,CACN,CAAC,AAAC,CACD,KAAK,CAAE,KAAK,CACZ,AAGF,AAAA,SAAS,AAAC,CACT,OAAO,CAAE,IAAI,CAIb,AALD,AAEC,SAFQ,AAEP,UAAU,AAAC,CACX,OAAO,CAAE,MAAM,CACf,AAGF,AAAA,eAAe,AAAC,CACf,MAAM,CAAE,YAAY,CAAC,YAAY,CAAC,gBAAgB,CAClD,AAED,MAAM,sDACL,CAAA,AAAA,GAAG,AAAA,IAAI,CAAC,CAAC,AAAC,CACT,KAAK,CAAE,wBAAwB,CAC/B,AAED,AACC,KADI,AAAA,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,SAAS,CAC3C,eAAe,AAAC,CACf,MAAM,CAAE,IAAI,CACZ,AAHF,AAIC,KAJI,AAAA,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,SAAS,CAI3C,SAAS,AAAC,CACT,OAAO,CAAE,MAAM,CACf,AANF,AAOC,KAPI,AAAA,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,SAAS,CAO3C,SAAS,AAAA,UAAU,AAAC,CACnB,OAAO,CAAE,IAAI,CACb,CAXD,AAgBD,MAAM,oBADP,CAAA,AAAA,IAAI,CAAC,kBAAkB,AAAC,CAEtB,gBAAgB,CAAE,+BAA+B,CAAC,UAAU,CAE7D,CAAA"
|
||||
}
|
||||
{"version":3,"sourceRoot":"","sources":["transparent-nav.scss"],"names":[],"mappings":"AACA,OACC,gBACA,oBACA,uCACA,kCACA,0BAGD,0BACC,mCACC,iDAKD,UACC,WAIF,UACC,aACA,oBACC,eAIF,gBACC,kDAGD,2DACC,UACC,+BAIA,6DACC,YAED,uDACC,eAED,iEACC,cAMF,0BADD,wBAEE","sourcesContent":["/* Overwriting nav style */\nheader {\n\tbox-shadow: none;\n\tmargin-bottom: -70px;\n\tbackground-color: rgba(134, 144, 154, 0.15);\n\t-webkit-backdrop-filter: blur(4px);\n\tbackdrop-filter: blur(4px);\n}\n\n@media (max-width: 1200px) {\n\tinput#nav_toggle_cb:checked~header {\n\t\tbackground-color: var(--navbar-background-color);\n\t}\n}\n\nnav#nav {\n\ta {\n\t\tcolor: white;\n\t}\n}\n\n.nav-logo {\n\tdisplay: none;\n\t&.dark-logo {\n\t\tdisplay: inline;\n\t}\n}\n\n#nav_toggle_btn {\n\tfilter: invert(100%) saturate(0%) brightness(120%);\n}\n\n@media (max-width: 1200px) and (prefers-color-scheme: light) {\n\tnav#nav a {\n\t\tcolor: var(--navbar-link-color);\n\t}\n\n\tinput#nav_toggle_cb:checked~header #nav_head {\n\t\t#nav_toggle_btn {\n\t\t\tfilter: none;\n\t\t}\n\t\t.nav-logo {\n\t\t\tdisplay: inline;\n\t\t}\n\t\t.nav-logo.dark-logo {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n\n#nav .language-selector {\n\t@media (min-width: 1200px) {\n\t\tbackground-image: url(/assets/icons/language.svg) !important;\n\t}\n}"],"file":"transparent-nav.css"}
|
||||
2
atom.xml
2
atom.xml
@@ -1,4 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom"><title>Godot Engine Official</title><link href="https://godotengine.org/atom.xml" rel="self"/><link href="https://godotengine.org/"/><updated>2025-06-11T11:35:33+00:00</updated><id>https://godotengine.org/</id><entry><title>Upcoming (serious) Web performance boost</title><link href="https://godotengine.org/article/upcoming-serious-web-performance-boost/"/><updated>2025-06-05T18:00:00+00:00</updated><id>https://godotengine.org/article/upcoming-serious-web-performance-boost/</id><summary>Compiling the Godot Engine with WASM SIMD support truly is a game changer.</summary><content type="html"><p>Sometimes, just adding a compiler flag can yield significant performance boosts. <a href="https://github.com/godotengine/godot/pull/106319">And that just happened.</a></p>
|
||||
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom"><title>Godot Engine Official</title><link href="https://godotengine.org/atom.xml" rel="self"/><link href="https://godotengine.org/"/><updated>2025-06-12T18:43:25+00:00</updated><id>https://godotengine.org/</id><entry><title>Upcoming (serious) Web performance boost</title><link href="https://godotengine.org/article/upcoming-serious-web-performance-boost/"/><updated>2025-06-05T18:00:00+00:00</updated><id>https://godotengine.org/article/upcoming-serious-web-performance-boost/</id><summary>Compiling the Godot Engine with WASM SIMD support truly is a game changer.</summary><content type="html"><p>Sometimes, just adding a compiler flag can yield significant performance boosts. <a href="https://github.com/godotengine/godot/pull/106319">And that just happened.</a></p>
|
||||
<p><a href="https://caniuse.com/wasm-simd">For about two years now</a>, all major browsers have supported WASM (<a href="https://en.wikipedia.org/wiki/WebAssembly">WebAssembly</a>) SIMD. SIMD stands for <a href="https://en.wikipedia.org/wiki/Single_instruction,_multiple_data">“Single instruction, multiple data”</a> and is a technology that permits CPUs to do some parallel computation, often speeding up the whole program. And that’s exactly why we tried it out recently.</p>
|
||||
<p>We got positive results.</p>
|
||||
<h2 id="the-need-for-performance-on-the-web">The need for performance on the Web</h2>
|
||||
|
||||
@@ -1 +1 @@
|
||||
.main{display:grid;grid-template-columns:1fr 200px;grid-template-areas:"content aside";gap:20px;margin-bottom:60px}@media(max-width:800px){.main{grid-template-columns:1fr;grid-template-areas:"aside" "content"}}.main .content{grid-area:content}.main .content .hidden{display:none}.main .content h2:first-of-type{margin-top:0}.main aside{grid-area:aside}.main .filter-options{margin-bottom:20px;position:-webkit-sticky;position:sticky;top:10px;display:grid}@media(max-width:800px){.main .filter-options{grid-template-columns:1fr 1fr}}.main .filter-options label{margin-right:10px}h1{margin-top:20px}.showcase-cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.showcase-cards h3{font-size:33px;margin-bottom:0}.showcase-cards .no-capsule{aspect-ratio:92/43;background-size:cover;background-position:50%;border-radius:6px;box-shadow:0 5px 10px -3px #00000078;margin-bottom:7px;text-align:center;display:grid;align-content:center}.showcase-cards .no-capsule h3{text-shadow:0 4px 5px #000}a:has(.showcase-card){transition:transform 100ms ease-in-out}a:has(.showcase-card):focus,a:has(.showcase-card):hover{filter:none;transform:translateY(-4px)}a:has(.showcase-card):focus .showcase-card,a:has(.showcase-card):hover .showcase-card{box-shadow:0 10px 18px -3px #00000078}a:has(.showcase-card):focus{outline:2px solid var(--primary-color);outline-offset:4px}.showcase-card{transition:box-shadow 100ms ease-in-out;display:flex;flex-direction:column;background-color:var(--card-background-color);box-shadow:0 5px 10px -3px #00000078;gap:10px;padding:10px;border-radius:8px}.showcase-card .thumbnail{width:100%;display:block;aspect-ratio:79/37;border-radius:4px;background-color:var(--card-background-color);background:linear-gradient(168deg,#9d9d9d 0%,#535353 100%);border:1px solid rgba(0,0,0,.6)}.showcase-card .caption{display:flex;gap:12px;justify-content:space-between}.showcase-card .attribution{display:flex;flex-direction:column;gap:2px}.showcase-card .author,.showcase-card .card-title{font-size:14px;color:var(--base-color-text)}.showcase-card .card-title{font-weight:700}.showcase-card .icons{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:8px}@media(prefers-color-scheme:dark){.showcase-card .icons{filter:invert(100%)}}.showcase-card .icons img{opacity:.8;width:20px;height:20px}
|
||||
.main{display:grid;grid-template-columns:1fr 200px;grid-template-areas:"content aside";gap:20px;margin-bottom:60px}@media(max-width:800px){.main{grid-template-columns:1fr;grid-template-areas:"aside" "content"}}.main .content{grid-area:content}.main .content .hidden{display:none}.main .content h2:first-of-type{margin-top:0}.main aside{grid-area:aside}.main .filter-options{margin-bottom:20px;position:-webkit-sticky;position:sticky;top:10px;display:grid}@media(max-width:800px){.main .filter-options{grid-template-columns:1fr 1fr}}.main .filter-options label{margin-right:10px}h1{margin-top:20px}.showcase-cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.showcase-cards h3{font-size:33px;margin-bottom:0}.showcase-cards .no-capsule{aspect-ratio:92/43;background-size:cover;background-position:50%;border-radius:6px;box-shadow:0 5px 10px -3px rgba(0,0,0,.4705882353);margin-bottom:7px;text-align:center;display:grid;align-content:center}.showcase-cards .no-capsule h3{text-shadow:0 4px 5px #000}a:has(.showcase-card){transition:transform 100ms ease-in-out}a:has(.showcase-card):focus,a:has(.showcase-card):hover{filter:none;transform:translateY(-4px)}a:has(.showcase-card):focus .showcase-card,a:has(.showcase-card):hover .showcase-card{box-shadow:0 10px 18px -3px rgba(0,0,0,.4705882353)}a:has(.showcase-card):focus{outline:2px solid var(--primary-color);outline-offset:4px}.showcase-card{transition:box-shadow 100ms ease-in-out;display:flex;flex-direction:column;background-color:var(--card-background-color);box-shadow:0 5px 10px -3px rgba(0,0,0,.4705882353);gap:10px;padding:10px;border-radius:8px}.showcase-card .thumbnail{width:100%;display:block;aspect-ratio:79/37;border-radius:4px;background-color:var(--card-background-color);background:linear-gradient(168deg,#9d9d9d 0%,#535353 100%);border:1px solid rgba(0,0,0,.6)}.showcase-card .caption{display:flex;gap:12px;justify-content:space-between}.showcase-card .attribution{display:flex;flex-direction:column;gap:2px}.showcase-card .author,.showcase-card .card-title{font-size:14px;color:var(--base-color-text)}.showcase-card .card-title{font-weight:700}.showcase-card .icons{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:8px}@media(prefers-color-scheme:dark){.showcase-card .icons{filter:invert(100%)}}.showcase-card .icons img{opacity:.8;width:20px;height:20px}
|
||||
@@ -1,12 +1 @@
|
||||
{
|
||||
"version": 3,
|
||||
"file": "showcase.css",
|
||||
"sources": [
|
||||
"showcase.scss"
|
||||
],
|
||||
"sourcesContent": [
|
||||
".main {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 200px;\n\tgrid-template-areas: \"content aside\";\n\tgap: 20px;\n\tmargin-bottom: 60px;\n\t@media (max-width: 800px) {\n\t\tgrid-template-columns: 1fr;\n\t\tgrid-template-areas: \"aside\"\n\t\t\"content\";\n\t}\n\t.content {\n\t\tgrid-area: content;\n\t\t.hidden {\n\t\t\tdisplay: none;\n\t\t}\n\t\t// select first instance of h2 title and remove the margin top\n\t\th2:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\taside {\n\t\tgrid-area: aside;\n\t}\n\t.filter-options {\n\t\tmargin-bottom: 20px;\n\t\t// sticky\n\t\tposition: -webkit-sticky;\n\t\tposition: sticky;\n\t\ttop: 10px;\n\t\tdisplay: grid;\n\t\t@media (max-width: 800px) {\n\t\t\tgrid-template-columns: 1fr 1fr;\n\t\t}\n\t\tlabel {\n\t\t\tmargin-right: 10px;\n\t\t}\n\t}\n}\n\nh1 {\n\tmargin-top: 20px;\n}\n\n.showcase-cards {\n\tgrid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n\th3 {\n\t\tfont-size: 33px;\n\t\tmargin-bottom: 0px;\n\t}\n\n\t.no-capsule {\n\t\taspect-ratio: 92 / 43;\n\t\tbackground-size: cover;\n\t\tbackground-position: center;\n\t\tborder-radius: 6px;\n\t\tbox-shadow: 0 5px 10px -3px #00000078;\n\t\tmargin-bottom: 7px;\n\t\ttext-align: center;\n\t\tdisplay: grid;\n\t\talign-content: center;\n\t\th3 {\n\t\t\ttext-shadow: 0 4px 5px black;\n\t\t}\n\t}\n}\n\na:has(.showcase-card) {\n\ttransition: transform 100ms ease-in-out;\n\n\t&:focus,\n\t&:hover {\n\t\tfilter: none;\n\t\ttransform: translateY(-4px);\n\n\t\t.showcase-card {\n\t\t\tbox-shadow: 0 10px 18px -3px #00000078;\n\t\t}\n\t}\n\n\t&:focus {\n\t\toutline: 2px solid var(--primary-color);\n\t\toutline-offset: 4px;\n\t}\n}\n\n.showcase-card {\n\ttransition: box-shadow 100ms ease-in-out;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground-color: var(--card-background-color);\n\tbox-shadow: 0 5px 10px -3px #00000078;\n\tgap: 10px;\n\tpadding: 10px;\n\tborder-radius: 8px;\n\n\t.thumbnail {\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t\taspect-ratio: 79 / 37;\n\t\tborder-radius: 4px;\n\t\tbackground-color: var(--card-background-color);\n\t\tbackground: linear-gradient(168deg, rgb(157, 157, 157) 0%, rgb(83, 83, 83) 100%);\n\t\tborder: 1px solid rgba(0, 0, 0, 0.6);\n\t}\n\n\t.caption {\n\t\tdisplay: flex;\n\t\tgap: 12px;\n\t\tjustify-content: space-between;\n\t}\n\n\t.attribution {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 2px;\n\t}\n\n\t.author,\n\t.card-title {\n\t\tfont-size: 14px;\n\t\tcolor: var(--base-color-text);\n\t}\n\n\t.card-title {\n\t\tfont-weight: bold;\n\t}\n\n\t.icons {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: flex-end;\n\t\tgap: 8px;\n\n\t\t@media (prefers-color-scheme: dark) {\n\t\t\tfilter: invert(100%);\n\t\t}\n\n\t\timg {\n\t\t\topacity: 0.8;\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t}\n\t}\n}\n"
|
||||
],
|
||||
"names": [],
|
||||
"mappings": "AAAA,AAAA,KAAK,AAAC,CACL,OAAO,CAAE,IAAI,CACb,qBAAqB,CAAE,SAAS,CAChC,mBAAmB,CAAE,eAAe,CACpC,GAAG,CAAE,IAAI,CACT,aAAa,CAAE,IAAI,CAiCnB,AAhCA,MAAM,mBANP,CAAA,AAAA,KAAK,AAAC,CAOJ,qBAAqB,CAAE,GAAG,CAC1B,mBAAmB,CAAE,iBACZ,CA6BV,CAAA,AAtCD,AAWC,KAXI,CAWJ,QAAQ,AAAC,CACR,SAAS,CAAE,OAAO,CAQlB,AApBF,AAaE,KAbG,CAWJ,QAAQ,CAEP,OAAO,AAAC,CACP,OAAO,CAAE,IAAI,CACb,AAfH,AAiBE,KAjBG,CAWJ,QAAQ,CAMP,EAAE,CAAC,aAAa,AAAC,CAChB,UAAU,CAAE,CAAC,CACb,AAnBH,AAqBC,KArBI,CAqBJ,KAAK,AAAC,CACL,SAAS,CAAE,KAAK,CAChB,AAvBF,AAwBC,KAxBI,CAwBJ,eAAe,AAAC,CACf,aAAa,CAAE,IAAI,CAEnB,QAAQ,CAAE,cAAc,CACxB,QAAQ,CAAE,MAAM,CAChB,GAAG,CAAE,IAAI,CACT,OAAO,CAAE,IAAI,CAOb,AANA,MAAM,mBAPP,CAxBD,AAwBC,KAxBI,CAwBJ,eAAe,AAAC,CAQd,qBAAqB,CAAE,OAAO,CAK/B,CAAA,AArCF,AAkCE,KAlCG,CAwBJ,eAAe,CAUd,KAAK,AAAC,CACL,YAAY,CAAE,IAAI,CAClB,AAIH,AAAA,EAAE,AAAC,CACF,UAAU,CAAE,IAAI,CAChB,AAED,AAAA,eAAe,AAAC,CACf,qBAAqB,CAAE,qCAAqC,CAoB5D,AArBD,AAEC,eAFc,CAEd,EAAE,AAAC,CACF,SAAS,CAAE,IAAI,CACf,aAAa,CAAE,GAAG,CAClB,AALF,AAOC,eAPc,CAOd,WAAW,AAAC,CACX,YAAY,CAAE,OAAO,CACrB,eAAe,CAAE,KAAK,CACtB,mBAAmB,CAAE,MAAM,CAC3B,aAAa,CAAE,GAAG,CAClB,UAAU,CAAE,yBAAyB,CACrC,aAAa,CAAE,GAAG,CAClB,UAAU,CAAE,MAAM,CAClB,OAAO,CAAE,IAAI,CACb,aAAa,CAAE,MAAM,CAIrB,AApBF,AAiBE,eAjBa,CAOd,WAAW,CAUV,EAAE,AAAC,CACF,WAAW,CAAE,eAAe,CAC5B,AAIH,AAAA,CAAC,CAAC,GAAI,CAAA,cAAc,CAAE,CACrB,UAAU,CAAE,2BAA2B,CAgBvC,AAjBD,AAGC,CAHA,CAAC,GAAI,CAAA,cAAc,EAGjB,KAAK,CAHR,CAAC,CAAC,GAAI,CAAA,cAAc,EAIjB,KAAK,AAAC,CACP,MAAM,CAAE,IAAI,CACZ,SAAS,CAAE,gBAAgB,CAK3B,AAXF,AAQE,CARD,CAAC,GAAI,CAAA,cAAc,EAGjB,KAAK,CAKN,cAAc,CARhB,CAAC,CAAC,GAAI,CAAA,cAAc,EAIjB,KAAK,CAIN,cAAc,AAAC,CACd,UAAU,CAAE,0BAA0B,CACtC,AAVH,AAaC,CAbA,CAAC,GAAI,CAAA,cAAc,EAajB,KAAK,AAAC,CACP,OAAO,CAAE,GAAG,CAAC,KAAK,CAAC,oBAAoB,CACvC,cAAc,CAAE,GAAG,CACnB,AAGF,AAAA,cAAc,AAAC,CACd,UAAU,CAAE,4BAA4B,CACxC,OAAO,CAAE,IAAI,CACb,cAAc,CAAE,MAAM,CACtB,gBAAgB,CAAE,4BAA4B,CAC9C,UAAU,CAAE,yBAAyB,CACrC,GAAG,CAAE,IAAI,CACT,OAAO,CAAE,IAAI,CACb,aAAa,CAAE,GAAG,CAmDlB,AA3DD,AAUC,cAVa,CAUb,UAAU,AAAC,CACV,KAAK,CAAE,IAAI,CACX,OAAO,CAAE,KAAK,CACd,YAAY,CAAE,OAAO,CACrB,aAAa,CAAE,GAAG,CAClB,gBAAgB,CAAE,4BAA4B,CAC9C,UAAU,CAAE,iDAAoE,CAChF,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,eAAkB,CACpC,AAlBF,AAoBC,cApBa,CAoBb,QAAQ,AAAC,CACR,OAAO,CAAE,IAAI,CACb,GAAG,CAAE,IAAI,CACT,eAAe,CAAE,aAAa,CAC9B,AAxBF,AA0BC,cA1Ba,CA0Bb,YAAY,AAAC,CACZ,OAAO,CAAE,IAAI,CACb,cAAc,CAAE,MAAM,CACtB,GAAG,CAAE,GAAG,CACR,AA9BF,AAgCC,cAhCa,CAgCb,OAAO,CAhCR,cAAc,CAiCb,WAAW,AAAC,CACX,SAAS,CAAE,IAAI,CACf,KAAK,CAAE,sBAAsB,CAC7B,AApCF,AAsCC,cAtCa,CAsCb,WAAW,AAAC,CACX,WAAW,CAAE,IAAI,CACjB,AAxCF,AA0CC,cA1Ca,CA0Cb,MAAM,AAAC,CACN,OAAO,CAAE,IAAI,CACb,cAAc,CAAE,GAAG,CACnB,WAAW,CAAE,MAAM,CACnB,eAAe,CAAE,QAAQ,CACzB,GAAG,CAAE,GAAG,CAWR,AATA,MAAM,6BAPP,CA1CD,AA0CC,cA1Ca,CA0Cb,MAAM,AAAC,CAQL,MAAM,CAAE,YAAY,CAQrB,CAAA,AA1DF,AAqDE,cArDY,CA0Cb,MAAM,CAWL,GAAG,AAAC,CACH,OAAO,CAAE,GAAG,CACZ,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ"
|
||||
}
|
||||
{"version":3,"sourceRoot":"","sources":["showcase.scss"],"names":[],"mappings":"AAAA,MACC,aACA,gCACA,oCACA,SACA,mBACA,yBAND,MAOE,0BACA,uCAGD,eACC,kBACA,uBACC,aAGD,gCACC,aAGF,YACC,gBAED,sBACC,mBAEA,wBACA,gBACA,SACA,aACA,yBAPD,sBAQE,+BAED,4BACC,kBAKH,GACC,gBAGD,gBACC,4DACA,mBACC,eACA,kBAGD,4BACC,mBACA,sBACA,2BACA,kBACA,mDACA,kBACA,kBACA,aACA,qBACA,+BACC,2BAKH,sBACC,uCAEA,wDAEC,YACA,2BAEA,sFACC,oDAIF,4BACC,uCACA,mBAIF,eACC,wCACA,aACA,sBACA,8CACA,mDACA,SACA,aACA,kBAEA,0BACC,WACA,cACA,mBACA,kBACA,8CACA,gFACA,gCAGD,wBACC,aACA,SACA,8BAGD,4BACC,aACA,sBACA,QAGD,kDAEC,eACA,6BAGD,2BACC,iBAGD,sBACC,aACA,mBACA,mBACA,yBACA,QAEA,mCAPD,sBAQE,qBAGD,0BACC,WACA,WACA","sourcesContent":[".main {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 200px;\n\tgrid-template-areas: \"content aside\";\n\tgap: 20px;\n\tmargin-bottom: 60px;\n\t@media (max-width: 800px) {\n\t\tgrid-template-columns: 1fr;\n\t\tgrid-template-areas: \"aside\"\n\t\t\"content\";\n\t}\n\t.content {\n\t\tgrid-area: content;\n\t\t.hidden {\n\t\t\tdisplay: none;\n\t\t}\n\t\t// select first instance of h2 title and remove the margin top\n\t\th2:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\taside {\n\t\tgrid-area: aside;\n\t}\n\t.filter-options {\n\t\tmargin-bottom: 20px;\n\t\t// sticky\n\t\tposition: -webkit-sticky;\n\t\tposition: sticky;\n\t\ttop: 10px;\n\t\tdisplay: grid;\n\t\t@media (max-width: 800px) {\n\t\t\tgrid-template-columns: 1fr 1fr;\n\t\t}\n\t\tlabel {\n\t\t\tmargin-right: 10px;\n\t\t}\n\t}\n}\n\nh1 {\n\tmargin-top: 20px;\n}\n\n.showcase-cards {\n\tgrid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n\th3 {\n\t\tfont-size: 33px;\n\t\tmargin-bottom: 0px;\n\t}\n\n\t.no-capsule {\n\t\taspect-ratio: 92 / 43;\n\t\tbackground-size: cover;\n\t\tbackground-position: center;\n\t\tborder-radius: 6px;\n\t\tbox-shadow: 0 5px 10px -3px #00000078;\n\t\tmargin-bottom: 7px;\n\t\ttext-align: center;\n\t\tdisplay: grid;\n\t\talign-content: center;\n\t\th3 {\n\t\t\ttext-shadow: 0 4px 5px black;\n\t\t}\n\t}\n}\n\na:has(.showcase-card) {\n\ttransition: transform 100ms ease-in-out;\n\n\t&:focus,\n\t&:hover {\n\t\tfilter: none;\n\t\ttransform: translateY(-4px);\n\n\t\t.showcase-card {\n\t\t\tbox-shadow: 0 10px 18px -3px #00000078;\n\t\t}\n\t}\n\n\t&:focus {\n\t\toutline: 2px solid var(--primary-color);\n\t\toutline-offset: 4px;\n\t}\n}\n\n.showcase-card {\n\ttransition: box-shadow 100ms ease-in-out;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground-color: var(--card-background-color);\n\tbox-shadow: 0 5px 10px -3px #00000078;\n\tgap: 10px;\n\tpadding: 10px;\n\tborder-radius: 8px;\n\n\t.thumbnail {\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t\taspect-ratio: 79 / 37;\n\t\tborder-radius: 4px;\n\t\tbackground-color: var(--card-background-color);\n\t\tbackground: linear-gradient(168deg, rgb(157, 157, 157) 0%, rgb(83, 83, 83) 100%);\n\t\tborder: 1px solid rgba(0, 0, 0, 0.6);\n\t}\n\n\t.caption {\n\t\tdisplay: flex;\n\t\tgap: 12px;\n\t\tjustify-content: space-between;\n\t}\n\n\t.attribution {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 2px;\n\t}\n\n\t.author,\n\t.card-title {\n\t\tfont-size: 14px;\n\t\tcolor: var(--base-color-text);\n\t}\n\n\t.card-title {\n\t\tfont-weight: bold;\n\t}\n\n\t.icons {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: flex-end;\n\t\tgap: 8px;\n\n\t\t@media (prefers-color-scheme: dark) {\n\t\t\tfilter: invert(100%);\n\t\t}\n\n\t\timg {\n\t\t\topacity: 0.8;\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t}\n\t}\n}\n"],"file":"showcase.css"}
|
||||
Reference in New Issue
Block a user