Rename to dress.css:

- Renamed project to "dress.css" from "semcss" ("sem.css").
- Renamed dist files.
- Updated README.
- Updated share image.
- Added favicon.
- Added logo in header.

Gemfile.lock

@@ -23,9 +23,9 @@ GEM
       coffee-script-source
       execjs
     coffee-script-source (1.12.2)
-    concurrent-ruby (1.3.3)
+    concurrent-ruby (1.3.4)
     contracts (0.17)
-    dotenv (3.1.2)
+    dotenv (3.1.4)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
@@ -107,13 +107,13 @@ GEM
     middleman-syntax (3.4.0)
       middleman-core (>= 3.2)
       rouge (~> 3.2)
-    minitest (5.24.1)
+    minitest (5.25.1)
     padrino-helpers (0.15.3)
       i18n (>= 0.6.7, < 2)
       padrino-support (= 0.15.3)
       tilt (>= 1.4.1, < 3)
     padrino-support (0.15.3)
-    parallel (1.25.1)
+    parallel (1.26.3)
     parslet (2.0.0)
     progress (3.6.0)
     psych (3.3.4)
@@ -124,20 +124,18 @@ GEM
     rb-fsevent (0.11.2)
     rb-inotify (0.11.1)
       ffi (~> 1.0)
-    rexml (3.3.4)
-      strscan
+    rexml (3.3.7)
     rouge (3.30.0)
     sassc (2.4.0)
       ffi (~> 1.9)
     servolux (0.13.0)
     slim (4.1.0)
       temple (>= 0.7.6, < 0.9)
       tilt (>= 2.0.6, < 2.1)
-    strscan (3.1.0)
     temple (0.8.2)
     terser (1.2.3)
       execjs (>= 0.3.0, < 3)
-    thor (1.3.1)
+    thor (1.3.2)
     tilt (2.0.11)
     toml (0.3.0)
       parslet (>= 1.8.0, < 3.0.0)

README.md

@@ -1,14 +1,16 @@
-# sem.css: Semantic Style
+![](dress.svg)
 
-**Minimal class-less CSS for semantic HTML.**
+# dress.css
 
