You are here

Home » API reference » Open Social 8.2

kss.css in Open Social 8.2

Same filename and directory in other branches
  1. 8.9 themes/socialblue/assets/css/kss.css
  2. 8 themes/socialblue/assets/css/kss.css
  3. 8.3 themes/socialblue/assets/css/kss.css
  4. 8.4 themes/socialblue/assets/css/kss.css
  5. 8.5 themes/socialblue/assets/css/kss.css
  6. 8.6 themes/socialblue/assets/css/kss.css
  7. 8.7 themes/socialblue/assets/css/kss.css
  8. 8.8 themes/socialblue/assets/css/kss.css
#kss-node .kss-doc-title {
  margin: 0;
}

#kss-node .lead,
#kss-node .kss-nav__ref {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal;
  margin: -1px;
  padding: 0;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#kss-node .kss-nav__ref:after {
  content: ' ';
}

#kss-node .kss-nav__ref-child + .kss-nav__name {
  margin-left: 0.5rem;
  font-weight: 300;
}

#kss-node .kss-section {
  margin-bottom: 48px;
}

#kss-node .kss-section.is-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  min-width: 0;
  max-width: none;
  min-height: 0;
  max-height: none;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-transform: none;
          transform: none;
  overflow: auto;
  padding: 20px;
  background-color: #f3f3f3;
  z-index: 99;
}

#kss-node.kss-fullscreen-mode .site-footer,
#kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen) {
  display: none;
}

#kss-node .kss-title {
  padding-bottom: 11px;
  margin: 48px 0 6px;
  border-bottom: 1px solid rgba(119, 119, 119, 0.2);
}

#kss-node .is-fullscreen .kss-title {
  margin-top: 0;
}

#kss-node.kss-fullscreen-mode .navbar-fixed-top {
  z-index: -1;
  display: none;
}

#kss-node .kss-title__ref {
  display: block;
  font-size: 16px;
  line-height: 16px;
  color: #666;
}

#kss-node .kss-title__ref:before {
  content: 'Section ';
}

#kss-node .kss-title__permalink {
  display: block;
  color: #000;
  text-decoration: none;
}

#kss-node .kss-title__permalink:hover, #kss-node .kss-title__permalink:focus, #kss-node .kss-title__permalink:active {
  color: #0645ad;
}

#kss-node .kss-title__permalink-hash {
  display: none;
  color: #ccc;
}

#kss-node .kss-toolbar {
  margin: 6px 0 24px;
  display: inline-block;
  border: 1px solid #eee;
  background-color: #f9f9f9;
  border-right-color: #e0e0e0;
  border-bottom-color: #e0e0e0;
  line-height: 1;
  padding: 3px;
}

#kss-node .kss-toolbar a {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  display: inline-block;
  width: 16px;
  height: 16px;
  padding: 3px;
  vertical-align: top;
  position: relative;
  overflow: visible;
}

#kss-node .kss-toolbar a + a {
  margin-left: 6px;
}

#kss-node .kss-toolbar a .kss-toolbar__icon-fill {
  fill: #ccc;
}

#kss-node .kss-toolbar a svg.on {
  display: none;
}

#kss-node .kss-toolbar a:focus, #kss-node .kss-toolbar a:hover {
  border-color: #000;
}

#kss-node .kss-toolbar a:focus .kss-toolbar__icon-fill, #kss-node .kss-toolbar a:hover .kss-toolbar__icon-fill {
  fill: #000;
}

#kss-node .kss-toolbar__tooltip {
  position: absolute;
  z-index: 1;
  display: inline-block;
  bottom: 100%;
  left: -10px;
  margin-bottom: 5px;
  border: solid 1px #666;
  padding: 8px 10px 6px;
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
          box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  color: #000;
  background: #fff;
  cursor: help;
  opacity: 0;
  -webkit-transition: opacity 0.25s;
  transition: opacity 0.25s;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  word-wrap: normal;
}

#kss-node .kss-toolbar__tooltip:before, #kss-node .kss-toolbar__tooltip:after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 15px;
  width: 0;
  height: 0;
  border-width: 7px 5px 0;
  border-color: #666 transparent;
  border-style: solid;
}

#kss-node .kss-toolbar__tooltip:after {
  bottom: -6px;
  border-top-color: #fff;
}

#kss-node a:hover > .kss-toolbar__tooltip {
  opacity: 1;
  clip: auto;
  height: auto;
  width: auto;
  overflow: visible;
}

#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen],
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides],
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] {
  border-color: #666;
  background-color: #666;
}

