From 88f80c38cce3d6468d8cc5d410c794d9bf62f0a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lera=20Elvo=C3=A9?= Date: Thu, 4 Dec 2025 06:24:24 +0300 Subject: [PATCH] make babycode guide use generic class names --- app/templates/guides/babycode.html | 38 +++++++++++------------ data/static/css/style.css | 4 +-- data/static/css/theme-otomotone.css | 4 +-- data/static/css/theme-peachy.css | 4 +-- sass/_default.scss | 48 ++++++++++++++--------------- sass/otomotone.scss | 4 +-- 6 files changed, 51 insertions(+), 51 deletions(-) diff --git a/app/templates/guides/babycode.html b/app/templates/guides/babycode.html index c89a22c..5ae0f25 100644 --- a/app/templates/guides/babycode.html +++ b/app/templates/guides/babycode.html @@ -4,46 +4,46 @@

Babycode guide

-
+
{% set sections %} -
+

What is babycode?

You may be familiar with BBCode, a loosely related family of markup languages popular on forums. Babycode is another, simplified, dialect of those languages. It is a way of formatting text by enclosing parts of it in special tags.

A tag is a short name enclosed in square brackets. Tags can be opening tags, like [b] or closing tags, like [/b]. Anything inserted between matching opening and closing tags is known as the tag's content.

Some tags can provide more specific instructions using an attribute. An attribute is added to the opening tag with an equals sign (=). This allows you to specify details like a particular color or a link's address.

-
+

Text formatting tags

-
    +
    • To make some text bold, enclose it in [b][/b]:
      [b]Hello World[/b]
      Will become
      Hello World
    -
      +
      • To italicize text, enclose it in [i][/i]:
        [i]Hello World[/i]
        Will become
        Hello World
      -
        +
        • To make some text strikethrough, enclose it in [s][/s]:
          [s]Hello World[/s]
          Will become
          Hello World
        -
          +
          • To underline some text, enclose it in [u][/u]:
            [u]Hello World[/u]
            Will become
            Hello World
          -
            +
            • To make some text {{ "[big]big[/big]" | babycode | safe }}, enclose it in [big][/big]:
              [big]Hello World[/big]
              Will become
              @@ -54,7 +54,7 @@ {{ "[small]Hello World[/small]" | babycode | safe }}
            -
              +
              • You can change the text color by using [color][/color]:
                [color=red]Red text[/color]
                [color=white]White text[/color]
                @@ -65,7 +65,7 @@ {{ "[color=#3b08f0]Blueish text[/color]" | babycode | safe }}
              -
                +
                • You can center text by enclosing it in [center][/center]:
                  [center]Hello World[/center]
                  Will become
                  @@ -79,7 +79,7 @@ Note: the center and right tags will break the paragraph. See Paragraph rules for more details.
-
+

Emoji

There are a few emoji in the style of old forum emotes:

@@ -96,7 +96,7 @@

Special thanks to the Forumoji project and its contributors for these graphics.

-
+

Paragraph rules

Line breaks in babycode work like Markdown: to start a new paragraph, use two line breaks:

