parent
20254fa11b
commit
4d6a22dcec
32
README.md
32
README.md
|
@ -1,9 +1,9 @@
|
|||
o# README
|
||||
# README
|
||||
|
||||
|
||||
## Introduction
|
||||
|
||||
cl-yag is a lightweight, static-site generator that produces **gopher** sites as well as **html** websites.
|
||||
cl-yag is a lightweight, static site generator that produces **gopher** sites as well as **html** websites.
|
||||
The name 'cl-yag' stands for 'Common Lisp - Yet Another website Generator'.
|
||||
It runs without Quicklisp.
|
||||
|
||||
|
@ -117,13 +117,13 @@ The *config* variable is used to assign the following values:
|
|||
- **:title**
|
||||
- The title of the webpage
|
||||
- **:description**
|
||||
- This text is used in the *description* field of the Atom RSS
|
||||
- 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
|
||||
|
@ -150,13 +150,13 @@ Of the following keywords, only ``:author`` and ``:short`` can be omitted.
|
|||
- The ``:id`` field holds the filename of your post/page.
|
||||
- Example: ``:id "2"`` will load file **data/2.md**. Use text instead of numbers, if you want to.
|
||||
- (See section: 'The **data/** Directory'.)
|
||||
- **:short**
|
||||
- The ``:short`` field's value is used for displaying a really short description of the posts content on your homepage.
|
||||
- If ``:short`` doesn't get a value, the full article gets displayed.
|
||||
- Hint: Use ``:short "view the article for the full text"``, if you don't want to display the full text of an article on your index site.
|
||||
- **:tag**
|
||||
- ``:tag`` field is used to create a "view" containing all articles of the same tag.
|
||||
- MIND: Whitespaces are used to separate tags and are not allowed in(!) tags.
|
||||
- **:tiny**
|
||||
- The ``:tiny`` field's value is used for displaying a really short description of the posts content on your homepage.
|
||||
- If ``:tiny`` doesn't get a value, the full article gets displayed.
|
||||
- Hint: Use ``:tiny "Read the full article for more information."``, if you don't want to display the full text of an article on your index site.
|
||||
- **:title**
|
||||
- The ``:title`` field's value sets your post's title, its first headline, as well as its entry on the index.html.
|
||||
|
||||
|
@ -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
|
||||
|
|
176
data/README.md
176
data/README.md
|
@ -3,7 +3,7 @@
|
|||
|
||||
## Introduction
|
||||
|
||||
cl-yag is a very lightweight, 'static site'-generator that produces **gopher** sites as well as **html** websites.
|
||||
cl-yag is a lightweight, static site generator that produces **gopher** sites as well as **html** websites.
|
||||
The name 'cl-yag' stands for 'Common Lisp - Yet Another website Generator'.
|
||||
It runs without Quicklisp.
|
||||
|
||||
|
@ -21,20 +21,16 @@ gopher-space](gopher://dataswamp.org/1/~solene/).
|
|||
To use cl-yag you'll need:
|
||||
|
||||
1. A Common Lisp Interpreter
|
||||
- cl-yag's current default is **Steel Bank Common Lisp (SBCL)**.
|
||||
- **Embeddable Common Lisp (ECL)** will do fine as well.
|
||||
- cl-yag's current default is [Steel Bank Common Lisp (SBCL)](http://www.sbcl.org/).
|
||||
- [Embeddable Common Lisp (ECL)](https://common-lisp.net/project/ecl/) will do fine as well.
|
||||
2. A Markdown-to-HTML Converter
|
||||
- cl-yag's current default is **multimarkdown**.
|
||||
3. BSD Make
|
||||
- Linux-Users, cl-yag uses a BSD Makefile syntax, that isn't compatible with GNU make's.
|
||||
- You need to install a port of the NetBSD make tool, called **bmake**.
|
||||
- cl-yag's current default is [multimarkdown](http://fletcherpenney.net/multimarkdown/).
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
Go into your project's directory and type ``make``. You'll find your new website/gopher page in 'output/'.
|
||||
If you want to get rid of everything in your 'output/' subdirectories,
|
||||
type ``make clean``.
|
||||
Go into your project's directory and type ``make``. You'll find your new website/gopher page in **output/**.
|
||||
If you want to get rid of everything in your **output/** subdirectories, type ``make clean``.
|
||||
For further commands: read the Makefile.
|
||||
Read in the follwing section where to find it.
|
||||
|
||||
|
@ -73,25 +69,25 @@ least the following files and folders:
|
|||
- This is cl-yag's core library.
|
||||
- **static/**
|
||||
- This directory holds content, that needs to be published without being changed (e.g. stylesheets, js-scripts).
|
||||
- If you come from 'non-static CMS'-Country: 'static/' holds, what you would put in your 'assets/' directory.
|
||||
- If you come from 'non-static CMS'-Country: **static/** holds, what you would put in your **assets/** directory.
|
||||
- **templates/**
|
||||
- The templates in this directory provide the structural skeleton(s) of the webpages and feeds you want to create.
|
||||
- **output/**
|
||||
- cl-yag puts in this directory everything ready to get deployed.
|
||||
- Because cl-yag generates not only HTML, but gopher-compliant pages as well, output/ **holds two subdirectories**.
|
||||
- **gopher/** : contains the website for gopher,
|
||||
- **html/** : contains the website in HTML.
|
||||
- Because cl-yag generates not only HTML, but gopher-compliant pages as well, **output/** **holds two subdirectories**.
|
||||
- **gopher/** contains the website for gopher,
|
||||
- **html/** contains the website in HTML.
|
||||
|
||||
And there is the **data/** directory, which is important enough to get a subsubsection of its own.
|
||||
|
||||
### The 'data/' Directory
|
||||
### The data/ Directory
|
||||
|
||||
This directory is crucial for the usage of cl-yag.
|
||||
|
||||
**data/** contains
|
||||
|
||||
- the **articles.lisp configuration file**, which defines important metadata for posts and pages.
|
||||
- It also holds **${id}.md**-files, which are holding your posts' and pages' content. You can use markdown to write them.
|
||||
- the **articles.lisp** configuration file, which defines important metadata for posts and pages.
|
||||
- It also holds **${id}.md** files, which are holding your posts' (or pages') content. You can use markdown to write them.
|
||||
|
||||
For more information: Read section 'Configuration'.
|
||||
|
||||
|
@ -99,172 +95,174 @@ For more information: Read section 'Configuration'.
|
|||
## Configuration
|
||||
|
||||
cl-yag's main configuration file is **data/articles.lisp**.
|
||||
In order to have a reliably running implementation of cl-yag, you have
|
||||
In order to have a running implementation of cl-yag, you have
|
||||
to set most of the values in this file.
|
||||
|
||||
**data/articles.lisp** has two parts:
|
||||
|
||||
1. A variable called **config**. It defines global values, that define your webpage.
|
||||
2. A variable called **articles**. It defines local values, that - in turn - define individual pages/posts.
|
||||
1. A variable called *config*. Its values define your webpage.
|
||||
2. A variable called *articles*. Its values define your posts.
|
||||
|
||||
Values are assigned by placing a string (e.g. "foo") or a boolean
|
||||
(i.e. 't' or 'nil') behind a keyword (e.g. ':title').
|
||||
Values are assigned by placing a string (e.g. ``"foo"``) or a boolean
|
||||
(i.e. ``t`` or ``nil``) behind a keyword (e.g. ``:title``).
|
||||
|
||||
|
||||
### The **config** Variable
|
||||
### The *config* Variable
|
||||
|
||||
The **config** variable is used to assign the following values:
|
||||
The *config* variable is used to assign the following values:
|
||||
|
||||
- **:webmaster**
|
||||
- The name of the default(!) author.
|
||||
- :webmaster gets used, if **:author** is omitted. (see below: 'The **articles** variable'.)
|
||||
- ``:webmaster`` gets used, if ``:author`` is omitted. (See below: 'The **articles** variable'.)
|
||||
- **:title**
|
||||
- The title of the webpage
|
||||
- **:description**
|
||||
- This text is used in the *description* field of the Atom RSS
|
||||
- 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
|
||||
- Example: https://mydomain/~~user/ is a valid url.
|
||||
- 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.
|
||||
- ``t`` to export html website. Set ``nil`` to disable.
|
||||
- **gopher**
|
||||
- *t* to export gopher website. Set *nil* to disable.
|
||||
- ``t`` to export gopher website. Set ``nil`` to disable.
|
||||
- **gopher-path**
|
||||
- This is the full path of the directory to access your gopher hole.
|
||||
- **gopher-server**
|
||||
- Hostname of the gopher server. Because gopher doesn't allow relative links (like html), you need to know where you put your files.
|
||||
- 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 need to be included in every link (see: **gopher-server**).
|
||||
- tcp port of the gopher server. 70 is the default port. It needs to be included in each link.
|
||||
|
||||
|
||||
### The **articles** Variable
|
||||
### The *articles* Variable
|
||||
|
||||
The **articles** variable holds per page/post-metadata.
|
||||
Of the following fields, only the *:author* and *:short* description could be omitted.
|
||||
The *articles* variable holds post metadata.
|
||||
So you need to create an entry in the *articles* variable for each of your posts.
|
||||
|
||||
Of the following keywords, only ``:author`` and ``:short`` can be omitted.
|
||||
|
||||
- **:short**
|
||||
- The _:short_ field's value is used for displaying a really short description of the posts content on your homepage.
|
||||
- If _:short_ doesn't get a value, the full article gets displayed.
|
||||
- Hint: Use ``:short "view the article for the full text"``, if you don't want to display the full text of an article on your index site.
|
||||
- **:id_**
|
||||
- The _:id_ field holds the filename of your post/page.
|
||||
- Example: ``:id "2"`` will load file ``data/2.md``. Use text instead of numbers, if you want to.
|
||||
- (See section: 'The **data/** Directory'.)
|
||||
- **:author**
|
||||
- The _:author_ field is used to display the article' author.
|
||||
- If you omit it, the generator will take the name from the **:webmaster** field of the *config* variable.
|
||||
- The ``:author`` field is used to display the article's author.
|
||||
- If you omit it, the generator will take the name from the ``:webmaster`` field of the *config* variable.
|
||||
- **:id**
|
||||
- The ``:id`` field holds the filename of your post/page.
|
||||
- Example: ``:id "2"`` will load file **data/2.md**. Use text instead of numbers, if you want to.
|
||||
- (See section: 'The **data/** Directory'.)
|
||||
- **:tag**
|
||||
- _:tag_ field is used to create a "view" containing all articles of the same tag.
|
||||
- MIND: Whitespaces are not allowed in(!) tags.
|
||||
- ``:tag`` field is used to create a "view" containing all articles of the same tag.
|
||||
- MIND: Whitespaces are used to separate tags and are not allowed in(!) tags.
|
||||
- **:tiny**
|
||||
- The ``:tiny`` field's value is used for displaying a really short description of the posts content on your homepage.
|
||||
- If ``:tiny`` doesn't get a value, the full article gets displayed.
|
||||
- Hint: Use ``:tiny "Read the full article for more information."``, if you don't want to display the full text of an article on your index site.
|
||||
- **:title**
|
||||
- The ``:title`` field's value sets your post's title, its first headline, as well as its entry on the index.html.
|
||||
|
||||
|
||||
## Howto Create A New Post
|
||||
|
||||
Edit data/articles.lisp and add a new list to the *articles* variable:
|
||||
Edit **data/articles.lisp** and add a new list to the *articles* variable:
|
||||
|
||||
(list :title "How do I use cl-yag"
|
||||
: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 ``2.md`` file, using markdown.
|
||||
Then write a corresponding **data/2.md** file, using markdown.
|
||||
|
||||
|
||||
## Howto Publish A Post
|
||||
|
||||
I prepared a Makefile to facilitate the process of generating and
|
||||
publishing your static sites.
|
||||
|
||||
publishing your static sites.
|
||||
All you need to do in order to publish is to go into your cl-yag
|
||||
directory and type "make".
|
||||
directory and type ``make``.
|
||||
|
||||
The 'make' command does create html and gopher files in the defined
|
||||
**output/** location (which can be a symbolic link pointing to some
|
||||
other directory, somewhere else on your machine).
|
||||
The make command creates html and gopher files in the defined location.
|
||||
The default is the **output/** directory, but you can use a symbolic link
|
||||
pointing to some other directory as well.
|
||||
|
||||
|
||||
## Howto Add A New Page
|
||||
|
||||
You may want to have some dedicated pages besides the index or a post.
|
||||
To create one, edit the **generate-site** function in cl-yag's
|
||||
generator.lisp and add a function call, like this:
|
||||
To create one, edit the *generate-site* function in cl-yag's
|
||||
**generator.lisp** and add a function call, like this:
|
||||
|
||||
(generate "somepage.html" (load-file "data/mypage.html"))
|
||||
|
||||
This will produce the file **somepage.html** in the output folder.
|
||||
This will produce **output/html/somepage.html**.
|
||||
|
||||
|
||||
## Further Customization
|
||||
|
||||
### 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`
|
||||
make LISP=ecl
|
||||
|
||||
|
||||
### Using git Hooks For Publishing
|
||||
|
||||
You may customize your publishing-process further, e.g. by using a git
|
||||
hook to call 'make' after each change in the repo so your website gets
|
||||
updated automatically.
|
||||
hook to call the make program after each change in the repo so your
|
||||
website gets updated automatically.
|
||||
|
||||
|
||||
## Page-Includes
|
||||
|
||||
Here is an example code, if you want to include another page in the template:
|
||||
|
||||
1. Create **template/panel.tpl** with the html you want to include.
|
||||
2. Add a string in the target file, where the replacement should occur.
|
||||
In this case, we choose **%%Panel%%** for a string, and, because we want the panel to be displayed on each page, we add this string to **template/layout.tpl**.
|
||||
1. Create **templates/panel.tpl** containing the html you want to include.
|
||||
2. Add a replacement-string in the target file, where the replacement should occur.
|
||||
In this case, we choose **%%Panel%%** for a string, and, because we want the panel to be displayed on each page, we add this string to **templates/layout.tpl**.
|
||||
|
||||
3. Modify the function *generate-layout* in cl-yag's **generator.lisp** accordingly.
|
||||
This is done by adding the following template function call:
|
||||
|
||||
"**(template "%%Panel%%" (load-file "template/panel.tpl"))**"
|
||||
|
||||
(Note: You can insert your text directly into the layout template file
|
||||
as well.)
|
||||
(template "%%Panel%%" (load-file "templates/panel.tpl"))
|
||||
|
||||
Another valid approach is to writer your html directly into **templates/layout.tpl**.
|
||||
|
||||
## Known Limitations
|
||||
|
||||
### Use ~~ To Create ~
|
||||
|
||||
cl-yag crashes if you use a single "**~**" caracter inside one data
|
||||
structure in **articles.lisp** files, because Common Lisp employs the
|
||||
tilde as a prefix to indicate format specifiers in format strings.
|
||||
cl-yag crashes if you use a single "~" character inside
|
||||
**templates/articles.lisp**, because Common Lisp employs the tilde as a
|
||||
prefix to indicate format specifiers in format strings.
|
||||
|
||||
In order to use a literal `~` - e.g. for creating a :title or :url
|
||||
reference - you have to **escape** the tilde **by duplicating** it:
|
||||
``~~``.
|
||||
(See _:url_ in section 'Configuration').
|
||||
In order to use a literal `~` -- e.g. for creating a ``:title`` or
|
||||
``:url`` reference -- you have to *escape* the tilde *by
|
||||
duplicating* it: ``~~``. (See ``:url`` in section 'Configuration').
|
||||
|
||||
|
||||
### Posting Without Tagging
|
||||
|
||||
cl-yag allows posts to be 'untagged'- but with the default template
|
||||
you'll get a line below your title that displays: "Tags: ".
|
||||
cl-yag allows posts without tags, but, using the default
|
||||
**templates/layout.tpl**, you'll get a line below your title that
|
||||
displays: "Tags: ".
|
||||
|
||||
(Note: If you are looking for a way to contribute this may be a task for you.)
|
||||
|
||||
|
||||
### A Note On Themes
|
||||
|
||||
Although cl-yag **may** ship with a **minimalistic** template, cl-yag
|
||||
focuses only on generating html- and gopher-compliant structural
|
||||
markup - not themed layouts.
|
||||
Although cl-yag may ship with a minimalistic template, cl-yag focuses
|
||||
on generating html- and gopher-compliant structural markup - not
|
||||
themed layouts.
|
||||
|
||||
If you want some deeply refined, cross-browser compatible, responsive,
|
||||
webscale style-sheet, you need to create it yourself.
|
||||
However, cl-yag will work nicely with it and if you want to make your
|
||||
stylesheets a part of cl-yag you're very welcome to contact me.
|
||||
webscale style sheets, you need to create them yourself. However,
|
||||
cl-yag will work nicely with them and if you want to make your
|
||||
style sheets a part of cl-yag you're very welcome to contact me.
|
||||
|
||||
|
||||
# Hacking cl-yag
|
||||
|
@ -275,4 +273,4 @@ If you want to contribute, feel free to contact me and/or to send in a patch.
|
|||
- If you are looking for a way to contribute:
|
||||
- You could find a way to "sanitize" cl-yag's behaviour regarding the tilde (see: above);
|
||||
- Also see: 'Note' in 'Posting Without Tagging';
|
||||
- Also see: 'A Note On Themes.
|
||||
- Also see: 'A Note On Themes'.
|
||||
|
|
|
@ -33,11 +33,14 @@
|
|||
|
||||
(defvar *articles*
|
||||
(list
|
||||
;; CSS
|
||||
(list :id "css" :date "02.12.2017" :tag "cl-yag"
|
||||
:title "CSS For cl-yag" :author "lambda" :tiny "Read more")
|
||||
;; README
|
||||
(list :id "README" :date "23 November 2017" :tag "cl-yag README"
|
||||
:title "README" :author "lambda" :short "cl-yag's README got reworked." :tiny "Read cl-yag's README")
|
||||
(list :id "README" :date "23.11.2017" :tag "cl-yag"
|
||||
:title "README" :author "lambda" :tiny "Read cl-yag's README")
|
||||
;; 1
|
||||
(list :id "1" :date "29 April 2016":tag "pony code"
|
||||
(list :id "1" :date "29.04.2016" :tag "pony"
|
||||
:title "My first message" :short "This is my first message" :author "Solène" :tiny "Read more")
|
||||
))
|
||||
|
||||
|
|
|
@ -0,0 +1,123 @@
|
|||
# CSS For cl-yag
|
||||
|
||||
cl-yag provides you with a default theme and a useful approach to
|
||||
handle CSS style sheets as well as CSS frameworks.
|
||||
|
||||
|
||||
## Where The Style Sheets Live
|
||||
|
||||
All of cl-yag's style sheets are located in **static/css/**.
|
||||
Currently there are the following files:
|
||||
|
||||
css/
|
||||
|-- clym.css
|
||||
|-- custom.css
|
||||
|-- pure_r1.0.0/
|
||||
| |-- LICENSE.md
|
||||
| `-- pure.css
|
||||
`-- style.css
|
||||
|
||||
|
||||
## style.css -- One Sheet To Rule Them All
|
||||
|
||||
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:
|
||||
|
||||
/* =================================================================== */
|
||||
/* style.css for cl-yag */
|
||||
/* =================================================================== */
|
||||
@charset "utf-8";
|
||||
|
||||
|
||||
/* ~ PURE ~ */
|
||||
@import url("pure_r1.0.0/pure.css");
|
||||
|
||||
|
||||
/* ~ CLYM ~ */
|
||||
@import url("clym.css");
|
||||
|
||||
|
||||
/* ~ LAST ENTRY ~ */
|
||||
/* ~ use custom.css for overriding rules ~ */
|
||||
@import url("custom.css");
|
||||
|
||||
|
||||
|
||||
## 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) and usable menus.
|
||||
|
||||
To deactivate Pure, put the *PURE.CSS* ``@import`` rule in
|
||||
**static/css/style.css** in comments and re-run ``make``.
|
||||
|
||||
|
||||
## clym -- A Default Theme
|
||||
|
||||
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-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.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 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** you need to read it, as well as
|
||||
the following section "Working With Style Sheets".
|
||||
|
||||
|
||||
## Working With Style Sheets
|
||||
|
||||
### Current Styles And Minor Tweaks
|
||||
|
||||
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
|
||||
**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 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**.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,214 @@
|
|||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/* ====================================================== */
|
||||
/* A basic style for wrapper main footer */
|
||||
/* ====================================================== */
|
||||
html{
|
||||
overflow-y:scroll;
|
||||
}
|
||||
html, body {
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
min-height:100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding: 0em 1em;
|
||||
}
|
||||
#wrapper {
|
||||
position: relative;
|
||||
width:100%;
|
||||
min-height: 100%;
|
||||
margin: 0em auto;
|
||||
}
|
||||
main {
|
||||
padding-bottom: 3em;
|
||||
height:100%;
|
||||
}
|
||||
main:after {
|
||||
display: block;
|
||||
width: 100%;
|
||||
content:"";
|
||||
clear: both;
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 3em;
|
||||
bottom: 0em;
|
||||
text-align: center;
|
||||
}
|
||||
footer > p {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
/* ====================================================== */
|
||||
/* A basic style for header */
|
||||
/* ====================================================== */
|
||||
/* All Tags */
|
||||
header > div {
|
||||
display: block;
|
||||
margin: 0.5em auto auto auto;
|
||||
padding: 1ex;
|
||||
float: right;
|
||||
border: 1px solid transparent;
|
||||
min-width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
/* ====================================================== */
|
||||
/* A basic responsive'ish ruleset */
|
||||
/* ====================================================== */
|
||||
@media only screen and (min-width: 360px) {
|
||||
#wrapper {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 800px) {
|
||||
#wrapper {
|
||||
max-width: 750px;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1000px) {
|
||||
#wrapper {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1025px) {
|
||||
#wrapper {
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
/* ====================================================== */
|
||||
/* A basic theme */
|
||||
/* ====================================================== */
|
||||
html, body {
|
||||
font-family: Arial, sans;
|
||||
color: #1f1f1f ;
|
||||
}
|
||||
main {
|
||||
line-height: 1.3em;
|
||||
}
|
||||
h1,h2,h3 {
|
||||
font-weight: bold;
|
||||
line-height: 1.8;
|
||||
margin: 0em;
|
||||
}
|
||||
h1 {
|
||||
font-size: 175%;
|
||||
}
|
||||
h2 {
|
||||
font-size: 150%;
|
||||
}
|
||||
h3 {
|
||||
font-size: 125%;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
a {
|
||||
color: #3b5487;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:active, a:hover, a:focus {
|
||||
color: #203785;
|
||||
text-decoration: underline;
|
||||
}
|
||||
footer > p {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
/* default style for 'information' */
|
||||
article > header {
|
||||
font-weight: 900;
|
||||
font-size: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
article > header > h1 > a {
|
||||
color: #1f1f1f ;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* ====================================================== */
|
||||
/* A basic style for code */
|
||||
/* ====================================================== */
|
||||
code {
|
||||
display:inline-block;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
background-color: #e3f0ff;
|
||||
font-weight: 700;
|
||||
font-size: 0.8em;
|
||||
color: #3c3f42;
|
||||
}
|
||||
pre > code {
|
||||
display: block;
|
||||
height: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
/* ====================================================== */
|
||||
/* A basic style for posts */
|
||||
/* ====================================================== */
|
||||
article {
|
||||
display: block;
|
||||
float: left;
|
||||
clear:both;
|
||||
width: 100%;
|
||||
}
|
||||
article:after {
|
||||
display:block;
|
||||
height: 1em;
|
||||
content:"";
|
||||
clear:both;
|
||||
}
|
||||
article > header {
|
||||
display:block;
|
||||
margin: 0em;
|
||||
padding: 1em;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: 1px 1px 5px 1px #1f1f1f;
|
||||
box-shadow: 1px 1px 5px 1px #1f1f1f;
|
||||
}
|
||||
article > header:after {
|
||||
display:block;
|
||||
width:100%;
|
||||
height: auto;
|
||||
content:"";
|
||||
clear:both;
|
||||
}
|
||||
article > header > .information {
|
||||
font-size: 80%;
|
||||
}
|
||||
article > header > h1 {
|
||||
float: left;
|
||||
margin: auto 1em;
|
||||
}
|
||||
article > header > p {
|
||||
float: left;
|
||||
margin-top: 5px;
|
||||
}
|
||||
article > header + h1 {
|
||||
margin-top: 1em;
|
||||
}
|
|
@ -0,0 +1,16 @@
|
|||
/* ==================================================================== */
|
||||
/* custom.css */
|
||||
/* ==================================================================== */
|
||||
/* use this file to tweak your styles by overriding others */
|
||||
|
||||
|
||||
/* Override some of pure.css's menu rules to get clym's */
|
||||
a.pure-menu-link {
|
||||
color: #3b5487;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
a.pure-menu-link:active, a.pure-menu-link:hover, a.pure-menu-link:focus {
|
||||
color: #203785;
|
||||
}
|
|
@ -0,0 +1,52 @@
|
|||
Software License Agreement (BSD License)
|
||||
========================================
|
||||
|
||||
Copyright 2014 Yahoo! Inc. All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
* Redistributions of source code must retain the above copyright
|
||||
notice, this list of conditions and the following disclaimer.
|
||||
|
||||
* Redistributions in binary form must reproduce the above copyright
|
||||
notice, this list of conditions and the following disclaimer in the
|
||||
documentation and/or other materials provided with the distribution.
|
||||
|
||||
* Neither the name of the Yahoo! Inc. nor the
|
||||
names of its contributors may be used to endorse or promote products
|
||||
derived from this software without specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL YAHOO! INC. BE LIABLE FOR ANY
|
||||
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
|
||||
Normalize.css License
|
||||
=====================
|
||||
|
||||
Copyright (c) Nicolas Gallagher and Jonathan Neal
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,17 @@
|
|||
/* =================================================================== */
|
||||
/* style.css for cl-yag */
|
||||
/* =================================================================== */
|
||||
@charset "utf-8";
|
||||
|
||||
|
||||
/* ~ PURE ~ */
|
||||
@import url("pure_r1.0.0/pure.css");
|
||||
|
||||
|
||||
/* ~ CLYM ~ */
|
||||
@import url("clym.css");
|
||||
|
||||
|
||||
/* ~ LAST ENTRY ~ */
|
||||
/* ~ use custom.css for overriding rules ~ */
|
||||
@import url("custom.css");
|
|
@ -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" />
|
||||
|
@ -14,12 +14,12 @@
|
|||
<body>
|
||||
<div id="wrapper">
|
||||
<header>
|
||||
<nav>
|
||||
<!-- <a href="#">BRAND</a> -->
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="index-titles.html">List of Articles</a></li>
|
||||
<li><a href="rss.xml">RSS</a></li>
|
||||
<nav class="pure-menu pure-menu-horizontal">
|
||||
<!--<a href="#"></a>-->
|
||||
<ul class="pure-menu-list">
|
||||
<li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
|
||||
<li class="pure-menu-item"><a href="index-titles.html" class="pure-menu-link">All Posts</a></li>
|
||||
<li class="pure-menu-item"><a href="rss.xml" class="pure-menu-link">RSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div>All Tags: %%Tags%%</div>
|
||||
|
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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" 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" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<header>
|
||||
<nav>
|
||||
<!--<a href="#"></a>-->
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="index-titles.html">All Posts</a></li>
|
||||
<li><a href="rss.xml">RSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div>All Tags: %%Tags%%</div>
|
||||
</header>
|
||||
|
||||
<main>%%Body%%</main>
|
||||
|
||||
<footer><p>This blog is powered by cl-yag!<p></footer>
|
||||
|
||||
</div><!-- #wrapper -->
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue