#+TITLE:      Gruvbox-CSS
#+HTML_HEAD:  <link rel="stylesheet" type="text/css" href="http://a-dma.github.io/gruvbox-css/gruvbox-dark-medium.min.css" />
#+INFOJS_OPT: view:t toc:t ltoc:t mouse:underline buttons:0 path:http://a-dma.github.io/gruvbox-css/org-info.min.js

* Gruvbox-CSS

This is basically a "fork" (read ~copy-paste~) of [[https://github.com/thomasf/solarized-css][solarized-css]].

I quite like the [[https://github.com/morhetz/gruvbox][Gruvbox theme]] and I wanted to have a way to make HTML
pages with that look, hence this small project.

Like ~solarized-css~ the most common HTML tags are supported. Org-mode
and Markdown are also supported but mostly untested. You can see the
results for yourself below.

** Build

No particular CSS pre-processor is used in this project, just a
hand-written CSS file in the ~css~ directory.

Both a regular and a minified version are provided. The minified
version can be re-generated by running ~make minify~ (or simply
~make~).

** Use

Depending on your source file, you may want to use the CSS in
different ways.

*** HTML

Simply download and include the CSS file in your project. A public URL
for the files is also available:

- [[http://a-dma.github.io/gruvbox-css/gruvbox-dark-medium.css][Regular CSS]]
- [[http://a-dma.github.io/gruvbox-css/gruvbox-dark-medium.min.css][Minified CSS]]

*** Org

For use with org-mode files add the following to the preamble

#+BEGIN_SRC org
  #+HTML_HEAD:  <link rel="stylesheet" type="text/css" href="http://a-dma.github.io/gruvbox-css/gruvbox-dark-medium.min.css" />
#+END_SRC

You can then export the file normally using the built-in HTML exporter
(requires htmlize).

On a slightly unrelated note, if you would like to have the navigation
functionality used by this example you need to add also the following
to your preamble

#+BEGIN_SRC org
  #+INFOJS_OPT: view:t toc:t ltoc:t mouse:underline buttons:0 path:http://a-dma.github.io/gruvbox-css/org-info.min.js
#+END_SRC

*** Markdown

For Markdown add the following at the top of your file

#+BEGIN_SRC html
  <link href="http://a-dma.github.io/gruvbox-css/gruvbox-dark-medium.min.css" rel="stylesheet"></link>
#+END_SRC

Then convert your file to HTML

#+BEGIN_SRC shell
  pandoc document.md >document.html
#+END_SRC

** Example Pages

A few example pages using this theme can be found at this project's
page or linked below.

- [[http://a-dma.github.io/gruvbox-css/html.html][HTML test page]] (from [[https://snipplr.com/view/8121/html-test-page-for-css-style-guide][https://snipplr.com/view/8121/html-test-page-for-css-style-guide]])
- [[http://a-dma.github.io/gruvbox-css/html2.html][HTML test page 2]] (from [[https://www.granneman.com/webdev/coding/htmlcsstestpage][https://www.granneman.com/webdev/coding/htmlcsstestpage]])
- [[http://a-dma.github.io/gruvbox-css/org-hacks.html][Org-hacks]] (from [[https://orgmode.org/worg/sources/org-hacks.org][https://orgmode.org/worg/sources/org-hacks.org]])
- [[http://a-dma.github.io/gruvbox-css/markdown.html][Markdown]] test page (from [[https://bitbucket.org/kevinburke/markdowncss/src/master/sample.html][https://bitbucket.org/kevinburke/markdowncss/src/master/sample.html]])

** Acknowledgments

- Thomas Frössman for the [[https://github.com/thomasf/solarized-css][original work]]
- Pavel Pertsev for the [[https://github.com/morhetz/gruvbox][Gruvbox theme]]
- [[https://cssminifier.com/][cssminifier.com]] for the minification service
- [[https://orgmode.org/worg/code/org-info-js/org-info-src.js][Org-info.js]] used in the org-mode examples

** LICENSE

Copyright 2020

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.