diff --git a/README.md b/README.md
index ef8183f..65663c4 100644
--- a/README.md
+++ b/README.md
@@ -65,6 +65,8 @@ paginate = 5
contentTypeName = "posts"
# "light" or "dark"
defaultTheme = "dark"
+ # if you set this to 0, only submenu trigger will be visible
+ showMenuItems = 2
[languages]
[languages.en]
@@ -72,6 +74,7 @@ paginate = 5
subtitle = "A simple theme for Hugo"
keywords = ""
copyright = ""
+ menuMore = "Show more"
writtenBy = "Written by"
readMore = "Read more"
readOtherPosts = "Read other posts"
@@ -97,6 +100,8 @@ paginate = 5
to `config.toml` file in your Hugo root directory and change params fields. In case you need, here's [a YAML version](https://gist.github.com/panr/8f9b363e358aaa33f6d353c77feee959).
+**NOTE:** Please keep in mind that currently main menu doesn't support nesting.
+
## How to run your site
From your Hugo root directory run:
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index b26c43f..1ede915 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -1,7 +1,38 @@
diff --git a/package.json b/package.json
index da94621..9c7b2c4 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
"postcss-cli": "^6.0.0",
"postcss-import": "^11.1.0",
"postcss-loader": "^2.0.5",
+ "postcss-mixins": "^6.2.1",
"postcss-nested": "^3.0.0",
"postcss-preset-env": "^5.2.2",
"postcss-reporter": "^5.0.0",
diff --git a/postcss.config.js b/postcss.config.js
index 0d586e3..90be824 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -4,11 +4,13 @@ const nested = require("postcss-nested");
const postCSSPresetEnv = require("postcss-preset-env");
const browsers = require("browserslist");
const cssnano = require("cssnano");
+const mixins = require("postcss-mixins");
module.exports = () => ({
plugins: [
url,
imports,
+ mixins,
nested,
postCSSPresetEnv({
stage: 1,
diff --git a/source/css/menu.css b/source/css/menu.css
index 958bd12..5247ec1 100644
--- a/source/css/menu.css
+++ b/source/css/menu.css
@@ -1,19 +1,34 @@
-.menu {
+@define-mixin menu {
+ position: absolute;
background: #fafafa;
- border-right: 1px solid;
- margin-right: 18px;
+ box-shadow: var(--shadow);
+ margin: 0;
+ padding: 10px;
+ list-style: none;
+ border-radius: 5px;
+ z-index: 99;
.dark-theme & {
background: #252627;
}
+}
+
+.menu {
+ --shadow-color: rgba(0, 0, 0, .2);
+ --shadow: 0 8px 20px var(--shadow-color);
+
+ border-right: 1px solid;
+ margin-right: 18px;
+ padding-right: 24px;
@media (--phone) {
- position: absolute;
+ @mixin menu;
top: 50px;
right: 0;
- border: none;
- margin: 0;
- padding: 10px;
+ }
+
+ a {
+ text-decoration: none;
}
&__inner {
@@ -21,14 +36,31 @@
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
- max-width: 100%;
- margin: 0 auto;
- padding: 0 15px;
- font-size: 1rem;
list-style: none;
+ margin: 0;
+ padding: 0;
+
+ &--desktop {
+ @media (--phone) {
+ display: none;
+ }
+ }
+
+ &--mobile {
+ display: none;
+
+ @media (--phone) {
+ display: block;
+ }
+ }
li {
- margin: 0 12px;
+ text-align: left;
+ flex: 0 0 auto;
+
+ &:not(:first-of-type) {
+ margin-left: 20px;
+ }
}
@media (--phone) {
@@ -37,12 +69,43 @@
padding: 0;
li {
- margin: 0;
+ margin-left: 0 !important;
padding: 5px;
}
}
}
+ &__sub-inner {
+ position: relative;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+
+ &:not(:only-child) {
+ margin-left: 20px;
+ }
+
+ &-more {
+ @mixin menu;
+ top: 35px;
+ left: 0;
+
+ &-trigger {
+ color: var(--accent);
+ user-select: none;
+ cursor: pointer;
+ }
+
+ li {
+ .menu__inner & {
+ margin-left: 0;
+ padding: 5px;
+ white-space: nowrap;
+ }
+ }
+ }
+ }
+
&-trigger {
width: 24px;
height: 24px;
@@ -50,18 +113,4 @@
margin-left: 10px;
cursor: pointer;
}
-
- a {
- display: inline-block;
- margin-right: 15px;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
-
- &:last-of-type {
- margin-right: 0;
- }
- }
}
diff --git a/source/js/menu.js b/source/js/menu.js
index a33e66b..63d9663 100644
--- a/source/js/menu.js
+++ b/source/js/menu.js
@@ -1,16 +1,51 @@
-// Mobile menu
-
-const menuTrigger = document.querySelector(".menu-trigger");
+const container = document.querySelector(".container");
const menu = document.querySelector(".menu");
+const mobileMenuTrigger = document.querySelector(".menu-trigger");
+const desktopMenu = document.querySelector(".menu__inner--desktop");
+const desktopMenuTrigger = document.querySelector(".menu__sub-inner-more-trigger");
+const menuMore = document.querySelector(".menu__sub-inner-more");
const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
const isMobile = () => window.matchMedia(mobileQuery).matches;
const isMobileMenu = () => {
- menuTrigger && menuTrigger.classList.toggle("hidden", !isMobile());
+ mobileMenuTrigger && mobileMenuTrigger.classList.toggle("hidden", !isMobile());
menu && menu.classList.toggle("hidden", isMobile());
+ menuMore && menuMore.classList.toggle("hidden", !isMobile());
};
+// Common
+
+menu && menu.addEventListener("click", e => e.stopPropagation());
+menuMore && menuMore.addEventListener("click", e => e.stopPropagation());
+
isMobileMenu();
-menuTrigger && menuTrigger.addEventListener("click", () => menu && menu.classList.toggle("hidden"));
+document.body.addEventListener("click", () => {
+ if (!isMobile() && !menuMore.classList.contains("hidden")) {
+ menuMore.classList.add("hidden");
+ } else if (isMobile() && !menu.classList.contains("hidden")) {
+ menu.classList.add("hidden");
+ }
+});
window.addEventListener("resize", isMobileMenu);
+
+// Mobile menu
+
+mobileMenuTrigger &&
+ mobileMenuTrigger.addEventListener("click", e => {
+ e.stopPropagation();
+ menu && menu.classList.toggle("hidden");
+ });
+
+// Desktop menu
+
+desktopMenuTrigger &&
+ desktopMenuTrigger.addEventListener("click", e => {
+ e.stopPropagation();
+ menuMore && menuMore.classList.toggle("hidden");
+
+ if (menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right) {
+ menuMore.style.left = "auto";
+ menuMore.style.right = 0;
+ }
+ });
diff --git a/static/assets/main.js b/static/assets/main.js
index e2a42bf..eda7410 100644
--- a/static/assets/main.js
+++ b/static/assets/main.js
@@ -1 +1,136 @@
-!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){n(1),n(2),e.exports=n(3)},function(e,t,n){"use strict"},function(e,t,n){"use strict";var o=document.querySelector(".menu-trigger"),r=document.querySelector(".menu"),i=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),u=function(){return window.matchMedia(i).matches},c=function(){o&&o.classList.toggle("hidden",!u()),r&&r.classList.toggle("hidden",u())};c(),o&&o.addEventListener("click",function(){return r&&r.classList.toggle("hidden")}),window.addEventListener("resize",c)},function(e,t,n){"use strict";var o=window.localStorage&&window.localStorage.getItem("theme"),r=document.querySelector(".theme-toggle"),i="dark"===o;null!==o&&document.body.classList.toggle("dark-theme",i),r.addEventListener("click",function(){document.body.classList.toggle("dark-theme"),window.localStorage&&window.localStorage.setItem("theme",document.body.classList.contains("dark-theme")?"dark":"light")})}]);
\ No newline at end of file
+/******/ (function(modules) { // webpackBootstrap
+/******/ // The module cache
+/******/ var installedModules = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/
+/******/ // Check if module is in cache
+/******/ if(installedModules[moduleId]) {
+/******/ return installedModules[moduleId].exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = installedModules[moduleId] = {
+/******/ i: moduleId,
+/******/ l: false,
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ // Flag the module as loaded
+/******/ module.l = true;
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/******/
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __webpack_require__.m = modules;
+/******/
+/******/ // expose the module cache
+/******/ __webpack_require__.c = installedModules;
+/******/
+/******/ // define getter function for harmony exports
+/******/ __webpack_require__.d = function(exports, name, getter) {
+/******/ if(!__webpack_require__.o(exports, name)) {
+/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ }
+/******/ };
+/******/
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = function(exports) {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/
+/******/ // create a fake namespace object
+/******/ // mode & 1: value is a module id, require it
+/******/ // mode & 2: merge all properties of value into the ns
+/******/ // mode & 4: return value when already ns object
+/******/ // mode & 8|1: behave like require
+/******/ __webpack_require__.t = function(value, mode) {
+/******/ if(mode & 1) value = __webpack_require__(value);
+/******/ if(mode & 8) return value;
+/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ var ns = Object.create(null);
+/******/ __webpack_require__.r(ns);
+/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ return ns;
+/******/ };
+/******/
+/******/ // getDefaultExport function for compatibility with non-harmony modules
+/******/ __webpack_require__.n = function(module) {
+/******/ var getter = module && module.__esModule ?
+/******/ function getDefault() { return module['default']; } :
+/******/ function getModuleExports() { return module; };
+/******/ __webpack_require__.d(getter, 'a', getter);
+/******/ return getter;
+/******/ };
+/******/
+/******/ // Object.prototype.hasOwnProperty.call
+/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ // __webpack_public_path__
+/******/ __webpack_require__.p = "";
+/******/
+/******/
+/******/ // Load entry module and return exports
+/******/ return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "./source/js/index.js":
+/*!****************************!*\
+ !*** ./source/js/index.js ***!
+ \****************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("// Add your script here\n\n\n//# sourceURL=webpack:///./source/js/index.js?");
+
+/***/ }),
+
+/***/ "./source/js/menu.js":
+/*!***************************!*\
+ !*** ./source/js/menu.js ***!
+ \***************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar container = document.querySelector(\".container\");\nvar menu = document.querySelector(\".menu\");\nvar mobileMenuTrigger = document.querySelector(\".menu-trigger\");\nvar desktopMenu = document.querySelector(\".menu__inner--desktop\");\nvar desktopMenuTrigger = document.querySelector(\".menu__sub-inner-more-trigger\");\nvar menuMore = document.querySelector(\".menu__sub-inner-more\");\nvar mobileQuery = getComputedStyle(document.body).getPropertyValue(\"--phoneWidth\");\n\nvar isMobile = function isMobile() {\n return window.matchMedia(mobileQuery).matches;\n};\n\nvar isMobileMenu = function isMobileMenu() {\n mobileMenuTrigger && mobileMenuTrigger.classList.toggle(\"hidden\", !isMobile());\n menu && menu.classList.toggle(\"hidden\", isMobile());\n menuMore && menuMore.classList.toggle(\"hidden\", !isMobile());\n}; // Common\n\n\nmenu && menu.addEventListener(\"click\", function (e) {\n return e.stopPropagation();\n});\nmenuMore && menuMore.addEventListener(\"click\", function (e) {\n return e.stopPropagation();\n});\nisMobileMenu();\ndocument.body.addEventListener(\"click\", function () {\n if (!isMobile() && !menuMore.classList.contains(\"hidden\")) {\n menuMore.classList.add(\"hidden\");\n } else if (isMobile() && !menu.classList.contains(\"hidden\")) {\n menu.classList.add(\"hidden\");\n }\n});\nwindow.addEventListener(\"resize\", isMobileMenu); // Mobile menu\n\nmobileMenuTrigger && mobileMenuTrigger.addEventListener(\"click\", function (e) {\n e.stopPropagation();\n menu && menu.classList.toggle(\"hidden\");\n}); // Desktop menu\n\ndesktopMenuTrigger && desktopMenuTrigger.addEventListener(\"click\", function (e) {\n e.stopPropagation();\n menuMore && menuMore.classList.toggle(\"hidden\");\n\n if (menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right) {\n menuMore.style.left = \"auto\";\n menuMore.style.right = 0;\n }\n});\n\n//# sourceURL=webpack:///./source/js/menu.js?");
+
+/***/ }),
+
+/***/ "./source/js/theme.js":
+/*!****************************!*\
+ !*** ./source/js/theme.js ***!
+ \****************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\n// Toggle theme\nvar getTheme = window.localStorage && window.localStorage.getItem(\"theme\");\nvar themeToggle = document.querySelector(\".theme-toggle\");\nvar isDark = getTheme === \"dark\";\n\nif (getTheme !== null) {\n document.body.classList.toggle(\"dark-theme\", isDark);\n}\n\nthemeToggle.addEventListener(\"click\", function () {\n document.body.classList.toggle(\"dark-theme\");\n window.localStorage && window.localStorage.setItem(\"theme\", document.body.classList.contains(\"dark-theme\") ? \"dark\" : \"light\");\n});\n\n//# sourceURL=webpack:///./source/js/theme.js?");
+
+/***/ }),
+
+/***/ 0:
+/*!***************************************************************************!*\
+ !*** multi ./source/js/index.js ./source/js/menu.js ./source/js/theme.js ***!
+ \***************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+eval("__webpack_require__(/*! /Users/radek/Documents/Git/Moje/hugoBasicExampleHelloFriend/themes/hello-friend/source/js/index.js */\"./source/js/index.js\");\n__webpack_require__(/*! /Users/radek/Documents/Git/Moje/hugoBasicExampleHelloFriend/themes/hello-friend/source/js/menu.js */\"./source/js/menu.js\");\nmodule.exports = __webpack_require__(/*! /Users/radek/Documents/Git/Moje/hugoBasicExampleHelloFriend/themes/hello-friend/source/js/theme.js */\"./source/js/theme.js\");\n\n\n//# sourceURL=webpack:///multi_./source/js/index.js_./source/js/menu.js_./source/js/theme.js?");
+
+/***/ })
+
+/******/ });
\ No newline at end of file
diff --git a/static/assets/prism.js b/static/assets/prism.js
index ab9d755..055c69b 100644
--- a/static/assets/prism.js
+++ b/static/assets/prism.js
@@ -1,8 +1,123 @@
-!function(e){var t={};function n(a){if(t[a])return t[a].exports;var i=t[a]={i:a,l:!1,exports:{}};return e[a].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,a){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(a,i,function(t){return e[t]}.bind(null,i));return a},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([,,,,function(e,t,n){"use strict";(function(t){var a="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},i=function(){var e=/\blang(?:uage)?-([\w-]+)\b/i,t=0,n=a.Prism={manual:a.Prism&&a.Prism.manual,disableWorkerMessageHandler:a.Prism&&a.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof i?new i(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(k instanceof l)){if(m&&v!=t.length-1){if(p.lastIndex=w,!(C=p.exec(e)))break;for(var S=C.index+(f?C[1].length:0),x=C.index+C[0].length,A=v,E=w,L=t.length;L>A&&(x>E||!t[A].type&&!t[A-1].greedy);++A)S>=(E+=t[A].length)&&(++v,w=E);if(t[v]instanceof l)continue;_=A-v,k=e.slice(w,E),C.index-=w}else{p.lastIndex=0;var C=p.exec(k),_=1}if(C){f&&(b=C[1]?C[1].length:0);x=(S=C.index+b)+(C=C[0].slice(b)).length;var T=k.slice(0,S),I=k.slice(x),R=[v,_];T&&(++v,w+=T.length,R.push(T));var P=new l(c,g?n.tokenize(C,g):C,h,C,m);if(R.push(P),I&&R.push(I),Array.prototype.splice.apply(t,R),1!=_&&n.matchGrammar(e,t,a,v,w,!0,c),o)break}else if(o)break}}}}},tokenize:function(e,t){var a=[e],i=t.rest;if(i){for(var r in i)t[r]=i[r];delete t.rest}return n.matchGrammar(e,a,t,0,0,!1),a},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var i,r=0;i=a[r++];)i(t)}}},i=n.Token=function(e,t,n,a,i){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!i};if(i.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return i.stringify(n,t,e)}).join("");var r={type:e.type,content:i.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var o="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(r.classes,o)}n.hooks.run("wrap",r);var s=Object.keys(r.attributes).map(function(e){return e+'="'+(r.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+r.tag+' class="'+r.classes.join(" ")+'"'+(s?" "+s:"")+">"+r.content+""+r.tag+">"},!a.document)return a.addEventListener?(n.disableWorkerMessageHandler||a.addEventListener("message",function(e){var t=JSON.parse(e.data),i=t.language,r=t.code,o=t.immediateClose;a.postMessage(n.highlight(r,n.languages[i],i)),o&&a.close()},!1),a.Prism):a.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,n.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),a.Prism}();void 0!==e&&e.exports&&(e.exports=i),void 0!==t&&(t.Prism=i),i.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/?[\da-z]{1,8};/i},i.languages.markup.tag.inside["attr-value"].inside.entity=i.languages.markup.entity,i.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),i.languages.xml=i.languages.markup,i.languages.html=i.languages.markup,i.languages.mathml=i.languages.markup,i.languages.svg=i.languages.markup,i.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?[\s\S]*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},i.languages.css.atrule.inside.rest=i.languages.css,i.languages.markup&&(i.languages.insertBefore("markup","tag",{style:{pattern:/(