Tweak layout and typography styles
This commit is contained in:
43
public/site.css
generated
43
public/site.css
generated
@@ -1,3 +1,9 @@
|
||||
/*
|
||||
Based on styles from Go by Example by Mark McGranaghan and Eli Bendersky
|
||||
(https://gobyexample.com), licensed under CC BY 3.0.
|
||||
Modified by inkch. Original: https://github.com/mmcgrana/gobyexample
|
||||
*/
|
||||
|
||||
/* CSS reset: https://meyerweb.com/eric/tools/css/reset/ */
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
@@ -45,9 +51,9 @@ table {
|
||||
|
||||
/* Layout and typography */
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
font-family: serif;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
em {
|
||||
font-style: italic;
|
||||
@@ -61,9 +67,9 @@ h2 a {
|
||||
text-decoration: none;
|
||||
}
|
||||
div.example {
|
||||
width: 900px;
|
||||
min-width: 900px;
|
||||
max-width: 900px;
|
||||
width: 1100px;
|
||||
min-width: 1100px;
|
||||
max-width: 1100px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 120px;
|
||||
@@ -79,12 +85,13 @@ p.footer {
|
||||
font-size: 75%;
|
||||
}
|
||||
div#intro {
|
||||
width: 420px;
|
||||
min-width: 420px;
|
||||
max-width: 420px;
|
||||
width: 500px;
|
||||
min-width: 500px;
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 120px;
|
||||
font-size: 18px;
|
||||
}
|
||||
div#intro p {
|
||||
padding-top: 20px;
|
||||
@@ -97,22 +104,22 @@ table td {
|
||||
outline: 0;
|
||||
}
|
||||
td.docs {
|
||||
width: 420px;
|
||||
max-width: 420px;
|
||||
min-width: 420px;
|
||||
width: 500px;
|
||||
max-width: 500px;
|
||||
min-width: 500px;
|
||||
min-height: 5px;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
td.docs p {
|
||||
padding-right: 5px;
|
||||
padding-right: 15px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
td.code {
|
||||
width: 480px;
|
||||
max-width: 480px;
|
||||
min-width: 480px;
|
||||
width: 590px;
|
||||
max-width: 590px;
|
||||
min-width: 590px;
|
||||
padding-top: 5px;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
@@ -123,8 +130,8 @@ td.code.leading {
|
||||
padding-bottom: 11px;
|
||||
}
|
||||
pre, code {
|
||||
font-size: 14px; line-height: 18px;
|
||||
font-family: 'Menlo', 'Monaco', 'Consolas', 'Lucida Console', monospace;
|
||||
font-size: 14px; line-height: 20px;
|
||||
font-family: monospace;
|
||||
}
|
||||
img.copy, img.run {
|
||||
height: 16px;
|
||||
@@ -205,7 +212,7 @@ body .c1 { color: #808080 } /* Comment.Single */
|
||||
background: #282828;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Syntax highlighting: dark mode */
|
||||
body .nx { } /* Name.Other */
|
||||
body .nf { } /* Name.Function */
|
||||
|
@@ -1,3 +1,9 @@
|
||||
/*
|
||||
Based on styles from Go by Example by Mark McGranaghan and Eli Bendersky
|
||||
(https://gobyexample.com), licensed under CC BY 3.0.
|
||||
Modified by inkch. Original: https://github.com/mmcgrana/gobyexample
|
||||
*/
|
||||
|
||||
/* CSS reset: https://meyerweb.com/eric/tools/css/reset/ */
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
@@ -45,9 +51,9 @@ table {
|
||||
|
||||
/* Layout and typography */
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
font-family: serif;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
em {
|
||||
font-style: italic;
|
||||
@@ -61,9 +67,9 @@ h2 a {
|
||||
text-decoration: none;
|
||||
}
|
||||
div.example {
|
||||
width: 900px;
|
||||
min-width: 900px;
|
||||
max-width: 900px;
|
||||
width: 1100px;
|
||||
min-width: 1100px;
|
||||
max-width: 1100px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 120px;
|
||||
@@ -73,18 +79,19 @@ div.example table {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
p.next {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
p.footer {
|
||||
font-size: 75%;
|
||||
font-size: 80%;
|
||||
}
|
||||
div#intro {
|
||||
width: 420px;
|
||||
min-width: 420px;
|
||||
max-width: 420px;
|
||||
width: 500px;
|
||||
min-width: 500px;
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 120px;
|
||||
font-size: 18px;
|
||||
}
|
||||
div#intro p {
|
||||
padding-top: 20px;
|
||||
@@ -97,22 +104,22 @@ table td {
|
||||
outline: 0;
|
||||
}
|
||||
td.docs {
|
||||
width: 420px;
|
||||
max-width: 420px;
|
||||
min-width: 420px;
|
||||
width: 500px;
|
||||
max-width: 500px;
|
||||
min-width: 500px;
|
||||
min-height: 5px;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
td.docs p {
|
||||
padding-right: 5px;
|
||||
padding-right: 15px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
td.code {
|
||||
width: 480px;
|
||||
max-width: 480px;
|
||||
min-width: 480px;
|
||||
width: 590px;
|
||||
max-width: 590px;
|
||||
min-width: 590px;
|
||||
padding-top: 5px;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
@@ -123,8 +130,8 @@ td.code.leading {
|
||||
padding-bottom: 11px;
|
||||
}
|
||||
pre, code {
|
||||
font-size: 14px; line-height: 18px;
|
||||
font-family: 'Menlo', 'Monaco', 'Consolas', 'Lucida Console', monospace;
|
||||
font-size: 14px; line-height: 20px;
|
||||
font-family: monospace;
|
||||
}
|
||||
img.copy, img.run {
|
||||
height: 16px;
|
||||
@@ -205,7 +212,7 @@ body .c1 { color: #808080 } /* Comment.Single */
|
||||
background: #282828;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Syntax highlighting: dark mode */
|
||||
body .nx { } /* Name.Other */
|
||||
body .nf { } /* Name.Function */
|
||||
|
Reference in New Issue
Block a user