ie11 support, grid bug fix

This commit is contained in:
zzossig 2020-01-23 22:00:38 +09:00
parent 45fbc4c86d
commit 541bbd576d
17 changed files with 281 additions and 69 deletions

View File

@ -121,6 +121,7 @@ dfn {
figcaption {
font-style: italic;
font-size: 0.9rem;
margin-top: 0.5rem;
margin-bottom: 1rem;
@include themify($themes) {
color: themed("figcaption-color");

View File

@ -5,11 +5,13 @@
@include flex-direction(column);
width: 100%;
max-width: 928px;
font-family: $title-font;
&__photo {
border-radius: 0.25rem;
width: 100%;
max-width: 250px;
height: auto;
@include box-shadow(0, 2px, 4px, 0, rgba(0, 0, 0, 0.25));
@include animation('slide-in-down-little .2s .6s 1 ease-in both');

View File

@ -0,0 +1,44 @@
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.header {
padding-top: 3rem;
padding-bottom: 0.5rem;
}
.showcase {
&__nav {
margin-top: 1.5rem;
}
&__box {
min-width: 270px;
}
}
.navbar {
&__slide-down {
svg {
display: block;
margin: auto;
}
}
}
.theme-mobile {
top: 3px;
right: 77px;
}
.copy-to-clipboard {
&::after {
content: 'copy';
font-family: $title-font;
font-size: 9px;
border: 1px solid #aaa;
border-radius: 0.125rem;
position: absolute;
padding: 0 0.1rem;
right: 1px;
top: -1px;
}
}
}

View File

@ -2,6 +2,7 @@
position: relative;
border-radius: 0.25rem;
height: 35px;
max-width: 928px;
z-index: z('search');
margin-bottom: 0.5rem;
@ -36,7 +37,7 @@
@include truncate($grid_main_side_width + $grid_main_side_unit);
@include themify($themes) {
color: themed("search-color");
background-color: inherit;
background-color: themed("search-background-color");
@include input-placeholder {
font-family: $title-font;
color: themed("search-placeholder-color");
@ -89,10 +90,6 @@
}
#search-results {
@include themify($themes) {
// @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
}
&.dropdown {
display: none;
&.is-active {
@ -143,8 +140,10 @@
.mobile-search {
position: absolute;
top: 0;
left: 0;
z-index: z('modal');
width: 100%;
width: 100%;
overflow: hidden;
@include themify($themes) {
@ -169,6 +168,7 @@
height: $grid_navbar_height;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
@include flexbox();
@ -203,7 +203,7 @@
}
&__body {
width: 100%;
width: 100vw;
height: 100vh;
overflow-y: auto;

View File

@ -79,6 +79,8 @@
.summary-classic {
padding: 0 1rem;
@include flexbox();
@include flex-direction(column);
@include animation('slide-in-down .2s .3s 1 ease-in both');
.title {
@ -116,6 +118,8 @@
}
&__content {
width: 100%;
@include flexbox();
@include flex-direction(column);
@include justify-content(flex-start);
@ -142,7 +146,7 @@
padding: 0.25rem;
margin-right: .5rem;
@include transition(all, 0.25s, ease-in);
@include transition(all, 0.2s, ease-out);
@include align-self(center);
@include on-event {
@include box-shadow(1px, 1px, 3px, 0px, rgba(0, 0, 0, 0.25));

View File

@ -50,10 +50,10 @@
@include align-items(center);
@include justify-content(center);
@include themify($themes) {
color: themed('gtt-color');
color: themed('gtt-color');
background-color: themed('gtt-background-color');
@include on-event {
color: themed('gtt-hover-color');
color: themed('gtt-hover-color');
background-color: themed('gtt-hover-background-color');
}
}
@ -65,8 +65,15 @@
border: none;
width: 100%;
height: 100%;
color: inherit;
background-color: inherit;
@include themify($themes) {
color: themed('gtt-color');
background-color: themed('gtt-background-color');
@include on-event {
color: themed('gtt-hover-color');
background-color: themed('gtt-hover-background-color');
}
}
}
&-content {

View File

@ -26,6 +26,13 @@
}
&__slide-down {
@include themify($themes) {
background-color: themed('navbar-background-color');
@include on-event {
background-color: themed('navbar-menu-hover-background-color');
}
}
@media only screen and (min-width: 769px) {
@for $i from 1 through 8 {
&:nth-child(#{$i}) {
@ -43,7 +50,7 @@
@include flex-shrink(0);
}
&__burger {
&__burger {
display: none;
position: relative;
@ -62,7 +69,7 @@
span {
@include themify($themes) {
background-color: themed('burger-menu-color');
}
}
border-radius: 1rem;
display: block;
@ -93,7 +100,6 @@
}
}
// Modifers
&.is-active {
display: block;
span {
@ -205,13 +211,15 @@
&.is-active {
position: absolute;
top: $grid_navbar_height;
left: 0;
width: 100%;
height: auto;
overflow: hidden;
@include flexbox();
@include flex-direction(column);
@include align-items(flex-start);
top: 100%;
width: 100%;
height: auto;
overflow: hidden;
@include themify($themes) {
border-top: 1px solid themed('navbar-border-bottom-color');
background-color: themed('navbar-mobile-background-color');

View File

@ -71,6 +71,7 @@ $cursive-font: {{ .Site.Data.font.cursive_font }};
@import 'components/box';
@import 'components/modal';
@import 'components/tab';
@import 'components/ie';
@import 'pages/404';
@import 'pages/about';

View File

@ -4,6 +4,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ block "title" . }}{{ .Title }} {{ .Site.Title }}{{ end }}</title>
{{ partial "head/scripts" . }}
{{ partialCached "head/styles" . }}
@ -17,7 +18,7 @@
<script>
var localTheme = localStorage.getItem('theme');
if (localTheme) {
document.getElementById('root').className = `theme__${localTheme}`;
document.getElementById('root').className = 'theme__' + localTheme;
}
</script>

View File

@ -33,6 +33,9 @@
<script>
{{ $sidebarPosition:= .Site.Params.sidebarPosition }}
var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
{{ $enableSidebar:= .Site.Params.enableSidebar }}
var enableSidebar = JSON.parse({{ $enableSidebar | jsonify }});
var listMainElem = document.querySelector('.list__main');
var listSideElem = document.querySelector('.list__sidebar');
@ -46,16 +49,38 @@
}
enquire.register("screen and (max-width: 769px)", {
match: function () {
listMainElem.classList.remove(gridBig);
listMainElem.classList.add(gridFull);
listSideElem.classList.remove(gridSmall);
listSideElem.classList.add('hide');
if (enableSidebar) {
listMainElem.classList.remove(gridBig);
listMainElem.classList.add(gridFull);
listSideElem.classList.remove(gridSmall);
listSideElem.classList.add('hide');
} else {
if (listMainElem && !listMainElem.classList.contains(gridFull)) {
listMainElem.classList.remove(gridBig);
listMainElem.classList.add(gridFull);
}
if (listSideElem && !listSideElem.classList.contains('hide')) {
listSideElem.classList.add('hide');
}
}
},
unmatch: function () {
listMainElem.classList.remove(gridFull);
listMainElem.classList.add(gridBig);
listSideElem.classList.add(gridSmall);
listSideElem.classList.remove('hide');
if (enableSidebar) {
listMainElem.classList.remove(gridFull);
listMainElem.classList.add(gridBig);
listSideElem.classList.add(gridSmall);
listSideElem.classList.remove('hide');
} else {
if (listMainElem && !listMainElem.classList.contains(gridFull)) {
listMainElem.classList.remove(gridBig);
listMainElem.classList.add(gridFull);
}
if (listSideElem && !listSideElem.classList.contains('hide')) {
listSideElem.classList.add('hide');
}
}
document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');

View File

@ -32,6 +32,9 @@
<script>
{{ $sidebarPosition:= .Site.Params.sidebarPosition }}
var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
{{ $enableSidebar:= .Site.Params.enableSidebar }}
var enableSidebar = JSON.parse({{ $enableSidebar | jsonify }});
var listMainElem = document.querySelector('.list__main');
var listSideElem = document.querySelector('.list__sidebar');
@ -46,16 +49,38 @@
enquire.register("screen and (max-width: 769px)", {
match: function () {
listMainElem.classList.remove(gridBig);
listMainElem.classList.add(gridFull);
listSideElem.classList.remove(gridSmall);
listSideElem.classList.add('hide');
if (enableSidebar) {
listMainElem.classList.remove(gridBig);
listMainElem.classList.add(gridFull);
listSideElem.classList.remove(gridSmall);
listSideElem.classList.add('hide');
} else {
if (listMainElem && !listMainElem.classList.contains(gridFull)) {
listMainElem.classList.remove(gridBig);
listMainElem.classList.add(gridFull);
}
if (listSideElem && !listSideElem.classList.contains('hide')) {
listSideElem.classList.add('hide');
}
}
},
unmatch: function () {
listMainElem.classList.remove(gridFull);
listMainElem.classList.add(gridBig);
listSideElem.classList.add(gridSmall);
listSideElem.classList.remove('hide');
if (enableSidebar) {
listMainElem.classList.remove(gridFull);
listMainElem.classList.add(gridBig);
listSideElem.classList.add(gridSmall);
listSideElem.classList.remove('hide');
} else {
if (listMainElem && !listMainElem.classList.contains(gridFull)) {
listMainElem.classList.remove(gridBig);
listMainElem.classList.add(gridFull);
}
if (listSideElem && !listSideElem.classList.contains('hide')) {
listSideElem.classList.add('hide');
}
}
document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');

View File

@ -30,6 +30,9 @@
<script>
{{ $sidebarPosition:= .Site.Params.sidebarPosition }}
var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
{{ $enableSidebar:= .Site.Params.enableSidebar }}
var enableSidebar = JSON.parse({{ $enableSidebar | jsonify }});
var listMainElem = document.querySelector('.list__main');
var listSideElem = document.querySelector('.list__sidebar');
@ -44,16 +47,39 @@
enquire.register("screen and (max-width: 769px)", {
match: function () {
listMainElem.classList.remove(gridBig);
listMainElem.classList.add(gridFull);
listSideElem.classList.remove(gridSmall);
listSideElem.classList.add('hide');
if (enableSidebar) {
listMainElem.classList.remove(gridBig);
listMainElem.classList.add(gridFull);
listSideElem.classList.remove(gridSmall);
listSideElem.classList.add('hide');
} else {
if (listMainElem && !listMainElem.classList.contains(gridFull)) {
listMainElem.classList.remove(gridBig);
listMainElem.classList.add(gridFull);
}
if (listSideElem && !listSideElem.classList.contains('hide')) {
listSideElem.classList.add('hide');
}
}
},
unmatch: function () {
listMainElem.classList.remove(gridFull);
listMainElem.classList.add(gridBig);
listSideElem.classList.add(gridSmall);
listSideElem.classList.remove('hide');
if (enableSidebar) {
listMainElem.classList.remove(gridFull);
listMainElem.classList.add(gridBig);
listSideElem.classList.add(gridSmall);
listSideElem.classList.remove('hide');
} else {
if (listMainElem && !listMainElem.classList.contains(gridFull)) {
listMainElem.classList.remove(gridBig);
listMainElem.classList.add(gridFull);
}
if (listSideElem && !listSideElem.classList.contains('hide')) {
listSideElem.classList.add('hide');
}
}
if (document.getElementsByClassName('navbar__burger')[0]) {
document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');

View File

@ -122,7 +122,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
MicroModal.init({
onClose: () => {
onClose: function () {
if (mySwipe) {
mySwipe.kill();
mySwipe = null;

View File

@ -31,7 +31,7 @@
{{ else if eq (lower .) "tumblr" }}
<a href="http://tumblr.com/widgets/share/tool?canonicalUrl={{ $ctx.Permalink | absLangURL }}&data-title={{ $ctx.Title }}&data-content={{ $ctx.Description }}" class="donation__item" target="_blank" rel="noreferer">
{{ partial "svgs/share/tumblr.svg" (dict "width" 22 "height" 22) }}
{{ i18n "linkedin" | default "LinkedIn" }}
{{ i18n "tumblr" | default "Tumblr" }}
</a>
{{ else if eq (lower .) "weibo" }}
<a href="javascript:void(function(){var d=document,e=encodeURIComponent,s1=window.getSelection,s2=d.getSelection,s3=d.selection,s=s1?s1():s2?s2():s3?s3.createRange().text:'',r='http://service.weibo.com/share/share.php?url='+e(d.location.href)+'&title='+e(d.title),x=function(){if(!window.open(r,'weibo','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r+'&r=1'};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})()" class="donation__item" target="_blank" rel="noreferer">

View File

@ -20,6 +20,61 @@
<script>
"use strict";
// ========================== poiyfill ==========================
// forEach
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
// includes
if (!String.prototype.includes) {
String.prototype.includes = function (search, start) {
'use strict';
if (search instanceof RegExp) {
throw TypeError('first argument must not be a RegExp');
}
if (start === undefined) { start = 0; }
return this.indexOf(search, start) !== -1;
};
}
// append
Document.prototype.append = Element.prototype.append = function append() {
this.appendChild(_mutation(arguments));
};
function _mutation(nodes) {
if (!nodes.length) {
throw new Error('DOM Exception 8');
} else if (nodes.length === 1) {
return typeof nodes[0] === 'string' ? document.createTextNode(nodes[0]) : nodes[0];
} else {
var
fragment = document.createDocumentFragment(),
length = nodes.length,
index = -1,
node;
while (++index < length) {
node = nodes[index];
fragment.appendChild(typeof node === 'string' ? document.createTextNode(node) : node);
}
return fragment;
}
}
// startsWith
if (!String.prototype.startsWith) {
String.prototype.startsWith = function (searchString, position) {
position = position || 0;
return this.indexOf(searchString, position) === position;
};
}
// ===============================================================
document.addEventListener('DOMContentLoaded', function () {
// ============================ tab ============================
document.querySelectorAll('.tab') ?
@ -54,7 +109,11 @@
var gttBtn = document.getElementById("gtt");
gttBtn.style.display = "none";
gttBtn.addEventListener('click', function () {
scrollToTop(250);
if (window.document.documentMode) {
document.documentElement.scrollTop = 0;
} else {
scrollToTop(250);
}
});
function scrollToTop(scrollDuration) {
@ -148,7 +207,7 @@
});
}) : null;
var curElem = tableOfContentsElem.querySelector(`[href="#${id}"]`);
var curElem = tableOfContentsElem.querySelector("[href='#" + id + "']");
if (curElem && curElem.nextElementSibling) {
curElem.nextElementSibling.style.display = 'block';
}
@ -193,7 +252,7 @@
});
});
var curElem = tableOfContentsElem.querySelector(`[href="#${id}"]`);
var curElem = tableOfContentsElem.querySelector("[href='#" + id + "']");
if (curElem && curElem.nextElementSibling) {
curElem.nextElementSibling.style.display = 'block';
}
@ -222,6 +281,8 @@
// ========================== navbar ==========================
var navbarBurgerElem = document.querySelector('.navbar__burger');
var navbarMenuElem = document.querySelector('.navbar__menu');
console.log(navbarBurgerElem);
console.log(navbarMenuElem);
navbarBurgerElem ?
navbarBurgerElem.addEventListener('click', function () {
if (navbarBurgerElem.classList.contains('is-active')) {
@ -286,7 +347,8 @@
mobileSearchInputElem ?
mobileSearchInputElem.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
var keyCode = e.which || e.keyCode;
if (e.key === 'Escape' || keyCode === 27) {
if (mobileSearchContainer) {
mobileSearchContainer.style.display = 'none';
}
@ -332,7 +394,7 @@
localStorage.setItem('theme', selectedThemeVariant);
rootEleme.removeAttribute('class');
rootEleme.classList.add(`theme__${selectedThemeVariant}`);
rootEleme.classList.add('theme__' + selectedThemeVariant);
selectThemeElem.forEach(function(rootElem) {
rootElem.querySelectorAll('a').forEach(function (elem) {
if (elem.classList) {
@ -445,7 +507,7 @@
});
}
else {
console.error(`[${xhr.status}]Error:`, xhr.statusText);
console.error('[' + xhr.status + ']Error:', xhr.statusText);
}
};
xhr.send();
@ -464,7 +526,7 @@
var item = document.createElement('a');
item.setAttribute('href', result.uri);
item.setAttribute('class', 'dropdown-item');
item.innerHTML = `<div class="menu-item"><div class="menu-item__title">📄 ${result.title}</div><div class="menu-item__desc">${result.description ? result.description : result.content}</div></div>`;
item.innerHTML = '<div class="menu-item"><div class="menu-item__title">📄 ' + result.title + '</div><div class="menu-item__desc">' + (result.description ? result.description : result.content) + '</div></div>';
content.appendChild(item);
});
} else {
@ -495,7 +557,7 @@
var item = document.createElement('a');
item.setAttribute('href', result.item.uri);
item.setAttribute('class', 'dropdown-item');
item.innerHTML = `<div class="menu-item"><div class="menu-item__title">📄 ${generateHighlightedText(result.item.title, result.matches[0].indices)}</div><div class="menu-item__desc">${result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : ''}</div></div>`;
item.innerHTML = '<div class="menu-item"><div class="menu-item__title">📄 ' + generateHighlightedText(result.item.title, result.matches[0].indices) + '</div><div class="menu-item__desc">' + (result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : '') + '</div></div>';
content.appendChild(item);
});
} else {
@ -523,7 +585,7 @@
results.forEach(function (result) {
var item = document.createElement('a');
item.setAttribute('href', result.uri);
item.innerHTML = `<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ${result.title}</div><div class="mobile-search__item--desc">${result.description ? result.description : result.content}</div></div>`;
item.innerHTML = '<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ' + result.title + '</div><div class="mobile-search__item--desc">' + (result.description ? result.description : result.content) + '</div></div>';
content.appendChild(item);
});
} else {
@ -548,7 +610,7 @@
results.forEach(function (result) {
var item = document.createElement('a');
item.setAttribute('href', result.item.uri);
item.innerHTML = `<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ${generateHighlightedText(result.item.title, result.matches[0].indices)}</div><div class="mobile-search__item--desc">${result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : ''}</div></div>`;
item.innerHTML = '<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ' + generateHighlightedText(result.item.title, result.matches[0].indices) + '</div><div class="mobile-search__item--desc">' + (result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : '') + '</div></div>';
content.appendChild(item);
});
} else {
@ -594,6 +656,7 @@
var searchElem = document.getElementById('search');
var searchMobile = document.getElementById('search-mobile');
searchElem ?
searchElem.addEventListener('input', function(e) {
if (!e.target.value) {
document.getElementById('search-results').setAttribute('class', 'dropdown');
@ -611,8 +674,9 @@
} else {
renderSearchResults(results);
}
});
}) : null;
searchElem ?
searchElem.addEventListener('blur', function() {
if (window.innerWidth < 770) {
return null;
@ -620,8 +684,9 @@
setTimeout(function () {
document.getElementById('search-results').setAttribute('class', 'dropdown');
}, 100);
});
}) : null;
searchElem ?
searchElem.addEventListener('click', function(e) {
if (window.innerWidth < 770) {
return null;
@ -638,7 +703,7 @@
} else {
renderSearchResults(results);
}
});
}) : null;
function indexInParent(node) {
var children = node.parentNode.childNodes;
@ -656,14 +721,16 @@
var items = null;
var searchContainerMaxHeight = 350;
searchElem ?
searchElem.addEventListener('keydown', function(e) {
if (window.innerWidth < 770) {
return null;
}
var items = document.querySelectorAll('#search-menu .dropdown-item');
var keyCode = e.which || e.keyCode;
if (e.key === 'ArrowDown') {
if (e.key === 'ArrowDown' || keyCode === 40) {
if (activeIndex === null) {
activeIndex = 0;
items[activeIndex].classList.remove('is-active');
@ -679,7 +746,7 @@
} else if (activeIndex === 0) {
document.querySelector(".search-content").scrollTop = 0;
}
} else if (e.key === 'ArrowUp') {
} else if (e.key === 'ArrowUp' || keyCode === 38) {
if (activeIndex === null) {
activeIndex = items.length - 1;
items[activeIndex].classList.remove('is-active');
@ -695,19 +762,20 @@
} else {
document.querySelector(".search-content").scrollTop = overflowedPixel + items[activeIndex].getBoundingClientRect().height;
}
} else if (e.key === 'Enter') {
} else if (e.key === 'Enter' || keyCode === 13) {
var currentItemLink = items[activeIndex].getAttribute('href');
if (currentItemLink) {
location.href = currentItemLink;
}
} else if (e.key === 'Escape') {
} else if (e.key === 'Escape' || keyCode === 27) {
e.target.value = null;
if (searchResults) {
searchResults.classList.remove('is-active');
}
}
});
}) : null;
searchMobile ?
searchMobile.addEventListener('input', function(e) {
if (!e.target.value) {
let wrap = document.getElementById('search-mobile-results');
@ -725,7 +793,7 @@
} else {
renderSearchResultsMobile(results);
}
});
}) : null;
// ============================================================
});
</script>

View File

@ -145,7 +145,7 @@
});
}) : null;
var curElem = tableOfContentsElem.querySelector(`[href="#${id}"]`);
var curElem = tableOfContentsElem.querySelector('[href="#' + id + '"]');
if (curElem && curElem.nextElementSibling) {
curElem.nextElementSibling.style.display = 'block';
}
@ -328,8 +328,8 @@
var isNotAllowedIncluded = false;
var curClassName = code.getAttribute('class');
for (let str of notAllowedClass) {
if (curClassName && curClassName.startsWith(str)) {
for (var i = 0; i < notAllowedClass.length; i++) {
if (curClassName && curClassName.startsWith(notAllowedClass[i])) {
isNotAllowedIncluded = true;
break;
}