mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-11 00:13:59 +02:00
Code Issues Releases Wiki Activity

Mark base and variants

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-15 10:44:05 +03:00
parent f723e23b8a
commit c5247edfb8
6 changed files with 102 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/v2/DEVLOG.md
View File

@@ -72,4 +72,12 @@
## 20161015
- Updated references to `background-color` and `background-image` to use the `background` shorthand instead.
- Updated references to `background-color` and `background-image` to use the `background` shorthand instead.
- Changed palette white from `#f9f9f9` to `#fcfcf` to pass all WCAG tests.
- Added styling for `mark` elements to serve as primary contextual elements.
- Added mixin for `mark` elements (`make-mark-alt-color`) to make variants of the `mark` element (`secondary` and `tertiary`).
- Made color palette for marks, passes all WCAG tests.
- `mark` element styling (`padding`, `margin`, `font-size`, `line-height`) implemented and optimized.
- Optimized `mark` color variant mixin.
- Tweaked values of `mark` color variants to be less strict but still pass the WCAG AA test and most other tests (sometimes they won't pass the WCAG AAA test but that's ok).
- Added mixin for `mark` elements (`make-mark-alt-style`) to make style variants (`tag` and `bubble`). Optimized.

6
docs/v2/index.html
View File

@@ -12,7 +12,7 @@
<script async defer src="https://buttons.github.io/buttons.js"></script>
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
<!-- Live demo styled as of commit 42817a3 (20161014) -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/42817a32139e62d3af599280fb07906ca6c40d39/flavors/v2/mini-default.min.css">
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/42817a32139e62d3af599280fb07906ca6c40d39/flavors/v2/mini-default.min.css"> -->
</head>
<body>
<span style="text-align: center;">
@@ -39,6 +39,8 @@
Stuff here....
}</pre>
<hr>
<p>This is some text with <small>small text</small>, superscript<sup>12</sup> and subscript<sub>4</sub>.</p>
<p>This is some text with <small>small text</small>, superscript<sup>12</sup> and subscript<sub>4</sub>. Oh, I am a <mark>primary mark</mark> and I am a <mark class="secondary">secondary mark</mark> and I am a <mark class="tertiary">tertiary mark</mark>.</p>
<p>Tag marks are like this: <mark class="tag">primary mark</mark>, <mark class="tag secondary">secondary mark</mark>, <mark class="tag tertiary">tertiary mark</mark>.</p>
<p>Bubble marks are like this: <mark class="bubble">primary mark</mark>, <mark class="bubble secondary">secondary mark</mark>, <mark class="bubble tertiary">tertiary mark</mark>.</p>
</body>
</html>