benjeto-jekyll-theme 0.0.1

data/_sass/benjeto/base.scss

@@ -0,0 +1,639 @@
+* {
+  line-height: 1.6;
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  word-break: auto-phrase;
+}
+
+body {
+  font-family: system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  width: 750px;
+  margin: 0 auto 32px;
+  padding: 0;
+}
+
+main, article.post {
+  display: block;
+  width: 100%;
+  padding: 0 16px;
+}
+article.post {
+  border: 2px solid var(--page);
+  border-width: 2px 0;
+}
+.pagebox {
+  background: var(--page);
+  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
+  * {
+    line-height: 1.7;
+  }
+}
+article.post {
+  font-size: 1.05rem;
+  padding: 0 20px;
+}
+article.serif {
+  font-family: serif;
+}
+
+h1, h2, h3 {
+  margin: 20px 0 16px;
+  color: var(--head);
+  line-height: 1.2;
+  font-weight: 600;
+}
+h2 {
+  padding-bottom: 2px;
+  border-bottom: 1.5px solid var(--border);
+}
+
+hgroup {
+  margin: 20px 0 16px;
+  padding-bottom: 8px;
+  &:has(h2) {
+    border-bottom: 1.5px solid var(--border);
+  }
+  p, h2, h3, h4, h5, h6 {
+    padding: 0;
+    margin: 0;
+    border-bottom: none;
+  }
+}
+
+a {
+  color: var(--link);
+  transition: color 0.1s;
+  text-decoration: none;
+  &:hover, &:focus {
+    color: var(--linkhover);
+    text-decoration: underline;
+  }
+}
+
+i {
+  color: var(--gray);
+}
+
+ul, ol {
+  margin: 16px 32px 16px;
+  padding: 0;
+}
+li ul, li ol {
+  margin: 0px 24px 4px;
+}
+
+table {
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+  border-collapse: collapse;
+  width: 100%;
+  margin: 16px 0;
+  th, td {
+    padding: 8px 16px;
+    border: 1px solid var(--border);
+  }
+  thead, tfoot {
+    background: var(--boxbg);
+  }
+  tbody tr {
+    background: var(--page);
+  }
+  tbody th {
+    background: var(--boxbglight);
+  }
+  tbody:not(:has(th)) tr:nth-child(even) {
+    background: var(--boxbglight);
+  }
+}
+
+caption {
+  caption-side: bottom;
+  color: var(--gray);
+}
+
+blockquote:not(.tiktok-embed) {
+  margin: 16px 0;
+  padding: 16px 24px;
+  background: var(--boxbg);
+  border-left: 4px solid var(--border);
+  p {
+    margin: 4px 0;
+  }
+}
+
+pre, code, code * {
+  font-family: monospace, system-ui, sans-serif;
+}
+code {
+  background: var(--boxbglight);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1px 4px;
+  margin: 0 2px;
+}
+pre code {
+  direction: ltr;
+  display: block;
+  border-radius: 6px;
+  padding: 8px 12px;
+  overflow-x: auto;
+  border-width: 1.5px;
+}
+
+details {
+  margin: 16px 0;
+  padding: 8px 16px;
+  background: var(--boxbglight);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  summary {
+    font-weight: 600;
+    margin: 0;
+    padding: 4px 0;
+  }
+} 
+
+hr {
+  margin:32px auto;
+  width:100%;
+  border:1px solid var(--border);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+body:not(.allow-image-select) img, img.icon {
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+video {
+  background: #000;
+}
+
+.icon {
+  display: inline-block;
+  width: 1em;
+  margin: 0;
+  vertical-align: bottom;
+}
+
+.menu-btn {
+  font-weight: bold;
+  font-size: 1em;
+  background: var(--boxbg);
+  color: var(--text);
+  text-align: center;
+  padding: 4px 8px;
+  margin: 2px 4px;
+  min-width: 36px;
+  min-height: 36px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  transition: filter 0.2s;
+  .icon {
+    width: 24px;
+    margin-bottom: 1px;
+  }
+  &:has(.icon) {
+    padding: 4px;
+  }
+  &:hover, &:focus {
+    filter: brightness(0.9);
+    text-decoration: none;
+  }
+  &.subscribe {
+    background: var(--link);
+    color: var(--bg);
+    border: 1px solid var(--link);
+    &:hover, &:focus {
+      filter: brightness(0.8);
+    }
+  }
+  &#btn {
+    display: none;
+  }
+}
+
+button.shareBtn {
+  display: none;
+  background: none;
+  border: none;
+  border-radius: 32px;
+  aspect-ratio: 1 / 1;
+  height: 34px;
+  padding: 0 6px;
+  text-align: end;
+  transition: background 0.2s;
+  &:hover, &.disabled {
+    background: var(--boxbg);
+  }
+  & .icon {
+    width: 22px;
+    height: 22px;
+  }
+  & .shareMsg {
+    font-size: 0.9rem;
+    line-height: 22px;
+  }
+  &.disabled {
+    aspect-ratio: initial;
+    pointer-events: none;
+  }
+}
+
+
+span.tag {
+  display: inline-block;
+  color: var(--gray);
+  font-size: 0.9em;
+  line-height: 1.4;
+  padding: 1px 8px;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+}
+
+span.category {
+  display: inline-block;
+  font-weight: 500;
+  margin: 0;
+}
+
+time {
+  color: var(--gray);
+  font-size: 0.9em;
+}
+
+iframe.youtube, iframe.nicovideo, iframe.mastodon-embed {
+  display: block;
+  margin: 16px 0;
+  max-width: 100%;
+  height: 315px;
+  border: none;
+  border-radius: 8px;
+}
+
+.twitter-tweet-rendered {
+  overflow: scroll;
+  margin: 16px auto;
+  max-width: 100%;
+  border-radius: 12px;
+}
+
+header.post {
+  margin: 32px 16px 16px;
+  h1 {
+    font-size: 1.8em;
+    margin-bottom: 8px;
+  }
+  div.meta {
+    margin-inline-start: 4px;
+    * {
+      margin-bottom: 2px;
+    }
+    div.tags {
+      display: inline-block;
+      margin: 0 4px;
+      span.tag {
+        margin: 0 4px;
+      }
+    }
+    div.time {
+      display: flex;
+      flex-wrap: wrap;
+      time {
+        margin-inline-end: 10px;
+      }
+    }
+    span.author {
+      display: block;
+      color: var(--gray);
+      font-size: 0.9em;
+    }
+  }
+}
+
+span.license {
+  display: block;
+  color: var(--gray);
+  font-size: 0.9em;
+  line-height: 1.4;
+  &.post {
+    margin: 2px 8px;
+  }
+}
+
+div.header {
+  width: 100%;
+  aspect-ratio: 5 / 1;
+  margin-bottom: -8px;
+  background: var(--boxbg);
+  img {
+    vertical-align: bottom;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 0 0 8px 8px;
+  }
+}
+
+header.home {
+  ul.exlink {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 4px 0 0;
+    padding: 0 4px;
+    li {
+      margin: 4px;
+      a {
+        background: var(--boxbglight);
+        border: 1px solid var(--border);
+        border-radius: 4px;
+        padding: 4px 6px;
+        transition: filter 0.15s;
+        &:hover, &:focus {
+          filter: brightness(0.9);
+        }
+      }
+    }
+  }
+  div.headline {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    margin: 10px 0 4px;
+    min-height: 44px;
+    section.sidebutton {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+  a.proficon {
+    display: block;
+    width: 108px;
+    max-width: 25%;
+    min-width: 68px;
+    margin: -18% -2px 0;
+    border-radius: 8px;
+    img, div.dummy {
+      display: block;
+      width: 100%;
+      aspect-ratio: 1 / 1;
+      object-fit: cover;
+      background: var(--boxbg);
+      border: 4px solid var(--bg);
+      border-radius: 8px;
+    }
+    &.round, &.round img, &.round div.dummy{
+      border-radius: 50%;
+    }
+    &.no-header {
+      margin-top: 0;
+    }
+  }
+  h1 {
+    display: inline-block;
+    font-size: 1.5em;
+    margin: 0;
+  }
+  p.bio {
+    margin: 8px 0 0;
+  }
+  h1, p.bio{
+    padding: 0 8px;
+  }
+  span.pronouns {
+    color: var(--gray);
+    font-size: 0.9em;
+  }
+}
+
+section.post-list, div.custom-home {
+  margin: 8px 0;
+  h2 {
+    border-bottom: none;
+  }
+}
+article.feed-post, div.custom-feed {
+  display: block;
+  margin: 16px 0;
+  padding: 0;
+  border: 2px solid var(--page);
+  border-radius: 16px;
+  transition: border-color 0.2s;
+  &:has(a.post-lighter:hover) {
+    border-color: var(--border);
+  }
+  h2 {
+    font-size: 1.2em;
+    margin: 0;
+  }
+  a.post-link {
+    display: block;
+    padding: 10px 20px 0;
+    color: var(--text);
+    text-decoration: none;
+  }
+  ul {
+    margin: 4px 30px;
+  }
+}
+div.post-excerpt {
+  p {
+    margin: 0;
+  }
+  iframe.youtube, iframe.nicovideo {
+    margin: 6px 0;
+    height: 240px;
+  }
+}
+div.post-custom {
+  a.post-link, div.no-link {
+    padding: 10px 20px;
+  }
+}
+.post-foot {
+  display: flex;
+  align-items: center;
+  .meta {
+    flex: 1 auto;
+    a {
+      display: inline-block;
+      width: 100%;
+      padding: 4px 20px 8px;
+    }
+  }
+  span.category {
+    font-size: 0.9em;
+    color: var(--gray);
+    margin-inline-end: 8px;
+  }
+  time {
+    display: inline-block;
+    margin-inline-end: 8px;
+  }
+  div.tags {
+    display: inline-block;
+    span.tag {
+      margin-inline-end: 6px;
+    }
+  }
+  button.shareBtn {
+    flex: 0 0 auto;
+    margin-inline-end: 8px;
+    .icon {
+      opacity: 0.5;
+      transition: opacity 0.2s;
+    }
+    &:hover, &:focus, &.disabled {
+      background: var(--boxbg);
+      .icon {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+strong.no-posts {
+  display: block;
+  margin: 16px 0;
+  text-align: center;
+  font-size: 1.2em;
+  font-weight: 600;
+}
+
+footer {
+  margin: 16px;
+  p.copy {
+    margin: 16px;
+    color: var(--gray);
+	text-align: center;
+  }
+  div.footer-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+div.miniprof {
+  margin: 16px 0;
+  div.profline {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+    a.proficon {
+      text-decoration: none;
+      img {
+        width: 40px;
+        aspect-ratio: 1 / 1;
+        object-fit: cover;
+        background: var(--boxbg);
+        border-radius: 4px;
+        vertical-align: middle;
+        margin-inline-end: 6px;
+      }
+      span {
+        margin: 0;
+        font-size: 1.2em;
+        font-weight: 500;
+        color: var(--text);
+        vertical-align: middle;
+        overflow-wrap: anywhere;
+      }
+      &:hover, &:focus {
+        span {
+          text-decoration: underline;
+        }
+      }
+      &.round {
+        img {
+          border-radius: 50%;
+        }
+      }
+    }
+    div.sbbutton {
+      margin: auto 0;
+    }
+  }
+  &.box {
+    margin: 32px auto 0;
+    padding: 20px 24px 4px;
+    max-width: 600px;
+    border: 1.5px solid var(--border);
+	border-radius: 16px;
+    div.profline a.proficon {
+      img {
+        width:50px;
+      }
+      span {
+        font-size: 1.4em;
+        font-weight: 600;
+      }
+    }
+  }
+  div.buttonline {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    align-items: center;
+    button.shareBtn {
+      margin: 0 4px;
+    }
+  }
+}
+
+ul.lang-select {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  list-style: none;
+  margin: 16px;
+  padding: 0;
+  li a {
+    display: block;
+    padding: 4px 8px;
+    color: var(--gray);
+  }
+}
+
+@media only screen and (max-width:750px) {
+  body {
+    width: 100%;
+  }
+  div.header, div.header img {
+    border-radius: 0;
+  }
+}
+
+@media only screen and (max-width:200px) {
+  body {
+    width: 200px;
+  }
+}
+
+@media (prefers-contrast: more) {
+  code, pre code {
+    background: var(--bg);
+  }
+  article.post {
+    border-color: var(--boxbg);
+  }
+  article.feed-post, div.custom-feed {
+    border-color: var(--border);
+    &:has(a.post-lighter:hover) {
+      border-color: var(--link);
+    }
+  }
+}
+

data/_sass/benjeto/css/app-box.scss

@@ -0,0 +1,33 @@
+div.app-box {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 16px 0;
+}
+img.app-icon {
+  width: 100px;
+  height: 100px;
+  vertical-align: top;
+  margin-inline-end: 16px;
+  border-radius: 8px;
+  flex-grow:0;
+}
+div.app-info {
+  flex-grow:1;
+  width:calc(100% - 116px);
+  min-width:166px;
+  line-height: 1.2;
+  h2, h3, b {
+    display: block;
+    line-height: 1.2;
+    font-size: 1.5em;
+    margin: 2px 0;
+    padding: 0;
+  }
+}
+
+article.feed-post, div.custom-feed {
+ div.app-box {
+  margin: 8px 0;
+ }
+}
+

data/_sass/benjeto/css/figure.scss

@@ -0,0 +1,57 @@
+figure {
+  margin: 16px 0;
+  &.image img, &.video video {
+    display: block;
+    margin: 0;
+    max-width: 100%;
+    min-width: 50%;
+    height: auto;
+    border-radius: 12px;
+    &.pixel {
+      image-rendering: pixelated;
+    }
+  }
+  &.image figcaption, &.video figcaption {
+    margin: 8px;
+    color: var(--gray);
+    line-height: 1.4;
+  }
+  &.audio {
+    width: 100%;
+    padding: 12px;
+    border: 2px solid var(--border);
+    border-radius: 22px;
+    figcaption {
+      display: flex;
+      align-items: top;
+      margin-bottom: 8px;
+      img {
+        display: block;
+        width: 128px;
+        height: 100%;
+        border-radius: 12px;
+        margin-inline-end: 6px;
+      }
+      div {
+        margin: 0 12px;
+        line-height: 1.4;
+      }
+    }
+    audio {
+      display: block;
+      width: 100%;
+      border-radius: 12px;
+    }
+  }
+}
+
+div.post-excerpt {
+  figcaption {
+    display: none;
+  }
+  figure.audio {
+    padding: 0;
+    border: none;
+  }
+}
+