sy-addon

This is an add-on for the Simple Yonder theme, made by EstrellaYoshte.

To use, put the following:

[[include :scp-wiki:theme:simple-yonder]]
[[include :topia:sy-addon]]

Will be subject to changes from time to time.

---

Current changes included are:

- Centered title

- Tailored Toggle Sidebar component

Collapsibles

Content.

- Optimized image block alignment for screen size of 540px and less

Flex tabs

A

with animation

B
B
B

material-box div

sidebox div

Vivamus sapien sem, gravida non vulputate eu, vestibulum vel lacus. Nulla massa erat, sodales dignissim vehicula non, fringilla id ante. Morbi eleifend lacus non nisl finibus aliquam. Proin tristique, lacus eu varius porttitor, lorem justo ullamcorper massa, sed ultricies elit dolor vitae nisi. Fusce varius nec sapien malesuada luctus. Pellentesque efficitur porttitor turpis sit amet rhoncus.

- Styled page tags

- Fira Code font for edit textbox

- Footnote optimizations¹

- No avatar enlarge on hover

Footnotes

1. Max width is 420px, and there is no (click to scroll to footnote), which doesn't even work.

---

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
 
/*-- in-page stuff --*/
 
#page-title {
    text-align: center;
}
 
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source {
    font-family: 'Fira Code', monospace;
    font-size: 98%;
}
 
.scp-image-block.block-left { margin-left: 0; }
.scp-image-block.block-right { margin-right: 0; }
@media (max-width: 540px) {
  .scp-image-block.block-left, .scp-image-block.block-right {
    float: none; clear: both; margin-left: auto; margin-right: auto;
  }
}
 
.avatar-hover { display: none !important; }
 
.hovertip { max-width: 420px; }
 
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    display: none;
}
 
/*-- fancy collapsible, derived from monkatraz bhl collapsible --*/
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    background: #7E2520;
    padding-top: 0.3rem;
    padding-bottom: 0.24rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
    margin:auto; /*-- center --*/
}
#page-content .collapsible-block-link {
    color: #f4f4f4;
    font-family: 'Fira Code', monospace;
    font-weight: bold;
    font-size: 96%;
}
#page-content .collapsible-block-link:hover {
    text-decoration: none
}
 
#page-content .collapsible-block-content {
    border-top: solid 0.24rem #7E2520;
    border-bottom: solid 0.24rem #7E2520;
}
 
#page-content .collapsible-block-folded .collapsible-block-link::before {
    content: "▷  ";
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
    content: "▽  ";
}
 
/*-- Toggle Sidebar styling --*/
div#side-bar {
  border-right: solid 1px #d9d9d9;
  box-sizing: border-box;
  overflow-x: hidden;
}
 
/* ---- YUI TAB CUSTOMIZATION ----*/
 
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     margin: 0 auto;
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     border: unset;
     background-color: #f4f4f4;
     box-shadow: none;
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     background-color: #f4f4f4;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
     font-weight: bold;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     align-items: center;
     justify-content: center;
}
.yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected {
    margin: 0;
}
 
/*-- tab slide --*/
.yui-navset .yui-content > div {
    display: block;
    top: 0;
    overflow: hidden;
    transform-origin: 0 0;
}
 
#page-content .yui-navset .yui-content > div[style*="none"] {
    display: block !important;
    flex: 0;
    max-height: 0;
    padding: 0 0.5em;
    border-width: 0;
    /* The following transition affects the one that DISAPPEARS */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0s;
    animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
#page-content .yui-navset .yui-content > div[style*="block"] {
    display: block !important;
    flex: 1;
    max-height: 9999rem;
    /* The following transition affects the one that APPEARS */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0.5s;
    animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
 
@keyframes tab-disappear {
    0% { max-height: 9999rem; }
    1% { max-height: 100vh; }
    100% { max-height: 0; }
}
@keyframes tab-appear {
    0% { max-height: 0; }
    99% { max-height: 100vh; }
    100% { max-height: 9999rem; }
}
 
/*-- custom div box borrowed from magnus --*/
.material-box {
    padding: .01em 16px;
    margin-bottom: 16px;
    margin-top: 16px;
    padding-bottom: 1em;
    border: 1px #bbbbbb solid;
    box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.16);
}
 
/*-- sidebox stuff--*/
.limit {
    margin-bottom: -1rem;
}
.anchor {
    position: sticky;
    height: 0;
    top: 0;
}
.sidebox {
    background-color: #ffffff;
    border: 1px #bbbbbb solid;
    border-top: solid 4px #7E2520;
    box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.16);
    padding: .14rem;
    margin-top: 0;
    margin-bottom: 8px;
    width: calc((100vw - 870px)/2);
    max-height: calc(100vh - 18rem);
    position: absolute;
    top: 0;
    left: calc(104% + 13px - 1vw);
    z-index: 5;
    overflow: auto;
    box-sizing: border-box;
}
@media (max-width: 1290px) {
    .sidebox {
        width: 100%;
        border-top: solid 1px #bbbbbb;
        position: relative;
        left: 0;
        margin-bottom: 0.6rem;
        padding: .01em 16px;
    }
    .anchor {
        position: relative;
        height: unset;
    }
    .limit {
        margin-bottom: 0;
    }
}
 
/*-- tags --*/
 
#main-content .page-tags a {
    height: 0.8125rem;
    line-height: 0.8125rem;
    font-size: 0.6875rem;
    background-color: #282828;
    color: #f4f4f4;
    border-radius: 0rem;
    margin: .25rem .2rem; .5rem .2rem;
    padding: 0.21rem 0.35rem 0.22rem 1.02rem;
    --notchSize: 7.6px;
    clip-path: 
     polygon(
      0% var(--notchSize), 
      var(--notchSize) 0%, 
      100% 0%,  
      100% 100%, 
      calc(100% - var(--notchSize)) 100%, 
      var(--notchSize) 100%, 
      0% calc(100% - var(--notchSize))
    );
}
 
#main-content .page-tags a:hover {
    background-color: #E53C35;
    text-decoration: none;
}
#main-content .page-tags a:before {
    content: "⬤";
    color: white;
    font-size: 5.8px;
    float: left;
    position: relative;
    left: -0.6rem;
    width: 0;
    height: 0;
}
 
.page-tags span {
    border-top: 1px solid #bbbbbb;
}