chishgg-slate 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +5 -5
- data/bin/console +11 -0
- data/bin/setup +8 -0
- data/bin/slate +45 -0
- data/bin/text.md +5 -0
- data/lib/slate/version.rb +1 -1
- data/lib/slate.rb +22 -12
- data/{style.css → themes/github.css} +1 -1
- data/themes/minimal.css +386 -0
- data/themes/pico-blue.css +2458 -0
- data/themes/simple.css +779 -0
- metadata +16 -10
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 98302780ab081e0d771a925d37c74d8db9fc45c4d326e6e74d07f4ff0eddd93f
|
|
4
|
+
data.tar.gz: 82255c0dd2c61fa2981877ba70917eddd6eaa044202f927b83300b2046211f18
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a99c782523c6e96294862b30e0c7b3cb0dcc33a82121c33b37719508d8bdedd07a3155ea45989d9ea811f8a0bc44e020485c97f034fbf00751741dc301069170
|
|
7
|
+
data.tar.gz: be567c7a466179501408d8db993599849d772ec297ba7c33fb7d6233cefcff3e72c8d90983759012c65efdca3d04029877c0cd6f35fff094f22996c7c994158b
|
data/README.md
CHANGED
|
@@ -2,25 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
A Markdown to HTML generator written in Ruby while participating in DUMMIES by Hack Club.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
README generated by Ruby Bundler!
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Installation
|
|
8
8
|
|
|
9
9
|
Install the gem and add to the application's Gemfile by executing:
|
|
10
10
|
|
|
11
11
|
```bash
|
|
12
|
-
bundle add
|
|
12
|
+
bundle add chishgg-slate
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
If bundler is not being used to manage dependencies, install the gem by executing:
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
|
-
gem install
|
|
18
|
+
gem install chishgg-slate
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
## Usage
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
Check out slate --help for usage guide!
|
|
24
24
|
|
|
25
25
|
## Development
|
|
26
26
|
|
data/bin/console
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
#!/usr/bin/env ruby
|
|
2
|
+
# frozen_string_literal: true
|
|
3
|
+
|
|
4
|
+
require "bundler/setup"
|
|
5
|
+
require "slate"
|
|
6
|
+
|
|
7
|
+
# You can add fixtures and/or initialization code here to make experimenting
|
|
8
|
+
# with your gem easier. You can also use a different console, if you like.
|
|
9
|
+
|
|
10
|
+
require "irb"
|
|
11
|
+
IRB.start(__FILE__)
|
data/bin/setup
ADDED
data/bin/slate
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
#!/usr/bin/env ruby
|
|
2
|
+
|
|
3
|
+
require_relative '../lib/slate'
|
|
4
|
+
require 'kramdown'
|
|
5
|
+
require 'fileutils'
|
|
6
|
+
|
|
7
|
+
# filename = File.basename(args, ".*")
|
|
8
|
+
|
|
9
|
+
# Ruby uses begin-rescue keywords instead of try-catch LMAO.... WHYYY
|
|
10
|
+
begin
|
|
11
|
+
Slate::CLI.run(ARGV)
|
|
12
|
+
# if File.file?(args)
|
|
13
|
+
# puts "Argument seems to be a single file, Parsing it"
|
|
14
|
+
# content = File.read(args)
|
|
15
|
+
# filename = File.basename(args, ".*")
|
|
16
|
+
# dir = File.dirname(args)
|
|
17
|
+
|
|
18
|
+
# style_path = File.join(__dir__, '..', 'style.css')
|
|
19
|
+
# FileUtils.cp(style_path, dir)
|
|
20
|
+
|
|
21
|
+
# final_html = Slate.convert(content, filename)
|
|
22
|
+
# File.write("#{filename}.html", final_html)
|
|
23
|
+
# puts "Saved #{filename}.html"
|
|
24
|
+
|
|
25
|
+
# elsif File.directory?(args)
|
|
26
|
+
# puts "Found a directory, gotta check all .md files!"
|
|
27
|
+
|
|
28
|
+
# style_path = File.join(__dir__, '..', 'style.css')
|
|
29
|
+
# FileUtils.cp(style_path, args)
|
|
30
|
+
|
|
31
|
+
# files = Dir.glob(File.join(args, "*.md"))
|
|
32
|
+
# files.each do |file|
|
|
33
|
+
# content = File.read(file)
|
|
34
|
+
# filename = File.basename(file, ".*")
|
|
35
|
+
# final_html = Slate.convert(content, file)
|
|
36
|
+
# File.write("#{filename}.html", final_html)
|
|
37
|
+
# puts "Saved #{filename}.html"
|
|
38
|
+
# end
|
|
39
|
+
|
|
40
|
+
# else
|
|
41
|
+
# puts "Error: #{args} is neither a file nor a directory"
|
|
42
|
+
# end
|
|
43
|
+
rescue StandardError => e
|
|
44
|
+
puts "Unexpected error occured: #{e.message}"
|
|
45
|
+
end
|
data/bin/text.md
ADDED
data/lib/slate/version.rb
CHANGED
data/lib/slate.rb
CHANGED
|
@@ -3,15 +3,17 @@ require 'kramdown'
|
|
|
3
3
|
require 'kramdown-parser-gfm'
|
|
4
4
|
require 'optparse'
|
|
5
5
|
|
|
6
|
+
THEMES = %w[github minimal serif pico-blue simple].freeze
|
|
7
|
+
|
|
6
8
|
module Slate
|
|
7
9
|
class Error < StandardError; end
|
|
8
10
|
|
|
9
|
-
Options = Struct.new(:output_dir)
|
|
11
|
+
Options = Struct.new(:output_dir, :theme)
|
|
10
12
|
# The main class to rule them all
|
|
11
13
|
class CLI
|
|
12
14
|
# This method is the MAIN method... Refactored from bin/slate
|
|
13
15
|
def self.run(argv)
|
|
14
|
-
options = Options.new(nil)
|
|
16
|
+
options = Options.new(nil, "github")
|
|
15
17
|
|
|
16
18
|
OptionParser.new do |opts|
|
|
17
19
|
opts.banner = 'Usage: slate [options] <file_or_directory>'
|
|
@@ -29,12 +31,20 @@ module Slate
|
|
|
29
31
|
puts opts
|
|
30
32
|
exit
|
|
31
33
|
end
|
|
34
|
+
|
|
35
|
+
opts.on('-t', '--theme THEME', 'Theme to use') do |theme|
|
|
36
|
+
options.theme = theme
|
|
37
|
+
end
|
|
38
|
+
|
|
32
39
|
end.parse!(argv)
|
|
33
40
|
|
|
41
|
+
unless THEMES.include?(options.theme)
|
|
42
|
+
abort "Unknown theme '#{options.theme}'. Available themes: #{THEMES.join(', ')}"
|
|
43
|
+
end
|
|
44
|
+
|
|
34
45
|
path = argv.first
|
|
35
46
|
if path.nil?
|
|
36
|
-
puts '
|
|
37
|
-
puts opt_parser
|
|
47
|
+
puts 'Usage: slate [options] <file_or_directory>'
|
|
38
48
|
exit
|
|
39
49
|
end
|
|
40
50
|
|
|
@@ -48,16 +58,16 @@ module Slate
|
|
|
48
58
|
end
|
|
49
59
|
end
|
|
50
60
|
|
|
51
|
-
def self.convert(md_content, title)
|
|
61
|
+
def self.convert(md_content, title, theme)
|
|
52
62
|
raw_html = Kramdown::Document.new(md_content, input: 'GFM').to_html
|
|
53
63
|
|
|
54
|
-
"<head>\n<title> #{title} </title>\n <link href='
|
|
64
|
+
"<head>\n<title> #{title} </title>\n <link href='#{theme}.css' rel='stylesheet'>\n</head>\n<body class='markdown-body'>\n#{raw_html}\n</body>"
|
|
55
65
|
end
|
|
56
66
|
|
|
57
|
-
def self.copy_css(dest)
|
|
67
|
+
def self.copy_css(dest, theme)
|
|
58
68
|
FileUtils.mkdir_p(dest)
|
|
59
|
-
style_path = File.join(__dir__, '..',
|
|
60
|
-
FileUtils.cp(style_path, dest)
|
|
69
|
+
style_path = File.join(__dir__, '..','themes',"#{theme}.css")
|
|
70
|
+
FileUtils.cp(style_path, File.join(dest, "#{theme}.css"))
|
|
61
71
|
end
|
|
62
72
|
|
|
63
73
|
def self.save_file(path, options)
|
|
@@ -67,7 +77,7 @@ module Slate
|
|
|
67
77
|
|
|
68
78
|
FileUtils.mkdir_p(dir)
|
|
69
79
|
output_path = File.join(dir, "#{filename}.html")
|
|
70
|
-
final_html = convert(content, filename)
|
|
80
|
+
final_html = convert(content, filename, options.theme)
|
|
71
81
|
File.write(output_path, final_html)
|
|
72
82
|
puts "Saved #{filename}.html"
|
|
73
83
|
end
|
|
@@ -75,14 +85,14 @@ module Slate
|
|
|
75
85
|
def self.process_file(path, options)
|
|
76
86
|
puts 'Argument seems to be a single file, Parsing it'
|
|
77
87
|
dest = options.output_dir || File.dirname(path)
|
|
78
|
-
copy_css(dest)
|
|
88
|
+
copy_css(dest, options.theme)
|
|
79
89
|
save_file(path, options)
|
|
80
90
|
end
|
|
81
91
|
|
|
82
92
|
def self.process_directory(path, options)
|
|
83
93
|
puts 'Found a directory, gotta check all .md files!'
|
|
84
94
|
dir = options.output_dir || path
|
|
85
|
-
copy_css(dir)
|
|
95
|
+
copy_css(dir, options.theme)
|
|
86
96
|
|
|
87
97
|
files = Dir.glob(File.join(path, '*.md'))
|
|
88
98
|
|
data/themes/minimal.css
ADDED
|
@@ -0,0 +1,386 @@
|
|
|
1
|
+
/* Classless.css v1.1
|
|
2
|
+
|
|
3
|
+
Table of Contents:
|
|
4
|
+
1. Theme Settings
|
|
5
|
+
2. Reset
|
|
6
|
+
3. Base Style
|
|
7
|
+
4. Extras (remove unwanted)
|
|
8
|
+
5. Classes (remove unwanted)
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/* 1. Theme Settings ––––––––––––––––––––-–––––––––––––– */
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
:root, html[data-theme='light'] {
|
|
15
|
+
--rem: 12pt;
|
|
16
|
+
--width: 50rem;
|
|
17
|
+
--navpos: absolute; /* fixed | absolute */
|
|
18
|
+
--font-p: 1em/1.7 'Open Sans', 'DejaVu Sans', FreeSans, Helvetica, sans-serif;
|
|
19
|
+
--font-h: .9em/1.5 'Open Sans', 'DejaVu Sans', FreeSans, Helvetica, sans-serif;
|
|
20
|
+
--font-c: .9em/1.4 'DejaVu Sans Mono', monospace;
|
|
21
|
+
--border: 1px solid var(--cmed);
|
|
22
|
+
--ornament: "‹‹‹ ›››";
|
|
23
|
+
/* foreground | background color */
|
|
24
|
+
--cfg: #433; --cbg: #fff;
|
|
25
|
+
--cdark: #888; --clight: #f5f6f7;
|
|
26
|
+
--cmed: #d1d1d1;
|
|
27
|
+
--clink: #07c;
|
|
28
|
+
--cemph: #088; --cemphbg: #0881;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
/* 2. Reset –––––––––––––––––––––––––––––––––––––––––––– */
|
|
33
|
+
|
|
34
|
+
/* reset block elements */
|
|
35
|
+
* { box-sizing: border-box; border-spacing: 0; margin: 0; padding: 0; }
|
|
36
|
+
header, footer, figure, video, details, blockquote,
|
|
37
|
+
ul, ol, dl, fieldset, pre, pre > code {
|
|
38
|
+
display: block;
|
|
39
|
+
margin: .5rem 0 1rem;
|
|
40
|
+
width: 100%;
|
|
41
|
+
overflow: auto hidden;
|
|
42
|
+
text-align: left;
|
|
43
|
+
}
|
|
44
|
+
video, summary, input, select { outline: none; }
|
|
45
|
+
|
|
46
|
+
/* reset clickable things (FF Bug: select:hover prevents usage) */
|
|
47
|
+
a, button, select, summary { color: var(--clink); cursor: pointer; }
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
/* 3. Base Style ––––––––––––––––––––––––––––––––––––––– */
|
|
51
|
+
html { font-size: var(--rem); background: var(--cbg); }
|
|
52
|
+
body {
|
|
53
|
+
position: relative;
|
|
54
|
+
margin: auto;
|
|
55
|
+
max-width: var(--width);
|
|
56
|
+
font: var(--font-p);
|
|
57
|
+
color: var(--cfg);
|
|
58
|
+
padding: 3.0rem .6rem 0;
|
|
59
|
+
overflow-x: hidden;
|
|
60
|
+
}
|
|
61
|
+
body > footer { margin: 10rem 0 0; font-size: 90%; }
|
|
62
|
+
p { margin: .6em 0; }
|
|
63
|
+
|
|
64
|
+
/* links */
|
|
65
|
+
a[href]{ text-decoration: underline solid 1.5px var(--cmed); text-underline-position: under; }
|
|
66
|
+
a[href^="#"] {text-decoration: none; }
|
|
67
|
+
a:hover, button:not([disabled]):hover, summary:hover, select:hover {
|
|
68
|
+
filter: brightness(92%); color: var(--cemph); border-color: var(--cemph);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* lists */
|
|
72
|
+
ul, ol, dl { margin: 1rem 0; padding: 0 0 0 2em; }
|
|
73
|
+
li:not(:last-child), dd:not(:last-child) { margin-bottom: .5rem; }
|
|
74
|
+
dt { font-weight: bold; }
|
|
75
|
+
|
|
76
|
+
/* headings */
|
|
77
|
+
h1, h2, h3, h4, h5 { margin: 1.5em 0 .5rem; font: var(--font-h); line-height: 1.2em; clear: both; }
|
|
78
|
+
h1+h2, h2+h3, h3+h4, h4+h5 { margin-top: .5em; padding-top: 0; } /* non-clashing headings */
|
|
79
|
+
h1 { font-size: 2.2em; font-weight: 300; }
|
|
80
|
+
h2 { font-size: 2.0em; font-weight: 300; font-variant: small-caps; }
|
|
81
|
+
h3 { font-size: 1.5em; font-weight: 400; }
|
|
82
|
+
h4 { font-size: 1.1em; font-weight: 700; }
|
|
83
|
+
h5 { font-size: 1.2em; font-weight: 400; color: var(--cfg); }
|
|
84
|
+
h6 { font-size: 1.0em; font-weight: 700; font-style: italic; display: inline; }
|
|
85
|
+
h6 + p { display: inline; }
|
|
86
|
+
|
|
87
|
+
/* tables */
|
|
88
|
+
td, th {
|
|
89
|
+
padding: .5em .8em;
|
|
90
|
+
text-align: right;
|
|
91
|
+
border-bottom: var(--border);
|
|
92
|
+
white-space: nowrap;
|
|
93
|
+
font-size: 95%;
|
|
94
|
+
}
|
|
95
|
+
thead th[colspan] { padding: .2em .8em; text-align: center; }
|
|
96
|
+
thead tr:not(:only-child) td { padding: .2em .8em;}
|
|
97
|
+
thead+tbody tr:first-child td { border-top: var(--border); }
|
|
98
|
+
td:first-child, th:first-child { text-align: left; }
|
|
99
|
+
tr:hover{ background-color: var(--clight); }
|
|
100
|
+
table img { display: block; }
|
|
101
|
+
|
|
102
|
+
/* figures */
|
|
103
|
+
img, svg { max-width: 100%; vertical-align: text-top; object-fit: cover; }
|
|
104
|
+
p>img:not(:only-child) { float: right; margin: 0 0 .5em .5em; }
|
|
105
|
+
figure > img { display: inline-block; width: auto; }
|
|
106
|
+
figure > img:only-of-type, figure > svg:only-of-type { max-width: 100%; display: block; margin: 0 auto .4em; }
|
|
107
|
+
figure > *:not(:last-child) { margin-bottom: .4rem; }
|
|
108
|
+
|
|
109
|
+
/* captions */
|
|
110
|
+
figcaption, caption { text-align: left; font: var(--font-h); color: var(--cdark); width: 100%; }
|
|
111
|
+
figcaption > *:first-child, caption > *:first-child { display: inline-block; margin: 0; }
|
|
112
|
+
table caption:last-child { caption-side: bottom; margin: .5em 0;}
|
|
113
|
+
|
|
114
|
+
/* code */
|
|
115
|
+
pre > code {
|
|
116
|
+
margin: 0;
|
|
117
|
+
position: relative;
|
|
118
|
+
padding: .8em;
|
|
119
|
+
border-left: .4rem solid var(--cemph);
|
|
120
|
+
}
|
|
121
|
+
code, kbd, samp {
|
|
122
|
+
padding: .2em;
|
|
123
|
+
font: var(--font-c);
|
|
124
|
+
background: var(--clight);
|
|
125
|
+
border-radius: 4px;
|
|
126
|
+
}
|
|
127
|
+
kbd { border: 1px solid var(--cmed); }
|
|
128
|
+
|
|
129
|
+
/* misc */
|
|
130
|
+
blockquote { border-left: .4rem solid var(--cmed); padding: 0 0 0 1rem; }
|
|
131
|
+
time{ color: var(--cdark); }
|
|
132
|
+
hr { border: 0; border-top: .1rem solid var(--cmed); }
|
|
133
|
+
nav { width: 100%; background-color: var(--clight); }
|
|
134
|
+
::selection, mark { background: var(--clink); color: var(--cbg); }
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
/* 4. Extra Style –––––––––––––––––––––––––––––––––––––– */
|
|
138
|
+
|
|
139
|
+
/* Auto Numbering: figure/tables/headings/cite */
|
|
140
|
+
article { counter-reset: h2 0 h3 0 tab 0 fig 0 lst 0 ref 0 eq 0; }
|
|
141
|
+
article figure figcaption:before {
|
|
142
|
+
color: var(--cemph);
|
|
143
|
+
counter-increment: fig;
|
|
144
|
+
content: "Figure " counter(fig) ": ";
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* subfigures */
|
|
148
|
+
figure { counter-reset: subfig 0 }
|
|
149
|
+
article figure figure { counter-reset: none; }
|
|
150
|
+
article figure > figure { display: inline-grid; width: auto; }
|
|
151
|
+
figure > figure:not(:last-of-type) { padding-right: 1rem; }
|
|
152
|
+
article figure figure figcaption:before {
|
|
153
|
+
counter-increment: subfig 1;
|
|
154
|
+
content: counter(subfig, lower-alpha) ": ";
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* listings */
|
|
158
|
+
article figure pre + figcaption:before {
|
|
159
|
+
counter-increment: lst 1;
|
|
160
|
+
content: "Listing " counter(lst) ": ";
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* tables */
|
|
164
|
+
figure > table:only-of-type { margin: .5em auto !important; width: fit-content; }
|
|
165
|
+
article figure > table caption { display: table-caption; caption-side: bottom; }
|
|
166
|
+
article figure > table + figcaption:before,
|
|
167
|
+
article table caption:before {
|
|
168
|
+
color: var(--cemph);
|
|
169
|
+
counter-increment: tab 1;
|
|
170
|
+
content: "Table " counter(tab) ": ";
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* headings */
|
|
174
|
+
article h2, h3 { position: relative; }
|
|
175
|
+
article h2:before,
|
|
176
|
+
article h3:before {
|
|
177
|
+
display: inline-block;
|
|
178
|
+
position: relative;
|
|
179
|
+
font-size: .6em;
|
|
180
|
+
text-align: right;
|
|
181
|
+
vertical-align: baseline;
|
|
182
|
+
left: -1rem;
|
|
183
|
+
width: 2.5em;
|
|
184
|
+
margin-left: -2.5em;
|
|
185
|
+
}
|
|
186
|
+
article h1 { counter-set: h2; }
|
|
187
|
+
article h2:before { counter-increment: h2; content: counter(h2) ". "; counter-set: h3; }
|
|
188
|
+
article h3:before { counter-increment: h3; content: counter(h2) "." counter(h3) ". ";}
|
|
189
|
+
@media (max-width: 60rem) { h2:before, h3:before { display: none; } }
|
|
190
|
+
|
|
191
|
+
/* tooltip + citation */
|
|
192
|
+
article p>cite:before {
|
|
193
|
+
padding: 0 .5em 0 0;
|
|
194
|
+
counter-increment: ref; content: " [" counter(ref) "] ";
|
|
195
|
+
vertical-align: super; font-size: .6em;
|
|
196
|
+
}
|
|
197
|
+
article p>cite > *:only-child { display: none; }
|
|
198
|
+
article p>cite:hover > *:only-child,
|
|
199
|
+
[data-tooltip]:hover:before {
|
|
200
|
+
display: inline-block; z-index: 40;
|
|
201
|
+
white-space: pre-wrap;
|
|
202
|
+
position: absolute; left: 1rem; right: 1rem;
|
|
203
|
+
padding: 1em 2em;
|
|
204
|
+
text-align: center;
|
|
205
|
+
transform:translateY( calc(-100%) );
|
|
206
|
+
content: attr(data-tooltip);
|
|
207
|
+
color: var(--cbg);
|
|
208
|
+
background-color: var(--cemph);
|
|
209
|
+
box-shadow: 0 2px 10px 0 black;
|
|
210
|
+
}
|
|
211
|
+
[data-tooltip], article p>cite:before {
|
|
212
|
+
color: var(--clink);
|
|
213
|
+
border: .8rem solid transparent; margin: -.8rem;
|
|
214
|
+
}
|
|
215
|
+
abbr[title], [data-tooltip] { cursor: help; }
|
|
216
|
+
|
|
217
|
+
/* navbar */
|
|
218
|
+
nav+* { margin-top: 3rem; }
|
|
219
|
+
body>nav, header nav {
|
|
220
|
+
position: var(--navpos);
|
|
221
|
+
top: 0; left: 0; right: 0;
|
|
222
|
+
z-index: 41;
|
|
223
|
+
box-shadow: 0vw -50vw 0 50vw var(--clight), 0 calc(-50vw + 2px) 4px 50vw var(--cdark);
|
|
224
|
+
}
|
|
225
|
+
nav ul { list-style-type: none; }
|
|
226
|
+
nav ul:first-child { margin: 0; padding: 0; overflow: visible; }
|
|
227
|
+
nav ul:first-child > li {
|
|
228
|
+
display: inline-block;
|
|
229
|
+
margin: 0;
|
|
230
|
+
padding: .8rem .6rem;
|
|
231
|
+
}
|
|
232
|
+
nav ul > li > ul {
|
|
233
|
+
display: none;
|
|
234
|
+
width: auto;
|
|
235
|
+
position: absolute;
|
|
236
|
+
margin: .5rem 0;
|
|
237
|
+
padding: 1rem 2rem;
|
|
238
|
+
background-color: var(--clight);
|
|
239
|
+
border: var(--border);
|
|
240
|
+
border-radius: 4px;
|
|
241
|
+
z-index: 42;
|
|
242
|
+
}
|
|
243
|
+
nav ul > li > ul > li { white-space: nowrap; }
|
|
244
|
+
nav ul > li:hover > ul { display: block; }
|
|
245
|
+
@media (max-width: 40rem) {
|
|
246
|
+
nav ul:first-child > li:first-child:after { content: " \25BE"; }
|
|
247
|
+
nav ul:first-child > li:not(:first-child):not(.sticky) { display: none; }
|
|
248
|
+
nav ul:first-child:hover > li:not(:first-child):not(.sticky) { display: block; float: none !important; padding: .3rem .6rem; }
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
/* details/cards */
|
|
252
|
+
summary>* { display: inline; }
|
|
253
|
+
.card, details {
|
|
254
|
+
display: block;
|
|
255
|
+
margin: .5rem 0 1rem;
|
|
256
|
+
padding: 0 .6rem;
|
|
257
|
+
border-radius: 4px;
|
|
258
|
+
overflow: hidden;
|
|
259
|
+
}
|
|
260
|
+
.card, details[open] { outline: 1px solid var(--cmed); }
|
|
261
|
+
.card>img:first-child { margin: -3px -.6rem; max-width: calc(100% + 1.2rem); }
|
|
262
|
+
summary:hover, details[open] summary, .card>p:first-child {
|
|
263
|
+
box-shadow: inset 0 0 0 2em var(--clight), 0 -.8rem 0 .8rem var(--clight);
|
|
264
|
+
}
|
|
265
|
+
.hint { --cmed: var(--cemph); --clight: var(--cemphbg); background-color: var(--clight); }
|
|
266
|
+
.warn { --cmed: #c11; --clight: #e221; background-color: var(--clight); }
|
|
267
|
+
|
|
268
|
+
/* big first letter */
|
|
269
|
+
article > section:first-of-type > h2:first-of-type + p:first-letter,
|
|
270
|
+
article > h2:first-of-type + p:first-letter, .lettrine {
|
|
271
|
+
float: left;
|
|
272
|
+
font-size: 3.5em;
|
|
273
|
+
padding: .1em .1em 0 0;
|
|
274
|
+
line-height: .68em;
|
|
275
|
+
color: var(--cemph);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
/* ornaments */
|
|
279
|
+
section:after {
|
|
280
|
+
display: block;
|
|
281
|
+
margin: 1em 0;
|
|
282
|
+
color: var(--cmed);
|
|
283
|
+
text-align: center;
|
|
284
|
+
font-size: 1.5em;
|
|
285
|
+
content: var(--ornament);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/* side menu (aside is not intended for use in a paragraph!) */
|
|
289
|
+
main aside {
|
|
290
|
+
position: absolute;
|
|
291
|
+
width: 8rem; right: -8.6rem;
|
|
292
|
+
font-size: .8em; line-height: 1.4em;
|
|
293
|
+
}
|
|
294
|
+
@media (max-width: 70rem) { main aside { display: none; } }
|
|
295
|
+
|
|
296
|
+
/* forms and inputs */
|
|
297
|
+
textarea, input:not([type=range]), button, select {
|
|
298
|
+
font: var(--font-h);
|
|
299
|
+
border-radius: 4px;
|
|
300
|
+
border: 1.5px solid var(--cmed);
|
|
301
|
+
padding: .4em .8em;
|
|
302
|
+
color: var(--cfg);
|
|
303
|
+
background-color: var(--clight);
|
|
304
|
+
}
|
|
305
|
+
fieldset select, input:not([type=checkbox]):not([type=radio]) {
|
|
306
|
+
display: block;
|
|
307
|
+
width: 100%;
|
|
308
|
+
margin: 0 0 1rem;
|
|
309
|
+
}
|
|
310
|
+
button, select {
|
|
311
|
+
font-weight: bold;
|
|
312
|
+
margin: .5em;
|
|
313
|
+
border: 1.5px solid var(--clink);
|
|
314
|
+
color: var(--clink);
|
|
315
|
+
}
|
|
316
|
+
button { padding: .4em 1em; font-size: 85%; letter-spacing: .1em; }
|
|
317
|
+
button[disabled] { color: var(--cdark); border-color: var(--cmed); }
|
|
318
|
+
fieldset { border-radius: 4px; border: var(--border); padding: .5em 1em; }
|
|
319
|
+
textarea:hover, input:not([type=checkbox]):not([type*='ra']):hover {
|
|
320
|
+
border: 1.5px solid var(--cemph);
|
|
321
|
+
}
|
|
322
|
+
textarea:focus, input:not([type=checkbox]):not([type*='ra']):focus {
|
|
323
|
+
border: 1.5px solid var(--clink);
|
|
324
|
+
box-shadow: 0 0 5px var(--clink);
|
|
325
|
+
}
|
|
326
|
+
p>button { padding: 0 .5em; margin: 0 .5em; }
|
|
327
|
+
p>select { padding: 0; margin: 0 .5em; }
|
|
328
|
+
|
|
329
|
+
|
|
330
|
+
/* 5. Bootstrap-compatible classes ––––––––––––––––––––– */
|
|
331
|
+
|
|
332
|
+
/* grid */
|
|
333
|
+
.row { display: flex; margin: .5rem -.6rem; align-items: stretch; }
|
|
334
|
+
.row [class^="col"] { padding: 0 .6rem; }
|
|
335
|
+
.row .col { flex: 0 4 100%; }
|
|
336
|
+
.row .col-2 { flex: 0 2 16.66%; }
|
|
337
|
+
.row .col-3 { flex: 0 3 25%; }
|
|
338
|
+
.row .col-4 { flex: 0 4 33.33%; }
|
|
339
|
+
.row .col-5 { flex: 0 5 41.66%; }
|
|
340
|
+
.row .col-6 { flex: 0 6 50%; }
|
|
341
|
+
@media (max-width: 40rem) { .row { flex-direction: column; } }
|
|
342
|
+
|
|
343
|
+
/* align */
|
|
344
|
+
.text-left { text-align: left; }
|
|
345
|
+
.text-right { text-align: right; }
|
|
346
|
+
.text-center { text-align: center; }
|
|
347
|
+
.float-left { float: left !important; }
|
|
348
|
+
.float-right { float: right !important; }
|
|
349
|
+
.clearfix { clear: both; }
|
|
350
|
+
|
|
351
|
+
/* colors */
|
|
352
|
+
.text-black { color: #000; }
|
|
353
|
+
.text-white { color: #fff; }
|
|
354
|
+
.text-primary { color: var(--cemph); }
|
|
355
|
+
.text-secondary{ color: var(--cdark); }
|
|
356
|
+
.bg-white { background-color: #fff; }
|
|
357
|
+
.bg-light { background-color: var(--clight); }
|
|
358
|
+
.bg-primary { background-color: var(--cemph); }
|
|
359
|
+
.bg-secondary{ background-color: var(--cmed); }
|
|
360
|
+
|
|
361
|
+
/* margins */
|
|
362
|
+
.mx-auto { margin-left: auto; margin-right: auto; }
|
|
363
|
+
.m-0 { margin: 0 !important; }
|
|
364
|
+
.m-1, .mx-1, .mr-1 { margin-right: 1.0rem !important; }
|
|
365
|
+
.m-1, .mx-1, .ml-1 { margin-left: 1.0rem !important; }
|
|
366
|
+
.m-1, .my-1, .mt-1 { margin-top: 1.0rem !important; }
|
|
367
|
+
.m-1, .my-1, .mb-1 { margin-bottom: 1.0rem !important; }
|
|
368
|
+
|
|
369
|
+
/* pading */
|
|
370
|
+
.p-0 { padding: 0 !important; }
|
|
371
|
+
.p-1, .px-1, .pr-1 { padding-right: 1.0rem !important; }
|
|
372
|
+
.p-1, .px-1, .pl-1 { padding-left: 1.0rem !important; }
|
|
373
|
+
.p-1, .py-1, .pt-1 { padding-top: 1.0rem !important; }
|
|
374
|
+
.p-1, .py-1, .pb-1 { padding-bottom: 1.0rem !important; }
|
|
375
|
+
|
|
376
|
+
/* be print friendly */
|
|
377
|
+
@media print {
|
|
378
|
+
@page { margin: 1.5cm 2cm; }
|
|
379
|
+
html {font-size: 9pt!important; }
|
|
380
|
+
body { max-width: 27cm; }
|
|
381
|
+
p { orphans: 2; widows: 2; }
|
|
382
|
+
caption, figcaption { page-break-before: avoid; }
|
|
383
|
+
h2, h3, h4, h5 { page-break-after: avoid;}
|
|
384
|
+
.noprint, body>nav, section:after { display: none; }
|
|
385
|
+
.row { flex-direction: row; }
|
|
386
|
+
}
|