-
-
Save dhrm1k/210e0b5b755435f15b72eb5c8657fb5d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>linuxusers.in</title> | |
| <link rel="stylesheet" href="styles.css"> <!-- Link your CSS file here --> | |
| <style> | |
| body { max-width: 48em; margin: auto; line-height: 1.5; padding: 0.8em; word-wrap: break-word; } | |
| pre { overflow-x: scroll; } | |
| .snac-embedded-video, img { max-width: 100% } | |
| .snac-origin { font-size: 85% } | |
| .snac-score { float: right; font-size: 85% } | |
| .snac-top-user { text-align: center; padding-bottom: 2em } | |
| .snac-top-user-name { font-size: 200% } | |
| .snac-top-user-id { font-size: 150% } | |
| .snac-announcement { border: black 1px solid; padding: 0.5em } | |
| .snac-avatar { float: left; height: 2.5em; width: 2.5em; padding: 0.25em; border-radius: 50%; overflow: hidden; } | |
| .snac-avatar img { width: 100%; height: 100%; object-fit: cover; } | |
| .snac-author { font-size: 90%; text-decoration: none } | |
| .snac-author-tag { font-size: 80% } | |
| .snac-pubdate { color: #a0a0a0; font-size: 90% } | |
| .snac-top-controls { padding-bottom: 1.5em } | |
| .snac-post { border-top: 1px solid #a0a0a0; padding-top: 0.5em; padding-bottom: 0.5em; } | |
| .snac-children { padding-left: 1em; border-left: 1px solid #a0a0a0; } | |
| .snac-textarea { font-family: inherit; width: 100% } | |
| .snac-history { border: 1px solid #606060; border-radius: 3px; margin: 2.5em 0; padding: 0 2em } | |
| .snac-btn-mute, .snac-btn-unmute, .snac-btn-follow, .snac-btn-unfollow, .snac-btn-hide, .snac-btn-delete, .snac-btn-limit, .snac-btn-unlimit { | |
| float: right; margin-left: 0.5em; | |
| } | |
| .snac-footer { margin-top: 2em; font-size: 75% } | |
| .snac-poll-result { margin-left: auto; margin-right: auto; } | |
| .snac-list-of-lists { padding-left: 0; } | |
| .snac-list-of-lists li { | |
| display: inline; border: 1px solid #a0a0a0; border-radius: 25px; | |
| margin-right: 0.5em; padding-left: 0.5em; padding-right: 0.5em; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| body, input, textarea { background-color: #000; color: #fff; } | |
| a { color: #7799dd } | |
| a:visited { color: #aa99dd } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="snac-top-user"> | |
| <div class="snac-avatar"> | |
| <img src="https://picsum.photos/100" alt="Avatar"> | |
| </div> | |
| <div> | |
| <span class="snac-top-user-name">John Doe</span> | |
| <br> | |
| <span class="snac-top-user-id">@johndoe</span> | |
| </div> | |
| </div> | |
| <div class="snac-announcement"> | |
| <strong>Announcement:</strong> This is a test announcement box with default styles. | |
| </div> | |
| <div class="snac-post"> | |
| <p><strong>Post:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| <div class="snac-buttons"> | |
| <button class="snac-btn-mute">Mute</button> | |
| <button class="snac-btn-follow">Follow</button> | |
| <button class="snac-btn-hide">Hide</button> | |
| </div> | |
| </div> | |
| <div class="snac-list-of-lists"> | |
| <ul> | |
| <li>List Item 1</li> | |
| <li>List Item 2</li> | |
| <li>List Item 3</li> | |
| </ul> | |
| </div> | |
| <div class="snac-footer"> | |
| <p>Footer content here for testing dark mode and additional styles.</p> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment