├── logo.png ├── subreply_css_demo.png ├── my_blog_with_subreply_css.png ├── push.sh ├── LICENSE ├── subreply.min.css ├── README.md ├── subreply.css └── test.html /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsklxiv/subreply-css/HEAD/logo.png -------------------------------------------------------------------------------- /subreply_css_demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsklxiv/subreply-css/HEAD/subreply_css_demo.png -------------------------------------------------------------------------------- /my_blog_with_subreply_css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsklxiv/subreply-css/HEAD/my_blog_with_subreply_css.png -------------------------------------------------------------------------------- /push.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # A simple shell script to automate pushing commits from local to Github and Sourcehut 4 | git push -u origin main 5 | git push -u srht main 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Dang Hoang Tuan (Tsuki) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /subreply.min.css: -------------------------------------------------------------------------------- 1 | html{--font-small:13px;--font-regular:17px;--radius:6px;--d:0.2s;--primary-bg:#fff;--whitesmoke:#f0f0f0;--gainsboro:#e0e0e0;--gray:grey;--primary-fg:#000;--accent:#4060e0;text-size-adjust:100%;-webkit-text-size-adjust:100%}::-moz-placeholder{color:#1f1f1f}::-webkit-input-placeholder{color:var(--gray)}@media (prefers-color-scheme:dark){html{--primary-bg:#000;--whitesmoke:#181818;--gainsboro:#282828;--gray:grey;--primary-fg:#fff;--blockquote-color:#fff;--accent:#6080e0}::-moz-placeholder{color:#eee}}body{background-color:var(--primary-bg);color:var(--primary-fg);cursor:default}a{color:var(--accent);cursor:pointer;padding:5px 0;transition:color var(--d)}a,b,i,u{text-decoration:none}b,i,u{font-style:normal;font-weight:400}form,input,label{display:block}body,input,label,select,textarea{font-family:Route\ 159,sans-serif;font-size:var(--font-regular)}label{color:var(--primary-fg);font-size:var(--font-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}label i{color:var(--gray)}sup{line-height:0}input,select,textarea{background-color:var(--whitesmoke);border:0;border-radius:var(--radius);color:var(--primary-fg);display:initial;font-weight:400}input:focus,select:focus,textarea:focus{outline:0 none}input[type=email],input[type=password],input[type=text],input[type=url],select,textarea{overflow:hidden;resize:none;width:calc(50% - 15px)}input[type=submit]{cursor:pointer;padding:5px 15px}input[type=submit]:hover{background-color:var(--gainsboro)}button{cursor:pointer;padding:5px 15px}svg{stroke-linecap:round;stroke-linejoin:round;stroke-width:2}svg path{fill:none;stroke:var(--primary-fg)}table{margin:10px 0;width:100%}table th{color:var(--primary-fg);font-size:var(--font-small);font-weight:400;padding-bottom:2px}table td{border-top:1px solid var(--gray);padding:2px 0}table td:last-child{padding-bottom:0}table a{color:var(--accent)}table a:hover{color:var(--gray)}@font-face{font-family:Route\ 159;font-style:normal;font-weight:400;src:url(https://files.catbox.moe/gt6un3.woff) format("woff")}@font-face{font-family:Route\ 159;font-style:normal;font-weight:700;src:url(https://files.catbox.moe/outwck.woff) format("woff")}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}blockquote{background:var(--primary-bg);border-left:10px solid var(--accent);margin:1.5em 10px;padding:.5em 10px;quotes:"\201C""\201D""\2018""\2019"}blockquote:before{color:var(--accent);content:open-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em}blockquote p{display:inline}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}pre{border:1px solid #e1e1e1;clear:both;display:block;height:1%;margin:auto 40px;padding:1em;white-space:pre;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;white-space:pre-wrap;width:auto}code,pre{background:#f4f4f4;color:#555;font-size:90%;line-height:1.2em}code{display:inline;font-family:Monaco,Consolas,Andale Mono,DejaVu Sans Mono,monospace}img{height:auto;margin-top:0;max-width:75%} 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Subreply CSS [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Subreply+CSS+is+a+simple+yet+modern+and+beautiful+classless+CSS+style&url=https://github.com/HoangTuan110/subreply-css&via=DangHoangTuan20&hashtags=bootstrap,css,classless,subreply) 2 | 3 | Subreply logo, but inverted 5 | 6 | [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com) 7 | 8 | ![GitHub Repo stars](https://img.shields.io/github/stars/HoangTuan110/subreply-css?style=flat-square) 9 | ![GitHub](https://img.shields.io/github/license/HoangTuan110/subreply-css?style=flat-square) 10 | 11 | Subreply CSS is a simple, yet modern and beautiful classless CSS style. It's 12 | suitable for both personal blogs and as a bootstrap. It was influenced by the 13 | clean social media [Subreply](https://subreply.com/about). (Hence the name) 14 | 15 | * **Lightweight** - Only weights 4 kB! (original version) 16 | * **Mobile responsive** and **image responsive** 17 | * **Automatic dark/light theme** (based on OS preferences) 18 | * **Custom emojis** before `mailto:`, `sms:`, and `tel:` links 19 | * **Custom blockquotes** and **code blocks** 20 | * Beautiful font ([Route 159](https://dotcolon.net/font/route159/)) 21 | * Fixing missing features from the original Subreply, such as **radios and checkboxes** 22 | 23 | Wanna try it first? Visit the [demo](https://raw.githack.com/HoangTuan110/subreply-css/main/test.html) 24 | or go to [my website](https://tsk.bearblog.dev), which uses Subreply CSS. 25 | 26 | # Screenshots 27 | 28 | ![My blog with Subreply CSS](./my_blog_with_subreply_css.png) 29 | ![Subreply CSS demo](./subreply_css_demo.png) 30 | 31 | # Installation 32 | 33 | You can download the file `subreply.css` or `subreply.min.css`, or paste into your website's <head> 34 | this snippet: 35 | 36 | ```css 37 | 38 | ``` 39 | 40 | You can also use the minified version in production mode: 41 | 42 | ```css 43 | 44 | ``` 45 | 46 | # Changelog 47 | 48 | ## v0.1 49 | 50 | Initial release 51 | 52 | ## v0.2 (29/06/2022) 53 | 54 | Changes: 55 | 56 | - The `margin: 0; padding: 0;` CSS style has been removed to allow for natural rendering 57 | - Links (`a`) now uses the accent (nice blue) color instead of black to make it unique from texts 58 | - Uses the same style for both `input[type="submit"]` and `button` 59 | - Remove the `float: right;` style on buttons and `input[type="submit"]` elements, as it's annoying when using in paragraphs. 60 | - Add emojis before `mailto:`, `tel:`, and `sms:` links to differentiate them from normal links 61 | - Clean out a bunch of class-based CSS, which is not what we wanted for a classless CSS 62 | - Getting checkboxes to work 63 | - Fixing the problem why the text in checkboxes are under the checkbox 64 | - Removing the hover in `input[type="submit"]` and `button` for good. 65 | - Remove `display: block;` for image to avoid awkward displaying 66 | - Blockquotes now use background colors as the opposite colors of the text colors for readability 67 | - Add minified version of the style 68 | 69 | ## v0.3 (30/06/2022) 70 | 71 | - Removing `line-height` in `body, input, label, select, textarea` tag so that text don't override each other 72 | - Fixing the width of `input` so that they aren't comically long 73 | - Making images responsive (Stolen from [Sakura](https://oxal.org/projects/sakura/)) 74 | 75 | ## v0.4 (01/07/2022) 76 | 77 | - Reduce the size of images so that they doesn't look too big, but are still easily visible 78 | - Making the --regular size look bigger so it doesn't look so tiny on desktop 79 | 80 | ## v0.4.1 (04/07/2022) 81 | 82 | - Fix issue [#2](https://github.com/HoangTuan110/subreply-css/issues/2) and [#3](https://github.com/HoangTuan110/subreply-css/issues/3) 83 | 84 | # Copyright and credits 85 | 86 | Copyright 2022-present [Dang Hoang Tuan](https://tsk.bearblog.dev). 87 | 88 | Original code by [Lucian Marin](https://github.com/lucianmarin). 89 | 90 | This CSS style is under the MIT license. 91 | -------------------------------------------------------------------------------- /subreply.css: -------------------------------------------------------------------------------- 1 | /* Subreply CSS - https://github.com/HoangTuan110/subreply-css 2 | * This style is under the MIT license */ 3 | 4 | html { 5 | --font-small:13px; 6 | --font-regular:17px; 7 | --radius:6px; 8 | --d:0.2s; 9 | --primary-bg:#fff; 10 | --whitesmoke:#f0f0f0; 11 | --gainsboro:#e0e0e0; 12 | --gray:grey; 13 | --primary-fg:#000; 14 | --accent:#4060e0; 15 | text-size-adjust:100%; 16 | -webkit-text-size-adjust:100%; 17 | } 18 | ::-moz-placeholder { 19 | color:#1f1f1f 20 | } 21 | ::-webkit-input-placeholder { 22 | color:var(--gray) 23 | } 24 | @media (prefers-color-scheme:dark) { 25 | html { 26 | --primary-bg:#000; 27 | --whitesmoke:#181818; 28 | --gainsboro:#282828; 29 | --gray:grey; 30 | --primary-fg:#fff; 31 | --blockquote-color:#fff; 32 | --accent:#6080e0 33 | } 34 | ::-moz-placeholder { 35 | color:#eee 36 | } 37 | } 38 | body { 39 | background-color:var(--primary-bg); 40 | color:var(--primary-fg); 41 | cursor:default 42 | } 43 | a { 44 | color:var(--accent); 45 | cursor:pointer; 46 | padding:5px 0; 47 | text-decoration:none; 48 | transition:color var(--d) 49 | } 50 | b, i, u { 51 | font-style:normal; 52 | font-weight:400; 53 | text-decoration:none 54 | } 55 | form, input, label { 56 | display:block 57 | } 58 | body, input, label, select, textarea { 59 | font-family:'Route 159', sans-serif; 60 | font-size:var(--font-regular); 61 | } 62 | label { 63 | color:var(--primary-fg); 64 | font-size:var(--font-small); 65 | overflow:hidden; 66 | text-overflow:ellipsis; 67 | white-space:nowrap 68 | } 69 | label i { 70 | color:var(--gray) 71 | } 72 | sup { 73 | line-height:0 74 | } 75 | input, select, textarea { 76 | background-color:var(--whitesmoke); 77 | border:0; 78 | border-radius:var(--radius); 79 | color:var(--primary-fg); 80 | display:initial; 81 | font-weight:400 82 | } 83 | input:focus, select:focus, textarea:focus { 84 | outline:0 none 85 | } 86 | input[type=email], input[type=password], input[type=text], input[type=url], select, textarea { 87 | overflow:hidden; 88 | resize:none; 89 | width:calc(50% - 15px) 90 | } 91 | input[type=submit] { 92 | cursor:pointer; 93 | padding:5px 15px 94 | } 95 | input[type=submit]:hover { 96 | background-color:var(--gainsboro) 97 | } 98 | button { 99 | cursor:pointer; 100 | padding:5px 15px 101 | } 102 | svg { 103 | stroke-linecap:round; 104 | stroke-linejoin:round; 105 | stroke-width:2 106 | } 107 | svg path { 108 | fill:none; 109 | stroke:var(--primary-fg) 110 | } 111 | table { 112 | margin:10px 0; 113 | width:100% 114 | } 115 | table th { 116 | color:var(--primary-fg); 117 | font-size:var(--font-small); 118 | font-weight:400; 119 | padding-bottom:2px 120 | } 121 | table td { 122 | border-top:1px solid var(--gray); 123 | padding:2px 0 124 | } 125 | table td:last-child { 126 | padding-bottom:0 127 | } 128 | table a { 129 | color:var(--accent) 130 | } 131 | table a:hover { 132 | color:var(--gray) 133 | } 134 | @font-face { 135 | font-family:'Route 159'; 136 | font-style:normal; 137 | font-weight:400; 138 | src:url(https://files.catbox.moe/gt6un3.woff) format("woff") 139 | } 140 | @font-face { 141 | font-family:'Route 159'; 142 | font-style:normal; 143 | font-weight:700; 144 | src:url(https://files.catbox.moe/outwck.woff) format("woff") 145 | } 146 | a[href^=mailto]:before { 147 | content:"📧 " 148 | } 149 | a[href^=tel]:before { 150 | content:"📞 " 151 | } 152 | a[href^=sms]:before { 153 | content:"💬 " 154 | } 155 | blockquote { 156 | background:var(--primary-bg); 157 | border-left:10px solid var(--accent); 158 | margin:1.5em 10px; 159 | padding:.5em 10px; 160 | quotes:"\201C""\201D""\2018""\2019" 161 | } 162 | blockquote:before { 163 | color:var(--accent); 164 | content:open-quote; 165 | font-size:4em; 166 | line-height:.1em; 167 | margin-right:.25em; 168 | vertical-align:-.4em 169 | } 170 | blockquote p { 171 | display:inline 172 | } 173 | [type=checkbox], [type=radio] { 174 | box-sizing:border-box; 175 | padding:0 176 | } 177 | pre { 178 | border:1px solid #e1e1e1; 179 | clear:both; 180 | display:block; 181 | height:1%; 182 | margin:auto 40px; 183 | padding:1em; 184 | white-space:pre; 185 | white-space:-moz-pre-wrap; 186 | white-space:-o-pre-wrap; 187 | white-space:pre-wrap; 188 | width:auto 189 | } 190 | code, pre { 191 | background:#f4f4f4; 192 | color:#555; 193 | font-size:90%; 194 | line-height:1.2em 195 | } 196 | code { 197 | display:inline; 198 | font-family:Monaco,Consolas,Andale Mono,DejaVu Sans Mono,monospace 199 | } 200 | /* Responsive images 201 | * Stolen from Sakura (https://oxal.org/projects/sakura/) 202 | */ 203 | img { 204 | height: auto; 205 | max-width: 75%; 206 | margin-top: 0px; 207 | } 208 | -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Subreply CSS Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |

