Browse Source

README: add container and CSS spacer notes

restyle-spring-2019
Annika Backstrom 3 months ago
parent
commit
d74ea2af9f
1 changed files with 35 additions and 0 deletions
  1. 35
    0
      README.md

+ 35
- 0
README.md View File

@@ -20,6 +20,41 @@ If you make content or theme changes and want to regenerate the site, re-run the
20 20
 
21 21
     $ docker-compose run pelican
22 22
 
23
+This command is aliased to `make all` and `make` thanks to the `Makefile`. A Vim
24
+alias like `nnoremap <leader>m :silent make<CR>` lets you quickly rebuild the
25
+site from within your editor.
26
+
27
+## Editing the Docker containers
28
+
29
+The `pelican` and `sass` containers are custom, generated from `Dockerfile` and
30
+`Dockerfile.sass`, respectively. You can regenerate these containers using
31
+`bin/docker-build-image`.
32
+
33
+# Site Styles
34
+
35
+## Margin and padding classes
36
+
37
+Margin and padding can be controlled using spacer classes. These use a
38
+multiplier in the class name, with a base of 6px. For example, `.p-2` would
39
+apply 6px * 2 padding on all sides.
40
+
41
+| Class           | Attributes |
42
+| --------------- | ---------- |
43
+| `p-[0/1/2/3]`   | `padding` |
44
+| `p-t-[0/1/2/3]` | `padding-top` |
45
+| `p-r-[0/1/2/3]` | `padding-right` |
46
+| `p-b-[0/1/2/3]` | `padding-bottom` |
47
+| `p-l-[0/1/2/3]` | `padding-left` |
48
+| `p-x-[0/1/2/3]` | `padding-top` and `padding-bottom` |
49
+| `p-y-[0/1/2/3]` | `padding-left` and `padding-right` |
50
+| `m-[0/1/2/3]`   | `margin` |
51
+| `m-t-[0/1/2/3]` | `margin-top` |
52
+| `m-r-[0/1/2/3]` | `margin-right` |
53
+| `m-b-[0/1/2/3]` | `margin-bottom` |
54
+| `m-l-[0/1/2/3]` | `margin-left` |
55
+| `m-x-[0/1/2/3]` | `margin-top` and `margin-bottom` |
56
+| `m-y-[0/1/2/3]` | `margin-left` and `margin-right` |
57
+
23 58
 ## Responsive CSS
24 59
 
25 60
 [@include-media](https://include-media.com) is used for responsive CSS. To use

Loading…
Cancel
Save