diff --git a/assets/css/colors.css b/assets/css/colors.css index eb6c1b2..858cfbf 100644 --- a/assets/css/colors.css +++ b/assets/css/colors.css @@ -32,41 +32,6 @@ ol.classic { .ls-nav--userbar > .ls-nav-item > a > img { display: none; } - -/** Спойлер - * Modified by fedorov mich // 2014 // bSpoiler LS 1.0 - **/ -.spoiler-title { - color: #6da3bd; - border-bottom: 1px dashed; - font-weight: normal; - cursor: pointer; -} -.spoiler-title:hover { - color: #4d7285; -} -.spoiler-body { - display: none; - padding: 10px; - border: 1px solid #eee; - background: #f9f9f9; - margin-top: 10px; - overflow: hidden; -} -.spoiler-title:before { - float: left; - content: " "; - width: 16px; - height: 16px; - margin-top: 2px; - display: block; - border: 0px solid red; - background: url(../images/spoiler.icon.png) no-repeat left top; -} -.spoiler-title.open:before { - background: url(../images/spoiler.icon.png) no-repeat left bottom; -} - /** * Главный поиск в шапке сайта - показывается по клику **/ diff --git a/assets/css/layout.css b/assets/css/layout.css index 0dcc351..6f87eb5 100644 --- a/assets/css/layout.css +++ b/assets/css/layout.css @@ -110,9 +110,71 @@ background: #eee; } +@media (max-width: 1199px) { + .markItUp .markItUpContainer .markItUpEditor { + font-size: 12pt; + font-size: 1.2vmin; + } +} +@media (min-width: 1200px) { + .markItUp .markItUpContainer .markItUpEditor { + font-size: 14pt; + font-size: 1.4vmin; + } +} .markItUp .markItUpContainer .markItUpEditor { - font-size: 12pt; - font-size: 1.6vmin; line-height: 1.6; font-family: "Fira Code","Anonymous Pro","PT Mono","IBM Plex Mono", "Noto Mono","Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace; } + +summary { + font-weight: bold; + margin: -.5em -.5em 0; + padding: .5em; +} + +/** Спойлер + * Modified by fedorov mich // 2014 // bSpoiler LS 1.0 + **/ +.spoiler-title { + color: #6da3bd; + text-decoration: underline 1px dashed; + font-weight: normal; + cursor: pointer; +} +.spoiler-title:hover { + color: #4d7285; +} +.spoiler[open] .spoiler-title { + text-decoration: none; + margin-bottom: .5em; +} +.spoiler { + padding: 10px; +} +.spoiler[open] { + border: 1px solid #eee; + background: #f9f9f9; +} +.spoiler-title:before { + float: left; + content: " "; + width: 16px; + height: 16px; + margin-top: 2px; + display: block; + border: 0px solid red; + background: url(../images/spoiler.icon.png) no-repeat left top; +} +.spoiler[open] .spoiler-title:before { + background: url(../images/spoiler.icon.png) no-repeat left bottom; +} + +/* https://github.com/stationer/DetailsShim - заглушка
для старых браузеров */ +details.details_shim_closed, +details.details_shim_open {display: block;} +details.details_shim_closed > * {display: none;} +details.details_shim_closed > summary, +details.details_shim_open > summary {display: block;} +details.details_shim_closed > summary:before {display: inline-block; content: "\25b6"; padding: 0 0.1em; margin-right: 0.4em; font-size: 0.9em;} +details.details_shim_open > summary:before {display: inline-block; content: "\25bc"; padding: 0; margin-right: 0.35em;} diff --git a/assets/js/ifhub.js b/assets/js/ifhub.js index beca4da..db7a5ff 100644 --- a/assets/js/ifhub.js +++ b/assets/js/ifhub.js @@ -9,9 +9,131 @@ jQuery(document).ready(function($){ $(".search-icon").on('click touchstart', function(){ $(".main-search").toggle() }); - $('.spoiler-title').on('click touchstart', function(){ - $(this).toggleClass('open'); - $(this).parent().children('div.spoiler-body').toggle('normal'); - return false; - }); }); + +/* --- https://github.com/stationer/DetailsShim/blob/master/details-shim.js --- */ +/** + * Enable proper operation of
tags in unsupportive browsers + * + * @param Details details element to shim + * @returns {boolean} false on error + */ +function details_shim(Details) { + // For backward compatibility, if no DOM Element is sent, call init() + if (!Details || !('nodeType' in Details) || !('tagName' in Details)) { + return details_shim.init(); + } + + var Summary; + // If we were passed a details tag, find its summary tag + if ('details' == Details.tagName.toLowerCase()) { + // Assume first found summary tag is the corresponding summary tag + Summary = Details.getElementsByTagName('summary')[0]; + + // If we were passed a summary tag, find its details tag + } else if (!!Details.parentNode + && 'summary' == Details.tagName.toLowerCase() + ) { + Summary = Details; + Details = Summary.parentNode; + } else { + // An invalid parameter was passed for Details + return false; + } + + // If the details tag is natively supported or already shimmed + if ('boolean' == typeof Details.open) { + // If native, remove custom classes + if (!Details.getAttribute('data-open')) { + Details.className = Details.className + .replace(/\bdetails_shim_open\b|\bdetails_shim_closed\b/g, ' '); + } + return false; + } + + // Set initial class according to `open` attribute + var state = Details.outerHTML + // OR older firefox doesn't have .outerHTML + || new XMLSerializer().serializeToString(Details); + state = state.substring(0, state.indexOf('>')); + // Read: There is an open attribute, and it's not explicitly empty + state = (-1 != state.indexOf('open') && -1 == state.indexOf('open=""')) + ? 'open' + : 'closed' + ; + Details.setAttribute('data-open', state); + Details.className += ' details_shim_' + state; + + // Add onclick handler to toggle visibility class + Summary.addEventListener + ? Summary.addEventListener('click', function() { details_shim.toggle(Details); }) + : Summary.attachEvent && Summary.attachEvent('onclick', function() { details_shim.toggle(Details); }) + ; + + Object.defineProperty(Details, 'open', { + get: function() { + return 'open' == this.getAttribute('data-open'); + }, + set: function(state) { + details_shim.toggle(this, state); + } + }); + + // wrap text nodes in span to expose them to css + for (var j = 0; j < Details.childNodes.length; j++) { + if (Details.childNodes[j].nodeType == 3 + && /[^\s]/.test(Details.childNodes[j].data) + ) { + var span = document.createElement('span'); + var text = Details.childNodes[j]; + Details.insertBefore(span, text); + Details.removeChild(text); + span.appendChild(text); + } + } +} // details_shim() + +/** + * Toggle the open state of specified
tag + * @param Details The
tag to toggle + * @param state Optional override state + */ +details_shim.toggle = function(Details, state) { + // If state was not passed, seek current state + if ('undefined' === typeof state) { + // new state + state = Details.getAttribute('data-open') == 'open' + ? 'closed' + : 'open' + ; + } else { + // Sanitize the input, expect boolean, force string + // Expecting boolean means even 'closed' will result in an open + // This is the behavior of the natively supportive browsers + state = !!state ? 'open' : 'closed'; + } + + Details.setAttribute('data-open', state); + // replace previous open/close class + Details.className = Details.className + .replace(/\bdetails_shim_open\b|\bdetails_shim_closed\b/g, ' ') + + ' details_shim_' + state; +}; + +/** + * Run details_shim() on each details tag + */ +details_shim.init = function() { + // Because
must include a , + // collecting tags collects *valid*
tags + var Summaries = document.getElementsByTagName('summary'); + for (var i = 0; i < Summaries.length; i++) { + details_shim(Summaries[i]); + } +}; + +// Run details_shim.init() when the page loads +window.addEventListener + ? window.addEventListener('load', details_shim.init, false) + : window.attachEvent && window.attachEvent('onload', details_shim.init) +;