Subreply CSS demo

24 |

25 | This is a demo of Subreply CSS. It was copied from CSS Bed 26 |

27 | 28 |

29 | Source code. 30 |

31 | 32 |

How do I get this theme?

33 |

34 | Paste into your website's <head> this snippet: 35 | 

 36 |         
 37 |           <link rel="stylesheet" href="https://srhtcdn.githack.com/~tsukii/subreply-css/blob/main/subreply.css"/>
 38 |         
 39 |
40 |

41 | 42 |

Why use classless themes?

43 | 52 | 53 |

Is it responsive?

54 |

55 | Heck yeah! It doesn't include any fancy styles so it's easily mobile responsive. 56 | Just add the famous responsive viewport tag and 57 | you'll be good to go! 58 |

59 |

60 | In fact, try resizing this page. Everything flows super nicely as you'll see. 61 |

62 | 63 |

Element demos

64 |

65 | This is supposed to be a demo page so we need more elements! 66 |

67 | 68 |

Form elements

69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 |
84 | 85 | 86 |
87 |
88 | 89 | 90 |
91 |
92 | 93 | 94 |
95 | 96 |
97 | 98 | 99 |
100 | 101 | 102 | 103 | 104 |
105 | 106 | 107 |
108 | 109 |

Code

110 |

