nonlinear
/
www-gopher
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

~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.
This commit is contained in:
lambda 2017-12-04 15:50:49 +01:00
parent bd44af1d08
commit 07b437d4dc
8 changed files with 71 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@ -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

18
data/README.md
View File

@ -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

110
data/css.md
View File

@ -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**
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**.

20
static/css/LICENSE
View File

@ -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.
*/

1
static/css/clym.css
View File

@ -86,7 +86,6 @@ header > div {
}
@media only screen and (min-width: 800px) {
#wrapper {
max-width: 730px;
max-width: 750px;
font-size: 1em;
}

8
static/css/style.css
View File

@ -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");

2
templates/layout.tpl
View File

@ -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" />

2
templates/layout.tpl_original
View File

@ -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" />