#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] .kss-toolbar__icon-fill,
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] .kss-toolbar__icon-fill,
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] .kss-toolbar__icon-fill {
  fill: #fff;
}

#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.on,
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.on,
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.on {
  display: block;
}

#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.off,
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.off,
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.off {
  display: none;
}

#kss-node .kss-parameters {
  display: table;
  list-style-type: none;
  margin-top: 0;
  margin-left: 0;
  padding-left: 0;
}

#kss-node .kss-parameters__title {
  font-weight: bold;
}

#kss-node .kss-parameters__item {
  display: table-row;
}

#kss-node .kss-parameters__name {
  display: table-cell;
  padding-right: 20px;
  white-space: nowrap;
}

#kss-node .kss-parameters__description {
  display: table-cell;
}

#kss-node .kss-parameters__default-value code {
  white-space: nowrap;
}

#kss-node .kss-modifier__wrapper {
  border: 1px solid #ccc;
  padding: 10px;
}

#kss-node .is-fullscreen .kss-modifier__wrapper {
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 0;
  padding-right: 0;
  border: none;
}

#kss-node .kss-modifier__heading {
  margin: -10px -10px 10px -10px;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  background-color: #eee;
  font-weight: bold;
}

#kss-node .is-fullscreen .kss-modifier__heading {
  margin: 0 20px 10px;
  border: 1px solid #ccc;
}

#kss-node .kss-modifier__default-name {
  font-weight: bold;
  margin-bottom: 12px;
}

#kss-node .is-fullscreen .kss-modifier__default-name {
  margin-left: 20px;
  margin-right: 20px;
}

#kss-node .kss-modifier__name {
  float: left;
  padding-right: 10px;
  font-weight: bold;
}

#kss-node .kss-modifier__description {
  margin-bottom: 12px;
}

#kss-node .is-fullscreen .kss-modifier__description {
  margin-right: 20px;
}

#kss-node .kss-modifier__example {
  clear: left;
  border: 2px dashed transparent;
  z-index: 0;
  position: relative;
  margin: -2px -2px 22px;
}

#kss-node .kss-modifier__example:last-child {
  margin: 0;
}

#kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after,
#kss-node.kss-guides-mode .kss-modifier__example-footer:before,
#kss-node.kss-guides-mode .kss-modifier__example-footer:after {
  z-index: -1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border: 2px solid #000;
}

#kss-node.kss-guides-mode .kss-modifier__example {
  border-color: #000;
}

#kss-node.kss-guides-mode .kss-modifier__example:before {
  top: -5px;
  left: -5px;
  border-top: 0;
  border-left: 0;
}

#kss-node.kss-guides-mode .kss-modifier__example:after {
  top: -5px;
  right: -5px;
  border-top: 0;
  border-right: 0;
}

#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:before {
  left: auto;
  right: 0;
}

#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:after {
  right: auto;
  left: 0;
}

#kss-node .kss-modifier__example-footer {
  clear: both;
}

#kss-node.kss-guides-mode .kss-modifier__example-footer:before {
  bottom: -5px;
  left: -5px;
  border-bottom: 0;
  border-left: 0;
}

#kss-node.kss-guides-mode .kss-modifier__example-footer:after {
  bottom: -5px;
  right: -5px;
  border-right: 0;
  border-bottom: 0;
}

#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:before {
  left: auto;
  right: 0;
}

#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:after {
  right: auto;
  left: 0;
}

#kss-node.kss-markup-mode .kss-markup pre {
  background-color: #fbfbe5;
}

#kss-node .kss-markup {
  margin: 24px 0;
  border: 1px solid #ccc;
}

#kss-node .kss-markup[open] summary {
  border-bottom: 1px solid #ccc;
}

#kss-node .kss-markup summary {
  padding-left: 10px;
}

#kss-node .kss-markup pre {
  margin: 0;
  border-radius: 0 0 10px 10px;
}

#kss-node .kss-source {
  font-size: 80%;
}

#kss-node .kss-github {
  display: none;
}

#kss-node .kss-github img {
  border: 0;
}

@media screen and (min-width: 501px) {
  #kss-node .kss-github {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  }
}

@media screen and (min-width: 607px) {
  #kss-node .kss-title__permalink:hover .kss-title__permalink-hash, #kss-node .kss-title__permalink:focus .kss-title__permalink-hash, #kss-node .kss-title__permalink:active .kss-title__permalink-hash {
    display: inline;
  }
}