111 | Below is some code, you can copy it with Ctrl-C. 112 | Did you know, alert(1) can show an alert in JavaScript! 113 |

114 | 
// This logs a message to the console
console.log('Hello, world!')
115 | 116 |

Other

117 |

Here's a horizontal rule and image because I don't know where else to put them.

118 | Example kitten 119 |
120 | 121 | 122 |

123 | This is a or a more formal 124 |

125 |
This is a blockquote
126 | 
127 |       Good old preformatted text, no code at all
128 |       
129 |        |\_/|        ****************************    (\_/)
130 |       / @ @ \       *  "Purrrfectly pleasant"  *   (='.'=)
131 |      ( > º < )      *       Poppy Prinz        *   (")_(")
132 |       `>>x<<´       *   (pprinz@example.com)   *
133 |       /  O  \       ****************************
134 |      
135 |
136 | 137 |

And here's a nicely marked up table!

138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 |
NameQuantityPrice
Godzilla2$299.99
Mozilla10$100,000.00
Quesadilla1$2.22
164 | 165 |

Typography

166 |

167 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem 168 | congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin 169 | maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, 170 | nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id 171 | dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad 172 | litora torquent per conubia nostra, per inceptos himenaeos. 173 | This is strong, this is normal, this is just bold, and this is emphasized! And 174 | heck, here's a link. 175 |

176 | 177 |
178 | "The HTML blockquote Element (or HTML Block Quotation Element) indicates 179 | that the enclosed text is an extended quotation. Usually, this is 180 | rendered visually by indentation (see 181 | Notes 183 | for how to change it). A URL for the source of the quotation may be given using the 184 | cite attribute, while a text representation of the source 185 | can be given using the <cite> cite element." 186 | 187 |
188 | MDN, "The Block Quotation element" 189 |
190 |
191 | 192 | 197 |
    198 |
  1. Ordered list item 1
    2. 199 |
  2. Ordered list item 2
    3. 200 |
  3. Ordered list item 3
    4. 201 |
202 | 203 |

204 | Links with mailto:, tel:, sms: addresses might be styled... 205 |

206 |
207 | john.doe@example.com
208 | 778-330-2389
209 | 666-666-6666
210 |
211 | 212 |

Heading 1

213 |

A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

214 | 215 |

Heading 2

216 |

A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

217 | 218 |

Heading 3

219 |

A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

220 | 221 |

Heading 4

222 |

A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

223 | 224 |
Heading 5
225 |

A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

226 | 227 |
Heading 6
228 |

A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

229 | 230 |
231 | 232 | 233 | 234 | --------------------------------------------------------------------------------