commit 07b437d4dc56d22165a7023a3767e0026d199784 lambda <lambda@fnord.one> 2017-12-04 15:50:49 +0100 ~data/css.md Reworked Documentation ~clym.css del. responsive rule in clym.css ~layout.tpl Add media attribute to link tag in layout.tpl -static/css/LICENSE ~README.md, data/README.md Minor corrections Status of this commit: Suggestion.
README.md | 18 +++---- data/README.md | 18 +++---- data/css.md | 110 ++++++++++++++++++------------------------ static/css/LICENSE | 20 -------- static/css/clym.css | 1 - static/css/style.css | 8 +-- templates/layout.tpl | 2 +- templates/layout.tpl_original | 2 +- 8 files changed, 71 insertions(+), 108 deletions(-)
diff --git a/README.md b/README.md index 36ccba7..590efb8 100644 --- a/README.md +++ b/README.md @@ -120,10 +120,10 @@ The *config* variable is used to assign the following values: - This text is used in the *description* field of the atom/rss feed. - **:url** - This needs to be the full(!) URL of your website, including(!) a final slash. - - MIND: If the url contains a tilde (~), it needs to get duplicated + - MIND: If the url contains a tilde (~), it needs to get duplicated. - Example: ``https://mydomain/~~user/`` - **:rss-item-number** - - This holds the number of latest(!) RSS items you want to get published when you generate the files. + - This holds the number of latest(!) RSS items you want to get published. - **html** - ``t`` to export html website. Set ``nil`` to disable. - **gopher** @@ -131,9 +131,9 @@ The *config* variable is used to assign the following values: - **gopher-path** - This is the full path of the directory to access your gopher hole. - **gopher-server** - - Hostname of the gopher server. It needs to be included in every link. + - Hostname of the gopher server. It needs to be included in each link. - **gopher-port** - - tcp port of the gopher server. 70 is the default port. It needs to be included in every link. + - tcp port of the gopher server. 70 is the default port. It needs to be included in each link. ### The *articles* Variable @@ -169,7 +169,7 @@ Edit **data/articles.lisp** and add a new list to the *articles* variable: :id "2" :date "29 April 2016" :author "Solène" - :short "I will explain how to use the generator" + :tiny "Read more about how I use cl-yag." :tag "example help code") Then write a corresponding **data/2.md** file, using markdown. @@ -202,9 +202,9 @@ This will produce **output/html/somepage.html**. ### Howto Use Another Common Lisp Interpreter -cl-yags default Lisp interpreter is **sbcl**. -If you want to use a different lisp interpreter you need to set the -variable *LISP* to the name of your binary, when calling ``make``: +cl-yags default Lisp interpreter is **sbcl**. If you want to use a +different interpreter you need to set the variable *LISP* to the name +of your binary, when calling ``make``: make LISP=ecl @@ -262,7 +262,7 @@ themed layouts. If you want some deeply refined, cross-browser compatible, responsive, webscale style sheets, you need to create them yourself. However, cl-yag will work nicely with them and if you want to make your -stylesheets a part of cl-yag you're very welcome to contact me. +style sheets a part of cl-yag you're very welcome to contact me. # Hacking cl-yag diff --git a/data/README.md b/data/README.md index 36ccba7..590efb8 100644 --- a/data/README.md +++ b/data/README.md @@ -120,10 +120,10 @@ The *config* variable is used to assign the following values: - This text is used in the *description* field of the atom/rss feed. - **:url** - This needs to be the full(!) URL of your website, including(!) a final slash. - - MIND: If the url contains a tilde (~), it needs to get duplicated + - MIND: If the url contains a tilde (~), it needs to get duplicated. - Example: ``https://mydomain/~~user/`` - **:rss-item-number** - - This holds the number of latest(!) RSS items you want to get published when you generate the files. + - This holds the number of latest(!) RSS items you want to get published. - **html** - ``t`` to export html website. Set ``nil`` to disable. - **gopher** @@ -131,9 +131,9 @@ The *config* variable is used to assign the following values: - **gopher-path** - This is the full path of the directory to access your gopher hole. - **gopher-server** - - Hostname of the gopher server. It needs to be included in every link. + - Hostname of the gopher server. It needs to be included in each link. - **gopher-port** - - tcp port of the gopher server. 70 is the default port. It needs to be included in every link. + - tcp port of the gopher server. 70 is the default port. It needs to be included in each link. ### The *articles* Variable @@ -169,7 +169,7 @@ Edit **data/articles.lisp** and add a new list to the *articles* variable: :id "2" :date "29 April 2016" :author "Solène" - :short "I will explain how to use the generator" + :tiny "Read more about how I use cl-yag." :tag "example help code") Then write a corresponding **data/2.md** file, using markdown. @@ -202,9 +202,9 @@ This will produce **output/html/somepage.html**. ### Howto Use Another Common Lisp Interpreter -cl-yags default Lisp interpreter is **sbcl**. -If you want to use a different lisp interpreter you need to set the -variable *LISP* to the name of your binary, when calling ``make``: +cl-yags default Lisp interpreter is **sbcl**. If you want to use a +different interpreter you need to set the variable *LISP* to the name +of your binary, when calling ``make``: make LISP=ecl @@ -262,7 +262,7 @@ themed layouts. If you want some deeply refined, cross-browser compatible, responsive, webscale style sheets, you need to create them yourself. However, cl-yag will work nicely with them and if you want to make your -stylesheets a part of cl-yag you're very welcome to contact me. +style sheets a part of cl-yag you're very welcome to contact me. # Hacking cl-yag diff --git a/data/css.md b/data/css.md index 56f0e39..788d088 100644 --- a/data/css.md +++ b/data/css.md @@ -1,16 +1,13 @@ # CSS For cl-yag -cl-yag comes with a default css-stylesheet - *clym* - and a useful -approach to administrate, tweak and test your stylesheets. *clym* -doesn't use javascript and provides *nil* javascript-features (such as -dropdown-menus). +cl-yag provides you with a default theme and a useful approach to +handle CSS style sheets as well as CSS frameworks. -## Where The Stylesheets Live +## Where The Style Sheets Live -All of cl-yag's style sheets are located in **static/css/**. Of course -you can change that, but we recommend sticking to it. It pays to know -where your stuff is. Currently there are the following files: +All of cl-yag's style sheets are located in **static/css/**. +Currently there are the following files: css/ |-- clym.css @@ -23,10 +20,10 @@ where your stuff is. Currently there are the following files: ## style.css -- One Sheet To Rule Them All -In order to keep it simple cl-yag uses **data/css/style.css** to -administrate all of its stylesheets. Use the ``@import`` rule to include -your own, or comments to get rid of what is already there - but mind the -[cascade](https://www.w3.org/TR/css-cascade-3/ "W3C: CSS Cascading and Inheritance Level 3"). +In order to keep it simple cl-yag uses **static/css/style.css** to +administrate all of its style sheets. Use the ``@import`` rule to +include your own, or comments to get rid of what is already there - +but mind the [cascade](https://www.w3.org/TR/css-cascade-3/ "W3C: CSS Cascading and Inheritance Level 3"). Currently, **style.css** looks like this: @@ -36,31 +33,32 @@ Currently, **style.css** looks like this: @charset "utf-8"; - /* ~ PURE.CSS ~ */ + /* ~ PURE ~ */ @import url("pure_r1.0.0/pure.css"); - /* ~ Stylesheet for cl-yag ~ */ + /* ~ CLYM ~ */ @import url("clym.css"); - /* ~ LAST ENTRY ~ */ - /* ~ custom.css to override styles. ~ */ + /* ~ LAST ENTRY ~ */ + /* ~ use custom.css for overriding rules ~ */ @import url("custom.css"); -## Pure - "A Set Of Small, Responsive CSS Modules" -cl-yag uses [Pure](https://purecss.io/ "purecss.io"), a minimal, BSD licensed css -framework. It employs the style sheet **pure.css** to provide a set of -expected features among which are usable menus and sane -resets. **pure.css** incorporates +## Pure -- "A Set Of Small, Responsive CSS Modules" + +cl-yag uses a style sheet called **pure.css**, taken from +[Pure](https://purecss.io/ "purecss.io"), a minimal, BSD licensed CSS +framework, to provide a set of expected UI features, among which are +sane resets (such as [normalize.css](https://necolas.github.io/normalize.css/ "Normalize.css - A modern, HTML5-ready alternative to CSS resets")'s -reset rules. +reset rules) and usable menus. -To see the effects of **pure.css** uncomment the *PURE.CSS* ``@import`` -rule in **static/css/style.css** and re-run ``make``. +To deactivate Pure, put the *PURE.CSS* ``@import`` rule in +**static/css/style.css** in comments and re-run ``make``. ## clym -- A Default Theme @@ -68,69 +66,55 @@ rule in **static/css/style.css** and re-run ``make``. Additionally, cl-yag comes with its first theme: *clym*. *clym* stands for *cl-yag minimal*. It is a set of css rules designed to -work with cl-yags specific skeleton. It provides an unobtrusive color +work with cl-yag's html skeleton. It provides an unobtrusive color scheme, basic typography, as well as basic responsiveness. You'll find it in **static/css/clym.css**. -*clym* doesn't provide css-resets and menu-layouts. That's where -[Pure](https://purecss.io/ "purecss.io") steps in and does a -magnificient job. +**clym.css** doesn't provide neither css resets nor a menu layout. This +is handled by [Pure](https://purecss.io/ "purecss.io")'s +**pure.css**. Further, it doesn't need any JavaScript. -If you don't like *clym*, put the following line in **data/css/style.css** -in comments to deactivate it: - - @import url("clym.css"); +If you don't like *clym*, put comments around the line ``@import +url("clym.css");`` in **static/css/style.css**, around all pure-rules +in **static/css/custom.css**, and re-run ``make``. ## **custom.css** -For information about **custom.css** read the following section "Working -With Stylesheets". +For information about **custom.css** you need to read it, as well as +the following section "Working With Style Sheets". -## Working With Stylesheets -Before you start working, make copies of cl-yags default layout files -and/or use a version control system, e.g. [git](https://git-scm.com/ "git - the free and open source distributed version control system"). +## Working With Style Sheets ### Current Styles And Minor Tweaks -If you are already using a combination of stylesheets but need to adjust -some parts of the layout, use cl-yag's **static/css/custom.css**. It is -currently used to override pure's default layout for horizontal menus -with *clym*'s colorscheme , so you already have a working example of -howto use **custom.css**. +If you are already using a combination of style sheets and you need to +adjust some parts of the layout, use cl-yag's +**static/css/custom.css**. It is currently used to override Pure's +default layout for horizontal menus with *clym*'s colorscheme. #### MIND - In order to override rules located in all previous(!) style sheets -**custom.css** needs(!) to get sourced in as the last(!) file(!) in -**data/css/style.css** (see section: "style.css – One Sheet To Rule Them +**custom.css** needs to get sourced in as the last(!) file in +**static/css/style.css** (see section: "style.css – One Sheet To Rule Them All"). - Respect the [cascade](https://www.w3.org/TR/css-cascade-3/ "W3C: CSS Cascading and Inheritance Level 3") :-). -### Frameworks - -CSS frameworks provide an easy way to create your own full-of-features -theme. To make use of a framework's rulesets, - -- their ids and classes need to get wired into cl-yag's html-skeleton and -- the skeleton needs to get used by cl-yag's **generator.lisp**. - -So you need to edit cl-yag's template-files in **templates/** and - -depending on the scale of work and your approach - **generator.lisp** as -well. -#### **templates/** - -To get more information about templates, read them :-). - - -#### **generator.lisp** +### Frameworks -In case you've choosen to rename your template-files, you need to adjust -their corresponding paths and filenames in **generator.lisp** as well. +CSS frameworks provide an easy way to create your own theme. To make use +of a framework's rulesets, +- its style sheets need to get included via your **static/css/style.css**, +- their ids and classes need to get wired into cl-yag's template files and +- the template files need to get used by cl-yag's **generator.lisp**. +So you need to edit cl-yag's template files in **templates/** and - in +case you've choosen to rename your templates - you need to adjust their +corresponding paths and filenames in **generator.lisp**. diff --git a/static/css/LICENSE b/static/css/LICENSE deleted file mode 100644 index 78e9836..0000000 --- a/static/css/LICENSE +++ /dev/null @@ -1,20 +0,0 @@ -/* - * OpenBSD License - * - * Copyright (c) 2017 lambda <lambda@fnord.one> - * - * Permission to use, copy, modify, and distribute this software for any - * purpose with or without fee is hereby granted, provided that the - * above copyright notice and this permission notice appear in all - * copies. - * - * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL - * WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE - * AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL - * DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR - * PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER - * TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR - * PERFORMANCE OF THIS SOFTWARE. - */ - diff --git a/static/css/clym.css b/static/css/clym.css index 85a8278..d7097be 100644 --- a/static/css/clym.css +++ b/static/css/clym.css @@ -86,7 +86,6 @@ header > div { } @media only screen and (min-width: 800px) { #wrapper { - max-width: 730px; max-width: 750px; font-size: 1em; } diff --git a/static/css/style.css b/static/css/style.css index 3c7ec8e..50485b8 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -4,14 +4,14 @@ @charset "utf-8"; -/* ~ PURE.CSS ~ */ +/* ~ PURE ~ */ @import url("pure_r1.0.0/pure.css"); -/* ~ Stylesheet for cl-yag ~ */ +/* ~ CLYM ~ */ @import url("clym.css"); -/* ~ LAST ENTRY ~ */ -/* ~ custom.css to override styles. ~ */ +/* ~ LAST ENTRY ~ */ +/* ~ use custom.css for overriding rules ~ */ @import url("custom.css"); diff --git a/templates/layout.tpl b/templates/layout.tpl index d694fb6..1e39449 100644 --- a/templates/layout.tpl +++ b/templates/layout.tpl @@ -5,7 +5,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="generator" content="cl-yag" /> <title>%%Title%%</title> - <link rel="stylesheet" type="text/css" href="static/css/style.css" /> + <link rel="stylesheet" type="text/css" href="static/css/style.css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="%%Title%% RSS Feed" href="rss.xml" /> <!-- <link rel="alternate" type="application/atom+xml" title="%%Title%% Atom Feed" href="atom.xml" /> --> <link rel="icon" type="image/x-icon" href="static/img/clyagFav.ico" /> diff --git a/templates/layout.tpl_original b/templates/layout.tpl_original index c787098..6077722 100644 --- a/templates/layout.tpl_original +++ b/templates/layout.tpl_original @@ -5,7 +5,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="generator" content="cl-yag" /> <title>%%Title%%</title> - <link rel="stylesheet" type="text/css" href="static/css/style.css" /> + <link rel="stylesheet" type="text/css" href="static/css/style.css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="%%Title%% RSS Feed" href="rss.xml" /> <!-- <link rel="alternate" type="application/atom+xml" title="%%Title%% Atom Feed" href="atom.xml" /> --> <link rel="icon" type="image/x-icon" href="static/img/clyagFav.ico" />