benjamin wil
8f7793f461
* Add `.header-title` style
This style shows smaller text on mobile devices. It reverts back to the
`2em` size used in Primer for H1 tags.
* Use `.header-title` for all `#head` headings
This commit:
1. Updates all main templates to use the new `.header-title` class,
making these titles less disruptively large on mobile devices.
2. Centers these titles for mobile breakpoints only, re-setting them
back to left-aligned text for `md-` breakpoints and up.
Note that in `lib/gollum/templates/wiki_contentf.mustache`, the
`.header-title` is not a `#head .header-title`, so it doesn't inherit
all of the new styles added in this commit.
* Adjust padding and presentation of mobile menu
To give mobile page headers more structure, this commit adjusts the
padding to be more symmetrical. It also adds a `border-bottom` on mobile
only. In my opinion this improves readability by telling the reader,
"This is where the navigation menu ends and the page content begins."
* Recompile assets
* Fix failing spec
My changes to the header layout seem to changed where the spaces in
`last_response.body` are placed. So let's assert only that the content
is present, since that's all this test should actually care about.
737 lines
10 KiB
Plaintext
737 lines
10 KiB
Plaintext
// Gollum v3 Template
|
|
|
|
@import "_base", "_breakpoint", "_features";
|
|
|
|
/* margin & padding reset*/
|
|
* {
|
|
@include reset-box-leave-border;
|
|
}
|
|
|
|
div {
|
|
display: block;
|
|
}
|
|
|
|
html {
|
|
font-family: sans-serif;
|
|
-ms-text-size-adjust: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
html, body {
|
|
color: #333;
|
|
}
|
|
|
|
body {
|
|
background-color: white;
|
|
font: 13.34px $font-default;
|
|
font-size: small;
|
|
line-height: 1.4;
|
|
counter-reset: h1;
|
|
}
|
|
|
|
img {
|
|
border: 0;
|
|
}
|
|
|
|
a {
|
|
color: $blue;
|
|
text-decoration: none;
|
|
|
|
&.absent {
|
|
color: $red;
|
|
}
|
|
|
|
&:focus {
|
|
outline: thin dotted;
|
|
}
|
|
|
|
&:active, &:hover {
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
/* Markdown body */
|
|
|
|
.header-enum {
|
|
--header-enum-style: decimal;
|
|
|
|
h1 {
|
|
counter-increment: h1;
|
|
counter-reset: h2;
|
|
|
|
&:before {
|
|
content: counter(h1, var(--header-enum-style)) ". ";
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
counter-increment: h2;
|
|
counter-reset: h3;
|
|
|
|
&:before {
|
|
content:
|
|
counter(h1, var(--header-enum-style))
|
|
"." counter(h2, var(--header-enum-style))
|
|
". ";
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
counter-reset: h4;
|
|
counter-increment: h3;
|
|
|
|
&:before {
|
|
content:
|
|
counter(h1, var(--header-enum-style))
|
|
"." counter(h2, var(--header-enum-style))
|
|
"." counter(h3, var(--header-enum-style))
|
|
". ";
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
counter-increment: h4;
|
|
counter-reset: h5;
|
|
|
|
&:before {
|
|
content:
|
|
counter(h1, var(--header-enum-style))
|
|
"." counter(h2, var(--header-enum-style))
|
|
"." counter(h3, var(--header-enum-style))
|
|
"." counter(h4, var(--header-enum-style))
|
|
". ";
|
|
}
|
|
}
|
|
|
|
h5 {
|
|
counter-increment: h5;
|
|
counter-reset: h6;
|
|
|
|
&:before {
|
|
content:
|
|
counter(h1, var(--header-enum-style))
|
|
"." counter(h2, var(--header-enum-style))
|
|
"." counter(h3, var(--header-enum-style))
|
|
"." counter(h4, var(--header-enum-style))
|
|
"." counter(h5, var(--header-enum-style))
|
|
". ";
|
|
}
|
|
}
|
|
|
|
h6 {
|
|
counter-increment: h6;
|
|
|
|
&:before {
|
|
content:
|
|
counter(h1, var(--header-enum-style))
|
|
"." counter(h2, var(--header-enum-style))
|
|
"." counter(h3, var(--header-enum-style))
|
|
"." counter(h4, var(--header-enum-style))
|
|
"." counter(h5, var(--header-enum-style))
|
|
"." counter(h6, var(--header-enum-style))
|
|
". ";
|
|
}
|
|
}
|
|
}
|
|
|
|
#footer {
|
|
margin-bottom: 7em;
|
|
clear: both;
|
|
}
|
|
|
|
.markdown-body {
|
|
padding: 1em 1em 1em 0;
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
word-wrap: break-word;
|
|
|
|
/* MediaWiki's TOC table -- this does not pertain to gollum's own TOC functionality */
|
|
table.toc {
|
|
width: auto;
|
|
display: inline-table;
|
|
|
|
.anchor {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
$anchor-icon-size: 20px;
|
|
|
|
position: relative;
|
|
|
|
.anchor {
|
|
display: inline-block;
|
|
position: absolute;
|
|
margin-top: 0.1em;
|
|
width: $anchor-icon-size;
|
|
text-decoration: none;
|
|
opacity: 0;
|
|
transition: opacity 0.1s ease-in-out;
|
|
|
|
&:before {
|
|
content: url('data:image/svg+xml;utf8,<%= rocticon_css(:link) %>');
|
|
}
|
|
|
|
&:not(.edit) {
|
|
left: -($anchor-icon-size/2);
|
|
}
|
|
|
|
&.edit {
|
|
margin-left: ($anchor-icon-size/2);
|
|
|
|
&:before {
|
|
content: url('data:image/svg+xml;utf8,<%= rocticon_css(:pencil) %>');
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover > .anchor,
|
|
.anchor:focus {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
a {
|
|
&.absent {
|
|
color: $red;
|
|
}
|
|
|
|
&[id].wiki-toc-anchor {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
> *:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
> *:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
tt, code {
|
|
font-size: inherit;
|
|
}
|
|
|
|
& + p {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
border-bottom: $border-standard;
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
|
|
& + h2 + h3 {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
p, blockquote, ul, ol, dl, table, pre {
|
|
margin: 15px 0;
|
|
}
|
|
|
|
ul, ol {
|
|
padding-left: 30px;
|
|
}
|
|
|
|
dl {
|
|
padding: 0;
|
|
|
|
dt {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
padding: 0;
|
|
margin: 15px 0 5px;
|
|
|
|
&:first-child {
|
|
padding: 0;
|
|
}
|
|
|
|
@include children-truncate-margin;
|
|
}
|
|
|
|
dd {
|
|
margin: 0 0 15px;
|
|
padding: 0 15px;
|
|
|
|
@include children-truncate-margin;
|
|
}
|
|
}
|
|
|
|
li {
|
|
margin: 0px;
|
|
|
|
p.first {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
hr {
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 4px solid #DDD;
|
|
padding: 0 15px;
|
|
color: #777;
|
|
|
|
@include children-truncate-margin;
|
|
}
|
|
|
|
table {
|
|
padding: 0;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
|
|
tr {
|
|
border-top: 1px solid #ccc;
|
|
background-color: #fff;
|
|
|
|
@include reset-box-leave-border;
|
|
|
|
&:nth-child(2n) {
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
th, td, table {
|
|
border: 1px solid #ccc;
|
|
text-align: none;
|
|
margin: 0;
|
|
padding: 6px 13px;
|
|
|
|
@include children-truncate-margin;
|
|
}
|
|
|
|
th {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
span.frame {
|
|
display: block;
|
|
overflow: hidden;
|
|
|
|
> span {
|
|
border: $border-standard;
|
|
display: block;
|
|
float: left;
|
|
overflow: hidden;
|
|
margin: 13px 0 0;
|
|
padding: 7px;
|
|
width: auto;
|
|
}
|
|
|
|
span {
|
|
img {
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
span {
|
|
clear: both;
|
|
color: #333;
|
|
display: block;
|
|
padding: 5px 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
span.align-center {
|
|
display: block;
|
|
overflow: hidden;
|
|
clear: both;
|
|
|
|
> span {
|
|
display: block;
|
|
overflow: hidden;
|
|
margin: 13px auto 0;
|
|
text-align: center;
|
|
}
|
|
|
|
span {
|
|
img {
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
span.align-right {
|
|
display: block;
|
|
overflow: hidden;
|
|
clear: both;
|
|
|
|
> span {
|
|
display: block;
|
|
overflow: hidden;
|
|
margin: 13px 0 0;
|
|
text-align: right;
|
|
}
|
|
|
|
span {
|
|
img {
|
|
margin: 0;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
span.float-left {
|
|
display: block;
|
|
margin-right: 13px;
|
|
overflow: hidden;
|
|
float: left;
|
|
|
|
span {
|
|
margin: 13px 0 0;
|
|
}
|
|
}
|
|
|
|
span.float-right {
|
|
display: block;
|
|
margin-left: 13px;
|
|
overflow: hidden;
|
|
float: right;
|
|
|
|
> span {
|
|
display: block;
|
|
overflow: hidden;
|
|
margin: 13px auto 0;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
code, pre, tt {
|
|
font-family: $font-console;
|
|
font-size: 12px;
|
|
}
|
|
|
|
code, tt {
|
|
margin: 0 2px;
|
|
padding: 0 5px;
|
|
white-space: nowrap;
|
|
border: $border-standard;
|
|
background-color: #f8f8f8;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
pre {
|
|
background-color: #f8f8f8;
|
|
border: 1px solid #ccc;
|
|
font-size: 13px;
|
|
line-height: 19px;
|
|
overflow: auto;
|
|
padding: 6px 10px;
|
|
border-radius: 3px;
|
|
|
|
> tt, > code {
|
|
margin: 0;
|
|
padding: 0;
|
|
white-space: pre;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
pre, code, tt {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
pre {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Table of contents */
|
|
|
|
.toc {
|
|
background-color: white;
|
|
border: $border-standard;
|
|
padding: 5px 10px;
|
|
margin: 0;
|
|
border-radius: 3px;
|
|
|
|
ul {
|
|
padding-left: 10px;
|
|
margin: 0;
|
|
|
|
li {
|
|
margin: 0;
|
|
}
|
|
|
|
ul {
|
|
font-size: 15px;
|
|
|
|
ul {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
> ul {
|
|
margin-left: 10px;
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
.toc-title {
|
|
color: #888;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
padding: 2px;
|
|
border-bottom: $border-standard;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
#header-content .toc,
|
|
#footer-content .toc,
|
|
#sidebar-content .toc {
|
|
border: none;
|
|
}
|
|
|
|
#head .header-title {
|
|
font-size: 1.5em;
|
|
|
|
@include largemobile-breakpoint {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
|
|
/* Highlights */
|
|
|
|
.highlight {
|
|
background: #fff;
|
|
|
|
.c {
|
|
color: #998;
|
|
font-style: italic;
|
|
}
|
|
|
|
.err {
|
|
color: #a61717;
|
|
background-color: #e3d2d2;
|
|
}
|
|
|
|
.k, .o {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cm, .c1 {
|
|
color: #998;
|
|
font-style: italic;
|
|
}
|
|
|
|
.cp {
|
|
color: #999;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cs {
|
|
color: #999;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
.gd {
|
|
color: #000;
|
|
background-color: #fdd;
|
|
|
|
.x {
|
|
color: #000;
|
|
background-color: #faa;
|
|
}
|
|
}
|
|
|
|
.ge {
|
|
font-style: italic;
|
|
}
|
|
|
|
.gr {
|
|
color: #a00;
|
|
}
|
|
|
|
.gh {
|
|
color: #999;
|
|
}
|
|
|
|
.gi {
|
|
color: #000;
|
|
background-color: #dfd;
|
|
|
|
.x {
|
|
color: #000;
|
|
background-color: #afa;
|
|
}
|
|
}
|
|
|
|
.go {
|
|
color: #888;
|
|
}
|
|
|
|
.gp {
|
|
color: #555;
|
|
}
|
|
|
|
.gs {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.gt {
|
|
color: #a00;
|
|
}
|
|
|
|
.gu {
|
|
color: #800080;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.kc, .kd, .kn, .kp, .kr {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.kt {
|
|
color: #458;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.m {
|
|
color: #099;
|
|
}
|
|
|
|
.s {
|
|
color: #d14;
|
|
}
|
|
|
|
.na, .no, .nv, .vc, .vg, .vi {
|
|
color: #008080;
|
|
}
|
|
|
|
.nb {
|
|
color: #0086B3;
|
|
}
|
|
|
|
.nc {
|
|
color: #458;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ni {
|
|
color: #800080;
|
|
}
|
|
|
|
.ne, .nf {
|
|
color: #900;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nn {
|
|
color: #555;
|
|
}
|
|
|
|
.nt {
|
|
color: #000080;
|
|
}
|
|
|
|
.ow {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.w {
|
|
color: #bbb;
|
|
}
|
|
|
|
.mf, .mh, .mi, .mo, .il {
|
|
color: #099;
|
|
}
|
|
|
|
.sb, .sc, .sd, .s2, .se, .sh, .si, .sx, .s1 {
|
|
color: #d14;
|
|
}
|
|
|
|
.sr {
|
|
color: #009926;
|
|
}
|
|
|
|
.ss {
|
|
color: #990073;
|
|
}
|
|
|
|
.bp {
|
|
color: #999;
|
|
}
|
|
|
|
.gc {
|
|
color: #999;
|
|
background-color: #EAF2F5;
|
|
}
|
|
|
|
.gg {
|
|
color: #000000a0;
|
|
}
|
|
}
|
|
|
|
.type-csharp {
|
|
.highlight {
|
|
.k, .kt {
|
|
color: #00F;
|
|
}
|
|
|
|
.nf {
|
|
color: #000;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.nc {
|
|
color: #2B91AF;
|
|
}
|
|
|
|
.nn {
|
|
color: #000;
|
|
}
|
|
|
|
.s, .sc {
|
|
color: #A31515;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.pagination a.disabled {
|
|
pointer-events: none;
|
|
}
|
|
|
|
nav.actions {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
|
|
|
::webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.search-results {
|
|
.search-context li:nth-child(n+4) {
|
|
display: none;
|
|
}
|
|
}
|