Input Template

&font setup: make sure you copy these values into the fields further down\group&[div=display:none;][font=&Title Font\text\Cinzel Decorative&]font[/font][font=&Header Font\text\Cinzel&]font[/font][font=&Body Font\text\Raleway&]font[/font]Code by Alteras[/div]&\end&&content\group&[border=unset; padding: unset; --primary-color: &primary color\text\#f7f0e5&; --secondary-color: &secondary color\ text\black&; background-color:&background color\text\#902525&; --image-width: &image width\number\1000&; --image-height: &image height\number\1251&; --image-inset-width: &image inset width\number\751&; --image-inset-height: &image inset height\number\990&; --image-right-margin: &image inset right margin\number\57&; padding: 20px; padding-bottom: 50px; box-sizing: border-box;][border=unset; padding: unset; width: 100%; height: auto; max-width: 1000px; display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto; margin-top: 15%; margin-top: clamp(80px, 15%, 150px);][border=unset;padding:unset; width: 0; height: 0; margin-left: 5%; margin-left: max(5%, 50px)][/border]&Image\group&[border=unset; padding: unset; width: 100%; min-width: 300px; flex: 1; pointer-events: none; font-size: 0; position: relative; margin: 5px 10px; aspect-ratio: var(--image-inset-width) / var(--image-inset-height)][border=unset; padding: 0; width: calc( var(--image-width)/var(--image-inset-width) * 100%); height: calc(var(--image-height)/var(--image-inset-height) * 100%); position: absolute; bottom: 0; right: calc(-1 * 100% * var(--image-right-margin)/var(--image-width) * var(--image-width)/var(--image-inset-width)); z-index: 2;][img]&image url\text&[/img][/border][/border][border=unset; padding: unset; position: relative; width: 100%; height: auto; min-width: 300px; flex: 1; min-height: 525px; font-size: 0; margin: 5px 10px;aspect-ratio: var(--image-inset-width) / var(--image-inset-height)]&\end&&Title\group&[border=unset; padding: unset; position: absolute; right: -10%; right: calc(-1 * clamp( 1rem, 5vw, 10%)); top: 0%; transform: translateY(calc(-1 * 1/2 * 100%)); height: auto; width: auto; max-width: 110%; text-align: right; font-size: 72pt; font-size: clamp(70px, 5vmax, 96px); line-height: .75; font-family: '&Title Font\text\Cinzel Decorative&'; color:var(--primary-color); z-index: 2;][border=unset; padding: unset;]&Title\text&[/border][border=unset; padding: unset; font-size: .4em;]&Subtitle\text&[/border][/border]&\end&[border=unset; padding: unset; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 10px double var(--secondary-color); font-size: initial; font-family: '&Body Font\text\Raleway&'; color:var(--primary-color); line-height: 1.5][border=unset; padding: 5px; position: relative; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; mask-image: linear-gradient(to bottom, transparent 0 5%, rgba(0,0,0,1) 10% 95%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0 5%, rgba(0,0,0,1) 10% 95%, transparent 100%);][border=unset; padding: 0; height: 100%; width: 100%; box-sizing: content-box; padding-right: 100px; overflow-Y: scroll;][border=unset; padding: unset; height: 7.5%; width: 0;][/border]&Main Content Section\group\repeat&[border=unset; padding: unset; font-family: '&Header Font\text\Cinzel&'; font-size: 2em; border-bottom: 2px solid var(--secondary-color); line-height: 1;]&Header\text\Header&[/border]&Section Body\content&
&\end&[border=unset; padding: unset; height: 5%; width: 0;][/border][/border][/border][/border][/border][/border][/border]&\end&

Debug Mode

[
  "",
  {
    "type": "group",
    "description": "font setup: make sure you copy these values into the fields further down",
    "markerStart": {
      "type": "group",
      "description": "font setup: make sure you copy these values into the fields further down",
      "original": "&font setup: make sure you copy these values into the fields further down\\group&",
      "repeat": false,
      "indices": [
        0,
        79
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=display:none;][font=",
      {
        "type": "text",
        "description": "Title Font",
        "marker": {
          "type": "text",
          "description": "Title Font",
          "defaultValue": "Cinzel Decorative",
          "original": "&Title Font\\text\\Cinzel Decorative&",
          "indices": [
            105,
            139
          ]
        },
        "value": "Cinzel Decorative"
      },
      "]font[/font][font=",
      {
        "type": "text",
        "description": "Header Font",
        "marker": {
          "type": "text",
          "description": "Header Font",
          "defaultValue": "Cinzel",
          "original": "&Header Font\\text\\Cinzel&",
          "indices": [
            158,
            182
          ]
        },
        "value": "Cinzel"
      },
      "]font[/font][font=",
      {
        "type": "text",
        "description": "Body Font",
        "marker": {
          "type": "text",
          "description": "Body Font",
          "defaultValue": "Raleway",
          "original": "&Body Font\\text\\Raleway&",
          "indices": [
            201,
            224
          ]
        },
        "value": "Raleway"
      },
      "]font[/font]Code by Alteras[/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "",
      "original": "&\\end&",
      "indices": [
        258,
        263
      ]
    }
  },
  "",
  {
    "type": "group",
    "description": "content",
    "markerStart": {
      "type": "group",
      "description": "content",
      "original": "&content\\group&",
      "repeat": false,
      "indices": [
        264,
        278
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[border=unset; padding: unset; --primary-color: ",
      {
        "type": "text",
        "description": "primary color",
        "marker": {
          "type": "text",
          "description": "primary color",
          "defaultValue": "#f7f0e5",
          "original": "&primary color\\text\\#f7f0e5&",
          "indices": [
            327,
            354
          ]
        },
        "value": "#f7f0e5"
      },
      "; --secondary-color: ",
      {
        "type": "text",
        "description": "secondary color",
        "marker": {
          "type": "text",
          "description": "secondary color",
          "defaultValue": "black",
          "original": "&secondary color\\ text\\black&",
          "indices": [
            376,
            404
          ]
        },
        "value": "black"
      },
      "; background-color:",
      {
        "type": "text",
        "description": "background color",
        "marker": {
          "type": "text",
          "description": "background color",
          "defaultValue": "#902525",
          "original": "&background color\\text\\#902525&",
          "indices": [
            424,
            454
          ]
        },
        "value": "#902525"
      },
      "; --image-width: ",
      {
        "type": "number",
        "description": "image width",
        "marker": {
          "type": "number",
          "description": "image width",
          "defaultValue": 1000,
          "min": null,
          "max": null,
          "original": "&image width\\number\\1000&",
          "indices": [
            472,
            496
          ]
        },
        "value": 1000
      },
      "; --image-height: ",
      {
        "type": "number",
        "description": "image height",
        "marker": {
          "type": "number",
          "description": "image height",
          "defaultValue": 1251,
          "min": null,
          "max": null,
          "original": "&image height\\number\\1251&",
          "indices": [
            515,
            540
          ]
        },
        "value": 1251
      },
      "; --image-inset-width: ",
      {
        "type": "number",
        "description": "image inset width",
        "marker": {
          "type": "number",
          "description": "image inset width",
          "defaultValue": 751,
          "min": null,
          "max": null,
          "original": "&image inset width\\number\\751&",
          "indices": [
            564,
            593
          ]
        },
        "value": 751
      },
      "; --image-inset-height: ",
      {
        "type": "number",
        "description": "image inset height",
        "marker": {
          "type": "number",
          "description": "image inset height",
          "defaultValue": 990,
          "min": null,
          "max": null,
          "original": "&image inset height\\number\\990&",
          "indices": [
            618,
            648
          ]
        },
        "value": 990
      },
      "; --image-right-margin: ",
      {
        "type": "number",
        "description": "image inset right margin",
        "marker": {
          "type": "number",
          "description": "image inset right margin",
          "defaultValue": 57,
          "min": null,
          "max": null,
          "original": "&image inset right margin\\number\\57&",
          "indices": [
            673,
            708
          ]
        },
        "value": 57
      },
      "; padding: 20px; padding-bottom: 50px; box-sizing: border-box;][border=unset; padding: unset; width: 100%; height: auto; max-width: 1000px; display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto; margin-top: 15%; margin-top: clamp(80px, 15%, 150px);][border=unset;padding:unset; width: 0; height: 0; margin-left: 5%; margin-left: max(5%, 50px)][/border]",
      {
        "type": "group",
        "description": "Image",
        "markerStart": {
          "type": "group",
          "description": "Image",
          "original": "&Image\\group&",
          "repeat": false,
          "indices": [
            1083,
            1095
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[border=unset; padding: unset; width: 100%; min-width: 300px; flex: 1; pointer-events: none; font-size: 0; position: relative; margin: 5px 10px; aspect-ratio: var(--image-inset-width) / var(--image-inset-height)][border=unset; padding: 0; width: calc( var(--image-width)/var(--image-inset-width) * 100%); height: calc(var(--image-height)/var(--image-inset-height) * 100%); position: absolute; bottom: 0; right: calc(-1 * 100% * var(--image-right-margin)/var(--image-width) * var(--image-width)/var(--image-inset-width)); z-index: 2;][img]",
          {
            "type": "text",
            "description": "image url",
            "marker": {
              "type": "text",
              "description": "image url",
              "defaultValue": "",
              "original": "&image url\\text&",
              "indices": [
                1634,
                1649
              ]
            }
          },
          "[/img][/border][/border][border=unset; padding: unset; position: relative; width: 100%; height: auto; min-width: 300px; flex: 1; min-height: 525px; font-size: 0; margin: 5px 10px;aspect-ratio: var(--image-inset-width) / var(--image-inset-height)]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "",
          "original": "&\\end&",
          "indices": [
            1896,
            1901
          ]
        }
      },
      "",
      {
        "type": "group",
        "description": "Title",
        "markerStart": {
          "type": "group",
          "description": "Title",
          "original": "&Title\\group&",
          "repeat": false,
          "indices": [
            1902,
            1914
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[border=unset; padding: unset; position: absolute; right: -10%; right: calc(-1 * clamp( 1rem, 5vw, 10%)); top: 0%; transform: translateY(calc(-1 * 1/2 * 100%)); height: auto; width: auto; max-width: 110%; text-align: right; font-size: 72pt; font-size: clamp(70px, 5vmax, 96px); line-height: .75; font-family: '",
          {
            "type": "text",
            "description": "Title Font",
            "marker": {
              "type": "text",
              "description": "Title Font",
              "defaultValue": "Cinzel Decorative",
              "original": "&Title Font\\text\\Cinzel Decorative&",
              "indices": [
                2225,
                2259
              ]
            },
            "value": "Cinzel Decorative"
          },
          "'; color:var(--primary-color); z-index: 2;][border=unset; padding: unset;]",
          {
            "type": "text",
            "description": "Title",
            "marker": {
              "type": "text",
              "description": "Title",
              "defaultValue": "",
              "original": "&Title\\text&",
              "indices": [
                2334,
                2345
              ]
            }
          },
          "[/border][border=unset; padding: unset; font-size: .4em;]",
          {
            "type": "text",
            "description": "Subtitle",
            "marker": {
              "type": "text",
              "description": "Subtitle",
              "defaultValue": "",
              "original": "&Subtitle\\text&",
              "indices": [
                2403,
                2417
              ]
            }
          },
          "[/border][/border]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "",
          "original": "&\\end&",
          "indices": [
            2436,
            2441
          ]
        }
      },
      "[border=unset; padding: unset; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 10px double var(--secondary-color); font-size: initial; font-family: '",
      {
        "type": "text",
        "description": "Body Font",
        "marker": {
          "type": "text",
          "description": "Body Font",
          "defaultValue": "Raleway",
          "original": "&Body Font\\text\\Raleway&",
          "indices": [
            2609,
            2632
          ]
        },
        "value": "Raleway"
      },
      "'; color:var(--primary-color); line-height: 1.5][border=unset; padding: 5px; position: relative; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; mask-image: linear-gradient(to bottom, transparent 0 5%, rgba(0,0,0,1) 10% 95%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0 5%, rgba(0,0,0,1) 10% 95%, transparent 100%);][border=unset; padding: 0; height: 100%; width: 100%; box-sizing: content-box; padding-right: 100px; overflow-Y: scroll;][border=unset; padding: unset; height: 7.5%; width: 0;][/border]",
      {
        "type": "group",
        "description": "Main Content Section",
        "markerStart": {
          "type": "group",
          "description": "Main Content Section",
          "original": "&Main Content Section\\group\\repeat&",
          "repeat": true,
          "indices": [
            3190,
            3224
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[border=unset; padding: unset; font-family: '",
          {
            "type": "text",
            "description": "Header Font",
            "marker": {
              "type": "text",
              "description": "Header Font",
              "defaultValue": "Cinzel",
              "original": "&Header Font\\text\\Cinzel&",
              "indices": [
                3270,
                3294
              ]
            },
            "value": "Cinzel"
          },
          "'; font-size: 2em; border-bottom: 2px solid var(--secondary-color); line-height: 1;]",
          {
            "type": "text",
            "description": "Header",
            "marker": {
              "type": "text",
              "description": "Header",
              "defaultValue": "Header",
              "original": "&Header\\text\\Header&",
              "indices": [
                3379,
                3398
              ]
            },
            "value": "Header"
          },
          "[/border]",
          {
            "type": "content",
            "description": "Section Body",
            "marker": {
              "type": "content",
              "description": "Section Body",
              "original": "&Section Body\\content&",
              "indices": [
                3408,
                3429
              ]
            }
          },
          "\r\n"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "",
          "original": "&\\end&",
          "indices": [
            3432,
            3437
          ]
        }
      },
      "[border=unset; padding: unset; height: 5%; width: 0;][/border][/border][/border][/border][/border][/border][/border]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "",
      "original": "&\\end&",
      "indices": [
        3554,
        3559
      ]
    }
  },
  ""
]

[]

Rogue Margins Template

By Alteras

font setup: make sure you copy these values into the fields further down

Title Font

Header Font

Body Font

content

primary color

secondary color

background color

image width

image height

image inset width

image inset height

image inset right margin

Image

image url

Title

Title Font

Title

Subtitle

Body Font

Main Content Section

Header Font

Header

Section Body

Output