@media screen and (min-width: 769px) {
  #kss-node .kss-doc-title {
    font-size: 1.5em;
  }
  #kss-node .kss-header,
  #kss-node .kss-nav {
    margin-top: 2em;
  }
}

File

themes/socialblue/assets/css/kss.css
View source 
  1. #kss-node .kss-doc-title {

  2.   margin: 0;

  3. }

  4. 

  5. #kss-node .lead,

  6. #kss-node .kss-nav__ref {

  7.   position: absolute;

  8.   height: 1px;

  9.   width: 1px;

  10.   overflow: hidden;

  11.   word-wrap: normal;

  12.   margin: -1px;

  13.   padding: 0;

  14.   clip: rect(0, 0, 0, 0);

  15.   border: 0;

  16. }

  17. 

  18. #kss-node .kss-nav__ref:after {

  19.   content: ' ';

  20. }

  21. 

  22. #kss-node .kss-nav__ref-child + .kss-nav__name {

  23.   margin-left: 0.5rem;

  24.   font-weight: 300;

  25. }

  26. 

  27. #kss-node .kss-section {

  28.   margin-bottom: 48px;

  29. }

  30. 

  31. #kss-node .kss-section.is-fullscreen {

  32.   position: fixed;

  33.   top: 0;

  34.   left: 0;

  35.   right: 0;

  36.   bottom: 0;

  37.   width: 100%;

  38.   height: 100%;

  39.   margin: 0;

  40.   min-width: 0;

  41.   max-width: none;

  42.   min-height: 0;

  43.   max-height: none;

  44.   -o-object-fit: contain;

  45.      object-fit: contain;

  46.   -webkit-transform: none;

  47.           transform: none;

  48.   overflow: auto;

  49.   padding: 20px;

  50.   background-color: #f3f3f3;

  51.   z-index: 99;

  52. }

  53. 

  54. #kss-node.kss-fullscreen-mode .site-footer,

  55. #kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen) {

  56.   display: none;

  57. }

  58. 

  59. #kss-node .kss-title {

  60.   padding-bottom: 11px;

  61.   margin: 48px 0 6px;

  62.   border-bottom: 1px solid rgba(119, 119, 119, 0.2);

  63. }

  64. 

  65. #kss-node .is-fullscreen .kss-title {

  66.   margin-top: 0;

  67. }

  68. 

  69. #kss-node.kss-fullscreen-mode .navbar-fixed-top {

  70.   z-index: -1;

  71.   display: none;

  72. }

  73. 

  74. #kss-node .kss-title__ref {

  75.   display: block;

  76.   font-size: 16px;

  77.   line-height: 16px;

  78.   color: #666;

  79. }

  80. 

  81. #kss-node .kss-title__ref:before {

  82.   content: 'Section ';

  83. }

  84. 

  85. #kss-node .kss-title__permalink {

  86.   display: block;

  87.   color: #000;

  88.   text-decoration: none;

  89. }

  90. 

  91. #kss-node .kss-title__permalink:hover, #kss-node .kss-title__permalink:focus, #kss-node .kss-title__permalink:active {

  92.   color: #0645ad;

  93. }

  94. 

  95. #kss-node .kss-title__permalink-hash {

  96.   display: none;

  97.   color: #ccc;

  98. }

  99. 

  100. #kss-node .kss-toolbar {

  101.   margin: 6px 0 24px;

  102.   display: inline-block;

  103.   border: 1px solid #eee;

  104.   background-color: #f9f9f9;

  105.   border-right-color: #e0e0e0;

  106.   border-bottom-color: #e0e0e0;

  107.   line-height: 1;

  108.   padding: 3px;

  109. }

  110. 

  111. #kss-node .kss-toolbar a {

  112.   -webkit-box-sizing: content-box;

  113.           box-sizing: content-box;

  114.   display: inline-block;

  115.   width: 16px;

  116.   height: 16px;

  117.   padding: 3px;

  118.   vertical-align: top;

  119.   position: relative;

  120.   overflow: visible;

  121. }

  122. 

  123. #kss-node .kss-toolbar a + a {

  124.   margin-left: 6px;

  125. }

  126. 

  127. #kss-node .kss-toolbar a .kss-toolbar__icon-fill {

  128.   fill: #ccc;

  129. }

  130. 

  131. #kss-node .kss-toolbar a svg.on {

  132.   display: none;

  133. }

  134. 

  135. #kss-node .kss-toolbar a:focus, #kss-node .kss-toolbar a:hover {

  136.   border-color: #000;

  137. }

  138. 

  139. #kss-node .kss-toolbar a:focus .kss-toolbar__icon-fill, #kss-node .kss-toolbar a:hover .kss-toolbar__icon-fill {

  140.   fill: #000;

  141. }

  142. 

  143. #kss-node .kss-toolbar__tooltip {

  144.   position: absolute;

  145.   z-index: 1;

  146.   display: inline-block;

  147.   bottom: 100%;

  148.   left: -10px;

  149.   margin-bottom: 5px;

  150.   border: solid 1px #666;

  151.   padding: 8px 10px 6px;

  152.   -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);

  153.           box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);

  154.   white-space: nowrap;

  155.   color: #000;

  156.   background: #fff;

  157.   cursor: help;

  158.   opacity: 0;

  159.   -webkit-transition: opacity 0.25s;

  160.   transition: opacity 0.25s;

  161.   height: 1px;

  162.   width: 1px;

  163.   overflow: hidden;

  164.   clip: rect(1px, 1px, 1px, 1px);

  165.   word-wrap: normal;

  166. }

  167. 

  168. #kss-node .kss-toolbar__tooltip:before, #kss-node .kss-toolbar__tooltip:after {

  169.   content: '';

  170.   position: absolute;

  171.   bottom: -8px;

  172.   left: 15px;

  173.   width: 0;

  174.   height: 0;

  175.   border-width: 7px 5px 0;

  176.   border-color: #666 transparent;

  177.   border-style: solid;

  178. }

  179. 

  180. #kss-node .kss-toolbar__tooltip:after {

  181.   bottom: -6px;

  182.   border-top-color: #fff;

  183. }

  184. 

  185. #kss-node a:hover > .kss-toolbar__tooltip {

  186.   opacity: 1;

  187.   clip: auto;

  188.   height: auto;

  189.   width: auto;

  190.   overflow: visible;

  191. }

  192. 

  193. #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen],

  194. #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides],

  195. #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] {

  196.   border-color: #666;

  197.   background-color: #666;

  198. }

  199. 

  200. #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] .kss-toolbar__icon-fill,

  201. #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] .kss-toolbar__icon-fill,

  202. #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] .kss-toolbar__icon-fill {

  203.   fill: #fff;

  204. }

  205. 

  206. #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.on,

  207. #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.on,

  208. #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.on {

  209.   display: block;

  210. }

  211. 

  212. #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.off,

  213. #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.off,

  214. #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.off {

  215.   display: none;

  216. }

  217. 

  218. #kss-node .kss-parameters {

  219.   display: table;

  220.   list-style-type: none;

  221.   margin-top: 0;

  222.   margin-left: 0;

  223.   padding-left: 0;

  224. }

  225. 

  226. #kss-node .kss-parameters__title {

  227.   font-weight: bold;

  228. }

  229. 

  230. #kss-node .kss-parameters__item {

  231.   display: table-row;

  232. }

  233. 

  234. #kss-node .kss-parameters__name {

  235.   display: table-cell;

  236.   padding-right: 20px;

  237.   white-space: nowrap;

  238. }

  239. 

  240. #kss-node .kss-parameters__description {

  241.   display: table-cell;

  242. }

  243. 

  244. #kss-node .kss-parameters__default-value code {

  245.   white-space: nowrap;

  246. }

  247. 

  248. #kss-node .kss-modifier__wrapper {

  249.   border: 1px solid #ccc;

  250.   padding: 10px;

  251. }

  252. 

  253. #kss-node .is-fullscreen .kss-modifier__wrapper {

  254.   margin-left: -20px;

  255.   margin-right: -20px;

  256.   padding-left: 0;

  257.   padding-right: 0;

  258.   border: none;

  259. }

  260. 

  261. #kss-node .kss-modifier__heading {

  262.   margin: -10px -10px 10px -10px;

  263.   padding: 10px;

  264.   border-bottom: 1px solid #ccc;

  265.   background-color: #eee;

  266.   font-weight: bold;

  267. }

  268. 

  269. #kss-node .is-fullscreen .kss-modifier__heading {

  270.   margin: 0 20px 10px;

  271.   border: 1px solid #ccc;

  272. }

  273. 

  274. #kss-node .kss-modifier__default-name {

  275.   font-weight: bold;

  276.   margin-bottom: 12px;

  277. }

  278. 

  279. #kss-node .is-fullscreen .kss-modifier__default-name {

  280.   margin-left: 20px;

  281.   margin-right: 20px;

  282. }

  283. 

  284. #kss-node .kss-modifier__name {

  285.   float: left;

  286.   padding-right: 10px;

  287.   font-weight: bold;

  288. }

  289. 

  290. #kss-node .kss-modifier__description {

  291.   margin-bottom: 12px;

  292. }

  293. 

  294. #kss-node .is-fullscreen .kss-modifier__description {

  295.   margin-right: 20px;

  296. }

  297. 

  298. #kss-node .kss-modifier__example {

  299.   clear: left;

  300.   border: 2px dashed transparent;

  301.   z-index: 0;

  302.   position: relative;

  303.   margin: -2px -2px 22px;

  304. }

  305. 

  306. #kss-node .kss-modifier__example:last-child {

  307.   margin: 0;

  308. }

  309. 

  310. #kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after,

  311. #kss-node.kss-guides-mode .kss-modifier__example-footer:before,

  312. #kss-node.kss-guides-mode .kss-modifier__example-footer:after {

  313.   z-index: -1;

  314.   -webkit-box-sizing: border-box;

  315.           box-sizing: border-box;

  316.   content: '';

  317.   position: absolute;

  318.   width: 5px;

  319.   height: 5px;

  320.   border: 2px solid #000;

  321. }

  322. 

  323. #kss-node.kss-guides-mode .kss-modifier__example {

  324.   border-color: #000;

  325. }

  326. 

  327. #kss-node.kss-guides-mode .kss-modifier__example:before {

  328.   top: -5px;

  329.   left: -5px;

  330.   border-top: 0;

  331.   border-left: 0;

  332. }

  333. 

  334. #kss-node.kss-guides-mode .kss-modifier__example:after {

  335.   top: -5px;

  336.   right: -5px;

  337.   border-top: 0;

  338.   border-right: 0;

  339. }

  340. 

  341. #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:before {

  342.   left: auto;

  343.   right: 0;

  344. }

  345. 

  346. #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:after {

  347.   right: auto;

  348.   left: 0;

  349. }

  350. 

  351. #kss-node .kss-modifier__example-footer {

  352.   clear: both;

  353. }

  354. 

  355. #kss-node.kss-guides-mode .kss-modifier__example-footer:before {

  356.   bottom: -5px;

  357.   left: -5px;

  358.   border-bottom: 0;

  359.   border-left: 0;

  360. }

  361. 

  362. #kss-node.kss-guides-mode .kss-modifier__example-footer:after {

  363.   bottom: -5px;

  364.   right: -5px;

  365.   border-right: 0;

  366.   border-bottom: 0;

  367. }

  368. 

  369. #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:before {

  370.   left: auto;

  371.   right: 0;

  372. }

  373. 

  374. #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:after {

  375.   right: auto;

  376.   left: 0;

  377. }

  378. 

  379. #kss-node.kss-markup-mode .kss-markup pre {

  380.   background-color: #fbfbe5;

  381. }

  382. 

  383. #kss-node .kss-markup {

  384.   margin: 24px 0;

  385.   border: 1px solid #ccc;

  386. }

  387. 

  388. #kss-node .kss-markup[open] summary {

  389.   border-bottom: 1px solid #ccc;

  390. }

  391. 

  392. #kss-node .kss-markup summary {

  393.   padding-left: 10px;

  394. }

  395. 

  396. #kss-node .kss-markup pre {

  397.   margin: 0;

  398.   border-radius: 0 0 10px 10px;

  399. }

  400. 

  401. #kss-node .kss-source {

  402.   font-size: 80%;

  403. }

  404. 

  405. #kss-node .kss-github {

  406.   display: none;

  407. }

  408. 

  409. #kss-node .kss-github img {

  410.   border: 0;

  411. }

  412. 

  413. @media screen and (min-width: 501px) {

  414.   #kss-node .kss-github {

  415.     display: block;

  416.     position: absolute;

  417.     top: 0;

  418.     right: 0;

  419.   }

  420. }

  421. 

  422. @media screen and (min-width: 607px) {

  423.   #kss-node .kss-title__permalink:hover .kss-title__permalink-hash, #kss-node .kss-title__permalink:focus .kss-title__permalink-hash, #kss-node .kss-title__permalink:active .kss-title__permalink-hash {

  424.     display: inline;

  425.   }

  426. }

  427. 

  428. @media screen and (min-width: 769px) {

  429.   #kss-node .kss-doc-title {

  430.     font-size: 1.5em;

  431.   }

  432.   #kss-node .kss-header,

  433.   #kss-node .kss-nav {

  434.     margin-top: 2em;

  435.   }

  436. }