1
0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-12 08:53:59 +02:00

Link styling added to base

This commit is contained in:
Angelos Chalaris
2016-10-19 19:52:31 +03:00
parent 25792357ab
commit 696bbcbdac
6 changed files with 62 additions and 40 deletions

View File

@@ -95,4 +95,9 @@
## 20161019
- More fiddling with palettes. Tried to update colors to material design: `body` `color` is now `#212121`. `body` `background` is now `#fafafa`. `small` inside header `color` is now `#424242`. Codeblock `background` is now `#e0e0e0` and `pre` sidebar `border-color` is `#1565c0`. `mark` `background`s changed to `#0277bd`, `#f44336` and `#558b2f` respectively.
- Added `display: inline-block` to `mark` alternate styles, to avoid splitting of the element into smaller parts (e.g. broken pills).
- Added `display: inline-block` to `mark` alternate styles, to avoid splitting of the element into smaller parts (e.g. broken pills).
- Started styling links. `a` `color` will be `#0277bd` normally.
- Added `background` property to `a` in order to apply underlining using image.
- Added flag for `a` `text-decoration:underline` (`$apply-link-underline`) and checks/optimizations for `font-weight`.
- Removed fixes from Normalize about `a` elements, as they were opinionated and unnecessary.
- Added flag for `a` using fancy `:hover` and other focused effects instead of `color` (`$apply-link-hover-fade`).

View File

@@ -11,13 +11,13 @@
<!-- Github buttons javascript file -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Live demo styled as of commit 42817a3 (20161014) -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/9f771efecf44e0600e2359690be260181aad8290/flavors/v2/mini-default.min.css">
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/9f771efecf44e0600e2359690be260181aad8290/flavors/v2/mini-default.min.css"> -->
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
</head>
<body>
<span style="text-align: center;">
<img src="mini-logo.svg" style="display: block; height: 80px; width: 84px; margin: 10px auto -14px; background: #00802b; border-radius: 6px; padding: 8px; padding-top: 12px;">
<h1>mini.css v2.0 - <span style="color: #00802b; line-height: 1em;">Fermion</span><small>Minimal responsive style-agnostic front end framework</small></h1>
<img src="mini-logo.svg" style="display: block; height: 80px; width: 84px; margin: 10px auto -14px; background: #558b2f; border-radius: 6px; padding: 8px; padding-top: 12px;">
<h1>mini.css v2.0 - <span style="color: #558b2f; line-height: 1em;">Fermion</span><small>Minimal responsive style-agnostic front end framework</small></h1>
<p style="margin-top: -1em;">
<a class="github-button" href="https://github.com/chalarangelo/mini.css" data-icon="octicon-eye" data-count-href="/chalarangelo/mini.css/watchers" data-count-api="/repos/chalarangelo/mini.css#subscribers_count" data-count-aria-label="# watchers on GitHub" aria-label="Watch chalarangelo/mini.css on GitHub">Watch</a>
<a class="github-button" href="https://github.com/chalarangelo/mini.css" data-icon="octicon-star" data-count-href="/chalarangelo/mini.css/stargazers" data-count-api="/repos/chalarangelo/mini.css#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star chalarangelo/mini.css on GitHub">Star</a>
@@ -44,5 +44,6 @@
<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>
<h3>I am a header with <mark class="bubble secondary">bubbles</mark> and <mark class="tag">tags</mark></h3>
<p>I am a paragraph and I have a <a href="https://github.com/Chalarangelo/mini.css">link to the Github repo</a>.</p>
</body>
</html>