klopo, 1 month ago

Modifikasi tema #snac2 berdasarkan tema Paper buatan @voron
merubah background menjadi terang dan beberapa detil kecil lainnya. Untuk font pakai Source Serif 4 dari Google Fonts. https://fonts.google.com/specimen/Source+Serif+4

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');<br></br><br></br>*,<br></br>*:before,<br></br>*:after {<br></br>  box-sizing: border-box;<br></br>}<br></br>body {<br></br>  max-width: 48em;<br></br>  margin: 0 auto;<br></br>  line-height: 1.5;<br></br>  padding: 0.5rem 1rem;<br></br>  word-wrap: break-word;<br></br>  height: 100%;<br></br>  color: <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=292929" rel="tag">#292929</a>;<br></br>  font-weight: 400;<br></br>  font-size: 16px;<br></br>  font-family: 'Source Serif 4', Georgia, serif;<br></br>  line-height: 1.725;<br></br>  text-rendering: geometricPrecision;<br></br>  display: flex;<br></br>  flex-direction: column;<br></br>  overflow-wrap: break-word;<br></br>}<br></br>blockquote { font-style: italic; border-left: 5px solid <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=e85d04" rel="tag">#e85d04</a>; border-radius: 0.4em; padding: 0rem 0 0rem 0.5rem }<br></br>video {<br></br>    aspect-ratio: 16 / 9;<br></br>}<br></br>sup {<br></br>  padding: 0 2px;<br></br>  border-radius: 5px;<br></br>  line-height: 99%;<br></br>  left: 4px;<br></br>  position: relative;<br></br>  bottom: 4px;<br></br>}<br></br>a {<br></br>  text-decoration: none;<br></br>  color: <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=023e8a" rel="tag">#023e8a</a>;<br></br>}<br></br><br></br>.snac-content a:hover {<br></br>    text-decoration: underline;<br></br>}<br></br><br></br>pre {<br></br>    padding: 1em;<br></br>    border-radius: 6px;<br></br>    overflow: auto;<br></br>    border: 1px solid <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=eee" rel="tag">#eee</a>;<br></br>    margin: 1em 0;<br></br>    tab-size: 1rem<br></br>}<br></br>pre, code {<br></br>    font-family: 'SF Mono', monospace, Consolas, Courier New;<br></br>    font-size: 90%;<br></br>}<br></br>p code, div code {<br></br>    border: 1px solid <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=eee" rel="tag">#eee</a>;<br></br>    border-radius: 3px;<br></br>    font-size: 85%;<br></br>    padding: 1px 2px;<br></br>}<br></br>input[type="file"] {<br></br>  margin-bottom: 1rem;<br></br>  width: 100%;<br></br>}<br></br>select,<br></br>input[type=file]::file-selector-button {<br></br>  background: rgb(201, 201, 203, 0.4);<br></br>  border: none;<br></br>  border-radius: 4px;<br></br>  padding: 0.3rem;<br></br>}<br></br>select:hover,<br></br>input[type=file]::file-selector-button:hover {<br></br>  background: rgb(201, 201, 203);<br></br>}<br></br>input[type="text"] {<br></br>  height: auto;<br></br>  font-size: inherit;<br></br>  width: 100%;<br></br>  color: inherit;<br></br>  border-radius: 4px;<br></br>  border: inherit;<br></br>}<br></br>input[class^="snac-btn-"] {<br></br>  background: rgb(201, 201, 203, 0.4);<br></br>  border: none;<br></br>  border-radius: 4px;<br></br>  padding: 0.3rem;<br></br>  font-size: 85%;<br></br>}<br></br>input[class^="snac-btn-"]:hover {<br></br>  background: rgb(201, 201, 203);<br></br>}<br></br>input[name="telegram_bot"] {<br></br>  margin-bottom: 0.5rem;<br></br>}<br></br>.snac-note input[value="Post"],<br></br>.snac-top-controls input[value="Post"],<br></br>.snac-top-controls input[value="Follow"],<br></br>.snac-top-controls input[value="Boost"],<br></br>.snac-top-controls input[value="Update user info"] {<br></br>  background: rgb(100, 149, 237, 0.2);<br></br>  color: <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=6495ed" rel="tag">#6495ED</a>;<br></br>  border: none;<br></br>  border-radius: 4px;<br></br>  padding: 0.5rem 1rem;<br></br>  font-weight: 700;<br></br>}<br></br>.snac-note input[value="Post"]:hover,<br></br>.snac-top-controls input[value="Post"]:hover,<br></br>.snac-top-controls input[value="Follow"]:hover,<br></br>.snac-top-controls input[value="Boost"]:hover,<br></br>.snac-top-controls input[value="Update user info"]:hover {<br></br>  background: rgb(100, 149, 237, 0.3);<br></br>}<br></br>.snac-top-controls input[value="Follow"],<br></br>.snac-top-controls input[value="Boost"] {<br></br>  margin-top: 0.5rem;<br></br>}<br></br>.snac-top-controls > div > details > summary::marker {<br></br>  content: "✏️ ";<br></br>}<br></br>.snac-top-controls <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=new_post_form" rel="tag">#new_post_form</a> details:first-of-type summary::marker {<br></br>  content: "📎 ";<br></br>}<br></br>.snac-top-controls <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=new_post_form" rel="tag">#new_post_form</a> details:last-of-type summary::marker {<br></br>  content: "📊 ";<br></br>}<br></br>.snac-top-controls > details:first-of-type summary::marker {<br></br>  content: "🗃️ ";<br></br>}<br></br>.snac-top-controls > details:last-of-type summary::marker {<br></br>  content: "⚙️ ";<br></br>}<br></br>form[id$=_reply_form] details:first-of-type summary::marker {<br></br>  content: "📎 ";<br></br>}<br></br>.snac-controls details:first-of-type summary::marker {<br></br>  content: "🗨️ ";<br></br>}<br></br>.hashtag, .hashtag span { color: <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=ef233c" rel="tag">#ef233c</a>; font-weight: 600;}<br></br>h2::before {<br></br>  position: absolute;<br></br>  left: -1.2rem;<br></br>  color: <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=6495ed" rel="tag">#6495ED</a>;<br></br>  content: "<a class="mention hashtag" href="https://opbsd.rintik.xyz?t="" rel="tag">#"</a>;;<br></br>  font-size: 1.5rem;<br></br>}<br></br>h2 {<br></br>  position: relative;<br></br>  display: block;<br></br>  margin-left: 1rem;<br></br>}<br></br>textarea,<br></br>input {<br></br>  outline: none;<br></br>  padding: 0.3rem;<br></br>  background: <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=dedcd9" rel="tag">#dedcd9</a>;<br></br>  border: none;<br></br>  border-radius: 4px;<br></br>}<br></br>textarea[name="bio"],<br></br>textarea[name="metadata"] {<br></br>  width: 100%;<br></br>}<br></br>textarea:focus,<br></br>input:focus {<br></br>  background: <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=eae9e7" rel="tag">#eae9e7</a>;<br></br>}<br></br>summary {<br></br>   border-radius: 4px;<br></br>   padding: 0.1rem 0.2rem;<br></br>   width: fit-content;<br></br>}<br></br>summary:hover {<br></br>  cursor: pointer;<br></br>  background: rgb(201, 201, 203, 0.4);<br></br>}<br></br>.snac-content-attachments img {<br></br>    border: 1px solid <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=ccc" rel="tag">#ccc</a>;<br></br>    border-radius: 8px;<br></br>}<br></br>.snac-embedded-video,<br></br>img {<br></br>  max-width: 100%;<br></br>  border-radius: 4px;<br></br>}<br></br>.snac-origin {<br></br>  font-size: 85%;<br></br>  font-family: system-ui, sans-serif;<br></br>  color: limegreen;<br></br>  margin-top: 0.3rem;<br></br>}<br></br>.snac-origin>a {<br></br>  color: <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=363533" rel="tag">#363533</a>;<br></br>}<br></br>.snac-score {<br></br>  float: right;<br></br>  font-size: 85%;<br></br>  margin-left: 0.5rem;<br></br>}<br></br>.snac-metadata {<br></br>  margin-bottom: 1rem;<br></br>}<br></br>.snac-top-user-name {<br></br>  font-size: 150%;<br></br>  font-family: system-ui, sans-serif;<br></br>  color: <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=444" rel="tag">#444</a>;<br></br>  margin-bottom: -1.1rem;<br></br>  margin-top: 0.5rem;<br></br>}<br></br>.snac-top-user-id {<br></br>  font-size: 110%;<br></br>  margin-bottom: 1rem;<br></br>}<br></br>.snac-top-user-bio {<br></br>    margin-bottom: 1em;<br></br>}<br></br>.snac-top-user-bio br {<br></br>    display: none;<br></br>}<br></br>.snac-top-nav {<br></br>  color: <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=e2e0de" rel="tag">#e2e0de</a>;<br></br>  display: flex;<br></br>  align-items: center;<br></br>  justify-content: end;<br></br>}<br></br>.snac-top-nav > a {<br></br>  text-transform: capitalize;<br></br>  border-left: 1px solid;<br></br>  padding-left: 0.6rem;<br></br>  line-height: 1em;<br></br>}<br></br>.snac-top-nav > a:first-of-type {<br></br>  padding-left: 0;<br></br>  border-left: 0;<br></br>}<br></br>.snac-top-nav>a:hover {<br></br>  text-decoration: underline;<br></br>}<br></br>.snac-top-nav>.snac-avatar {<br></br>  margin-right: auto;<br></br>}<br></br>.snac-avatar {<br></br>  float: left;<br></br>  height: 2.5rem;<br></br>  aspect-ratio: 1 / 1;<br></br>  margin-right: 0.5rem;<br></br>  border-radius: 8px;<br></br>}<br></br>.snac-author {<br></br>  font-size: 95%;<br></br>  text-decoration: none;<br></br>  font-weight: 700;<br></br>  color: <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=363533" rel="tag">#363533</a>;<br></br>}<br></br>.snac-author-tag {<br></br>  font-size: 90%;<br></br>  color: <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=363533" rel="tag">#363533</a>;<br></br>  text-decoration: none;<br></br>}<br></br>.snac-pubdate {<br></br>  color: <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=a0a0a0" rel="tag">#a0a0a0</a>;<br></br>  font-size: 90%;<br></br>  float: right;<br></br>}<br></br>.snac-top-controls {<br></br>  padding-bottom: 1.5em;<br></br>}<br></br>.e-content summary {<br></br>  margin-bottom: 1rem;<br></br>  color: <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=c1121f" rel="tag">#c1121f</a>;<br></br>}<br></br>.snac-post {<br></br>  border-top: 1px solid <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=c1c1c1" rel="tag">#c1c1c1</a>;<br></br>  margin-bottom: 1rem;<br></br>}<br></br>.snac-post-header {<br></br>  line-height: 1.3;<br></br>}<br></br>.snac-children {<br></br>  padding-left: 1.5em;<br></br>  border-left: 1px solid <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=c1c1c1" rel="tag">#c1c1c1</a>;<br></br>}<br></br>.snac-textarea {<br></br>  font-family: inherit;<br></br>  width: 100%;<br></br>  color: inherit;<br></br>  border-radius: 4px;<br></br>  border: inherit;<br></br>}<br></br>.snac-history {<br></br>  display: none;<br></br>}<br></br>.snac-btn-mute {<br></br>  float: right;<br></br>  margin-left: 0.5em;<br></br>}<br></br>.snac-btn-unmute {<br></br>  float: right;<br></br>  margin-left: 0.5em;<br></br>}<br></br>.snac-btn-follow {<br></br>  float: right;<br></br>  margin-left: 0.5em;<br></br>}<br></br>.snac-btn-unfollow {<br></br>  float: right;<br></br>  margin-left: 0.5em;<br></br>}<br></br>.snac-btn-hide {<br></br>  float: right;<br></br>  margin-left: 0.5em;<br></br>}<br></br>.snac-btn-delete {<br></br>  float: right;<br></br>  margin-left: 0.5em<br></br>}<br></br>.snac-btn-limit {<br></br>  float: right;<br></br>  margin-left: 0.5em;<br></br>}<br></br>.snac-btn-unlimit {<br></br>  float: right;<br></br>  margin-left: 0.5em;<br></br>}<br></br>.snac-footer {<br></br>  margin-top: 2em;<br></br>  font-size: 75%;<br></br>  color: <a class="mention hashtag" href="https://opbsd.rintik.xyz?t=666" rel="tag">#666</a>;<br></br>}<br></br>.snac-poll-result {<br></br>  margin-left: auto;<br></br>  margin-right: auto;<br></br>}<br></br>@media (max-width: 500px) {<br></br>  body {<br></br>    font-size: 14px;<br></br>  }<br></br>  sup {<br></br>    left: 2px;<br></br>  }<br></br>  .snac-children {<br></br>    padding-left: 1em;<br></br>  }<br></br>  input[class^="snac-btn-"] {<br></br>    font-size: 80%;<br></br>  }<br></br>  .snac-pubdate {<br></br>    font-size: 80%;<br></br>  }<br></br>  h2::before {<br></br>    top: -0.2rem;<br></br>  }<br></br>  .snac-top-nav > a {<br></br>    padding-left: 0.2rem;<br></br>    margin: -0.2rem;<br></br>  }<br></br>}<br></br>