diff --git a/.gitignore b/.gitignore index 19ea1ea..2ba6ed8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,7 @@ .jekyll-cache/ _site/ -assets/ +assets/fonts/ +assets/icons/ +assets/img/ Gemfile.lock *.backup diff --git a/_config.yml b/_config.yml index 5b479d3..3f43a56 100644 --- a/_config.yml +++ b/_config.yml @@ -7,7 +7,7 @@ title:

} document.getElementById("title").innerHTML = currenturl; -logo: /assets/img/logo.jpg +logo: /assets/img/logo.png description: show_downloads: false color-scheme: dark diff --git a/_includes/footer.html b/_includes/footer.html index 4e3ed36..1b64f05 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1 +1 @@ -

Powered by Jekyll — Based on a theme from BDHU, logo credits

+

Powered by Jekyll — Based on a theme from BDHU, logo from Lillimon

diff --git a/assets/css/colors-auto-default-dark.scss b/assets/css/colors-auto-default-dark.scss new file mode 100644 index 0000000..5bafdb1 --- /dev/null +++ b/assets/css/colors-auto-default-dark.scss @@ -0,0 +1,17 @@ +--- +--- + +//this mode is like colors-auto but if the device does not support @media prefers-color-scheme it will deafault to dark mode + +@import "colors"; + +:root { + @include colors; + @include dark-colors; + } + +@media print, (prefers-color-scheme: light) {//we would not like to apply dark mode if content is on printer as that would use a lot of ink + :root { + @include light-colors; + } +} \ No newline at end of file diff --git a/assets/css/colors-auto.scss b/assets/css/colors-auto.scss new file mode 100644 index 0000000..d9a2a19 --- /dev/null +++ b/assets/css/colors-auto.scss @@ -0,0 +1,15 @@ +--- +--- + +@import "colors"; + +:root { + @include colors; + @include light-colors; + } + +@media screen and (prefers-color-scheme: dark) {//we would not like to apply dark mode if content is on printer as that would use a lot of ink + :root{ + @include dark-colors; + } +} \ No newline at end of file diff --git a/assets/css/colors-dark.scss b/assets/css/colors-dark.scss new file mode 100644 index 0000000..e567564 --- /dev/null +++ b/assets/css/colors-dark.scss @@ -0,0 +1,15 @@ +--- +--- + +@import "colors"; + +:root { + @include colors; + @include dark-colors; +} + +@media print { + :root { + @include light-colors; + } +} \ No newline at end of file diff --git a/assets/css/colors-light.scss b/assets/css/colors-light.scss new file mode 100644 index 0000000..bccbf3d --- /dev/null +++ b/assets/css/colors-light.scss @@ -0,0 +1,9 @@ +--- +--- + +@import "colors"; + +:root { + @include colors; + @include light-colors; +} \ No newline at end of file diff --git a/assets/css/style-article.scss b/assets/css/style-article.scss new file mode 100644 index 0000000..8b6a943 --- /dev/null +++ b/assets/css/style-article.scss @@ -0,0 +1,71 @@ +--- +--- + +$section-width: 100%; +$section-float: middle; + +@import "jekyll-theme-minimalist"; + +.img-circle { + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + margin-bottom: 10px; +} + +.overlay { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.7); + transition: opacity 500ms; + visibility: hidden; + opacity: 0; +} + +.overlay:target { + visibility: visible; + opacity: 1; +} + +.popup { + margin: 70px auto; + padding: 20px; + background: #fff; + border-radius: 5px; + width: 30%; + position: relative; + transition: all 1s ease-in-out; +} + +.popup .close { + position: absolute; + top: 10px; + right: 10px; + transition: all 200ms; + font-size: 30px; + font-weight: bold; + text-decoration: none; + color: #333; +} +.popup .close:hover { + color: #06D85F; +} + +.popup .content { + padding-right: 20px; + max-height: 30%; + overflow: auto; + font: 15px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +@media screen and (max-width: 700px){ + .box{ + width: 70%; + } + .popup{ + width: 70%; + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 0000000..31f9a60 --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,68 @@ +--- +--- + +@import "jekyll-theme-minimalist"; + +.img-circle { + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + margin-bottom: 10px; +} + +.overlay { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.7); + transition: opacity 500ms; + visibility: hidden; + opacity: 0; +} + +.overlay:target { + visibility: visible; + opacity: 1; +} + +.popup { + margin: 70px auto; + padding: 20px; + background: #fff; + border-radius: 5px; + width: 30%; + position: relative; + transition: all 1s ease-in-out; +} + +.popup .close { + position: absolute; + top: 10px; + right: 10px; + transition: all 200ms; + font-size: 30px; + font-weight: bold; + text-decoration: none; + color: #333; +} +.popup .close:hover { + color: #06D85F; +} + +.popup .content { + padding-right: 20px; + max-height: 30%; + overflow: auto; + font: 15px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +@media screen and (max-width: 700px){ + .box{ + width: 70%; + } + .popup{ + width: 70%; + } +} diff --git a/assets/js/scale.fix.js b/assets/js/scale.fix.js new file mode 100644 index 0000000..911d33c --- /dev/null +++ b/assets/js/scale.fix.js @@ -0,0 +1,27 @@ +(function(document) { + var metas = document.getElementsByTagName('meta'), + changeViewportContent = function(content) { + for (var i = 0; i < metas.length; i++) { + if (metas[i].name == "viewport") { + metas[i].content = content; + } + } + }, + initialize = function() { + changeViewportContent("width=device-width, minimum-scale=1.0, maximum-scale=1.0"); + }, + gestureStart = function() { + changeViewportContent("width=device-width, minimum-scale=0.25, maximum-scale=1.6"); + }, + gestureEnd = function() { + initialize(); + }; + + + if (navigator.userAgent.match(/iPhone/i)) { + initialize(); + + document.addEventListener("touchstart", gestureStart, false); + document.addEventListener("touchend", gestureEnd, false); + } +})(document);