{{ '[code]paragraph 1\n\nparagraph 2[/code]' | babycode | safe }} @@ -116,12 +116,12 @@
  • [quote].
    • -
    +

    Loose links (starting with http:// or https://) will automatically get converted to clickable links. To add a label to a link, use
    [url=https://example.com]Link label[/url]:
    Link label

    -
    +

    Attaching an image

    To add an image to your post, use the [img] tag:
    [img=https://forum.poto.cafe/avatars/default.webp]the Python logo with a cowboy hat[/img] @@ -131,7 +131,7 @@

    Images will always break up a paragraph and will get scaled down to a maximum of 400px. However, consecutive image tags will try to stay in one line, wrapping if necessary. Break the paragraph if you wish to keep images on their own paragraph.

    Multiple images attached to a post can be clicked to open a dialog to view them.

    -
    +

    Adding code blocks

    {% set code = 'func _ready() -> void:\n\tprint("hello world!")' %}

    There are two kinds of code blocks recognized by babycode: inline and block. Inline code blocks do not break a paragraph. They can be added with [code]your code here[/code]. As long as there are no line breaks inside the code block, it is considered inline. If there are any, it will produce this:

    @@ -142,12 +142,12 @@

    Inline code tags look like this: {{ '[code]Inline code[/code]' | babycode | safe }}

    Babycodes are not parsed inside code blocks.

    -
    +

    Quoting

    Text enclosed within [quote][/quote] will look like a quote:

    A man provided with paper, pencil, and rubber, and subject to strict discipline, is in effect a universal machine.
    -
    +

    Lists

    {% set list = '[ul]\nitem 1\n\nitem 2\n\nitem 3 \nstill item 3 (break line without inserting a new item by using two spaces at the end of a line)\n[/ul]' %}

    There are two kinds of lists, ordered (1, 2, 3, ...) and unordered (bullet points). Ordered lists are made with [ol][/ol] tags, and unordered with [ul][/ul]. Every new paragraph according to the usual paragraph rules will create a new list item. For example:

    @@ -155,7 +155,7 @@ Will produce the following list: {{ list | babycode | safe }}
    -
    +

    Spoilers

    {% set spoiler = "[spoiler=Major Metal Gear Spoilers]Snake dies[/spoiler]" %}

    You can make a section collapsible by using the [spoiler] tag:

    @@ -164,7 +164,7 @@ {{ spoiler | babycode | safe }} All other tags are supported inside spoilers.
    -
    +

    Mentioning users

    You can mention users by their username (not their display name) by using @username. A user's username is always shown below their avatar and display name on their posts and their user page.

    A mention will show up on your post as a clickable box with the user's display name if they have one set or their username with an @ symbol if they don't:

    diff --git a/data/static/css/style.css b/data/static/css/style.css index dfb1bf0..0dd1278 100644 --- a/data/static/css/style.css +++ b/data/static/css/style.css @@ -984,14 +984,14 @@ textarea { margin-right: 25%; } -.babycode-guide-section { +.guide-section { background-color: #c1ceb1; padding: 5px 20px; border: 1px solid black; padding-right: 25%; } -.babycode-guide-container { +.guide-container { display: grid; grid-template-columns: 1.5fr 300px; grid-template-rows: 1fr; diff --git a/data/static/css/theme-otomotone.css b/data/static/css/theme-otomotone.css index 2250b9e..3ada347 100644 --- a/data/static/css/theme-otomotone.css +++ b/data/static/css/theme-otomotone.css @@ -984,14 +984,14 @@ textarea { margin-right: 25%; } -.babycode-guide-section { +.guide-section { background-color: #231c23; padding: 5px 20px; border: 1px solid black; padding-right: 25%; } -.babycode-guide-container { +.guide-container { display: grid; grid-template-columns: 1.5fr 300px; grid-template-rows: 1fr; diff --git a/data/static/css/theme-peachy.css b/data/static/css/theme-peachy.css index 46fef4a..579a1ea 100644 --- a/data/static/css/theme-peachy.css +++ b/data/static/css/theme-peachy.css @@ -984,14 +984,14 @@ textarea { margin-right: 25%; } -.babycode-guide-section { +.guide-section { background-color: #f27a5a; padding: 3px 12px; border: 1px solid black; padding-right: 25%; } -.babycode-guide-container { +.guide-container { display: grid; grid-template-columns: 1.5fr 300px; grid-template-rows: 1fr; diff --git a/sass/_default.scss b/sass/_default.scss index c3ba7f1..cc6b772 100644 --- a/sass/_default.scss +++ b/sass/_default.scss @@ -861,24 +861,24 @@ $thread_info_post_preview_margin_right: $post_inner_padding_right !default; margin-right: $thread_info_post_preview_margin_right; } -$babycode_guide_section_background: $ACCENT_COLOR !default; -$babycode_guide_section_padding: $SMALL_PADDING $BIG_PADDING !default; -$babycode_guide_section_border: $DEFAULT_BORDER !default; -$babycode_guide_section_padding_right: $post_inner_padding_right !default; -.babycode-guide-section { - background-color: $babycode_guide_section_background; - padding: $babycode_guide_section_padding; - border: $babycode_guide_section_border; - padding-right: $babycode_guide_section_padding_right; +$guide_section_background: $ACCENT_COLOR !default; +$guide_section_padding: $SMALL_PADDING $BIG_PADDING !default; +$guide_section_border: $DEFAULT_BORDER !default; +$guide_section_padding_right: $post_inner_padding_right !default; +.guide-section { + background-color: $guide_section_background; + padding: $guide_section_padding; + border: $guide_section_border; + padding-right: $guide_section_padding_right; } -$babycode_guide_toc_width: 300px !default; -$babycode_guide_column_guide: $ZERO_PADDING !default; -.babycode-guide-container { +$guide_toc_width: 300px !default; +$guide_column_guide: $ZERO_PADDING !default; +.guide-container { display: grid; - grid-template-columns: 1.5fr $babycode_guide_toc_width; + grid-template-columns: 1.5fr $guide_toc_width; grid-template-rows: 1fr; - gap: $babycode_guide_column_guide; + gap: $guide_column_guide; grid-auto-flow: row; grid-template-areas: "guide-topics guide-toc"; @@ -889,21 +889,21 @@ $babycode_guide_column_guide: $ZERO_PADDING !default; overflow: hidden; } -$babycode_guide_toc_padding: $MEDIUM_PADDING !default; -$babycode_guide_toc_background: $BUTTON_COLOR !default; -$babycode_guide_toc_border_radius: 8px !default; -$babycode_guide_toc_border: $DEFAULT_BORDER !default; +$guide_toc_padding: $MEDIUM_PADDING !default; +$guide_toc_background: $BUTTON_COLOR !default; +$guide_toc_border_radius: 8px !default; +$guide_toc_border: $DEFAULT_BORDER !default; .guide-toc { grid-area: guide-toc; position: sticky; top: 100px; align-self: start; - padding: $babycode_guide_toc_padding; - border-bottom-right-radius: $babycode_guide_toc_border_radius; - background-color: $babycode_guide_toc_background; - border-right: $babycode_guide_toc_border; - border-top: $babycode_guide_toc_border; - border-bottom: $babycode_guide_toc_border; + padding: $guide_toc_padding; + border-bottom-right-radius: $guide_toc_border_radius; + background-color: $guide_toc_background; + border-right: $guide_toc_border; + border-top: $guide_toc_border; + border-bottom: $guide_toc_border; } .emoji-table tr td { diff --git a/sass/otomotone.scss b/sass/otomotone.scss index 2b54145..e5edbb1 100644 --- a/sass/otomotone.scss +++ b/sass/otomotone.scss @@ -59,8 +59,8 @@ $br: 8px; $post_accordion_content_background: #2d212d, - $babycode_guide_toc_background: #3c233c, - $babycode_guide_section_background: $dark_accent, + $guide_toc_background: #3c233c, + $guide_section_background: $dark_accent, $text_input_background: #371e37, $text_input_background_focus: #514151,