Okay
  Public Ticket #2076754
Your Roadmap in the Documentation theme??
Closed

Comments

  • Marvin started the conversation

    Hi,

    I really like your roadmap at https://getpublii.com/roadmap/.

    It's probably custom, but is there a simple way to get it to work in Publii themes?!
    I do own the "Documentation" theme - it would fit great in there.

    Many thanks,

    marvin

  •  410
    Bob, replied

    Hi,

    This is a custom work: a few HTML and CSS rules.

    <ul class="roadmap-list">
       <li class="checked">
          <a href="https://getpublii.com/blog/speed-up-startup-to-render.html" class="tooltip">Implemented in v.33.1</a>
          <p>Rewritten SQLite engine.</p>
       </li>
       <li>
          <a href="https://getpublii.com/blog/speed-up-startup-to-render.html" class="tooltip">Implemented in v.33.1</a>
          <p>First iteration of <strong>parallel editing for multiple users</strong> on a single site (you'll be able to thank the rewritten SQLite engine for this feature!)</p>
       </li>
    </ul>
    .roadmap-list {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
        position: relative;
    }
    .roadmap-list:before {
        border-left: 2px solid #6a7081;
        content: "";
        display: block;
        height: calc(100% - 2.5rem);
        left: calc(0.6rem - 1px);
        margin-top: 0.2rem;
        position: absolute;
        top: 1rem;
    }
    .roadmap-list li {
        font-size: 1.125rem;
        margin-bottom: calc(1.06667rem + 0.5vw);
        padding-left: 2.6rem;
    }
    .roadmap-list li:before {
        background: white;
        border: 2px solid #6a7081;
        border-radius: 50%;
        content: "";
        display: block;
        height: 1.2rem;
        left: 0;
        margin-top: 0.37333rem;
        position: absolute;
        width: 1.2rem;
    }
    .roadmap-list .checked::before {
        background: #5cb85c;
        border: 4px solid white;
        height: calc(1.2rem + 2px);
        width: calc(1.2rem + 2px);
        left: -1px;
    }
    .roadmap-list .tooltip {
        background: #5cb85c;
        border-radius: 4px 4px 0 0;
        color: white;
        display: block;
        font-size: 0.79012rem;
        font-weight: 600;
        padding: 0.2rem 1.06667rem;
        position: relative;
        opacity: 0.9;
        top: 2px;
    }
    .roadmap-list .tooltip::before {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right: 6px solid #5cb85c;
        content: ' ';
        height: 0;
        left: -6px;
        width: 0;
        position: absolute;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
    .roadmap-list .tooltip::after {
        content: '\2192';
        margin-left: 4px;
        opacity: 0;
        position: absolute;
        -webkit-transform: translateX(-2px);
        -ms-transform: translateX(-2px);
        transform: translateX(-2px);
        -webkit-transition: all 0.28s ease-out;
        -o-transition: all 0.28s ease-out;
        transition: all 0.28s ease-out;
    }
    .roadmap-list .tooltip:hover::after {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
    .roadmap-list .tooltip + p {
        background: rgba(92, 184, 92, 0.15);
        border-radius: 0 0 4px 4px;
        font-size: 1rem;
        margin: 2px 0 0;
        padding: 0.8rem 1.06667rem;
    }

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

  • Marvin replied

    Wow, thank you for sharing!

    It worked flawlessly👏