Input Template

[nobr]
  [div=display: none;]
  & initial fonts \ group &
    [font=& monospace font \ text \ Inconsolata &]font call[/font]
    [font=& title font \ text \ VT323 &]font call[/font]
    [font=& secondary title font \ text \ Cherish &]font call[/font]
    [font=& main font \ text \ Nanum Gothic &]font call[/font]
  & end &
  [/div]
  [div=
  & initial colors and values \ group &
  --bgcolor: & bg color \ text \ #1C1C1C &;
  --mainTextC: & primary text color \ text \ #E8E8E8 &;
  --accent: & accent color \ text \ #FBAF00 &;
  --circle: & bg circle color \ text \ #D62828 &;
  --titleTextC: & title color \ text \ #3891A6 &;
  --titleTextShad: & title shadow color \ text \ #FCFCFC &;
  --imgShad: & image shadow color \ text \ #003049 &;
  --mainIMG: url(& main image url \ text \ https://placehold.co/300x400?text=3:4&);
  --fontMono: '& monospace font (should match in initial fonts) \ text \ Inconsolata &', monospace;
  --fontDisplay1: '& title font (should match in initial fonts) \ text \ VT323 &', monospace;
  --fontDisplay2: '& secondary title font (should match in initial fonts) \ text \ Cherish &', serif;
  --fontMain: '& main font (should match in initial fonts) \ text \ Nanum Gothic &', sans-serif;
  & end &
  display: block;
  position: relative;
  overflow: hidden;
  width: calc(100% - 2rem);
  margin: 1rem auto;
  height: clamp(400px, 80vh, 950px);
  background: var(--bgcolor);]
    [div=
    position: absolute;
    right: -27%;
    bottom: -19%;
    width: 60%;
    border-radius: 50%;
    background: var(--circle)]
      [div=width: 100%; padding-top: 100%;]circle[/div]
    [/div]
    [div=
    position: absolute;
    left: 10%;
    top: 0px;
    font-size: 0px;
    width: clamp(200px, 33%, 500px);
    padding-top: 50%;
    box-sizing: border-box;
    box-shadow: 2rem 2rem var(--imgShad);
    background: var(--imgShad) var(--mainIMG) no-repeat center center/cover;]
      img
    [/div]
    [div=
    position: absolute;
    background: radial-gradient(circle, var(--accent) 16%, rgba(0,0,0,0) 17%, rgba(0,0,0,0) 100%) repeat top left/32px 32px; 
    top: 0px;
    left: 5%;
    width: clamp(100px, 15%, 300px);
    height: 100%;
    font-size: 0px;]
      dots
    [/div]
    [div=
    position: absolute;
    width: 5rem;
    height: 100%;
    bottom: 0px;
    right: 4%;
    font-size: 0px;
    box-sizing: border-box;
    display: column nowrap;
    align-items: center;
    pointer-events: none;]
      [div=
      flex: 3 auto;
      text-align: center;
      display: row nowrap;
      align-items: center;
      align-content: center;
      justify-content: center;
      font-family: var(--fontDisplay1);
      color: var(--titleTextShad);
      font-size: 5rem;
      width: 5rem;
      padding: 8rem 0px 1rem 0px;]
        01
      [/div]
      [div=
      flex: 3;
      height: 100%;
      background: var(--accent);
      width: 3rem;
      margin: 0px 1rem;]
        border
      [/div]
    [/div]
    & title and simple desc \ group &
    [div=
    pointer-events: none;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-family: var(--fontDisplay1);
    text-transform: uppercase;
    color: var(--titleTextC);
    text-shadow: 5px 5px var(--titleTextShad);
    font-size: clamp(14px,10vh,300px);]
      & title here \ text \ title here &
    [/div]
    [div=
    pointer-events: none;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-family: var(--fontDisplay2);
    text-stroke: 1px var(--accent);
    text-fill-color: rgba(0,0,0,0);
    -webkit-text-stroke: 1px var(--accent);
    -webkit-text-fill-color: rgba(0,0,0,0);
    text-transform: lowercase;
    letter-spacing: -.03em;
    color: rgba(0,0,0,0);
    font-size: clamp(14px,18vh,400px);]
      & title here \ text \ title here &
    [/div]
    [div=
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: clamp(275px, 70%, 600px);
    box-sizing: border-box;
    padding-left: 20%;
    padding-bottom: 20%;
    font-family: var(--fontMono);
    color: var(--bgcolor);
    filter: invert(1);
    pointer-events: none;
    text-shadow: 1px 1px var(--titleTextShad);]
      & basic info here. use [br][/br] to insert content \ content &
    [/div]
    & end of title and simple desc \ end &
    [div=
    position: absolute;
    height: 100%;
    width: clamp(300px,70%,70%);
    transform: translateX(-50%);
    top: 0px;
    left: 50%;
    overflow: hidden;]
      [div=
      display: block;
      width: calc(100% + 50px);
      height: 100%;
      padding-right: 50px;
      padding-left: 10%;
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: scroll;]
        [div=height: 75%; width: 1px; display: block;] [/div]
        & individual tiles \ group \ repeat &
        [div=--bgIMG: url(& tile bg image \ text \ https://placehold.co/700x400?text=7:4&);
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        gap: 10px;
        position: relative;
        box-sizing: border-box;
        margin: 2rem 0px;]
          [div=
          flex: 1 100px;
          display: flex;
          box-sizing: border-box;
          padding: 3rem 0px 0px 0px;
          flex-flow: row wrap-reverse;
          justify-content: flex-end;
          align-content: flex-start;
          align-content: flex-start;
          gap: 5px;
          font-size: .8rem;
          line-height: .8rem;
          font-family: var(--fontMono);
          color: var(--mainTextC);
          text-transform: uppercase;]
            & tags \ group \ repeat &
            [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]& tag text \ text \ tag one &[/div]
            & end of tags \ end &
          [/div]
          [div=
          flex: 4 200px;
          background: rgba(0,0,0,.6);
          box-sizing: border-box;
          padding: 10px 10px 0px 10px;
          position: relative;]
            [div=
            width: 100%;
            padding-top: clamp(250px,60%,60%);
            position: relative;
            background-color: var(--accent);
            background-image: var(--bgIMG),
                              linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%);
            background-repeat: repeat;
            background-position: center center, top left;
            background-size: cover, 100% 2px;
            background-blend-mode: multiply, soft-light;]
              [div=
              position: absolute;
              top: 10px;
              left: 10px;
              width: calc(100% - 20px);
              height: calc(100% - 10px);
              display: flex;
              flex-flow: row nowrap;
              align-items: flex-end;
              overflow: hidden;
              visibility: hidden;]
                [div=
                transform: rotateX(180deg);
                width: 100%;
                font-size: 0px;]
                  [accordion=100%]
                    {slide=[div=height: 100%; visibility: visible; width: 100%; font-size: 0px; height: 2rem;]empty[/div]}
                      [div=
                      position: relative;
                      transform: rotateX(180deg);
                      font-size: initial;
                      width: 100%;
                      padding-top: clamp(150px, 42%, 42%);]
                        [div=
                        position: absolute;
                        visibility: visible;
                        width: 100%;
                        height: 100%;
                        top: 0px;
                        left: 0px;
                        overflow: hidden;
                        padding: 1.5rem;
                        box-sizing: border-box;
                        overflow: hidden;
                        color: var(--mainTextC);
                        font-family: var(--fontMain);
                        background: rgba(0,0,0,.6);
                        backdrop-filter: contrast(.8) brightness(.8);
                        line-height: 0px;
                        white-space: nowrap;
                        font-size: 0px;]
                          [div=
                          width: calc(100% + 50px);
                          padding-right: 50px;
                          box-sizing: border-box;
                          height: 100%;
                          overflow-x: hidden;
                          overflow-y: scroll;
                          line-height: 0px;
                          white-space: nowrap;
                          font-size: 0px;]
                            & tile content paragraph (duplicate for more paragraphs) \ group \ repeat &
                            [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]& content paragraph \ content &[/div]
                            & end of tile content paragraph \ end &
                          [/div]
                        [/div]
                      [/div]
                    {/slide}
                  [/accordion]
                [/div]
              [/div]
            [/div]
            [div=
            pointer-events: none;
            position: absolute;
            font-size: 0px;
            overflow: hidden;
            width: 100%;
            left: 0px;
            bottom: 0px;
            height: 1.5rem;
            background: var(--bgcolor);]
              monster hunter
            [/div]
            [div=
            pointer-events: none;
            position: absolute;
            width: auto;
            left: 0px;
            bottom: 0px;
            box-sizing: border-box;
            clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0% 100%);
            background: var(--bgcolor);
            font-family: var(--fontDisplay1);
            color: var(--titleTextShad);
            text-transform: uppercase;
            font-size: 2.5rem;
            line-height: 2.5rem;
            padding: 8px calc(1.5rem + 5px) 8px 1.5rem;]
              & title of the tile here \ text \ title of the tile here &
            [/div]
            [div=
            pointer-events: none;
            position: absolute;
            gap: .5rem;
            bottom: 1.85rem;
            right: 0px;
            box-sizing: border-box;
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-end;
            justify-items: flex-end;
            align-items: stretch;
            width: 100%;
            font-size: 0px;
            padding: 0px 20px; ]
            & rating circles - duplicate the following circles to add more circles \ group &
              & filled rating circle \ group \ repeat &
              [div=box-sizing: border-box; flex: 0 1.5rem; height: 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
              & end &
              & empty rating circle \ group \ repeat &
              [div=box-sizing: border-box; flex: 0 1.5rem; height: 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%;]empty[/div]
              & end &
            & end &
            [/div]
          [/div]
        [/div]
        & end of tiles \ end&
        [div=height: 40px; width: 1px;] [/div]
      [/div]
    [/div]
    [div=
    position: absolute;
    pointer-events: none;
    right: calc(13% + 5px);
    width: calc(87% - 5px);
    height: calc(70% - 20px);
    top: 10px;
    display: flex;
    visibility: hidden;
    font-size: 0px;
    flex-flow: row nowrap;
    align-items: center;]
      [accordion=100%]
        {slide=[div=height: 0px; width: 0px; margin: -7px; pointer-events: none;line-height: 0px; white-space: nowrap; z-index: 3;][div=position: absolute; width: 100%; height: 15rem; top: -7.5rem; left: 0px; font-size: initial;][div=display: inline-block; width: auto; color: var(--circle); pointer-events: auto; z-index: 7; font-size: clamp(14px,12vh,100px); line-height: 1; padding: 0px 5%; visibility: visible; filter: drop-shadow(10px 5px 0px var(--titleTextShad));][fa]fas fa-comment-alt-exclamation[/fa][/div][/div]}[div=height: 0px; width: 0px; white-space: nowrap; margin: -7px; z-index: 1; visibility: visibile;][div=position: absolute; width: clamp(100px,100%,275px); height: 15rem; overflow: hidden; top: calc(-5.5rem - 13px); pointer-events: none; z-index: 2; left: calc(5% + 14px); visibility: visible; font-size: initial;][div=display: block; position: relative; height: 100%; width: calc(100% + 15px); padding-right: 15px; box-sizing: border-box; overflow-x: hidden; overflow-y: scroll; font-size: .95rem; white-space: nowrap; color: white; pointer-events: none; color: var(--bgcolor); pointer-events: auto; font-famiy: var(--fontMain); line-height: 0px;]
          & side info dropdown content \ group \ repeat &
          [div=display: block; margin: 2rem 0px .5rem 0px; background: var(--accent); box-sizing: border-box; padding: 1rem; text-align: justify; border-radius: 8px; white-space: normal; line-height: 1rem;]& side info content paragraph \ content &[/div]
          & end of side info dropdown content \ end &  
        [/div][/div][/div]{/slide}
      [/accordion]
    [/div]
  [/div]

Debug Mode

[
  "[nobr]\r\n  [div=display: none;]\r\n  ",
  {
    "type": "group",
    "description": "initial fonts",
    "markerStart": {
      "type": "group",
      "description": "initial fonts",
      "original": "& initial fonts \\ group &",
      "repeat": false,
      "indices": [
        34,
        58
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n    [font=",
      {
        "type": "text",
        "description": "monospace font",
        "marker": {
          "type": "text",
          "description": "monospace font",
          "defaultValue": "Inconsolata",
          "original": "& monospace font \\ text \\ Inconsolata &",
          "indices": [
            71,
            109
          ]
        },
        "value": "Inconsolata"
      },
      "]font call[/font]\r\n    [font=",
      {
        "type": "text",
        "description": "title font",
        "marker": {
          "type": "text",
          "description": "title font",
          "defaultValue": "VT323",
          "original": "& title font \\ text \\ VT323 &",
          "indices": [
            139,
            167
          ]
        },
        "value": "VT323"
      },
      "]font call[/font]\r\n    [font=",
      {
        "type": "text",
        "description": "secondary title font",
        "marker": {
          "type": "text",
          "description": "secondary title font",
          "defaultValue": "Cherish",
          "original": "& secondary title font \\ text \\ Cherish &",
          "indices": [
            197,
            237
          ]
        },
        "value": "Cherish"
      },
      "]font call[/font]\r\n    [font=",
      {
        "type": "text",
        "description": "main font",
        "marker": {
          "type": "text",
          "description": "main font",
          "defaultValue": "Nanum Gothic",
          "original": "& main font \\ text \\ Nanum Gothic &",
          "indices": [
            267,
            301
          ]
        },
        "value": "Nanum Gothic"
      },
      "]font call[/font]\r\n  "
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "& end &",
      "indices": [
        323,
        329
      ]
    }
  },
  "\r\n  [/div]\r\n  [div=\r\n  ",
  {
    "type": "group",
    "description": "initial colors and values",
    "markerStart": {
      "type": "group",
      "description": "initial colors and values",
      "original": "& initial colors and values \\ group &",
      "repeat": false,
      "indices": [
        353,
        389
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n  --bgcolor: ",
      {
        "type": "text",
        "description": "bg color",
        "marker": {
          "type": "text",
          "description": "bg color",
          "defaultValue": "#1C1C1C",
          "original": "& bg color \\ text \\ #1C1C1C &",
          "indices": [
            405,
            433
          ]
        },
        "value": "#1C1C1C"
      },
      ";\r\n  --mainTextC: ",
      {
        "type": "text",
        "description": "primary text color",
        "marker": {
          "type": "text",
          "description": "primary text color",
          "defaultValue": "#E8E8E8",
          "original": "& primary text color \\ text \\ #E8E8E8 &",
          "indices": [
            452,
            490
          ]
        },
        "value": "#E8E8E8"
      },
      ";\r\n  --accent: ",
      {
        "type": "text",
        "description": "accent color",
        "marker": {
          "type": "text",
          "description": "accent color",
          "defaultValue": "#FBAF00",
          "original": "& accent color \\ text \\ #FBAF00 &",
          "indices": [
            506,
            538
          ]
        },
        "value": "#FBAF00"
      },
      ";\r\n  --circle: ",
      {
        "type": "text",
        "description": "bg circle color",
        "marker": {
          "type": "text",
          "description": "bg circle color",
          "defaultValue": "#D62828",
          "original": "& bg circle color \\ text \\ #D62828 &",
          "indices": [
            554,
            589
          ]
        },
        "value": "#D62828"
      },
      ";\r\n  --titleTextC: ",
      {
        "type": "text",
        "description": "title color",
        "marker": {
          "type": "text",
          "description": "title color",
          "defaultValue": "#3891A6",
          "original": "& title color \\ text \\ #3891A6 &",
          "indices": [
            609,
            640
          ]
        },
        "value": "#3891A6"
      },
      ";\r\n  --titleTextShad: ",
      {
        "type": "text",
        "description": "title shadow color",
        "marker": {
          "type": "text",
          "description": "title shadow color",
          "defaultValue": "#FCFCFC",
          "original": "& title shadow color \\ text \\ #FCFCFC &",
          "indices": [
            663,
            701
          ]
        },
        "value": "#FCFCFC"
      },
      ";\r\n  --imgShad: ",
      {
        "type": "text",
        "description": "image shadow color",
        "marker": {
          "type": "text",
          "description": "image shadow color",
          "defaultValue": "#003049",
          "original": "& image shadow color \\ text \\ #003049 &",
          "indices": [
            718,
            756
          ]
        },
        "value": "#003049"
      },
      ";\r\n  --mainIMG: url(",
      {
        "type": "text",
        "description": "main image url",
        "marker": {
          "type": "text",
          "description": "main image url",
          "defaultValue": "https://placehold.co/300x400?text=3:4",
          "original": "& main image url \\ text \\ https://placehold.co/300x400?text=3:4&",
          "indices": [
            777,
            840
          ]
        },
        "value": "https://placehold.co/300x400?text=3:4"
      },
      ");\r\n  --fontMono: '",
      {
        "type": "text",
        "description": "monospace font (should match in initial fonts)",
        "marker": {
          "type": "text",
          "description": "monospace font (should match in initial fonts)",
          "defaultValue": "Inconsolata",
          "original": "& monospace font (should match in initial fonts) \\ text \\ Inconsolata &",
          "indices": [
            860,
            930
          ]
        },
        "value": "Inconsolata"
      },
      "', monospace;\r\n  --fontDisplay1: '",
      {
        "type": "text",
        "description": "title font (should match in initial fonts)",
        "marker": {
          "type": "text",
          "description": "title font (should match in initial fonts)",
          "defaultValue": "VT323",
          "original": "& title font (should match in initial fonts) \\ text \\ VT323 &",
          "indices": [
            965,
            1025
          ]
        },
        "value": "VT323"
      },
      "', monospace;\r\n  --fontDisplay2: '",
      {
        "type": "text",
        "description": "secondary title font (should match in initial fonts)",
        "marker": {
          "type": "text",
          "description": "secondary title font (should match in initial fonts)",
          "defaultValue": "Cherish",
          "original": "& secondary title font (should match in initial fonts) \\ text \\ Cherish &",
          "indices": [
            1060,
            1132
          ]
        },
        "value": "Cherish"
      },
      "', serif;\r\n  --fontMain: '",
      {
        "type": "text",
        "description": "main font (should match in initial fonts)",
        "marker": {
          "type": "text",
          "description": "main font (should match in initial fonts)",
          "defaultValue": "Nanum Gothic",
          "original": "& main font (should match in initial fonts) \\ text \\ Nanum Gothic &",
          "indices": [
            1159,
            1225
          ]
        },
        "value": "Nanum Gothic"
      },
      "', sans-serif;\r\n  "
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "& end &",
      "indices": [
        1244,
        1250
      ]
    }
  },
  "\r\n  display: block;\r\n  position: relative;\r\n  overflow: hidden;\r\n  width: calc(100% - 2rem);\r\n  margin: 1rem auto;\r\n  height: clamp(400px, 80vh, 950px);\r\n  background: var(--bgcolor);]\r\n    [div=\r\n    position: absolute;\r\n    right: -27%;\r\n    bottom: -19%;\r\n    width: 60%;\r\n    border-radius: 50%;\r\n    background: var(--circle)]\r\n      [div=width: 100%; padding-top: 100%;]circle[/div]\r\n    [/div]\r\n    [div=\r\n    position: absolute;\r\n    left: 10%;\r\n    top: 0px;\r\n    font-size: 0px;\r\n    width: clamp(200px, 33%, 500px);\r\n    padding-top: 50%;\r\n    box-sizing: border-box;\r\n    box-shadow: 2rem 2rem var(--imgShad);\r\n    background: var(--imgShad) var(--mainIMG) no-repeat center center/cover;]\r\n      img\r\n    [/div]\r\n    [div=\r\n    position: absolute;\r\n    background: radial-gradient(circle, var(--accent) 16%, rgba(0,0,0,0) 17%, rgba(0,0,0,0) 100%) repeat top left/32px 32px; \r\n    top: 0px;\r\n    left: 5%;\r\n    width: clamp(100px, 15%, 300px);\r\n    height: 100%;\r\n    font-size: 0px;]\r\n      dots\r\n    [/div]\r\n    [div=\r\n    position: absolute;\r\n    width: 5rem;\r\n    height: 100%;\r\n    bottom: 0px;\r\n    right: 4%;\r\n    font-size: 0px;\r\n    box-sizing: border-box;\r\n    display: column nowrap;\r\n    align-items: center;\r\n    pointer-events: none;]\r\n      [div=\r\n      flex: 3 auto;\r\n      text-align: center;\r\n      display: row nowrap;\r\n      align-items: center;\r\n      align-content: center;\r\n      justify-content: center;\r\n      font-family: var(--fontDisplay1);\r\n      color: var(--titleTextShad);\r\n      font-size: 5rem;\r\n      width: 5rem;\r\n      padding: 8rem 0px 1rem 0px;]\r\n        01\r\n      [/div]\r\n      [div=\r\n      flex: 3;\r\n      height: 100%;\r\n      background: var(--accent);\r\n      width: 3rem;\r\n      margin: 0px 1rem;]\r\n        border\r\n      [/div]\r\n    [/div]\r\n    ",
  {
    "type": "group",
    "description": "title and simple desc",
    "markerStart": {
      "type": "group",
      "description": "title and simple desc",
      "original": "& title and simple desc \\ group &",
      "repeat": false,
      "indices": [
        3050,
        3082
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n    [div=\r\n    pointer-events: none;\r\n    position: absolute;\r\n    transform: translate(-50%,-50%);\r\n    top: 50%;\r\n    left: 50%;\r\n    font-family: var(--fontDisplay1);\r\n    text-transform: uppercase;\r\n    color: var(--titleTextC);\r\n    text-shadow: 5px 5px var(--titleTextShad);\r\n    font-size: clamp(14px,10vh,300px);]\r\n      ",
      {
        "type": "text",
        "description": "title here",
        "marker": {
          "type": "text",
          "description": "title here",
          "defaultValue": "title here",
          "original": "& title here \\ text \\ title here &",
          "indices": [
            3414,
            3447
          ]
        },
        "value": "title here"
      },
      "\r\n    [/div]\r\n    [div=\r\n    pointer-events: none;\r\n    position: absolute;\r\n    transform: translate(-50%,-50%);\r\n    top: 50%;\r\n    left: 50%;\r\n    font-family: var(--fontDisplay2);\r\n    text-stroke: 1px var(--accent);\r\n    text-fill-color: rgba(0,0,0,0);\r\n    -webkit-text-stroke: 1px var(--accent);\r\n    -webkit-text-fill-color: rgba(0,0,0,0);\r\n    text-transform: lowercase;\r\n    letter-spacing: -.03em;\r\n    color: rgba(0,0,0,0);\r\n    font-size: clamp(14px,18vh,400px);]\r\n      ",
      {
        "type": "text",
        "description": "title here",
        "marker": {
          "type": "text",
          "description": "title here",
          "defaultValue": "title here",
          "original": "& title here \\ text \\ title here &",
          "indices": [
            3932,
            3965
          ]
        },
        "value": "title here"
      },
      "\r\n    [/div]\r\n    [div=\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%,-50%);\r\n    width: clamp(275px, 70%, 600px);\r\n    box-sizing: border-box;\r\n    padding-left: 20%;\r\n    padding-bottom: 20%;\r\n    font-family: var(--fontMono);\r\n    color: var(--bgcolor);\r\n    filter: invert(1);\r\n    pointer-events: none;\r\n    text-shadow: 1px 1px var(--titleTextShad);]\r\n      ",
      {
        "type": "content",
        "description": "basic info here. use [br][/br] to insert content",
        "marker": {
          "type": "content",
          "description": "basic info here. use [br][/br] to insert content",
          "original": "& basic info here. use [br][/br] to insert content \\ content &",
          "indices": [
            4371,
            4432
          ]
        }
      },
      "\r\n    [/div]\r\n    "
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end of title and simple desc",
      "original": "& end of title and simple desc \\ end &",
      "indices": [
        4451,
        4488
      ]
    }
  },
  "\r\n    [div=\r\n    position: absolute;\r\n    height: 100%;\r\n    width: clamp(300px,70%,70%);\r\n    transform: translateX(-50%);\r\n    top: 0px;\r\n    left: 50%;\r\n    overflow: hidden;]\r\n      [div=\r\n      display: block;\r\n      width: calc(100% + 50px);\r\n      height: 100%;\r\n      padding-right: 50px;\r\n      padding-left: 10%;\r\n      box-sizing: border-box;\r\n      overflow-x: hidden;\r\n      overflow-y: scroll;]\r\n        [div=height: 75%; width: 1px; display: block;] [/div]\r\n        ",
  {
    "type": "group",
    "description": "individual tiles",
    "markerStart": {
      "type": "group",
      "description": "individual tiles",
      "original": "& individual tiles \\ group \\ repeat &",
      "repeat": true,
      "indices": [
        4970,
        5006
      ]
    },
    "repeat": true,
    "originalChildren": [
      "\r\n        [div=--bgIMG: url(",
      {
        "type": "text",
        "description": "tile bg image",
        "marker": {
          "type": "text",
          "description": "tile bg image",
          "defaultValue": "https://placehold.co/700x400?text=7:4",
          "original": "& tile bg image \\ text \\ https://placehold.co/700x400?text=7:4&",
          "indices": [
            5035,
            5097
          ]
        },
        "value": "https://placehold.co/700x400?text=7:4"
      },
      ");\r\n        display: flex;\r\n        flex-flow: row wrap;\r\n        align-items: flex-start;\r\n        gap: 10px;\r\n        position: relative;\r\n        box-sizing: border-box;\r\n        margin: 2rem 0px;]\r\n          [div=\r\n          flex: 1 100px;\r\n          display: flex;\r\n          box-sizing: border-box;\r\n          padding: 3rem 0px 0px 0px;\r\n          flex-flow: row wrap-reverse;\r\n          justify-content: flex-end;\r\n          align-content: flex-start;\r\n          align-content: flex-start;\r\n          gap: 5px;\r\n          font-size: .8rem;\r\n          line-height: .8rem;\r\n          font-family: var(--fontMono);\r\n          color: var(--mainTextC);\r\n          text-transform: uppercase;]\r\n            ",
      {
        "type": "group",
        "description": "tags",
        "markerStart": {
          "type": "group",
          "description": "tags",
          "original": "& tags \\ group \\ repeat &",
          "repeat": true,
          "indices": [
            5805,
            5829
          ]
        },
        "repeat": true,
        "originalChildren": [
          "\r\n            [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]",
          {
            "type": "text",
            "description": "tag text",
            "marker": {
              "type": "text",
              "description": "tag text",
              "defaultValue": "tag one",
              "original": "& tag text \\ text \\ tag one &",
              "indices": [
                5912,
                5940
              ]
            },
            "value": "tag one"
          },
          "[/div]\r\n            "
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end of tags",
          "original": "& end of tags \\ end &",
          "indices": [
            5961,
            5981
          ]
        }
      },
      "\r\n          [/div]\r\n          [div=\r\n          flex: 4 200px;\r\n          background: rgba(0,0,0,.6);\r\n          box-sizing: border-box;\r\n          padding: 10px 10px 0px 10px;\r\n          position: relative;]\r\n            [div=\r\n            width: 100%;\r\n            padding-top: clamp(250px,60%,60%);\r\n            position: relative;\r\n            background-color: var(--accent);\r\n            background-image: var(--bgIMG),\r\n                              linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%);\r\n            background-repeat: repeat;\r\n            background-position: center center, top left;\r\n            background-size: cover, 100% 2px;\r\n            background-blend-mode: multiply, soft-light;]\r\n              [div=\r\n              position: absolute;\r\n              top: 10px;\r\n              left: 10px;\r\n              width: calc(100% - 20px);\r\n              height: calc(100% - 10px);\r\n              display: flex;\r\n              flex-flow: row nowrap;\r\n              align-items: flex-end;\r\n              overflow: hidden;\r\n              visibility: hidden;]\r\n                [div=\r\n                transform: rotateX(180deg);\r\n                width: 100%;\r\n                font-size: 0px;]\r\n                  [accordion=100%]\r\n                    {slide=[div=height: 100%; visibility: visible; width: 100%; font-size: 0px; height: 2rem;]empty[/div]}\r\n                      [div=\r\n                      position: relative;\r\n                      transform: rotateX(180deg);\r\n                      font-size: initial;\r\n                      width: 100%;\r\n                      padding-top: clamp(150px, 42%, 42%);]\r\n                        [div=\r\n                        position: absolute;\r\n                        visibility: visible;\r\n                        width: 100%;\r\n                        height: 100%;\r\n                        top: 0px;\r\n                        left: 0px;\r\n                        overflow: hidden;\r\n                        padding: 1.5rem;\r\n                        box-sizing: border-box;\r\n                        overflow: hidden;\r\n                        color: var(--mainTextC);\r\n                        font-family: var(--fontMain);\r\n                        background: rgba(0,0,0,.6);\r\n                        backdrop-filter: contrast(.8) brightness(.8);\r\n                        line-height: 0px;\r\n                        white-space: nowrap;\r\n                        font-size: 0px;]\r\n                          [div=\r\n                          width: calc(100% + 50px);\r\n                          padding-right: 50px;\r\n                          box-sizing: border-box;\r\n                          height: 100%;\r\n                          overflow-x: hidden;\r\n                          overflow-y: scroll;\r\n                          line-height: 0px;\r\n                          white-space: nowrap;\r\n                          font-size: 0px;]\r\n                            ",
      {
        "type": "group",
        "description": "tile content paragraph (duplicate for more paragraphs)",
        "markerStart": {
          "type": "group",
          "description": "tile content paragraph (duplicate for more paragraphs)",
          "original": "& tile content paragraph (duplicate for more paragraphs) \\ group \\ repeat &",
          "repeat": true,
          "indices": [
            8919,
            8993
          ]
        },
        "repeat": true,
        "originalChildren": [
          "\r\n                            [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]",
          {
            "type": "content",
            "description": "content paragraph",
            "marker": {
              "type": "content",
              "description": "content paragraph",
              "original": "& content paragraph \\ content &",
              "indices": [
                9149,
                9179
              ]
            }
          },
          "[/div]\r\n                            "
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end of tile content paragraph",
          "original": "& end of tile content paragraph \\ end &",
          "indices": [
            9216,
            9254
          ]
        }
      },
      "\r\n                          [/div]\r\n                        [/div]\r\n                      [/div]\r\n                    {/slide}\r\n                  [/accordion]\r\n                [/div]\r\n              [/div]\r\n            [/div]\r\n            [div=\r\n            pointer-events: none;\r\n            position: absolute;\r\n            font-size: 0px;\r\n            overflow: hidden;\r\n            width: 100%;\r\n            left: 0px;\r\n            bottom: 0px;\r\n            height: 1.5rem;\r\n            background: var(--bgcolor);]\r\n              monster hunter\r\n            [/div]\r\n            [div=\r\n            pointer-events: none;\r\n            position: absolute;\r\n            width: auto;\r\n            left: 0px;\r\n            bottom: 0px;\r\n            box-sizing: border-box;\r\n            clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0% 100%);\r\n            background: var(--bgcolor);\r\n            font-family: var(--fontDisplay1);\r\n            color: var(--titleTextShad);\r\n            text-transform: uppercase;\r\n            font-size: 2.5rem;\r\n            line-height: 2.5rem;\r\n            padding: 8px calc(1.5rem + 5px) 8px 1.5rem;]\r\n              ",
      {
        "type": "text",
        "description": "title of the tile here",
        "marker": {
          "type": "text",
          "description": "title of the tile here",
          "defaultValue": "title of the tile here",
          "original": "& title of the tile here \\ text \\ title of the tile here &",
          "indices": [
            10412,
            10469
          ]
        },
        "value": "title of the tile here"
      },
      "\r\n            [/div]\r\n            [div=\r\n            pointer-events: none;\r\n            position: absolute;\r\n            gap: .5rem;\r\n            bottom: 1.85rem;\r\n            right: 0px;\r\n            box-sizing: border-box;\r\n            display: flex;\r\n            flex-flow: row nowrap;\r\n            justify-content: flex-end;\r\n            justify-items: flex-end;\r\n            align-items: stretch;\r\n            width: 100%;\r\n            font-size: 0px;\r\n            padding: 0px 20px; ]\r\n            ",
      {
        "type": "group",
        "description": "rating circles - duplicate the following circles to add more circles",
        "markerStart": {
          "type": "group",
          "description": "rating circles - duplicate the following circles to add more circles",
          "original": "& rating circles - duplicate the following circles to add more circles \\ group &",
          "repeat": false,
          "indices": [
            10974,
            11053
          ]
        },
        "repeat": false,
        "originalChildren": [
          "\r\n              ",
          {
            "type": "group",
            "description": "filled rating circle",
            "markerStart": {
              "type": "group",
              "description": "filled rating circle",
              "original": "& filled rating circle \\ group \\ repeat &",
              "repeat": true,
              "indices": [
                11070,
                11110
              ]
            },
            "repeat": true,
            "originalChildren": [
              "\r\n              [div=box-sizing: border-box; flex: 0 1.5rem; height: 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]\r\n              "
            ],
            "children": [],
            "markerEnd": {
              "type": "end",
              "description": "end",
              "original": "& end &",
              "indices": [
                11316,
                11322
              ]
            }
          },
          "\r\n              ",
          {
            "type": "group",
            "description": "empty rating circle",
            "markerStart": {
              "type": "group",
              "description": "empty rating circle",
              "original": "& empty rating circle \\ group \\ repeat &",
              "repeat": true,
              "indices": [
                11339,
                11378
              ]
            },
            "repeat": true,
            "originalChildren": [
              "\r\n              [div=box-sizing: border-box; flex: 0 1.5rem; height: 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%;]empty[/div]\r\n              "
            ],
            "children": [],
            "markerEnd": {
              "type": "end",
              "description": "end",
              "original": "& end &",
              "indices": [
                11537,
                11543
              ]
            }
          },
          "\r\n            "
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "& end &",
          "indices": [
            11558,
            11564
          ]
        }
      },
      "\r\n            [/div]\r\n          [/div]\r\n        [/div]\r\n        "
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end of tiles",
      "original": "& end of tiles \\ end&",
      "indices": [
        11629,
        11649
      ]
    }
  },
  "\r\n        [div=height: 40px; width: 1px;] [/div]\r\n      [/div]\r\n    [/div]\r\n    [div=\r\n    position: absolute;\r\n    pointer-events: none;\r\n    right: calc(13% + 5px);\r\n    width: calc(87% - 5px);\r\n    height: calc(70% - 20px);\r\n    top: 10px;\r\n    display: flex;\r\n    visibility: hidden;\r\n    font-size: 0px;\r\n    flex-flow: row nowrap;\r\n    align-items: center;]\r\n      [accordion=100%]\r\n        {slide=[div=height: 0px; width: 0px; margin: -7px; pointer-events: none;line-height: 0px; white-space: nowrap; z-index: 3;][div=position: absolute; width: 100%; height: 15rem; top: -7.5rem; left: 0px; font-size: initial;][div=display: inline-block; width: auto; color: var(--circle); pointer-events: auto; z-index: 7; font-size: clamp(14px,12vh,100px); line-height: 1; padding: 0px 5%; visibility: visible; filter: drop-shadow(10px 5px 0px var(--titleTextShad));][fa]fas fa-comment-alt-exclamation[/fa][/div][/div]}[div=height: 0px; width: 0px; white-space: nowrap; margin: -7px; z-index: 1; visibility: visibile;][div=position: absolute; width: clamp(100px,100%,275px); height: 15rem; overflow: hidden; top: calc(-5.5rem - 13px); pointer-events: none; z-index: 2; left: calc(5% + 14px); visibility: visible; font-size: initial;][div=display: block; position: relative; height: 100%; width: calc(100% + 15px); padding-right: 15px; box-sizing: border-box; overflow-x: hidden; overflow-y: scroll; font-size: .95rem; white-space: nowrap; color: white; pointer-events: none; color: var(--bgcolor); pointer-events: auto; font-famiy: var(--fontMain); line-height: 0px;]\r\n          ",
  {
    "type": "group",
    "description": "side info dropdown content",
    "markerStart": {
      "type": "group",
      "description": "side info dropdown content",
      "original": "& side info dropdown content \\ group \\ repeat &",
      "repeat": true,
      "indices": [
        13222,
        13268
      ]
    },
    "repeat": true,
    "originalChildren": [
      "\r\n          [div=display: block; margin: 2rem 0px .5rem 0px; background: var(--accent); box-sizing: border-box; padding: 1rem; text-align: justify; border-radius: 8px; white-space: normal; line-height: 1rem;]",
      {
        "type": "content",
        "description": "side info content paragraph",
        "marker": {
          "type": "content",
          "description": "side info content paragraph",
          "original": "& side info content paragraph \\ content &",
          "indices": [
            13477,
            13517
          ]
        }
      },
      "[/div]\r\n          "
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end of side info dropdown content",
      "original": "& end of side info dropdown content \\ end &",
      "indices": [
        13536,
        13578
      ]
    }
  },
  "  \r\n        [/div][/div][/div]{/slide}\r\n      [/accordion]\r\n    [/div]\r\n  [/div]"
]

[]

umbrella.template 1.0

By glucoseguardian

initial fonts

monospace font

title font

secondary title font

main font

initial colors and values

bg color

primary text color

accent color

bg circle color

title color

title shadow color

image shadow color

main image url

monospace font (should match in initial fonts)

title font (should match in initial fonts)

secondary title font (should match in initial fonts)

main font (should match in initial fonts)

title and simple desc

title here

basic info here. use [br][/br] to insert content

individual tiles

tile bg image

tile content paragraph (duplicate for more paragraphs)

content paragraph

title of the tile here

rating circles - duplicate the following circles to add more circles

filled rating circle

empty rating circle

side info dropdown content

side info content paragraph

Output