Last active
August 29, 2015 14:22
-
-
Save shgysk8zer0/ba1b82709aec256a7af1 to your computer and use it in GitHub Desktop.
HTML Import Demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Auto detect text files and perform LF normalization | |
| * text=auto | |
| # Custom for Visual Studio | |
| *.cs diff=csharp | |
| # Standard to msysgit | |
| *.doc diff=astextplain | |
| *.DOC diff=astextplain | |
| *.docx diff=astextplain | |
| *.DOCX diff=astextplain | |
| *.dot diff=astextplain | |
| *.DOT diff=astextplain | |
| *.pdf diff=astextplain | |
| *.PDF diff=astextplain | |
| *.rtf diff=astextplain | |
| *.RTF diff=astextplain |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Ignore | |
| *.dav | |
| *.bak | |
| *.save | |
| *~ | |
| *.log | |
| *.orig | |
| Thumbs.db | |
| ################# | |
| ## Eclipse | |
| ################# | |
| *.pydevproject | |
| .project | |
| .metadata | |
| bin/ | |
| tmp/ | |
| *.tmp | |
| *.bak | |
| *.swp | |
| *~.nib | |
| local.properties | |
| .classpath | |
| .settings/ | |
| .loadpath | |
| # External tool builders | |
| .externalToolBuilders/ | |
| # Locally stored "Eclipse launch configurations" | |
| *.launch | |
| # CDT-specific | |
| .cproject | |
| # PDT-specific | |
| .buildpath | |
| ################# | |
| ## Visual Studio | |
| ################# | |
| ## Ignore Visual Studio temporary files, build results, and | |
| ## files generated by popular Visual Studio add-ons. | |
| # User-specific files | |
| *.suo | |
| *.user | |
| *.sln.docstates | |
| # Build results | |
| [Dd]ebug/ | |
| [Rr]elease/ | |
| x64/ | |
| build/ | |
| [Bb]in/ | |
| [Oo]bj/ | |
| # MSTest test Results | |
| [Tt]est[Rr]esult*/ | |
| [Bb]uild[Ll]og.* | |
| *_i.c | |
| *_p.c | |
| *.ilk | |
| *.meta | |
| *.obj | |
| *.pch | |
| *.pdb | |
| *.pgc | |
| *.pgd | |
| *.rsp | |
| *.sbr | |
| *.tlb | |
| *.tli | |
| *.tlh | |
| *.tmp | |
| *.tmp_proj | |
| *.log | |
| *.vspscc | |
| *.vssscc | |
| .builds | |
| *.pidb | |
| *.log | |
| *.scc | |
| # Visual C++ cache files | |
| ipch/ | |
| *.aps | |
| *.ncb | |
| *.opensdf | |
| *.sdf | |
| *.cachefile | |
| # Visual Studio profiler | |
| *.psess | |
| *.vsp | |
| *.vspx | |
| # Guidance Automation Toolkit | |
| *.gpState | |
| # ReSharper is a .NET coding add-in | |
| _ReSharper*/ | |
| *.[Rr]e[Ss]harper | |
| # TeamCity is a build add-in | |
| _TeamCity* | |
| # DotCover is a Code Coverage Tool | |
| *.dotCover | |
| # NCrunch | |
| *.ncrunch* | |
| .*crunch*.local.xml | |
| # Installshield output folder | |
| [Ee]xpress/ | |
| # DocProject is a documentation generator add-in | |
| DocProject/buildhelp/ | |
| DocProject/Help/*.HxT | |
| DocProject/Help/*.HxC | |
| DocProject/Help/*.hhc | |
| DocProject/Help/*.hhk | |
| DocProject/Help/*.hhp | |
| DocProject/Help/Html2 | |
| DocProject/Help/html | |
| # Click-Once directory | |
| publish/ | |
| # Publish Web Output | |
| *.Publish.xml | |
| *.pubxml | |
| *.publishproj | |
| # NuGet Packages Directory | |
| ## TODO: If you have NuGet Package Restore enabled, uncomment the next line | |
| #packages/ | |
| # Windows Azure Build Output | |
| csx | |
| *.build.csdef | |
| # Windows Store app package directory | |
| AppPackages/ | |
| # Others | |
| sql/ | |
| *.Cache | |
| ClientBin/ | |
| [Ss]tyle[Cc]op.* | |
| ~$* | |
| *~ | |
| *.dbmdl | |
| *.[Pp]ublish.xml | |
| *.pfx | |
| *.publishsettings | |
| # RIA/Silverlight projects | |
| Generated_Code/ | |
| # Backup & report files from converting an old project file to a newer | |
| # Visual Studio version. Backup files are not needed, because we have git ;-) | |
| _UpgradeReport_Files/ | |
| Backup*/ | |
| UpgradeLog*.XML | |
| UpgradeLog*.htm | |
| # SQL Server files | |
| App_Data/*.mdf | |
| App_Data/*.ldf | |
| ############# | |
| ## Windows detritus | |
| ############# | |
| # Windows image file caches | |
| Thumbs.db | |
| ehthumbs.db | |
| # Folder config file | |
| Desktop.ini | |
| # Recycle Bin used on file shares | |
| $RECYCLE.BIN/ | |
| # Mac crap | |
| .DS_Store | |
| ############# | |
| ## Python | |
| ############# | |
| *.py[cod] | |
| # Packages | |
| *.egg | |
| *.egg-info | |
| dist/ | |
| build/ | |
| eggs/ | |
| parts/ | |
| var/ | |
| sdist/ | |
| develop-eggs/ | |
| .installed.cfg | |
| # Installer logs | |
| pip-log.txt | |
| # Unit test / coverage reports | |
| .coverage | |
| .tox | |
| #Translations | |
| *.mo | |
| #Mr Developer | |
| .mr.developer.cfg |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Options -Indexes +SymLinksIfOwnerMatch | |
| DirectoryIndex index.html | |
| <IfModule headers_module> | |
| Header set X-Frame-Options "SAMEORIGIN" | |
| Header set X-Content-Type-Options nosniff | |
| Header set X-XSS-Protection "1; mode=block" | |
| Header set Cache-Control "public, must-revalidate, proxy-revalidate, no-transform" | |
| Header set X-UA-Compatible "IE=edge,chrome=1" | |
| Header set Connection "Keep-Alive" | |
| # `mod_headers` can't match based on the content-type, however, we only | |
| # want to send this header for HTML pages and not for the other resources | |
| <FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svg|svgz|ttf|vcf|webapp|webm|webp|woff2?|xml|xpi)$"> | |
| Header set Cache-Control "public, must-revalidate, proxy-revalidate, no-transform" | |
| Header unset X-Frame-Options | |
| Header unset X-XSS-Protection | |
| Header unset X-UA-Compatible | |
| </FilesMatch> | |
| <Files manifest.appcache> | |
| # Header set Cache-Control "public, no-store, must-revalidate, proxy-revalidate, no-transform" | |
| # Header set Cache-Control "public, no-cache, no-store, must-revalidate, proxy-revalidate, no-transform" | |
| Header unset Accept-Ranges | |
| </Files> | |
| <IfModule ssl_module> | |
| Header set Strict-Transport-Security max-age=16070400; | |
| </IfModule> | |
| <IfModule setenvif_module> | |
| <FilesMatch "\.(gif|ico|jpe?g|png|svgz?|webp)$"> | |
| SetEnvIf Origin ":" IS_CORS | |
| Header set Access-Control-Allow-Origin "*" env=IS_CORS | |
| </FilesMatch> | |
| </IfModule> | |
| </IfModule> | |
| # ------------------------------------------------------------------------------ | |
| # | UTF-8 encoding | | |
| # ------------------------------------------------------------------------------ | |
| # Use UTF-8 encoding for anything served as `text/html` or `text/plain`. | |
| AddDefaultCharset utf-8 | |
| # ------------------------------------------------------------------------------ | |
| # | Proper MIME types for all files | | |
| # ------------------------------------------------------------------------------ | |
| <IfModule mime_module> | |
| AddCharset utf-8 .atom .css .js .json .rss .vtt .webapp .xml | |
| # Audio | |
| AddType audio/mp4 .m4a .f4a .f4b | |
| AddType audio/ogg .oga .ogg | |
| # JavaScript | |
| # Normalize to standard type (it's sniffed in IE anyways): | |
| # http://tools.ietf.org/html/rfc4329#section-7.2 | |
| AddType application/javascript .js .jsonp | |
| AddType application/json .json | |
| # Video | |
| AddType video/mp4 .mp4 .m4v .f4v .f4p | |
| AddType video/ogg .ogv | |
| AddType video/webm .webm | |
| AddType video/x-flv .flv | |
| # Web fonts | |
| AddType application/font-woff .woff | |
| AddType application/font-woff2 .woff2 | |
| AddType application/vnd.ms-fontobject .eot | |
| # Browsers usually ignore the font MIME types and sniff the content, | |
| # however, Chrome shows a warning if other MIME types are used for the | |
| # following fonts. | |
| AddType application/x-font-ttf .ttc .ttf | |
| AddType font/opentype .otf | |
| # Make SVGZ fonts work on iPad: | |
| # https://twitter.com/FontSquirrel/status/14855840545 | |
| AddType image/svg+xml .svg .svgz | |
| AddEncoding gzip .svgz | |
| # Other | |
| AddType application/octet-stream .safariextz | |
| AddType application/x-chrome-extension .crx | |
| AddType application/x-opera-extension .oex | |
| AddType application/x-shockwave-flash .swf | |
| AddType application/x-web-app-manifest+json .webapp | |
| AddType application/x-xpinstall .xpi | |
| AddType application/xml .atom .rdf .rss .xml | |
| AddType text/x-markdown .md | |
| AddType image/webp .webp | |
| AddType image/x-icon .ico | |
| AddType text/cache-manifest .appcache .manifest | |
| AddType text/vtt .vtt | |
| AddType text/x-component .htc | |
| AddType text/x-vcard .vcf | |
| AddType application/pgp-keys .gpg .pgp | |
| </IfModule> | |
| # Block access to backup and source files. | |
| # These files may be left by some text editors and can pose a great security | |
| # danger when anyone has access to them. | |
| <FilesMatch "(^#.*|~.*|\.(bak|ht.*|dav|conf(ig)?|dist|fla|inc|ini|log|psd|sql|sw[op]|asc|(ba)?sh|md|yml|lock|log|git.*|gpg|pgp))$"> | |
| Require all denied | |
| </FilesMatch> | |
| <FilesMatch "^(ajax|custom|unit)\.php$"> | |
| Require all denied | |
| </FilesMatch> | |
| <FilesMatch "\.html$"> | |
| Require all granted | |
| </FilesMatch> | |
| <IfModule deflate_module> | |
| # Force compression for mangled headers. | |
| # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping | |
| <IfModule setenvif_module> | |
| <IfModule headers_module> | |
| SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding | |
| RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding | |
| </IfModule> | |
| </IfModule> | |
| # Compress all output labeled with one of the following MIME-types | |
| # (for Apache versions below 2.3.7, you don't need to enable `mod_filter` | |
| # and can remove the `<IfModule filter_module>` and `</IfModule>` lines | |
| # as `AddOutputFilterByType` is still in the core directives). | |
| <IfModule filter_module> | |
| AddOutputFilterByType DEFLATE application/atom+xml \ | |
| application/javascript \ | |
| application/json \ | |
| application/rss+xml \ | |
| application/vnd.ms-fontobject \ | |
| application/x-font-ttf \ | |
| application/x-web-app-manifest+json \ | |
| application/xhtml+xml \ | |
| application/xml \ | |
| font/opentype \ | |
| image/svg+xml \ | |
| image/x-icon \ | |
| text/css \ | |
| text/html \ | |
| text/plain \ | |
| text/x-component \ | |
| text/xml | |
| </IfModule> | |
| </IfModule> | |
| # ------------------------------------------------------------------------------ | |
| # | Content transformations | | |
| # ------------------------------------------------------------------------------ | |
| # Prevent some of the mobile network providers from modifying the content of | |
| # your site: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9.5. | |
| # ------------------------------------------------------------------------------ | |
| # | ETag removal | | |
| # ------------------------------------------------------------------------------ | |
| # Since we're sending far-future expires headers (see below), ETags can | |
| # be removed: http://developer.yahoo.com/performance/rules.html#etags. | |
| # `FileETag None` is not enough for every server. | |
| # <IfModule headers_module> | |
| # Header unset ETag | |
| # </IfModule> | |
| # | |
| # FileETag None | |
| # ------------------------------------------------------------------------------ | |
| # | Expires headers (for better cache control) | | |
| # ------------------------------------------------------------------------------ | |
| # The following expires headers are set pretty far in the future. If you don't | |
| # control versioning with filename-based cache busting, consider lowering the | |
| # cache time for resources like CSS and JS to something like 1 week. | |
| # The following expires headers are set pretty far in the future. If you don't | |
| # control versioning with filename-based cache busting, consider lowering the | |
| # cache time for resources like CSS and JS to something like 1 week. | |
| <IfModule expires_module> | |
| ExpiresActive on | |
| ExpiresDefault "access plus 1 month" | |
| # CSS | |
| ExpiresByType text/css "access plus 1 year" | |
| # Data interchange | |
| ExpiresByType application/json "access plus 0 seconds" | |
| ExpiresByType application/xml "access plus 0 seconds" | |
| ExpiresByType text/xml "access plus 0 seconds" | |
| # Favicon (cannot be renamed!) | |
| ExpiresByType image/x-icon "access plus 1 week" | |
| # HTML components (HTCs) | |
| ExpiresByType text/x-component "access plus 1 month" | |
| # HTML | |
| ExpiresByType text/html "access plus 0 seconds" | |
| # JavaScript | |
| ExpiresByType application/javascript "access plus 1 year" | |
| # Manifest files | |
| ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" | |
| ExpiresByType text/cache-manifest "access plus 0 seconds" | |
| # Media | |
| ExpiresByType audio/ogg "access plus 1 month" | |
| ExpiresByType image/gif "access plus 1 month" | |
| ExpiresByType image/jpeg "access plus 1 month" | |
| ExpiresByType image/png "access plus 1 month" | |
| ExpiresByType video/mp4 "access plus 1 month" | |
| ExpiresByType video/ogg "access plus 1 month" | |
| ExpiresByType video/webm "access plus 1 month" | |
| # Web feeds | |
| ExpiresByType application/atom+xml "access plus 1 hour" | |
| ExpiresByType application/rss+xml "access plus 1 hour" | |
| # Web fonts | |
| ExpiresByType application/font-woff "access plus 1 month" | |
| ExpiresByType application/vnd.ms-fontobject "access plus 1 month" | |
| ExpiresByType application/x-font-ttf "access plus 1 month" | |
| ExpiresByType font/opentype "access plus 1 month" | |
| ExpiresByType image/svg+xml "access plus 1 month" | |
| </IfModule> | |
| # ------------------------------------------------------------------------------ | |
| # | Filename-based cache busting | | |
| # ------------------------------------------------------------------------------ | |
| # If you're not using a build process to manage your filename version revving, | |
| # you might want to consider enabling the following directives to route all | |
| # requests such as `/css/style.12345.css` to `/css/style.css`. | |
| # To understand why this is important and a better idea than `*.css?v231`, read: | |
| # http://stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring | |
| # ------------------------------------------------------------------------------ | |
| # | File concatenation | | |
| # ------------------------------------------------------------------------------ | |
| # Allow concatenation from within specific CSS and JS files, e.g.: | |
| # Inside of `script.combined.js` you could have | |
| # <!--#include file="libs/jquery.js" --> | |
| # <!--#include file="plugins/jquery.idletimer.js" --> | |
| # and they would be included into this single file. | |
| # <IfModule include_module> | |
| # <FilesMatch "\.?(combined|polyfills)\.js$"> | |
| # Options +Includes | |
| # AddOutputFilterByType INCLUDES application/javascript application/json | |
| # SetOutputFilter INCLUDES | |
| # </FilesMatch> | |
| # </IfModule> | |
| <IfModule rewrite_module> | |
| # Redirect all non-existing to index.php | |
| RewriteEngine on | |
| <IfModule ssl_module> | |
| # Force HTTPS | |
| RewriteCond %{HTTPS} !=on | |
| RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L] | |
| </IfModule> | |
| RewriteCond %{REQUEST_FILENAME} !-f | |
| RewriteCond %{REQUEST_FILENAME} !-d | |
| RewriteCond %{REQUEST_FILENAME} !-l | |
| RewriteRule . ./index.php [L] | |
| </IfModule> | |
| # ------------------------------------------------------------------------------ | |
| # | Error pages | | |
| # ------------------------------------------------------------------------------ | |
| ErrorDocument 400 /index.php | |
| ErrorDocument 401 /index.php | |
| ErrorDocument 402 /index.php | |
| ErrorDocument 403 /index.php | |
| ErrorDocument 404 /index.php | |
| ErrorDocument 500 /index.php |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if (('applicationCache' in window) && document.documentElement.hasAttribute('manifest')) { | |
| applicationCache.addEventListener('updateready', function(event) { | |
| if (applicationCache.status === applicationCache.UPDATEREADY) { | |
| applicationCache.update() && applicationCache.swapCache(); | |
| if (confirm('A new version of this site is available. Load it?')) { | |
| location.reload(); | |
| } | |
| } | |
| }); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .links { | |
| font-size: 2em; | |
| } | |
| .icon { | |
| height: 1em; | |
| width: 1em; | |
| } | |
| .icon > use { | |
| fill: currentColor; | |
| } | |
| .flex { | |
| display: flex; | |
| } | |
| .flex.row { | |
| flex-direction: row; | |
| } | |
| .flex.column { | |
| flex-direction: column; | |
| } | |
| .flex.wrap { | |
| flex-wrap: wrap; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M608 192l-96 96 224 224L512 736l96 96 288-320L608 192zM288 192L0 512l288 320 96-96L160 512l224-224L288 192z" /> | |
| </svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @supports(filter: none) { | |
| [data-filter="blur"] {filter: blur(50%);} | |
| [data-filter="brightness"] {filter: brightness(50%);} | |
| [data-filter="contrast"] {filter: contrast(50%);} | |
| [data-filter="drop-shadow"] {filter: drop-shadow(.5em .5em 1em #222);} | |
| [data-filter="grayscale"] {filter: grayscale(50%);} | |
| [data-filter="invert"] {filter: invert(50%);} | |
| [data-filter="opacity"] {filter: opacity(50%);} | |
| [data-filter="sepia"] {filter: sepia(50%);} | |
| [data-filter="saturate"] {filter: saturate(50%);} | |
| [data-hover-filter="blur"]:hover {filter: blur(50%);} | |
| [data-hover-filter="brightness"]:hover {filter: brightness(50%);} | |
| [data-hover-filter="contrast"]:hover {filter: contrast(50%);} | |
| [data-hover-filter="drop-shadow"]:hover {filter: drop-shadow(.5em .5em 1em #222);} | |
| [data-hover-filter="grayscale"]:hover {filter: grayscale(50%);} | |
| [data-hover-filter="invert"]:hover {filter: invert(50%);} | |
| [data-hover-filter="opacity"]:hover {filter: opacity(50%);} | |
| [data-hover-filter="sepia"]:hover {filter: sepia(50%);} | |
| [data-hover-filter="saturate"]:hover {filter: saturate(50%);} | |
| [data-hover-filter] {transition: filter 800ms;} | |
| } | |
| /** | |
| blur() | |
| brightness() | |
| contrast() | |
| drop-shadow() | |
| grayscale() | |
| hue-rotate() | |
| invert() | |
| opacity() | |
| saturate() | |
| sepia() | |
| */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <datalist id="search_suggestions"> | |
| <option value="Red"></option> | |
| <option value="Green"></option> | |
| <option value="Blue"></option> | |
| <option value="Yellow"></option> | |
| <option value="Wait... I'm not a color!"></option> | |
| </datalist> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .no-details details[open] > summary::before { | |
| font-family: var(--icon-font); | |
| content: var(--dropdown-open-icon); | |
| } | |
| .no-details details:not([open]) > summary::before { | |
| font-family: var(--icon-font); | |
| content: var(--dropdown-closed-icon); | |
| } | |
| .no-details details:not([open]) > :not(summary) { | |
| display: none; | |
| } | |
| details > summary:only-child, | |
| details > summary:only-child::before, | |
| details > summary:only-child::after | |
| { | |
| display: none; | |
| } | |
| details > summary { | |
| cursor: var(--pointer); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .no-js dialog { | |
| display: none; | |
| } | |
| dialog { | |
| border: 0.4rem outset var(--primary-color); | |
| border-radius: 1rem; | |
| box-shadow: 1rem 1rem 1rem black; | |
| } | |
| .no-dialog dialog { | |
| z-index: 9; | |
| } | |
| dialog.modal { | |
| position: fixed; | |
| top: 10vh; | |
| max-height: 85vh; | |
| max-width: 100vw; | |
| overflow: auto; | |
| } | |
| dialog.modal + .backdrop { | |
| background-color: rgb(0, 0, 0); | |
| background-color: rgba(0, 0, 0, 0.7); | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| z-index: 8; | |
| } | |
| dialog[open]::backdrop { | |
| background-color: rgba(0, 0, 0, 0.7); | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if (! ('forEach' in NodeList.prototype)) { | |
| NodeList.prototype.forEach = Array.prototype.forEach; | |
| } | |
| if (! ('filter' in NodeList.prototype)) { | |
| NodeList.prototype.filter = Array.prototype.filter; | |
| } | |
| if (! ('map' in NodeList.prototype)) { | |
| NodeList.prototype.map = Array.prototype.map; | |
| } | |
| if (! ('import' in HTMLLinkElement.prototype)) { | |
| var script = document.createElement('script'); | |
| script.async = true; | |
| script.src = "htmlimport.js"; | |
| document.head.appendChild(script); | |
| if ('contextMenu' in HTMLElement.prototype) { | |
| } | |
| (function(head) { | |
| var script = document.createElement('script'); | |
| var link = document.createElement('link'); | |
| script.src = 'wysiwyg.js'; | |
| script.async = true; | |
| script.type = 'application/javascript'; | |
| link.href = 'menu.html'; | |
| link.rel = 'import'; | |
| link.dataset.target = 'body'; | |
| head.appendChild(script); | |
| head.appendChild(link); | |
| })(document.head); | |
| } | |
| window.addEventListener('load', function() { | |
| document.head.querySelectorAll('link[rel="import"][data-target]').map(function(link) { | |
| link.importHTML(link.dataset.target); | |
| }); | |
| document.querySelectorAll('[data-import]').map(importContent); | |
| if ('contextMenu' in HTMLElement.prototype) { | |
| document.querySelectorAll('[contenteditable]').map(function(el) { | |
| el.setAttribute('contextmenu', 'wysiwyg_menu'); | |
| }); | |
| } | |
| document.querySelectorAll('menu[type="context"]').map(WYSIWYG); | |
| }); | |
| function nodeIsElement(node) { | |
| return node.nodeType === 1; | |
| } | |
| /*function importLink(link) { | |
| var target = document.querySelector(link.dataset.target); | |
| link.import.body.childNodes.filter(nodeIsElement).map(function(node) { | |
| target.appendChild(node); | |
| }); | |
| link.importHTML(link.dataset.target); | |
| return link; | |
| }*/ | |
| function importContent(container) { | |
| var link = document.head.querySelector('link[name="' + container.dataset.import + '"]'); | |
| link.import.body.childNodes.filter(nodeIsElement).map(function(node) { | |
| container.appendChild(node); | |
| }); | |
| return container; | |
| } | |
| HTMLLinkElement.prototype.importHTML = function(node) { | |
| if (typeof node === 'string') { | |
| node = document.querySelector(node); | |
| } | |
| this.import.body.childNodes.filter(nodeIsElement).map(function(importedNode) { | |
| node.appendChild(importedNode); | |
| }) | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header role="heading"> | |
| <h1> | |
| <a href="./" rel="bookmark"> | |
| <svg class="icon"><use xlink:href="combined.svg#home"/></svg> | |
| <span>HTML Import Test</span> | |
| </a> | |
| </h1> | |
| <nav role="navigation" data-import="Navigation" class="flex"></nav> | |
| <div data-import="Search"></div> | |
| <div data-import="Search Suggestions" hidden></div> | |
| </header> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if (! ('import' in HTMLLinkElement.prototype)) { | |
| Object.defineProperty(HTMLLinkElement.prototype, 'import', { | |
| get: function() { | |
| var xhr = new XMLHttpRequest(); | |
| xhr.open('GET', this.href, false); | |
| xhr.send(); | |
| return new DOMParser().parseFromString(xhr.response, "text/html"); | |
| } | |
| }); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset 'UTF-8'; | |
| @import url(normalize.css); | |
| @import url(https://fonts.googleapis.com/css?family=Acme|Alice|Ubuntu|Roboto|Press+Start+2P|Open+Sans); | |
| @import url(details.css); | |
| @import url(dialog.css); | |
| @import url(style.css); | |
| @import url(sidebar.css); | |
| @import url(classes.css); | |
| @import url(data-filter.css); | |
| @import url(responsive.css); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" dir="ltr" manifest="manifest.appcache?nocache=true" itemscope itemtype="http://schema.org/WebPage"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="referrer" content="origin"/> | |
| <meta name="author" content="Chris Zuber"/> | |
| <meta name="viewport" content="width=device-width, height=device-height"/> | |
| <title>HTML Import Demo</title> | |
| <link rel="stylesheet" type="text/css" href="import.css" media="all"> | |
| <link rel="prefetch" type="image/svg+xml" href="combined.svg"> | |
| <link rel="import" type="text/html" href="nav.html" name="Navigation"> | |
| <link rel="import" type="text/html" href="license.html" name="Creative Commons"> | |
| <link rel="import" type="text/html" href="search.html" name="Search"> | |
| <link rel="import" type="text/html" href="datalist.html" name="Search Suggestions"> | |
| <link rel="import" type="text/html" href="header.html" data-target="body"> | |
| <link rel="import" type="text/html" href="sidebar.html" data-target="body"> | |
| <link rel="import" type="text/html" href="main.html" data-target="body"> | |
| <link rel="import" type="text/html" href="footer.html" data-target="body"> | |
| <link rel="icon" type="image/xvg+xml" href="code.svg" sizes="any"> | |
| <link rel="icon" type="image/png" href="icon-16.png" sizes="16x16"> | |
| <link rel="icon" type="image/png" href="icon-48.png" sizes="48x48"> | |
| <link rel="icon" type="image/png" href="icon-60.png" sizes="60x60"> | |
| <link rel="icon" type="image/png" href="icon-128.png" sizes="128x128"> | |
| <link rel="icon" type="image/png" href="icon-256.png" sizes="256x256"> | |
| <link rel="icon" type="image/png" href="icon-512.png" sizes="512x512"> | |
| <script type="application/javascript" src="functions.js"></script> | |
| <script type="application/javascript" src="appcache.js" async=""></script> | |
| </head> | |
| <body class="flex wrap"></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><svg width="88" height="31"><use xlink:href="combined.svg#CreativeCommons"/></svg></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">HTML Import Demo</span> by <a xmlns:cc="http://creativecommons.org/ns#" itemprop="author" href="https://gist.github.com/shgysk8zer0/ba1b82709aec256a7af1" property="cc:attributionName" rel="cc:attributionURL">shgysk8zer0</a> is licensed under a <a rel="license" itemprop="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>. | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <main role="main" itemcope="" itemtype="http://schema.org/WebPageElement" itemprop="mainContentofPage"> | |
| <article role="article"> | |
| <header> | |
| <h2 itemprop="headline">Lorem Ipsum</h2> | |
| </header> | |
| <section id="section-1" contenteditable="true" itemprop="text"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan ullamcorper nunc in efficitur. Maecenas ornare turpis sed turpis tempor suscipit. Nam imperdiet mauris eu dapibus venenatis. Cras elementum dolor quis metus posuere, a pharetra urna vehicula. Nulla elit enim, mattis et varius at, vestibulum dictum nisl. In mauris mi, ultricies at mauris at, sodales consequat ex. Maecenas vel ex nibh. Nullam eu mi risus.</p> | |
| <svg data-filter="drop-shadow"><use xlink:href="combined.svg#git"/></svg> | |
| <br> | |
| <p>Pellentesque blandit et velit non sagittis. Quisque finibus pulvinar nisi, vel vulputate orci molestie quis. Mauris vel metus tempus, malesuada metus ac, laoreet sem. Sed non urna ut lacus varius ultrices. Pellentesque vel dignissim massa, vitae placerat magna. Donec ac dolor pharetra, blandit sem eget, gravida lorem. Quisque tincidunt nisi non ultricies varius.</p> | |
| </section> | |
| <footer>© 2015</footer> | |
| </article> | |
| </main> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| CACHE MANIFEST | |
| # VERSION 2015-06-03 01:26 | |
| CACHE: | |
| # SCRIPTS | |
| appcache.js | |
| functions.js | |
| wysiwyg.js | |
| htmlimport.js | |
| # STYLESHEETS | |
| classes.css | |
| data-filter.css | |
| details.css | |
| dialog.css | |
| import.css | |
| misc.css | |
| normalize.css | |
| responsive.css | |
| sidebar.css | |
| style.css | |
| https://fonts.googleapis.com/css?family=Acme|Alice|Ubuntu|Roboto|Press+Start+2P|Open+Sans | |
| # IMAGES | |
| combined.svg | |
| # ICONS | |
| icon-16.png | |
| icon-48.png | |
| icon-60.png | |
| icon-128.png | |
| icon-256.png | |
| icon-512.png | |
| code.svg | |
| # CURSORS | |
| # HTML IMPORTS | |
| datalist.html | |
| footer.html | |
| header.html | |
| license.html | |
| main.html | |
| menu.html | |
| nav.html | |
| search.html | |
| sidebar.html | |
| # FONTS | |
| https://fonts.gstatic.com/s/acme/v5/CMfjQTCaAjBuWy3e4bQMZA.woff2 | |
| https://fonts.gstatic.com/s/acme/v5/-nVwQJDyFoBcrvpER8f-lA.woff | |
| https://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.woff2 | |
| https://fonts.gstatic.com/s/alice/v7/_H4kMcdhHr0B8RDaQcqpTA.woff | |
| https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2 | |
| https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff | |
| https://fonts.gstatic.com/s/pressstart2p/v4/8Lg6LX8-ntOHUQnvQ0E7o08SWvhA5BcWCS8xVZDIH7E.woff2 | |
| https://fonts.gstatic.com/s/pressstart2p/v4/8Lg6LX8-ntOHUQnvQ0E7o3dD2UuwsmbX3BOp4SL_VwM.woff | |
| https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2 | |
| https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff | |
| https://fonts.gstatic.com/s/ubuntu/v7/sDGTilo5QRsfWu6Yc11AXg.woff2 | |
| https://fonts.gstatic.com/s/ubuntu/v7/_xyN3apAT_yRRDeqB3sPRg.woff | |
| NETWORK: | |
| FALLBACK: | |
| SETTINGS: | |
| fast |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "version": "0.0.1", | |
| "name": "HTML Import Demo", | |
| "description": "A demo showing some advanced HTML features, such as HTML Imports.", | |
| "launch_path": "/", | |
| "icons": { | |
| "16": "icon-16.png", | |
| "48": "icon-48.png", | |
| "60": "icon-60.png", | |
| "128": "icon-128.png", | |
| "256": "icon-256.png", | |
| "512": "icon-512.png" | |
| }, | |
| "developer": { | |
| "name": "Chris Zuber", | |
| "url": "https://chriszuber.com" | |
| }, | |
| "type": "web", | |
| "permissions": { | |
| "desktop-notification": { | |
| "description": "Allow notifications of certain events. I.E. Login/out" | |
| } | |
| }, | |
| "installs_allowed_from": ["*"], | |
| "csp": "default-src 'self';script-src 'self' ;style-src 'self' //fonts.googleapis.com;font-src 'self' //fonts.gstatic.com;img-src 'self' data:;media-src 'self' mediastream:;connect-src 'self';frame-src 'self';frame-ancestors 'self';object-src 'self'" | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ::-moz-selection { | |
| background-color: var(--primary-color); | |
| text-shadow: none; | |
| } | |
| ::selection { | |
| background-color: var(--primary-color); | |
| text-shadow: none; | |
| } | |
| a[target="_blank"]::after { | |
| content: var(--new-tab-icon); | |
| } | |
| [download]::after { | |
| content: var(--download-icon); | |
| } | |
| button, | |
| [role=button] | |
| { | |
| min-width: 2rem; | |
| padding: 0.2rem; | |
| background-color: var(--primary-color); | |
| background-image: url('../../images/gradients/header_links.png'); | |
| background-image: linear-gradient(var(--primary-color), var(--highlight-color)); | |
| font-family: inherit; | |
| color: var(--default-color); | |
| border: 0.2rem outset var(--primary-color); | |
| } | |
| button:disabled, | |
| button:active | |
| { | |
| background-color: var(--highlight-color); | |
| background-image: linear-gradient(var(--highlight-color), var(--primary-color)); | |
| border: 0.2rem inset var(--primary-color); | |
| box-shadow: 0 0 0.3rem var(--shadow) inset; | |
| cursor: not-allowed; | |
| } | |
| a, | |
| [download] | |
| { | |
| font-family: inherit; | |
| color: var(--link-color); | |
| text-decoration: none; | |
| } | |
| a::after { | |
| font-family: var(--icon-font); | |
| } | |
| menu[type=list] li { | |
| display: inline; | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| figure { | |
| border: 0.1em solid dimgray; | |
| text-align: center; | |
| } | |
| figure figcaption { | |
| color: dimgray; | |
| text-decoration: underline; | |
| font-style: italic; | |
| } | |
| blockquote { | |
| color: #777; | |
| font-family: 'Libertine'; | |
| font-style: italic; | |
| padding: 0px 15px; | |
| border-left: 4px solid #DDD; | |
| } | |
| blockquote cite { | |
| display: block; | |
| } | |
| blockquote cite::before { | |
| content: ' — '; | |
| } | |
| a, | |
| button:not(:disabled), | |
| [role=button], | |
| input[type=submit], | |
| input[type=reset], | |
| input[type=image], | |
| [data-show], | |
| [data-show-modal], | |
| [data-close], | |
| [data-delete] | |
| { | |
| cursor: var(--pointer); | |
| } | |
| [data-icon]::after { | |
| display: inline; | |
| font-family: var(--icon-font); | |
| font-size: inherit; | |
| font-size-adjust: none; | |
| font-stretch: none; | |
| content: ' 'attr(data-icon)' '; | |
| vertical-align: baseline; | |
| } | |
| [data-close]::after, | |
| [data-delete]::after | |
| { | |
| font-family: var(--icon-font); | |
| content: var(--close-icon); | |
| } | |
| code { | |
| font-size: 0.9rem; | |
| padding: 0.1rem; | |
| background-color: hsl(0, 0%, 93%); | |
| border-radius: 0.2rem; | |
| display: inline-block; | |
| white-space: pre; | |
| } | |
| pre > code { | |
| display: block; | |
| padding: 1rem; | |
| background-color: rgb(51, 51, 51); | |
| color: rgb(255, 249, 217); | |
| border-radius: 0.3rem; | |
| overflow-x: auto; | |
| } | |
| [contenteditable=true]:empty { | |
| min-height: 1.3rem; | |
| border: 1px dotted dimgray; | |
| } | |
| ol > ol { | |
| list-style-type: upper-alpha; | |
| } | |
| ol > ol > ol { | |
| list-style-type: upper-roman; | |
| } | |
| ol > ol > ol > ol { | |
| list-style-type: lower-alpha; | |
| } | |
| ol > ol > ol > ol > ol { | |
| list-style-type: lower-roman; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! normalize.css v1.1.2 | MIT License | git.io/normalize */ | |
| @-moz-viewport{ | |
| width:auto; | |
| width:100%; | |
| width:device-width; | |
| height:auto; | |
| height:100%; | |
| height:device-height; | |
| zoom:1; | |
| min-zoom:1; | |
| max-zoom:1; | |
| user-zoom:fixed; | |
| } | |
| @-webkit-viewport{ | |
| width:auto; | |
| width:100%; | |
| width:device-width; | |
| height:auto; | |
| height:100%; | |
| height:device-height; | |
| zoom:1; | |
| min-zoom:1; | |
| max-zoom:1; | |
| user-zoom:fixed; | |
| } | |
| @-o-viewport{ | |
| width:auto; | |
| width:100%; | |
| width:device-width; | |
| height:auto; | |
| height:100%; | |
| height:device-height; | |
| zoom:1; | |
| min-zoom:1; | |
| max-zoom:1; | |
| user-zoom:fixed; | |
| } | |
| @-ms-viewport{ | |
| width:auto; | |
| width:100%; | |
| width:device-width; | |
| height:auto; | |
| height:100%; | |
| height:device-height; | |
| zoom:1; | |
| min-zoom:1; | |
| max-zoom:1; | |
| user-zoom:fixed; | |
| } | |
| @viewport{ | |
| width:auto; | |
| width:100%; | |
| width:device-width; | |
| height:auto; | |
| height:100%; | |
| height:device-height; | |
| zoom:1; | |
| min-zoom:1; | |
| max-zoom:1; | |
| user-zoom:fixed; | |
| } | |
| body{ | |
| min-height:100%; | |
| min-height:100vh; | |
| } | |
| *, *::after, *::before, *:after, *:before{ | |
| margin:0; | |
| padding:0; | |
| box-sizing:border-box; | |
| -webkit-animation-fill-mode:forwards; | |
| animation-fill-mode:forwards; | |
| max-width: 100%; | |
| } | |
| article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary,picture{ | |
| display:block; | |
| } | |
| audio,canvas,video{ | |
| display:inline-block; | |
| *display:inline; | |
| *zoom:1; | |
| } | |
| audio:not([controls]){ | |
| display:none; | |
| height:0; | |
| } | |
| [hidden], menu[type=context], datalist{ | |
| display:none; | |
| } | |
| html{ | |
| -ms-text-size-adjust:100%; | |
| -webkit-text-size-adjust:100%; | |
| } | |
| body{ | |
| margin:0; | |
| } | |
| a:focus{ | |
| outline:thin dotted; | |
| } | |
| a:active,a:hover{ | |
| outline:0; | |
| } | |
| abbr[title]{ | |
| border-bottom:1px dotted; | |
| } | |
| b,strong{ | |
| font-weight:bold; | |
| } | |
| blockquote{ | |
| margin:1em 40px; | |
| } | |
| dfn{ | |
| font-style:italic; | |
| } | |
| hr{ | |
| -moz-box-sizing:content-box; | |
| box-sizing:content-box; | |
| height:0; | |
| } | |
| mark{ | |
| background:#ff0; | |
| color:#000; | |
| } | |
| p,pre{ | |
| margin:1em 0; | |
| } | |
| code,kbd,pre,samp{ | |
| font-family:monospace,serif; | |
| _font-family:'courier new',monospace; | |
| font-size:1em; | |
| } | |
| pre{ | |
| white-space:pre; | |
| white-space:pre-wrap; | |
| word-wrap:break-word; | |
| } | |
| small{ | |
| font-size:80%; | |
| } | |
| sub,sup{ | |
| font-size:75%; | |
| line-height:0; | |
| position:relative; | |
| vertical-align:baseline; | |
| } | |
| sup{ | |
| top:-0.5em; | |
| } | |
| sub{ | |
| bottom:-0.25em; | |
| } | |
| dl,ol,ul{ | |
| margin:1em 0; | |
| } | |
| dd{ | |
| margin:0 0 0 40px; | |
| } | |
| menu,ol,ul{ | |
| padding:0 0 0 40px; | |
| } | |
| nav ul,nav ol{ | |
| list-style:none; | |
| list-style-image:none; | |
| } | |
| menu[type=list]{ | |
| list-style:none; | |
| } | |
| img{ | |
| border:0; | |
| -ms-interpolation-mode:bicubic; | |
| } | |
| svg:not(:root){ | |
| overflow:hidden; | |
| } | |
| figure{ | |
| margin:0; | |
| } | |
| form{ | |
| margin:0; | |
| } | |
| fieldset{ | |
| border:1px solid silver; | |
| margin:0 2px; | |
| padding:.35em .625em .75em; | |
| } | |
| legend{ | |
| border:0; | |
| padding:0; | |
| white-space:normal; | |
| *margin-left:-7px; | |
| } | |
| button,input,select,textarea{ | |
| font-size:100%; | |
| margin:0; | |
| vertical-align:baseline; | |
| *vertical-align:middle; | |
| } | |
| button,input{ | |
| line-height:normal; | |
| } | |
| button,select{ | |
| text-transform:none; | |
| } | |
| button,html input[type="button"],input[type="reset"],input[type="submit"]{ | |
| -webkit-appearance:button; | |
| *overflow:visible; | |
| } | |
| button[disabled],html input[disabled]{ | |
| cursor:default; | |
| } | |
| input[type="checkbox"],input[type="radio"]{ | |
| padding:0; | |
| *height:13px; | |
| *width:13px; | |
| } | |
| input[type="search"]{ | |
| -webkit-appearance:textfield; | |
| } | |
| input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{ | |
| -webkit-appearance:none; | |
| } | |
| button::-moz-focus-inner,input::-moz-focus-inner{ | |
| border:0; | |
| padding:0; | |
| } | |
| dialog:not([open]){ | |
| display:none; | |
| } | |
| dialog { | |
| position: absolute; | |
| left: 0px; | |
| right: 0px; | |
| width: -moz-fit-content; | |
| width: -webkit-fit-content; | |
| width: fit-content; | |
| height: -moz-fit-content; | |
| height: -webkit-fit-content; | |
| height: -fit-content; | |
| margin: auto; | |
| border: solid; | |
| border-image-source: initial; | |
| border-image-slice: initial; | |
| border-image-width: initial; | |
| border-image-outset: initial; | |
| border-image-repeat: initial; | |
| padding: 1em; | |
| background: white; | |
| color: black; | |
| } | |
| textarea{ | |
| overflow:auto; | |
| vertical-align:top; | |
| } | |
| table{ | |
| border-collapse:collapse; | |
| border-spacing:0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media screen and (min-width:1000px) { | |
| :root{ | |
| font-size:1.3vw; | |
| } | |
| } | |
| @media screen and (max-width:999px) and (min-width:500px) { | |
| :root{ | |
| font-size:2vw; | |
| } | |
| } | |
| @media screen and (max-width: 499px) { | |
| :root{ | |
| font-size:3vw; | |
| } | |
| } | |
| @media (max-width: 800px) { | |
| aside { | |
| flex: 0 0 100%; | |
| order: 2; | |
| transform: none; | |
| } | |
| main { | |
| flex: 0 0 100%; | |
| order: 1; | |
| } | |
| article header { | |
| position: static; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <form name="search" role="search"> | |
| <fieldset form="search"> | |
| <label for="search_terms"> | |
| <svg class="icon"><use xlink:href="combined.svg#search"/></svg> | |
| </label> | |
| <input name="search[terms]" id="search_terms" type="search" placeholder="Enter Search Terms" list="search_suggestions" required> | |
| <button type="submit" hidden> | |
| <svg class="icon"><use xlink:href="combined.svg#search"/></svg> | |
| </button> | |
| </fieldset> | |
| </form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| min-height: 100vh; | |
| } | |
| * { | |
| box-sizing: inherit; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: Ubuntu; | |
| box-sizing: border-box; | |
| overflow-y: auto; | |
| background-color: #222; | |
| color: #ddd; | |
| min-height: 100vh; | |
| justify-content: space-between; | |
| } | |
| body > header { | |
| flex: 0 0 100vw; | |
| order: 0; | |
| align-self: flex-start; | |
| text-align: center; | |
| } | |
| header nav { | |
| justify-content: space-around; | |
| } | |
| article header { | |
| position: sticky; | |
| top: 0; | |
| } | |
| h1, h2 { | |
| font-family: Acme; | |
| } | |
| a { | |
| text-decoration: none; | |
| transition: color 800ms; | |
| } | |
| a:not(:hover) { | |
| color: inherit; | |
| } | |
| label { | |
| cursor: pointer; | |
| } | |
| main { | |
| flex: 0 0 80%; | |
| order: 2; | |
| align-self: center; | |
| padding: 3em; | |
| background-color: whitesmoke; | |
| color: #333; | |
| border: 3px outset silver; | |
| border-radius: 1em; | |
| } | |
| article > :not(header) { | |
| font-family: Roboto; | |
| } | |
| footer { | |
| flex: 0 0 100%; | |
| order: 3; | |
| align-self: flex-end; | |
| text-align: center; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function WYSIWYG(menu) | |
| { | |
| menu.querySelectorAll('menuitem[data-editor-command]').forEach(function(item) | |
| { | |
| item.addEventListener('click', function() | |
| { | |
| var arg = null; | |
| if (this.dataset.hasOwnProperty('editorValue')) { | |
| arg = this.dataset.editorValue; | |
| } else if (this.dataset.hasOwnProperty('prompt')) { | |
| arg = prompt(this.dataset.prompt.toString()); | |
| } else if (this.dataset.hasOwnProperty('selectionTo')) { | |
| var createdEl = document.createElement(this.dataset.selectionTo); | |
| createdEl.textContent = getSelection().toString(); | |
| arg = createdEl.outerHTML; | |
| } | |
| document.execCommand(this.dataset.editorCommand, null, arg); | |
| }); | |
| }); | |
| menu.querySelectorAll('menuitem[label="Add Class"]').forEach(function(menuitem) { | |
| menuitem.addEventListener('click', function() { | |
| var addClass = prompt('Enter class name to add'); | |
| if (addClass.length !== 0) { | |
| getSelection().anchorNode.parentElement.classList.add(addClass); | |
| } | |
| }); | |
| }); | |
| menu.querySelectorAll('menuitem[label="Remove Class"]').forEach(function(menuitem) { | |
| menuitem.addEventListener('click', function() { | |
| var removeClass = prompt('Enter class name to remove'); | |
| if (removeClass.length !== 0) { | |
| var el = getSelection().anchorNode.parentElement; | |
| el.classList.remove(removeClass); | |
| if (el.classList.length === 0) { | |
| el.removeAttribute('class'); | |
| } | |
| } | |
| }); | |
| }); | |
| menu.querySelectorAll('menuitem[label="Set Attribute"]').forEach(function(menuitem) { | |
| menuitem.addEventListener('click', function() { | |
| var name = prompt('Enter attribute name'); | |
| if (name.length !== 0) { | |
| var value = prompt('Enter attribute value'); | |
| getSelection().anchorNode.parentElement.setAttribute(name, value.toString()); | |
| } | |
| }) | |
| }); | |
| menu.querySelectorAll('menuitem[label="Remove Attribute"]').forEach(function(menuitem) { | |
| menuitem.addEventListener('click', function() { | |
| var attr = prompt('Enter name of attribute to remove'); | |
| if (attr.length !== 0) { | |
| getSelection().anchorNode.parentElement.removeAttribute(attr); | |
| } | |
| }); | |
| }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment