jekyll-theme-mastodon 1.0.0

data/_sass/_highlights.scss

@@ -0,0 +1,146 @@
+code {
+  padding: 0.125rem 0.25rem;
+  color: darken($primary-text-color, 25%);
+  background-color: #17191f;
+  border-radius: 0.25rem;
+  overflow: auto;
+}
+
+pre code {
+  padding: 0;
+  background-color: transparent;
+  border-radius: 0;
+  overflow: auto;
+}
+
+pre {
+  font-size: 0.875rem;
+  line-height: 1.5em;
+  border-radius: 0.25rem;
+  padding: 0.59375rem;
+}
+.highlight pre {
+  border: none;
+  background: none;
+  margin: 1em 0 1em 0; // make 0 for 0 margin
+  overflow: auto;
+}
+.highlight > pre {
+  background-color: darken($ui-base-color, 2%);
+  background-size: auto 3em;
+  background-position-y: 0.625rem;
+  border: 1px solid rgba(0,0,0,0.1);
+  border-left: 0.4375rem solid transparent;
+
+  .gutter {
+	color: inherit;
+    padding: 0;
+  }
+}
+.highlight > pre:not([class~="highlight"]) { /* code block with line number */
+  padding: 0;
+}
+.highlight table,
+.highlight tr,
+.highlight td {
+  border: 0 !important;
+  background: none;
+  padding: 0;
+  margin: 0;
+}
+.highlight pre.lineno {
+  color: $secondary-text-color;
+  border-radius: 0;
+  border: 0;
+  border-right: 0.1rem solid lighten($ui-base-color, 10%);
+}
+code table td {
+  padding: 0 !important;
+}
+
+
+.lineno {
+  width: fit-content;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.lineno::selection, .lineno::-moz-selection {
+  background: none;
+}
+
+.highlight {
+  .c {color: #586E75;}
+  .err,
+  .esc,
+  .g {color: #93A1A1;}
+  .k {color: #719e07;}
+  .l,
+  .n {color: #93A1A1;}
+  .o {color: #719e07;}
+  .x {color: #CB4B16;}
+  .p {color: #93A1A1;}
+  .ch,
+  .cm {color: #586E75;}
+  .cp {color: #719e07;}
+  .cpf,
+  .c1 {color: #586E75;}
+  .cs {color: #719e07;}
+  .gd {color: #DC322F;}
+  .ge {color: #93A1A1; font-style: italic;}
+  .gr {color: #DC322F; font-weight: bold;}
+  .gh {color: #CB4B16;}
+  .gi {color: #719e07;}
+  .go,
+  .gp {color: #93A1A1;}
+  .gs {color: #93A1A1; font-weight: bold;}
+  .gu {color: #268BD2;}
+  .gt {color: #93A1A1;}
+  .kc {color: #CB4B16;}
+  .kd {color: #268BD2;}
+  .kn,
+  .kp {color: #719e07;}
+  .kr {color: #268BD2;}
+  .kt {color: #DC322F;}
+  .ld {color: #93A1A1;}
+  .m,
+  .s {color: #2AA198;}
+  .na {color: #93A1A1;}
+  .nb {color: #B58900;}
+  .nc {color: #268BD2;}
+  .no {color: #CB4B16;}
+  .nd {color: #268BD2;}
+  .ni,
+  .ne {color: #CB4B16;}
+  .nf {color: #268BD2;}
+  .nl,
+  .nn,
+  .nx,
+  .py {color: #93A1A1;}
+  .nt,
+  .nv {color: #268BD2;}
+  .ow {color: #719e07;}
+  .w {color: #93A1A1;}
+  .mb,
+  .mf,
+  .mh,
+  .mi,
+  .mo {color: #2AA198;}
+  .sb {color: #586E75;}
+  .sc {color: #2AA198;}
+  .sd {color: #93A1A1;}
+  .s2 {color: #2AA198;}
+  .se {color: #CB4B16;}
+  .sh {color: #93A1A1;}
+  .si,
+  .sx {color: #2AA198;}
+  .sr {color: #DC322F;}
+  .s1,
+  .ss {color: #2AA198;}
+  .bp,
+  .vc,
+  .vg,
+  .vi {color: #268BD2;}
+  .il {color: #2AA198;
+}

data/_sass/_introduction.scss

@@ -0,0 +1,154 @@
+.introduction {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: $ui-base-color;
+
+  @media screen and (max-width: 920px) {
+    display: block !important;
+  }
+
+  &__pager {
+    background: darken($ui-base-color, 8%);
+    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+    overflow: hidden;
+  }
+
+  &__pager,
+  &__frame {
+    border-radius: 10px;
+    width: 50vw;
+    min-width: 920px;
+
+    @media screen and (max-width: 920px) {
+      min-width: 0;
+      width: 100%;
+      border-radius: 0;
+      box-shadow: none;
+    }
+  }
+
+  &__frame-wrapper {
+    opacity: 0;
+    transition: opacity 500ms linear;
+
+    &.active {
+      opacity: 1;
+      transition: opacity 50ms linear;
+    }
+  }
+
+  &__frame {
+    overflow: hidden;
+  }
+
+  &__illustration {
+    height: 50vh;
+
+    @media screen and (max-width: 630px) {
+      height: auto;
+    }
+
+    img {
+      object-fit: cover;
+      display: block;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__text {
+    border-top: 2px solid $ui-highlight-color;
+
+    &--columnized {
+      display: flex;
+
+      & > div {
+        flex: 1 1 33.33%;
+        text-align: center;
+        padding: 25px;
+        padding-bottom: 30px;
+      }
+
+      @media screen and (max-width: 630px) {
+        display: block;
+        padding: 15px 0;
+        padding-bottom: 20px;
+
+        & > div {
+          padding: 10px 25px;
+        }
+      }
+    }
+
+    h3 {
+      font-size: 24px;
+      line-height: 1.5;
+      font-weight: 700;
+      margin-bottom: 10px;
+    }
+
+    p {
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 400;
+      color: $darker-text-color;
+
+      code {
+        display: inline-block;
+        background: darken($ui-base-color, 8%);
+        font-size: 15px;
+        border: 1px solid lighten($ui-base-color, 8%);
+        border-radius: 2px;
+        padding: 1px 3px;
+      }
+    }
+
+    &--centered {
+      padding: 25px;
+      padding-bottom: 30px;
+      text-align: center;
+    }
+  }
+
+  &__dots {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 25px;
+
+    @media screen and (max-width: 630px) {
+      display: none;
+    }
+  }
+
+  &__dot {
+    width: 14px;
+    height: 14px;
+    border-radius: 14px;
+    border: 1px solid $ui-highlight-color;
+    background: transparent;
+    margin: 0 3px;
+    cursor: pointer;
+
+    &:hover {
+      background: lighten($ui-base-color, 8%);
+    }
+
+    &.active {
+      cursor: default;
+      background: $ui-highlight-color;
+    }
+  }
+
+  &__action {
+    padding: 25px;
+    padding-top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

data/_sass/_lists.scss

@@ -0,0 +1,19 @@
+.no-list {
+  list-style: none;
+
+  li {
+    display: inline-block;
+    margin: 0 5px;
+  }
+}
+
+.recovery-codes {
+  list-style: none;
+  margin: 0 auto;
+
+  li {
+    font-size: 125%;
+    line-height: 1.5;
+    letter-spacing: 1px;
+  }
+}

data/_sass/_mixins.scss

@@ -0,0 +1,56 @@
+@mixin avatar-radius {
+  border-radius: 4px;
+  background: transparent no-repeat;
+  background-position: 50%;
+  background-clip: padding-box;
+}
+
+@mixin avatar-size($size: 48px) {
+  width: $size;
+  height: $size;
+  background-size: $size $size;
+}
+
+@mixin search-input {
+  outline: 0;
+  box-sizing: border-box;
+  width: 100%;
+  border: 0;
+  box-shadow: none;
+  font-family: inherit;
+  background: $ui-base-color;
+  color: $darker-text-color;
+  font-size: 14px;
+  margin: 0;
+}
+
+@mixin search-popout {
+  background: $simple-background-color;
+  border-radius: 4px;
+  padding: 10px 14px;
+  padding-bottom: 14px;
+  margin-top: 10px;
+  color: $light-text-color;
+  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+
+  h4 {
+    text-transform: uppercase;
+    color: $light-text-color;
+    font-size: 13px;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+
+  li {
+    padding: 4px 0;
+  }
+
+  ul {
+    margin-bottom: 10px;
+  }
+
+  em {
+    font-weight: 500;
+    color: $inverted-text-color;
+  }
+}

data/_sass/_modal.scss

@@ -0,0 +1,35 @@
+.modal-layout {
+  background: $ui-base-color url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}"/></svg>') repeat-x bottom fixed;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  padding: 0;
+}
+
+.modal-layout__mastodon {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  > div {
+    flex: 1;
+    max-height: 235px;
+    position: relative;
+
+    img {
+      max-height: 100%;
+      max-width: 100%;
+      height: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .account-header {
+    margin-top: 0;
+  }
+}

data/_sass/_polls.scss

@@ -0,0 +1,274 @@
+.poll {
+  margin-top: 16px;
+  font-size: 14px;
+
+  li {
+    margin-bottom: 10px;
+    position: relative;
+  }
+
+  &__chart {
+    border-radius: 4px;
+    display: block;
+    background: darken($ui-primary-color, 5%);
+    height: 5px;
+    min-width: 1%;
+
+    &.leading {
+      background: $ui-highlight-color;
+    }
+  }
+
+  progress {
+    border: 0;
+    display: block;
+    width: 100%;
+    height: 5px;
+    appearance: none;
+    background: transparent;
+
+    &::-webkit-progress-bar {
+      background: transparent;
+    }
+
+    // Those rules need to be entirely separate or they won't work, hence the
+    // duplication
+    &::-moz-progress-bar {
+      border-radius: 4px;
+      background: darken($ui-primary-color, 5%);
+    }
+
+    &::-ms-fill {
+      border-radius: 4px;
+      background: darken($ui-primary-color, 5%);
+    }
+
+    &::-webkit-progress-value {
+      border-radius: 4px;
+      background: darken($ui-primary-color, 5%);
+    }
+  }
+
+  &__option {
+    position: relative;
+    display: flex;
+    padding: 6px 0;
+    line-height: 18px;
+    cursor: default;
+    overflow: hidden;
+
+    &__text {
+      display: inline-block;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      max-width: calc(100% - 45px - 25px);
+    }
+
+    input[type=radio],
+    input[type=checkbox] {
+      display: none;
+    }
+
+    .autossugest-input {
+      flex: 1 1 auto;
+    }
+
+    input[type=text] {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      font-size: 14px;
+      color: $inverted-text-color;
+      outline: 0;
+      font-family: inherit;
+      background: $simple-background-color;
+      border: 1px solid darken($simple-background-color, 14%);
+      border-radius: 4px;
+      padding: 6px 10px;
+
+      &:focus {
+        border-color: $highlight-text-color;
+      }
+    }
+
+    &.selectable {
+      cursor: pointer;
+    }
+
+    &.editable {
+      display: flex;
+      align-items: center;
+      overflow: visible;
+    }
+  }
+
+  &__input {
+    display: inline-block;
+    position: relative;
+    border: 1px solid $ui-primary-color;
+    box-sizing: border-box;
+    width: 18px;
+    height: 18px;
+    flex: 0 0 auto;
+    margin-right: 10px;
+    top: -1px;
+    border-radius: 50%;
+    vertical-align: middle;
+    margin-top: auto;
+    margin-bottom: auto;
+    flex: 0 0 18px;
+
+    &.checkbox {
+      border-radius: 4px;
+    }
+
+    &.active {
+      border-color: $valid-value-color;
+      background: $valid-value-color;
+    }
+
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: lighten($valid-value-color, 15%);
+      border-width: 4px;
+    }
+
+    &::-moz-focus-inner {
+      outline: 0 !important;
+      border: 0;
+    }
+
+    &:focus,
+    &:active {
+      outline: 0 !important;
+    }
+  }
+
+  &__number {
+    display: inline-block;
+    width: 45px;
+    font-weight: 700;
+    flex: 0 0 45px;
+  }
+
+  &__voted {
+    padding: 0 5px;
+    display: inline-block;
+
+    &__mark {
+      font-size: 18px;
+    }
+  }
+
+  &__footer {
+    padding-top: 6px;
+    padding-bottom: 5px;
+    color: $dark-text-color;
+  }
+
+  &__link {
+    display: inline;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    color: $dark-text-color;
+    text-decoration: underline;
+    font-size: inherit;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:active,
+    &:focus {
+      background-color: rgba($dark-text-color, .1);
+    }
+  }
+
+  .button {
+    height: 36px;
+    padding: 0 16px;
+    margin-right: 10px;
+    font-size: 14px;
+  }
+}
+
+.compose-form__poll-wrapper {
+  border-top: 1px solid darken($simple-background-color, 8%);
+
+  ul {
+    padding: 10px;
+  }
+
+  .poll__footer {
+    border-top: 1px solid darken($simple-background-color, 8%);
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+    button,
+    select {
+      flex: 1 1 50%;
+
+      &:focus {
+        border-color: $highlight-text-color;
+      }
+    }
+  }
+
+  .button.button-secondary {
+    font-size: 14px;
+    font-weight: 400;
+    padding: 6px 10px;
+    height: auto;
+    line-height: inherit;
+    color: $action-button-color;
+    border-color: $action-button-color;
+    margin-right: 5px;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+
+    .poll__option {
+      flex: 0 0 auto;
+      width: calc(100% - (23px + 6px));
+      margin-right: 6px;
+    }
+  }
+
+  select {
+    appearance: none;
+    box-sizing: border-box;
+    font-size: 14px;
+    color: $inverted-text-color;
+    display: inline-block;
+    width: auto;
+    outline: 0;
+    font-family: inherit;
+    background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px;
+    border: 1px solid darken($simple-background-color, 14%);
+    border-radius: 4px;
+    padding: 6px 10px;
+    padding-right: 30px;
+  }
+
+  .icon-button.disabled {
+    color: darken($simple-background-color, 14%);
+  }
+}
+
+.muted .poll {
+  color: $dark-text-color;
+
+  &__chart {
+    background: rgba(darken($ui-primary-color, 14%), 0.2);
+
+    &.leading {
+      background: rgba($ui-highlight-color, 0.2);
+    }
+  }
+}