mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 21:08:13 +01:00
Headings rework
Headings now use their own CSS variable and can be easily customized.
This commit is contained in:
Angelos Chalaris
parent
3b621be609
commit
f55a282512
@ -1,20 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- TODO: Add missing favicon and page_thumb images when about to release -->
|
||||
<!-- TODO: Update meta information when about to release -->
|
||||
<link rel="stylesheet" href="mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,5 +1,7 @@
|
||||
# mini.css v3 (Gluon) Development Log
|
||||
|
||||
# v3.0.0-alpha.1
|
||||
|
||||
## 20171011
|
||||
|
||||
- Moved all WIP to `gluon` branch, seems like the right choice.
|
||||
@ -16,3 +18,10 @@
|
||||
- Removed fix for `svg:not(:root)`, as it was IE-based.
|
||||
- Completely removed the `dfn` fix, as it's a rarely (if ever) used element and it targets an older version of Android, meaning it's not a really meaningful fix to anyone.
|
||||
- Stopped right before the headings, these will be updated and built next time.
|
||||
|
||||
## 20171015
|
||||
|
||||
- Cleaned up `docs` folder to be able to cherry pick into `master` branch for the new version documentation.
|
||||
- Built up the heading elements (`h1` - `h6`), using CSS variables (`--heading-ratio` for universal heading ratio scaling).
|
||||
- Added `--secondary-fore-color` for things like `small` in `h1`, which is set to `#424242`. Avoided using the term `--fore-color-lighter` as it could cause ambiguity in reverse-color-palette flavors.
|
||||
- `small` elements in headings are now by defauly displayed in blocks. I haven't seen many use cases for the old style and the codebase could use the cleanup, so there's that.
|
||||
|
||||
@ -1,11 +1,20 @@
|
||||
<!DOCTYPE html><html><head>
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title><meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/mini.css/">
|
||||
</head></html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- TODO: Add missing favicon and page_thumb images when about to release -->
|
||||
<!-- TODO: Update meta information when about to release -->
|
||||
<link rel="stylesheet" href="mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
12
docs/v3/index_rel.html
Normal file
12
docs/v3/index_rel.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html><html><head>
|
||||
<!-- TODO: Rename this to index.html prior to final release of Gluon, move all other doc files to the main docs folder -->
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title><meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/mini.css/">
|
||||
</head></html>
|
||||
@ -11,11 +11,24 @@ $base-line-height: 1.5 !default; // Line height for most elements
|
||||
$base-font-size: 1rem !default; // Font sizing for all elements
|
||||
$_body-margin: 0 !default; // [Hidden] Margin for body
|
||||
$fore-color: #212121 !default; // Text & foreground color
|
||||
$secondary-fore-color: #424242 !default; // Secondary text & foreground color
|
||||
$back-color: #f8f8f8 !default; // Background color
|
||||
$heading-line-height: 1.2 !default; // Line height for headings
|
||||
$heading-ratio: 1.19 !default; // Ratio for headings (strictly unitless)
|
||||
$subheading-font-size: 0.75em !default; // Font sizing for <small> elements in headings
|
||||
$subheading-top-margin: -0.25rem !default; // Top margin of <small> elements in headings
|
||||
|
||||
$small-font-size: 0.75em !default; // Font sizing for <small> elements
|
||||
// TODO: universalize
|
||||
$heading-margin: 0.75rem 0.5rem !default; // Margin for headers, use universal
|
||||
$heading-font-weight: 500 !default; // Font weight for headings
|
||||
|
||||
/* Core module CSS variable definitions */
|
||||
:root {
|
||||
--fore-color: $fore-color;
|
||||
--secondary-fore-color: $secondary-fore-color;
|
||||
--back-color: $back-color;
|
||||
--heading-ratio: $heading-ratio;
|
||||
}
|
||||
html {
|
||||
font-size: $base-root-font-size; // Set root's font sizing.
|
||||
@ -73,3 +86,38 @@ img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: $heading-line-height;
|
||||
margin: $heading-margin;
|
||||
font-weight: $heading-font-weight;
|
||||
small {
|
||||
color: var(--secondary-fore-color);
|
||||
display: block;
|
||||
@if $subheading-top-margin != 0 {
|
||||
margin-top: $subheading-top-margin;
|
||||
}
|
||||
@if $subheading-font-size != $small-font-size {
|
||||
font-size: $subheading-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
|
||||
}
|
||||
h2 {
|
||||
font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
|
||||
}
|
||||
h3 {
|
||||
font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio));
|
||||
}
|
||||
h4 {
|
||||
font-size: calc(1rem * var(--heading-ratio));
|
||||
}
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: calc(1rem / var(--heading-ratio));
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user