Files
modern-cpp-tutorial/website/themes/moderncpp/source/modern-cpp/css/page.styl
2019-07-19 18:32:36 +02:00

239 lines
4.8 KiB
Stylus
Executable File

@import "_common"
@import "_animations"
@import "_header"
@import "_sidebar"
#header
box-shadow: 0 0 1px rgba(0,0,0,.25)
transition: background-color .3s ease-in-out
.image-caption
display: table;
margin: 0 auto;
color: #7f8c8d;
margin-top: 10px;
.content
position: relative
padding: 2.2em 0
max-width: 600px
margin: 0 auto
padding-left: 50px
&.api
> a:first-of-type > h2
margin-top: 0
padding-top: 0
ul
padding-left: 1.25em
line-height: 1.4em
ul, p:not(.tip)
padding-bottom: 0
margin: 1.2em 0
a.button
font-size: .9em
color: #fff
margin: .2em 0
width: 180px
text-align: center
padding: 12px 24px
display: inline-block
vertical-align: middle
img
max-width: 100%
span.light
color: $light
span.info
font-size: .85em
display: inline-block
vertical-align: middle
width: 280px
margin-left: 20px
h1
margin: 0 0 1em
h2, h3
&:before
content: ""
display: block
margin-top: -1 * $heading-link-padding-top
height: $heading-link-padding-top
visibility: hidden
h2
margin: $h2-margin-top 0 .8em
padding-bottom: .7em
border-bottom: 1px solid $border
z-index: -1
h3
margin: $h3-margin-top 0 1.2em
position: relative
z-index: -1
&:after
content: "#"
color: $theme
position: absolute
left: -0.7em
bottom: -2px
font-size: 1.2em
font-weight: bold
figure
margin: 1.2em 0
p, ul, ol
line-height: 1.6em
// HACK: Create area underneath paragraphs
// and lists that will be on top of heading
// anchors, for easier text highlighting.
margin: 1.2em 0 -1.2em
padding-bottom: 1.2em
position: relative
z-index: 1
ul, ol
padding-left: 1.5em
// FIX: Some link click targets are covered without this
position: inherit
a
color: $theme
font-weight: 600
blockquote
margin: 2em 0
padding-left: 20px
border-left: 4px solid $theme
p
font-weight: 600
margin-left: 0
margin-bottom: 0
padding-bottom: 0
iframe
margin: 1em 0
> table
border-spacing: 0
border-collapse: collapse
margin: 1.2em auto
padding: 0
display: block
overflow-x: auto
td, th
line-height: 1.5em
padding: .4em .8em
border: none
border: 1px solid #ddd
th
font-weight: bold
text-align: left
th, tr:nth-child(2n)
background-color: #f8f8f8
code
background-color: #efefef
p
&.tip, &.success
padding: 12px 24px 12px 30px
margin: 2em 0
border-left-width: 4px
border-left-style: solid
background-color: $codebg
position: relative
border-bottom-right-radius: $radius
border-top-right-radius: $radius
&:before
position: absolute
top: 14px
left: -12px
color: #fff
width: 20px
height: 20px
border-radius: 100%
text-align: center
line-height: 20px
font-weight: bold
font-family: $logo-font
font-size: 14px
code
background-color: #efefef
em
color: $medium
&.tip
border-left-color: $red
&:before
content: "!"
background-color: $red
&.success
border-left-color: $theme
&:before
content: "\f00c"
font-family: FontAwesome
background-color: $theme
.guide-links
margin-top: 2em
margin-bottom: 2em
height: 1em
.footer
color: $light
margin-top: 2em
padding-top: 2em
border-top: 1px solid #e5e5e5
font-size: .9em
#main.fix-sidebar
position: static
.sidebar
position: fixed
@media screen and (min-width: 1590px)
#header
background-color: $theme
@media screen and (max-width: 1300px)
.content.with-sidebar
margin-left: 290px
#ad
z-index: 1
position: relative
padding: 0
bottom: 0
right: 0
float: right
padding: 0 0 20px 30px
@media screen and (max-width: 900px)
body
-webkit-text-size-adjust: none
font-size: 14px
#header
display: none
#logo
display: none
.nav-link
padding-bottom: 1px
&:hover, &.current
border-bottom: 2px solid $theme
#mobile-bar
display: block
#main
padding: 2em 1.4em 0
.highlight pre
padding: 1.2em 1em
.content
padding-left 0
&.with-sidebar
margin: auto
h2, h3
&:before
content: ""
display: block
margin-top: -1 * $mobile-heading-link-padding-top
height: $mobile-heading-link-padding-top
visibility: hidden
.footer
margin-left: 0
text-align: center
@media screen and (max-width: 560px)
#downloads
text-align: center
margin-bottom: 25px
.info
margin-top: 5px
margin-left: 0
iframe
margin: 0 !important