-[Site](https://remino.net/semcss/)
-| [Code Repo](https://github.com/remino/semcss)
-| [NPM Package](https://www.npmjs.com/package/semcss)
+The little black dress of CSS.
+
+[Site](https://remino.net/dress.css/)
+| [Code Repo](https://github.com/remino/dress.css)
+| [NPM Package](https://www.npmjs.com/package/dress.css)
 
 By Rémino Rem <https://remino.net/>
 
-- [Just write HTML and make it look good](#just-write-html-and-make-it-look-good)
+- [Minimal style for semantic HTML](#minimal-style-for-semantic-html)
 - [Features](#features)
 - [Installation](#installation)
 	- [HTML](#html)
@@ -21,9 +23,9 @@ By Rémino Rem <https://remino.net/>
 
 ---
 
-## Just write HTML and make it look good
+## Minimal style for semantic HTML
 
-Introducing **<mark>sem.css</mark>**, a minimalist class-less stylesheet that makes your pages look good only by writing HTML.
+Introducing **<mark>dress.css</mark>**, a minimalist class-less stylesheet that makes your pages look good only by writing HTML.
 
 This simple stylesheet was born from three things:
 
@@ -33,6 +35,8 @@ This simple stylesheet was born from three things:
 
 Much of this stylesheet was inspired from [_new.css_](https://newcss.net/), with a few changes to vertical rhythm and markup for button links, and no external fonts.
 
+This stylesheet was formerly known as **sem.css** in version 1.2.4, and renamed as **dress.css** in version 2.0.0.
+
 [Back to top](#)
 
 ---
@@ -62,45 +66,45 @@ There are many ways to include this stylesheet in your code. Here are a few exam
 Add the stylesheet to your HTML and write your content:
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/semcss/dist/sem.css">
+<link rel="stylesheet" href="https://unpkg.com/dress.css/dist/dress.css">
 ```
 
 ### NPM
 
 Install the package from NPM:
 
 ```bash
-npm install semcss
+npm install dress.css
 ```
 
-Then the stylesheet file should be available at `node_modules/semcss/dist/sem.css`.
+Then the stylesheet file should be available at `node_modules/dress.css/dist/dress.css`.
 
 Use the file in your Sass files, or include it in your CSS, etc.
 
 ### Download
 
-Download the `sem.css` file from the [GitHub releases](https://github.com/remino/semcss/releases).
+Download the `dress.css` file from the [GitHub releases](https://github.com/remino/dress.css/releases).
 
 ---
 
 ## Usage
 
-To know which HTML tags are handled by this stylesheet with some suggested markup, see _[Elements](https://remino.net/semcss/elements/)_.
+To know which HTML tags are handled by this stylesheet with some suggested markup, see _[Elements](https://remino.net/dress.css/elements/)_.
 
 [Back to top](#)
 
 ---
 
 ## Browser Support
 
-The **<mark>sem.css</mark>** stylesheet was checked with [`doiuse`](https://www.npmjs.com/package/doiuse):
+The **<mark>dress.css</mark>** stylesheet was checked with [`doiuse`](https://www.npmjs.com/package/doiuse):
 
 ```
-❯ doiuse -b 'defaults' -v dist/sem.css
+❯ doiuse -b 'defaults' -v dist/dress.css
 [doiuse] Browsers: Firefox 129, Firefox 128, Chrome for Android 127, Firefox for Android 127, Android Browser 127, Chrome 127, Edge 127, Firefox 127, Chrome 126, Edge 126, Chrome 125, Firefox 115, Opera 111, Opera 110, Chrome 109, Opera Mobile 80, Samsung Internet 25, Samsung Internet 24, Safari on iOS 17, Safari on iOS 17, Safari 17, Safari 17, Safari on iOS 16, UC Browser for Android 15, Safari on iOS 15, QQ Browser 14, KaiOS Browser 3, KaiOS Browser 2, Opera Mini NaN
 ```
 
-While **<mark>sem.css</mark>** should work in the latest version of major browsers, it seems to have issues in some less-popular mobile versions, like Opera Mini. This stylesheet is not meant for legacy support.
+While **<mark>dress.css</mark>** should work in the latest version of major browsers, it seems to have issues in some less-popular mobile versions, like Opera Mini. This stylesheet is not meant for legacy support.
 
 [Back to top](#)
 
@@ -125,7 +129,7 @@ Don't forget to give the project a star! Thanks again!
 
 ## License
 
-Distributed under the ISC License. See _[License](https://remino.net/semcss/license/)_.
+Distributed under the ISC License. See _[License](https://remino.net/dress.css/license/)_.
 
 [Back to top](#)
 

assets/css/docs.sass

@@ -37,6 +37,20 @@ body
 			> menu
 				margin-block-start: 0.8em
 
+	> header
+		object
+			display: inline
+			margin-right: calc(var(--sc-m-v) / 2)
+			vertical-align: middle
+			margin-bottom: 12px
+
+		+ p:has(img)
+			img
+				margin: 0
+
+			+ h1
+				margin-block-start: 0
+
 div.highlight
 	position: relative
 

assets/js/playground.js

@@ -15,7 +15,7 @@ class PlaygroundApp extends HTMLElement {
 		this.innerHTML = `
 			<form>
 				<fieldset id="editor"><legend>HTML Editor</legend><div></div></fieldset>
-				<fieldset id="semcss"><legend><select><option>With sem.css</option><option>Without sem.css</option></select></legend><output><iframe></iframe></output></fieldset>
+				<fieldset id="dress.css"><legend><select><option>With dress.css</option><option>Without dress.css</option></select></legend><output><iframe></iframe></output></fieldset>
 			</form>
 		`
 
@@ -25,7 +25,7 @@ class PlaygroundApp extends HTMLElement {
 			<!DOCTYPE html>
 			<html>
 			<title>Preview</title>
-			<link rel="stylesheet" href="/semcss/sem.css">
+			<link rel="stylesheet" href="/dress.css/dress.css">
 			<body>${doc}</body>
 		`
 
@@ -35,7 +35,7 @@ class PlaygroundApp extends HTMLElement {
 		})
 
 		this.querySelector('select').addEventListener('change', event => {
-			const withSemCss = event.target.value === 'With sem.css'
+			const withSemCss = event.target.value === 'With dress.css'
 			this.iframe.contentDocument.styleSheets[0].disabled = !withSemCss
 			this.resizeOutput()
 		})

bin/publish

@@ -11,7 +11,7 @@ main() {
 	git push origin --all && git push origin --tags
 	mansite -b deploy
 	npm run build
-	gh release create ` git tag | sort -V | tail -1 ` --generate-notes dist/sem.css
+	gh release create ` git tag | sort -V | tail -1 ` --generate-notes dist/dress.css
 	npm publish --otp "$2"
 }
 

data/site.yml

@@ -1,5 +1,5 @@
 build_dir: deploy/public
-description: 'Minimal class-less CSS for semantic HTML'
-prefix: semcss
-title: sem.css
+description: 'The little black dress of CSS.'
+prefix: dress.css
+title: dress.css
 url: https://remino.net/

locales/en.yml

@@ -4,5 +4,5 @@ en:
     items:
       index: Home
   title:
-    site: 'sem.css : RÉMINO'
+    site: 'dress.css : RÉMINO'
     page: '%{page} : %{site}'