Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/breuleux/quaint-look-nice

Configurable, nice-looking style for Quaint
https://github.com/breuleux/quaint-look-nice

google-fonts quaint

Last synced: 9 days ago
JSON representation

Configurable, nice-looking style for Quaint

Host: GitHub
URL: https://github.com/breuleux/quaint-look-nice
Owner: breuleux
Created: 2015-12-14T20:16:06.000Z (almost 9 years ago)
Default Branch: master
Last Pushed: 2019-01-10T03:03:30.000Z (almost 6 years ago)
Last Synced: 2024-10-27T22:59:09.584Z (18 days ago)
Topics: google-fonts, quaint
Language: CSS
Size: 35.2 KB
Stars: 0
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

quaint-look-nice
================

A not-too-bad-looking theme for Quaint.

## Install

quaint --setup look-nice

## Sample configuration

This configuration entry must be added in the `plugins` field of
`quaint.json`:

```json
"look-nice": {
"fonts": {
"body": "serif",
"nav": "g:Open Sans"
},
"backgrounds": {
"nav": "purple"
}
}
```

## Options

### useNav

(default: true)

Whether to use a navbar or not. If false, the navbar style will not be
copied.

### useNav

(default: true)

Whether to use a navbar or not. If false, the navbar style will not be
copied.

### useSide

(default: true)

Whether to use the side navigation or not. If false, the sidenav style
will not be copied.

### fonts, font-sizes, borders, widths, heights, paddings, backgrounds, colors

These maps define variables with the corresponding prefixes
(`font-xyz`, `font-size-xyz`, and so on).

**Google Fonts**: in `fonts`, any font name prefixed with `g:` will
cause the corresponding font on Google Fonts to be imported. See
[quaint-google-fonts](https://github.com/breuleux/quaint-google-fonts)
for more information.

The `defaults` section below lists all the default values for the
variables. Remember that if there is anything you cannot do with these
variables, you can write your own `sass` file and list it in the
plugin's `extra` option.

## Defaults

The following JSON contains the default values for all of
`quaint-look-nice`'s variables. Many of them are pegged to other
variables. Note that `fonts.body` corresponds to the `$font-body`
variable, and so on.

`tweak(color, percent)` changes a color's brightness by the given
percentage, if the color is dark it gets lighter, if it is light it
gets darker. `bwtext(color)` is black if the color is light, white if
the color is dark. `darken` and `lighten` are self-explanatory.

```json
{
"fonts": {
"body": "sans",
"nav": "$font-body",
"header": "$font-body",
"title": "$font-header",
"pre": "Monospace",
"code": "$font-pre"
},
"font-sizes": {
"body": "20px",
"nav": "$font-size-body",
"mnav": "$font-size-nav",
"dropdown": "$font-size-body",
"caret": "$font-size-nav * 0.8"
},
"borders": {
"nav": "2px solid darken($background-nav, 20%)",
"nav-dropdown": "10px solid $background-nav-dropdown"
},
"widths": {
"body": "700px",
"nav": "$width-body + 2 * $padding-body",
"side": "300px"
},
"heights": {
"nav": "50px",
"mnav": "$height-nav"
},
"paddings": {
"body": "10px",
"nav": "$padding-body",
"td": "5px"
},
"backgrounds": {
"body": "#fff",
"nav": "$background-body",
"nav-select": "tweak($background-nav, 20%)",
"nav-dropdown": "tweak($background-nav, 10%)",
"nav-dropdown-select": "tweak($background-nav-dropdown, 10%)",
"pre": "$background-body",
"code": "$background-body",
"table": "tweak($background-body, 10%)",
"table-odd": "tweak($background-table, 5%)",
"table-header": "tweak($background-table, 20%)"
},
"colors": {
"body": "tweak($background-body, 85%)",
"nav": "bwtext($background-nav)",
"nav-select": "bwtext($background-nav-select)",
"nav-dropdown": "bwtext($background-nav-dropdown)",
"nav-dropdown-select": "bwtext($background-nav-dropdown-select)",
"link": "contrasting($background-body, #aaf, auto)",
"link-visited": "contrasting($background-body, #f8f, auto)",
"pre": "bwtext($background-pre)",
"code": "bwtext($background-code)",
"table": "bwtext($background-table)",
"table-odd": "bwtext($background-table-odd)",
"table-header": "bwtext($background-table-header)",
"header": "$color-body",
"title": "$color-header"
}
}
```