|
|
|
/*
|
|
|
|
Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
/*
|
|
|
|
Custom SCSS for the Matrix spec
|
|
|
|
*/
|
|
|
|
|
|
|
|
@import "variables_project";
|
|
|
|
@import "variables";
|
|
|
|
|
|
|
|
/* Overrides for the navbar */
|
|
|
|
.td-navbar {
|
|
|
|
box-shadow: 0px 0px 8px rgba(179, 179, 179, 0.25);
|
|
|
|
min-height: 5rem;
|
|
|
|
|
|
|
|
.navbar-brand {
|
|
|
|
font-size: 1.1rem;
|
|
|
|
|
|
|
|
.navbar-version {
|
|
|
|
color: $secondary;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
color: $black;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Styles for the sidebar nav */
|
|
|
|
.td-sidebar-nav {
|
|
|
|
scroll-behavior: smooth;
|
|
|
|
overscroll-behavior: contain;
|
|
|
|
|
|
|
|
&>.td-sidebar-nav__section {
|
|
|
|
margin-top: 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
&>.td-sidebar-nav__section > li > a.td-sidebar-link {
|
|
|
|
font-weight: $font-weight-bold;
|
|
|
|
font-size: 1.3rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* This is to make the width of the items that have sub-items (like room versions)
|
|
|
|
the same as the width of items that don't (like changelog) */
|
|
|
|
.pr-md-3, .px-md-3 {
|
|
|
|
padding-right: 0 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
a.indent-1 {
|
|
|
|
padding-left: 1rem !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
a.indent-2 {
|
|
|
|
padding-left: 2rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
a, a.td-sidebar-link {
|
|
|
|
color: $gray-800;
|
|
|
|
font-weight: $font-weight-normal;
|
|
|
|
padding-top: .2rem;
|
|
|
|
padding-bottom: .2rem;
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
transition: all 100ms ease-in-out;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: $secondary-lighter-background;
|
|
|
|
color: $gray-800;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.active, &active:hover {
|
|
|
|
background-color: $secondary-background;
|
|
|
|
font-weight: $font-weight-normal;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
@supports (position: sticky) {
|
|
|
|
.td-sidebar-nav {
|
|
|
|
/* This overrides calc(100vh - 10rem);, which gives us a blank space at the bottom of the sidebar */
|
|
|
|
max-height: calc(100vh - 6rem);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Customise footer */
|
|
|
|
footer {
|
|
|
|
box-shadow: 0px 0px 8px rgba(179, 179, 179, 0.25);
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Auto numbering for headings */
|
|
|
|
.td-content {
|
|
|
|
|
|
|
|
counter-reset: h2;
|
|
|
|
|
|
|
|
&> h2 {
|
|
|
|
counter-reset: h3
|
|
|
|
}
|
|
|
|
|
|
|
|
&> h3 {
|
|
|
|
counter-reset: h4
|
|
|
|
}
|
|
|
|
|
|
|
|
&> h4 {
|
|
|
|
counter-reset: h5
|
|
|
|
}
|
|
|
|
|
|
|
|
&> h5 {
|
|
|
|
counter-reset: h6
|
|
|
|
}
|
|
|
|
|
|
|
|
&> h2:not(.no-numbers):before {
|
|
|
|
display: inline; visibility: visible; counter-increment: h2; content: counter(h2) ". "
|
|
|
|
}
|
|
|
|
|
|
|
|
&> h3:not(.no-numbers):before {
|
|
|
|
display: inline; visibility: visible; counter-increment: h3; content: counter(h2) "." counter(h3) ". "
|
|
|
|
}
|
|
|
|
|
|
|
|
&> h4:not(.no-numbers):before {
|
|
|
|
display: inline; visibility: visible; counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "
|
|
|
|
}
|
|
|
|
|
|
|
|
&> h5:not(.no-numbers):before {
|
|
|
|
display: inline; visibility: visible; counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
|
|
|
|
}
|
|
|
|
|
|
|
|
&> h6:not(.no-numbers):before {
|
|
|
|
display: inline; visibility: visible; counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Adjust heading anchors for site header */
|
|
|
|
.td-content {
|
|
|
|
&> h2,
|
|
|
|
&> h3,
|
|
|
|
&> h4,
|
|
|
|
&> h5,
|
|
|
|
&> h6,
|
|
|
|
.rendered-data h1 {
|
|
|
|
scroll-margin-top: 5rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Styles for the table of contents */
|
|
|
|
#toc {
|
|
|
|
padding-top: .5rem;
|
|
|
|
padding-left: 1.5rem;
|
|
|
|
|
|
|
|
ol {
|
|
|
|
padding-left: 1rem;
|
|
|
|
counter-reset: section;
|
|
|
|
list-style-type: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
#TableOfContents {
|
|
|
|
&>ol>li {
|
|
|
|
margin-bottom: .5rem;
|
|
|
|
|
|
|
|
&>a {
|
|
|
|
font-weight: $font-weight-bold;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
ol {
|
|
|
|
padding-left: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&>ol>li>a {
|
|
|
|
padding-left: 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
&>ol>li>ol>li>a {
|
|
|
|
padding-left: 2rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
&>ol>li>ol>li>ol>li>a {
|
|
|
|
padding-left: 3rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
&>ol>li>ol>li>ol>li>ol>li>a {
|
|
|
|
padding-left: 4rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
&>ol>li>ol>li>ol>li>ol>li>ol>li>a {
|
|
|
|
padding-left: 5rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
li a:before {
|
|
|
|
counter-increment: section;
|
|
|
|
content: counters(section, ".") " ";
|
|
|
|
}
|
|
|
|
|
|
|
|
#toc-title {
|
|
|
|
font-weight: $font-weight-bold;
|
|
|
|
font-size: 1.3rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Styles for alert boxes */
|
|
|
|
.alert {
|
|
|
|
&.note {
|
|
|
|
&:not(.omit-title):before {
|
|
|
|
content: "INFO: ";
|
|
|
|
font-weight: $font-weight-bold;
|
|
|
|
}
|
|
|
|
border: 2px solid $note;
|
|
|
|
border-left-width: 5px;
|
|
|
|
background: $note-background;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.rationale {
|
|
|
|
&:not(.omit-title):before {
|
|
|
|
content: "RATIONALE: ";
|
|
|
|
font-weight: $font-weight-bold;
|
|
|
|
}
|
|
|
|
border: 2px solid $note;
|
|
|
|
border-left-width: 5px;
|
|
|
|
background: $note-background;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.warning {
|
|
|
|
&:not(.omit-title):before {
|
|
|
|
content: "WARNING: ";
|
|
|
|
font-weight: $font-weight-bold;
|
|
|
|
}
|
|
|
|
border: 2px solid $warning;
|
|
|
|
border-left-width: 5px;
|
|
|
|
background: $warning-background;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Styles for sections that are rendered from data, such as HTTP APIs and event schemas */
|
|
|
|
.rendered-data {
|
|
|
|
margin: 1rem 0 3rem 0;
|
|
|
|
|
|
|
|
details {
|
|
|
|
|
|
|
|
summary {
|
|
|
|
padding: .5rem 0;
|
|
|
|
list-style-position: outside;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.deprecated-inline {
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
content: " — DEPRECATED";
|
|
|
|
color: $warning;
|
|
|
|
font-weight: $font-weight-bold;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
display: inline-block;
|
|
|
|
font-size: 1.3rem;
|
|
|
|
|
|
|
|
.endpoint {
|
|
|
|
color: $secondary;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
font-weight: $font-weight-bold;
|
|
|
|
font-size: 1.3rem;
|
|
|
|
margin: 3rem 0 .5rem 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
h3 {
|
|
|
|
font-weight: $font-weight-bold;
|
|
|
|
font-size: 1.1rem;
|
|
|
|
margin: 1.5rem 0 .75rem 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
h2 + table, h3 + table, h3 + div.highlight {
|
|
|
|
margin-top: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
hr {
|
|
|
|
border-bottom: 2px solid $dark;
|
|
|
|
margin-bottom: 1.5rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
max-width: 80%;
|
|
|
|
}
|
|
|
|
|
|
|
|
p code, table code {
|
|
|
|
background-color: $white;
|
|
|
|
}
|
|
|
|
|
|
|
|
table {
|
|
|
|
table-layout: fixed;
|
|
|
|
width: 100%;
|
|
|
|
margin: 4rem 0;
|
|
|
|
|
|
|
|
caption {
|
|
|
|
caption-side: top;
|
|
|
|
color: $dark;
|
|
|
|
font-size: 1rem;
|
|
|
|
font-weight: $font-weight-bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
th, td, caption {
|
|
|
|
padding: 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
th {
|
|
|
|
background-color: $white;
|
|
|
|
}
|
|
|
|
|
|
|
|
caption, tr {
|
|
|
|
background-color: $table-row-default;
|
|
|
|
}
|
|
|
|
|
|
|
|
tr:nth-child(even) {
|
|
|
|
background-color: $table-row-alternate;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.basic-info, &.basic-info th, &.basic-info td {
|
|
|
|
table-layout: fixed;
|
|
|
|
margin: 1rem 0 .5rem 0;
|
|
|
|
background-color: $white;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.basic-info th {
|
|
|
|
width: 15rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.col-name, .col-type, .col-status {
|
|
|
|
width: 25%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.col-description {
|
|
|
|
width: 50%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.col-status-description {
|
|
|
|
width: 75%;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
pre {
|
|
|
|
border: 0;
|
|
|
|
border-left: solid 5px $secondary;
|
|
|
|
}
|
|
|
|
|
|
|
|
.http-api-method {
|
|
|
|
font-weight: $font-weight-bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Miscellaneous custom bits */
|
|
|
|
|
|
|
|
/* Update link colours for MAtrix style */
|
|
|
|
a, a:hover {
|
|
|
|
color: $secondary;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* This is needed to stop the bottom of the Matrix icon from getting snipped off. */
|
|
|
|
.td-navbar .navbar-brand svg {
|
|
|
|
height: 32px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Give code samples and pre elements full-width */
|
|
|
|
.td-content > .highlight, .td-content > pre {
|
|
|
|
max-width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* The default CSS applies a style for blockquotes but only to immediate children
|
|
|
|
of .td-content. This applies the same style to any blockquotes that descend from
|
|
|
|
.td-content. */
|
|
|
|
.td-content blockquote {
|
|
|
|
padding: 0 0 0 1rem;
|
|
|
|
margin-bottom: $spacer;
|
|
|
|
color: $gray-600;
|
|
|
|
border-left: 6px solid $secondary;
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
Make padding symmetrical (this selector is used in the default styles to apply padding-left: 3rem)
|
|
|
|
*/
|
|
|
|
.pl-md-5, .px-md-5 {
|
|
|
|
padding-right: 3rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Adjust default styles for info banner */
|
|
|
|
.pageinfo-primary {
|
|
|
|
max-width: 80%;
|
|
|
|
margin-left: 0;
|
|
|
|
border: 0;
|
|
|
|
border-left: solid 5px $secondary;
|
|
|
|
background-color: $gray-100;
|
|
|
|
}
|
|
|
|
|
|
|
|
.pageinfo-unstable {
|
Update CircleCI and Buildkite configs to build the new spec (#3017)
This PR attempts to update the CI of matrix-doc to build [the new spec redesign](https://github.com/matrix-org/matrix-doc/issues/2906). It does so by additionally building the new spec in parallel to the old. The plan is to continue to host the old spec at https://matrix.org/docs/spec, while the new spec will be at https://spec.matrix.org. Eventually we will retire the old version of the spec, and have the old URL redirect to the new one.
In detail, this PR:
* Adds a new step to CircleCI to build the new spec with `hugo`. This step uses alpine, grabs some dependencies, and then builds the HTML.
* We needed to hand some specific options to hugo for CircleCI in order to continue allowing CircleCI to host temporary builds of the spec after each CI run. This required changing some assumptions related to relative paths.
* CircleCI's artifacts hosting is also quite limited. Specifically it will not automatically resolve `/some/path` to `/some/path/index.html`, which our hugo theme relied on. Fixes were implemented for this, but we may want to consider switching away from CircleCI artifacts as a host, and using something like [netlify](https://www.netlify.com/) instead.
* Modifies the existing Buildkite pipeline step to build both the new spec in a separate step. It additionally modifies the old spec to be built with alpine. (Separate out into another PR)
* We'd like to separate out the deployment of matrix.org from the new spec. Therefore a new step, with a separate artifact build (`spec.tar.gz`). We will eventually remove the old step and the matrix.org build trigger.
* Modifies `pyproject.toml` to update the config of [giles](https://github.com/OpenAstronomy/baldrick/blob/master/baldrick/plugins/circleci_artifacts.py), which is what creates the "docs", "swagger" links in the CI steps for matrix-docs PRs.
* A new step was added for the new spec. The old spec was renamed to "legacy".
4 years ago
|
|
|
background-image: url('../icons/unstable.png');
|
|
|
|
background-position: left 1rem center;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
padding-left: 100px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Full-width tables */
|
|
|
|
.td-content > table {
|
|
|
|
width: 100%;
|
|
|
|
display: table;
|
|
|
|
}
|