OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity
Files
863e1482dc5eff98680b59dfe172edcea7d0707a
mkdocs-material/src/assets/stylesheets/modules/article/_layout.scss

533 lines
9.1 KiB
SCSS
Raw Blame History

/*
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
/* ----------------------------------------------------------------------------
* Article layout
* ------------------------------------------------------------------------- */
/*
* Article
*/
.article {
font-size: 14px;
line-height: 1.7em;
/* [tablet landscape+]: Indent to account for drawer */
@include break-from-device(tablet landscape) {
margin-left: 262px;
}
/*
* Clearfix
*/
&:after {
content: " ";
display: block;
clear: both;
}
/*
* Article wrapper
*/
.wrapper {
padding: 116px 16px 92px;
/* [tablet portait+]: Increase top spacing */
@include break-from-device(tablet portrait) {
padding: 128px 24px 96px;
}
}
/*
* Enable overflow scrolling in iOS web application
*/
.ios.standalone & {
@include position(absolute, 56px 0 0 0);
overflow: auto;
-webkit-overflow-scrolling: touch;
/* [orientation: portrait]: Account for status bar in portrait mode */
@include break-at-orientation(portrait) {
@include position(absolute, (56px + 20px) 0 0 0);
}
/*
* Article wrapper
*/
.wrapper {
position: relative;
min-height: 100%;
padding-top: 60px;
margin-bottom: 2px;
}
}
/*
* Article headline
*/
h1 {
font-size: 24px;
line-height: 1.333334em;
padding: 20px 0 42px;
}
/*
* Article chapters
*/
h2 {
font-size: 20px;
line-height: 1.4em;
padding-top: (36px + 56px);
margin-top: (0px - 56px);
/*
* No offset correction in iOS web application
*/
.ios.standalone & {
padding-top: 36px;
margin: 0;
}
}
/*
* Sub headlines
*/
h3, h4 {
font-size: 14px;
padding-top: (20px + 56px);
margin-top: (0 - 56px);
/*
* No offset correction in iOS web application
*/
.ios.standalone & {
padding-top: 20px;
margin-top: 0;
}
}
/*
* Align permalinks on the right
*/
.headerlink {
float: right;
margin-left: 20px;
font-size: 14px;
/*
* Hide permalink to main headline
*/
h1 & {
display: none;
}
}
/*
* Paragraphs and section titles
*/
p, ul, ol {
margin-top: 1.5em;
}
/*
* List elements
*/
li {
margin-top: 0.75em;
margin-left: 18px;
/*
* Inline paragraphs in list elements
*/
p {
display: inline;
}
}
/*
* Add icon for elements of an unordered list
*/
ul li:before {
content: "\e602";
display: block;
float: left;
font-family: 'Icon';
font-size: 16px;
width: 1.2em;
margin-left: -1.2em;
vertical-align: -0.1em;
}
/*
* Inline code snippets must not wrap
*/
p > code {
white-space: nowrap;
}
/*
* Add spacing at top of separator
*/
hr {
margin-top: 1.5em;
}
/*
* Limit images to article container
*/
img {
max-width: 100%;
}
/*
* Code listing container
*/
pre {
padding: 16px;
margin: 1.5em -16px 0;
line-height: 1.5em;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/*
* Data tables
*/
table {
margin: 3.0em 0 1.5em;
font-size: 13px;
/*
* The semi-cool solution, in case javascript is not available
*/
.no-js & {
display: inline-block;
max-width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/*
* Table heading
*/
th {
min-width: 100px;
padding: 12px 16px;
font-size: 12px;
text-align: left;
white-space: nowrap;
}
/*
* Table cell
*/
td {
padding: 12px 16px;
white-space: nowrap;
}
}
/*
* Data table wrapper, in case javascript is available
*/
.data {
margin: 1.5em -16px;
padding: 1.5em 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
text-align: center;
/*
* Data table
*/
table {
display: inline-block;
margin: 0 16px;
text-align: left;
}
/* [tablet portait+]: Increase spacing */
@include break-from-device(tablet portrait) {
margin: 1.5em -24px;
/*
* Data table
*/
table {
margin: 0 24px;
}
}
}
/* [tablet portait+]: Increase spacing */
@include break-from-device(tablet portrait) {
/*
* Account for larged header bar and anchors
*/
h2 {
padding-top: (28px + 72px);
margin-top: (8px - 72px);
/*
* No offset correction in iOS web application
*/
.ios.standalone & {
padding-top: 28px;
margin-top: 8px;
}
}
/*
* Sub headlines
*/
h3, h4 {
padding-top: (20px + 64px);
margin-top: (0 - 64px);
/*
* No offset correction in iOS web application
*/
.ios.standalone & {
padding-top: 20px;
margin-top: 0;
}
}
/*
* Increase spacing for code blocks
*/
pre {
padding: 1.5em 24px;
margin: 1.5em -24px 0;
}
}
}
/*
* Article footer
*/
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0 4px;
/* [tablet portait+]: Larger spacing */
@include break-from-device(tablet portrait) {
padding: 0 8px;
}
/* [tablet landscape+]: Stretch footer to viewport */
@include break-from-device(tablet landscape) {
z-index: 5;
}
}
/*
* Copyright and theme information
*/
.copyright {
margin: 1.5em 0;
/* [tablet landscape+]: Add bottom spacing */
@include break-from-device(tablet landscape) {
margin-bottom: 64px;
}
}
/*
* Pagination
*/
.pagination {
max-width: 1184px;
height: 92px;
padding: 4px 0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
/* [tablet portait+]: Larger pagination and spacing */
@include break-from-device(tablet portrait) {
height: 96px;
padding: 8px 0;
}
/*
* Links should span icons entirely
*/
a {
display: block;
height: 100%;
}
/*
* Previous and next page
*/
.previous,
.next {
position: relative;
float: left;
height: 100%;
}
/*
* Previous page
*/
.previous {
width: 25%;
/*
* Hide direction
*/
.direction {
display: none;
}
/*
* Hide title
*/
.stretch {
display: none;
}
}
/*
* Next page
*/
.next {
width: 75%;
text-align: right;
}
/*
* Link to page
*/
.page {
display: table;
position: absolute;
bottom: 4px;
}
/*
* Put direction over page title
*/
.direction {
display: block;
position: absolute;
bottom: 40px;
width: 100%;
font-size: 15px;
line-height: 20px;
padding: 0 52px;
}
/*
* Decrease indent for stretching content
*/
.stretch {
padding: 0 4px;
/*
* Correct vertical spacing
*/
.title {
font-size: 18px;
padding: 11px 0 13px;
}
}
/* [mobile landscape+]: Proportional width for pagination */
@include break-from-device(mobile landscape) {
/*
* Previous and next page
*/
.previous,
.next {
width: 50%;
}
/*
* Previous page
*/
.previous {
width: 50%;
/*
* Show direction
*/
.direction {
display: block;
}
/*
* Show title
*/
.stretch {
display: table;
}
}
}
/* [tablet portrait+]: Increase vertical spacing */
@include break-from-device(tablet portrait) {
/*
* Increase vertical spacing
*/
.direction {
padding: 0 56px;
bottom: 40px;
}
/*
* Increase vertical spacing
*/
.stretch {
padding: 0 8px;
}
}
}
/*
* Admonition support
*/
.admonition {
margin: 20px -16px 0;
padding: 20px 16px;
/*
* Remove redundant margin of first child
*/
> :first-child {
margin-top: 0;
}
/* [tablet portait+]: Increase horizontal spacing */
@include break-from-device(tablet portrait) {
margin: 20px -24px 0;
padding: 20px 24px;
}
}
Reference in New Issue View Git Blame Copy Permalink