mirror of
https://github.com/danog/sass-site.git
synced 2024-12-11 17:09:52 +01:00
b771e2297e
This renders the tabs and all the jQuery classes server-side, so that the code examples are rendered correctly on the page's first load rather than waiting for the JavaScript to activate. This also has a side effect of making them look correct with JavaScript disabled. This also adds a little additional styling in the noscript stylesheet to make code examples look better on a narrow viewport with JavaScript disabled.
44 lines
994 B
SCSS
44 lines
994 B
SCSS
// Styles that are included only when JavaScript is disabled. These override the
|
|
// default styles to make them work better without JS.
|
|
|
|
@import "functions";
|
|
|
|
// Make the in-page table of contents fully open by default, since we can't
|
|
// dynamically expand it.
|
|
.page-sections li a.section {
|
|
&::after { transform: rotate(90deg); }
|
|
+ ul {display: block; }
|
|
}
|
|
|
|
@mixin -sequence-css-tabs {
|
|
.code-example {
|
|
ul { display: none; }
|
|
|
|
.ui-tabs-panel {
|
|
position: relative;
|
|
|
|
pre::after {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.scss pre::after { content: "SCSS"; }
|
|
.sass pre::after { content: "Sass"; }
|
|
.css {
|
|
display: block;
|
|
pre::after { content: "CSS"; }
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: sl-px-to-rem(1500.00001px)) {
|
|
body.documentation { @include -sequence-css-tabs }
|
|
}
|
|
|
|
@media screen and (max-width: sl-px-to-rem(1000.00001px)) {
|
|
body.guide { @include -sequence-css-tabs }
|
|
}
|