diff --git a/css/lightbox.css b/css/lightbox.css index 9a7303a..b36df7a 100644 --- a/css/lightbox.css +++ b/css/lightbox.css @@ -1,16 +1,15 @@ -/* line 7, ../sass/lightbox.sass */ -body:after { - content: url(../img/ui/close.png) url(../img/ui/loading.gif) url(../img/ui/prev.png) url(../img/ui/next.png); - display: none; +html.lb-disable-scrolling { + overflow: hidden; + /* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */ + position: fixed; + height: 100vh; + width: 100vw; } -/* line 11, ../sass/lightbox.sass */ .lightboxOverlay { - position: fixed; + position: absolute; top: 0; left: 0; - width: 100%; - height: 100%; z-index: 9999; background-color: black; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); @@ -18,11 +17,8 @@ body:after { display: none; } -/* line 20, ../sass/lightbox.sass */ .lightbox { - position: fixed; - margin-top: auto; - margin-bottom: auto; + position: absolute; left: 0; width: 100%; z-index: 10000; @@ -30,74 +26,59 @@ body:after { line-height: 0; font-weight: normal; } -/* line 28, ../sass/lightbox.sass */ + .lightbox .lb-image { display: block; height: auto; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; + max-width: inherit; + max-height: none; border-radius: 3px; + + /* Image border */ + border: 4px solid white; } -/* line 32, ../sass/lightbox.sass */ + .lightbox a img { border: none; } -/* line 35, ../sass/lightbox.sass */ .lb-outerContainer { position: relative; *zoom: 1; width: 250px; height: 250px; margin: 0 auto; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; border-radius: 4px; - - border-style: solid; - border-width: 1px; - border-color: #000000; - background-image: url(../img/ui/bgdark.png); - background-position: center; - + + /* Background color behind image. + This is visible during transitions. */ + background-color: white; } -/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ + .lb-outerContainer:after { content: ""; display: table; clear: both; } -/* line 44, ../sass/lightbox.sass */ -.lb-container { - padding: 4px; -} - -/* line 47, ../sass/lightbox.sass */ .lb-loader { position: absolute; top: 43%; - left: 0%; + left: 0; height: 25%; width: 100%; text-align: center; line-height: 0; } -/* line 56, ../sass/lightbox.sass */ .lb-cancel { display: block; width: 32px; height: 32px; margin: 0 auto; - background: url(../img/ui/loading.gif) no-repeat; + background: url(/img/ui/loading.gif) no-repeat; } -/* line 63, ../sass/lightbox.sass */ .lb-nav { position: absolute; top: 0; @@ -107,84 +88,94 @@ body:after { z-index: 10; } -/* line 71, ../sass/lightbox.sass */ .lb-container > .nav { left: 0; } -/* line 74, ../sass/lightbox.sass */ .lb-nav a { outline: none; + background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); } -/* line 77, ../sass/lightbox.sass */ .lb-prev, .lb-next { - width: 49%; height: 100%; cursor: pointer; - /* Trick IE into showing hover */ display: block; } -/* line 84, ../sass/lightbox.sass */ -.lb-prev { +.lb-nav a.lb-prev { + width: 34%; left: 0; float: left; -} -/* line 87, ../sass/lightbox.sass */ -.lb-prev:hover { - background: url(../img/ui/prev.png) left 48% no-repeat; + background: url(/img/ui/prev.png) left 48% no-repeat; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; + -webkit-transition: opacity 0.6s; + -moz-transition: opacity 0.6s; + -o-transition: opacity 0.6s; + transition: opacity 0.6s; } -/* line 90, ../sass/lightbox.sass */ -.lb-next { +.lb-nav a.lb-prev:hover { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; +} + +.lb-nav a.lb-next { + width: 64%; right: 0; float: right; -} -/* line 93, ../sass/lightbox.sass */ -.lb-next:hover { - background: url(../img/ui/next.png) right 48% no-repeat; + background: url(/img/ui/next.png) right 48% no-repeat; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; + -webkit-transition: opacity 0.6s; + -moz-transition: opacity 0.6s; + -o-transition: opacity 0.6s; + transition: opacity 0.6s; +} + +.lb-nav a.lb-next:hover { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; } -/* line 96, ../sass/lightbox.sass */ .lb-dataContainer { margin: 0 auto; padding-top: 5px; *zoom: 1; width: 100%; - -moz-border-radius-bottomleft: 4px; - -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; - -moz-border-radius-bottomright: 4px; - -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } -/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ + .lb-dataContainer:after { content: ""; display: table; clear: both; } -/* line 103, ../sass/lightbox.sass */ .lb-data { padding: 0 4px; - color: #bbbbbb; + color: #ccc; } -/* line 106, ../sass/lightbox.sass */ + .lb-data .lb-details { width: 85%; float: left; text-align: left; line-height: 1.1em; } -/* line 111, ../sass/lightbox.sass */ + .lb-data .lb-caption { font-size: 13px; font-weight: bold; line-height: 1em; } -/* line 115, ../sass/lightbox.sass */ + +.lb-data .lb-caption a { + color: #4ae; +} + .lb-data .lb-number { display: block; clear: left; @@ -192,19 +183,23 @@ body:after { font-size: 12px; color: #999999; } -/* line 121, ../sass/lightbox.sass */ + .lb-data .lb-close { display: block; float: right; width: 30px; height: 30px; - background: url(../img/ui/close.png) top right no-repeat; + background: url(/img/ui/close.png) top right no-repeat; text-align: right; outline: none; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; + -webkit-transition: opacity 0.2s; + -moz-transition: opacity 0.2s; + -o-transition: opacity 0.2s; + transition: opacity 0.2s; } -/* line 130, ../sass/lightbox.sass */ + .lb-data .lb-close:hover { cursor: pointer; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); diff --git a/css/main.css b/css/main.css index fed9e15..5ac63e7 100644 --- a/css/main.css +++ b/css/main.css @@ -62,28 +62,12 @@ nav#left { border-style: solid; border-width: 0 1px 0 0; border-color: #000000; - background-image: url(../img/ui/bggray.png); - -webkit-box-shadow: -4px 0px 10px #202020 inset; - -moz-box-shadow: -4px 0px 10px #202020 inset; - -ms-box-shadow: -4px 0px 10px #202020 inset; - -o-box-shadow: -4px 0px 10px #202020 inset; + background-image: url(/img/ui/bggray.png); box-shadow: -4px 0px 10px #202020 inset; text-align: center; font-size: large; - -webkit-transition-property: left; - -moz-transition-property: left; - -ms-transition-property: left; - -o-transition-property: left; transition-property: left; - -webkit-transition-duration: 0.2s; - -moz-transition-duration: 0.2s; - -ms-transition-duration: 0.2s; - -o-transition-duration: 0.2s; transition-duration: 0.2s; - -webkit-transition-delay: 0.1s; - -moz-transition-delay: 0.1s; - -ms-transition-delay: 0.1s; - -o-transition-delay: 0.1s; transition-delay: 0.1s; } nav#left .arrow { @@ -91,20 +75,8 @@ nav#left .arrow { right: 0; top: 50%; height: 35px; - -webkit-transition-property: opacity; - -moz-transition-property: opacity; - -ms-transition-property: opacity; - -o-transition-property: opacity; transition-property: opacity; - -webkit-transition-duration: 0.2s; - -moz-transition-duration: 0.2s; - -ms-transition-duration: 0.2s; - -o-transition-duration: 0.2s; transition-duration: 0.2s; - -webkit-transition-delay: 0.1s; - -moz-transition-delay: 0.1s; - -ms-transition-delay: 0.1s; - -o-transition-delay: 0.1s; transition-delay: 0.1s; } nav#left figure { @@ -127,25 +99,13 @@ nav#left a { border-style: solid; border-width: 1px; border-color: #000; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; border-radius: 3px; color: #FAFAFA; font-weight: bold; text-decoration: none; text-align: center; font-size: 1.2em; - -webkit-transition-property: border-color background-color; - -moz-transition-property: border-color background-color; - -ms-transition-property: border-color background-color; - -o-transition-property: border-color background-color; transition-property: border-color background-color; - -webkit-transition-duration: 0.1s; - -moz-transition-duration: 0.1s; - -ms-transition-duration: 0.1s; - -o-transition-duration: 0.1s; transition-duration: 0.1s; } nav#left a:hover { @@ -189,21 +149,13 @@ nav#top { color: #5F5F5F; padding: 4px 0px; overflow: auto; - background-image: url(../img/ui/bgdark.png); + background-image: url(/img/ui/bgdark.png); border-style: solid; border-width: 0 1px 1px 1px; border-color: #000000; text-align: center; white-space: nowrap; - -webkit-transition-property: top; - -moz-transition-property: top; - -ms-transition-property: top; - -o-transition-property: top; transition-property: top; - -webkit-transition-duration: 0.1s; - -moz-transition-duration: 0.1s; - -ms-transition-duration: 0.1s; - -o-transition-duration: 0.1s; transition-duration: 0.1s; } nav#top .arrow { @@ -224,10 +176,6 @@ nav#top a { font-size: 18px; font-style: italic; text-decoration: none; - -webkit-text-shadow: 0 0 5px #000000; - -moz-text-shadow: 0 0 5px #000000; - -ms-text-shadow: 0 0 5px #000000; - -o-text-shadow: 0 0 5px #000000; text-shadow: 0 0 5px #000000; text-align: center; } @@ -235,25 +183,13 @@ nav#top a img { margin: 4px 4px 0 4px; width: 128px; height: 128px; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - -ms-border-radius: 10px; - -o-border-radius: 10px; border-radius: 10px; - -webkit-box-shadow: 0px 0px 10px #000000; - -moz-box-shadow: 0px 0px 10px #000000; - -ms-box-shadow: 0px 0px 10px #000000; - -o-box-shadow: 0px 0px 10px #000000; box-shadow: 0px 0px 10px #000000; } nav#top a figcaption { width: 128px; } nav#top a:hover { - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; border-radius: 5px; background-color: rgba(255, 255, 255, 0.15); } @@ -264,8 +200,8 @@ nav#top:hover, nav#top:active { @keyframes UnwrapHeader { from { - margin-left: 50%; - margin-right: 50%; + margin-left: 40%; + margin-right: 40%; } to { margin-left: 40px; @@ -276,20 +212,8 @@ nav#top:hover, nav#top:active { position: absolute; left: 20px; right: 0px; - -webkit-transition-property: left; - -moz-transition-property: left; - -ms-transition-property: left; - -o-transition-property: left; transition-property: left; - -webkit-transition-duration: 0.2s; - -moz-transition-duration: 0.2s; - -ms-transition-duration: 0.2s; - -o-transition-duration: 0.2s; transition-duration: 0.2s; - -webkit-transition-delay: 0.1s; - -moz-transition-delay: 0.1s; - -ms-transition-delay: 0.1s; - -o-transition-delay: 0.1s; transition-delay: 0.1s; } #section-main header { @@ -324,15 +248,7 @@ nav#top:hover, nav#top:active { max-width: 800px; font-size: 0.6em; line-height: 1.3em; - -webkit-transition-property: border-radius; - -moz-transition-property: border-radius; - -ms-transition-property: border-radius; - -o-transition-property: border-radius; transition-property: border-radius; - -webkit-transition-duration: 0.5s; - -moz-transition-duration: 0.5s; - -ms-transition-duration: 0.5s; - -o-transition-duration: 0.5s; transition-duration: 0.5s; } #section-main article h1:first-child { @@ -343,7 +259,7 @@ nav#top:hover, nav#top:active { margin-top: -23px; border-radius: 18px 18px 0 0; background-color: #215D9C; - background-image: url("../img/ui/stripes.png"); + background-image: url("/img/ui/stripes.png"); color: #FAFAFA; font-family: "Croissant One", cursive; font-weight: bold; @@ -351,15 +267,7 @@ nav#top:hover, nav#top:active { font-size: 1.7em; text-align: left; letter-spacing: -0.03em; - -webkit-transition-property: border-radius; - -moz-transition-property: border-radius; - -ms-transition-property: border-radius; - -o-transition-property: border-radius; transition-property: border-radius; - -webkit-transition-duration: 0.5s; - -moz-transition-duration: 0.5s; - -ms-transition-duration: 0.5s; - -o-transition-duration: 0.5s; transition-duration: 0.5s; } #section-main article h1:first-child img { @@ -374,7 +282,7 @@ nav#top:hover, nav#top:active { padding: 10px 23px; border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; - background-image: url("../img/ui/stripes.png"); + background-image: url("/img/ui/stripes.png"); color: #3A4145; font-family: "Croissant One", cursive; font-size: x-large; @@ -458,11 +366,7 @@ nav#top:hover, nav#top:active { border-top: 1px solid #000; border-bottom: 1px solid #000; color: #FAFAFA; - background-image: url("../img/ui/bgdark.png"); - -webkit-box-shadow: 0px 0px 10px #000 inset; - -moz-box-shadow: 0px 0px 10px #000 inset; - -ms-box-shadow: 0px 0px 10px #000 inset; - -o-box-shadow: 0px 0px 10px #000 inset; + background-image: url("/img/ui/bgdark.png"); box-shadow: 0px 0px 10px #000 inset; } #section-main article .cinema img, #section-main article .cinema video, #section-main article .cinema iframe { @@ -493,11 +397,7 @@ nav#top:hover, nav#top:active { border-top: 1px solid #000; border-bottom: 1px solid #000; color: #FAFAFA; - background-image: url("../img/ui/bggray.png"); - -webkit-box-shadow: 0px 0px 10px #000 inset; - -moz-box-shadow: 0px 0px 10px #000 inset; - -ms-box-shadow: 0px 0px 10px #000 inset; - -o-box-shadow: 0px 0px 10px #000 inset; + background-image: url("/img/ui/bggray.png"); box-shadow: 0px 0px 10px #000 inset; } #section-main article .markdown > div.content > pre code, #section-main article .markdown > div.content > pre pre { @@ -521,7 +421,7 @@ nav#top:hover, nav#top:active { display: block; width: 100%; height: 28px; - background-image: url(../img/ui/gototop.svg); + background-image: url(/img/ui/gototop.svg); background-position: center; background-size: contain; background-repeat: no-repeat; @@ -709,8 +609,29 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic opacity: 0.5; } +#lightbox .lb-cancel { + background-image: url(/img/ui/loading.gif); +} +#lightbox .lb-nav a.lb-prev { + background-image: url(/img/ui/prev.png); +} +#lightbox .lb-nav a.lb-next { + background-image: url(/img/ui/next.png); +} +#lightbox .lb-data .lb-close { + background-image: url(/img/ui/close.png); +} +#lightbox .lb-outerContainer { + background-image: url(/img/ui/bgdark.png); + border-radius: 10px; +} +#lightbox .lb-image { + border: 4px solid #202020; + border-radius: 10px; +} + body { - background-image: url(../img/ui/gnome3.jpg); + background-image: url(/img/ui/gnome3.jpg); background-size: cover; background-attachment: fixed; font-family: "Noto Serif", serif; @@ -746,10 +667,6 @@ body[data-page=home] nav#left .arrow { } body.skills #section-main article .skillexcellent, body.skills #section-main article .skillgood, body.skills #section-main article .skillmed, body.skills #section-main article .skillknown, body.skills #section-main article .skillperso, body.skills #section-main article .skillstudy { padding: 0 3px 0 3px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; border-radius: 5px; } body.skills #section-main article .skillexcellent { diff --git a/index.html b/index.html index 3cdc826..e7a2e6c 100644 --- a/index.html +++ b/index.html @@ -48,7 +48,7 @@ - + diff --git a/js/lightbox-2.10.0.min.js b/js/lightbox-2.10.0.min.js new file mode 100644 index 0000000..9f608e1 --- /dev/null +++ b/js/lightbox-2.10.0.min.js @@ -0,0 +1,15 @@ +/*! + * Lightbox v2.10.0 + * by Lokesh Dhakar + * + * More info: + * http://lokeshdhakar.com/projects/lightbox2/ + * + * Copyright 2007, 2018 Lokesh Dhakar + * Released under the MIT license + * https://github.com/lokesh/lightbox2/blob/master/LICENSE + * + * @preserve + */ +!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],b):"object"==typeof exports?module.exports=b(require("jquery")):a.lightbox=b(a.jQuery)}(this,function(a){function b(b){this.album=[],this.currentImageIndex=void 0,this.init(),this.options=a.extend({},this.constructor.defaults),this.option(b)}return b.defaults={albumLabel:"Image %1 of %2",alwaysShowNavOnTouchDevices:!1,fadeDuration:600,fitImagesInViewport:!0,imageFadeDuration:600,positionFromTop:50,resizeDuration:700,showImageNumberLabel:!0,wrapAround:!1,disableScrolling:!1,sanitizeTitle:!1},b.prototype.option=function(b){a.extend(this.options,b)},b.prototype.imageCountLabel=function(a,b){return this.options.albumLabel.replace(/%1/g,a).replace(/%2/g,b)},b.prototype.init=function(){var b=this;a(document).ready(function(){b.enable(),b.build()})},b.prototype.enable=function(){var b=this;a("body").on("click","a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]",function(c){return b.start(a(c.currentTarget)),!1})},b.prototype.build=function(){if(!(a("#lightbox").length>0)){var b=this;a('
').appendTo(a("body")),this.$lightbox=a("#lightbox"),this.$overlay=a("#lightboxOverlay"),this.$outerContainer=this.$lightbox.find(".lb-outerContainer"),this.$container=this.$lightbox.find(".lb-container"),this.$image=this.$lightbox.find(".lb-image"),this.$nav=this.$lightbox.find(".lb-nav"),this.containerPadding={top:parseInt(this.$container.css("padding-top"),10),right:parseInt(this.$container.css("padding-right"),10),bottom:parseInt(this.$container.css("padding-bottom"),10),left:parseInt(this.$container.css("padding-left"),10)},this.imageBorderWidth={top:parseInt(this.$image.css("border-top-width"),10),right:parseInt(this.$image.css("border-right-width"),10),bottom:parseInt(this.$image.css("border-bottom-width"),10),left:parseInt(this.$image.css("border-left-width"),10)},this.$overlay.hide().on("click",function(){return b.end(),!1}),this.$lightbox.hide().on("click",function(c){return"lightbox"===a(c.target).attr("id")&&b.end(),!1}),this.$outerContainer.on("click",function(c){return"lightbox"===a(c.target).attr("id")&&b.end(),!1}),this.$lightbox.find(".lb-prev").on("click",function(){return 0===b.currentImageIndex?b.changeImage(b.album.length-1):b.changeImage(b.currentImageIndex-1),!1}),this.$lightbox.find(".lb-next").on("click",function(){return b.currentImageIndex===b.album.length-1?b.changeImage(0):b.changeImage(b.currentImageIndex+1),!1}),this.$nav.on("mousedown",function(a){3===a.which&&(b.$nav.css("pointer-events","none"),b.$lightbox.one("contextmenu",function(){setTimeout(function(){this.$nav.css("pointer-events","auto")}.bind(b),0)}))}),this.$lightbox.find(".lb-loader, .lb-close").on("click",function(){return b.end(),!1})}},b.prototype.start=function(b){function c(a){d.album.push({alt:a.attr("data-alt"),link:a.attr("href"),title:a.attr("data-title")||a.attr("title")})}var d=this,e=a(window);e.on("resize",a.proxy(this.sizeOverlay,this)),a("select, object, embed").css({visibility:"hidden"}),this.sizeOverlay(),this.album=[];var f,g=0,h=b.attr("data-lightbox");if(h){f=a(b.prop("tagName")+'[data-lightbox="'+h+'"]');for(var i=0;ii||e.height>h)&&(e.width/i>e.height/h?(g=i,f=parseInt(e.height/(e.width/g),10),d.width(g),d.height(f)):(f=h,g=parseInt(e.width/(e.height/f),10),d.width(g),d.height(f)))),c.sizeContainer(d.width(),d.height())},e.src=this.album[b].link,this.currentImageIndex=b},b.prototype.sizeOverlay=function(){this.$overlay.width(a(document).width()).height(a(document).height())},b.prototype.sizeContainer=function(a,b){function c(){d.$lightbox.find(".lb-dataContainer").width(g),d.$lightbox.find(".lb-prevLink").height(h),d.$lightbox.find(".lb-nextLink").height(h),d.showImage()}var d=this,e=this.$outerContainer.outerWidth(),f=this.$outerContainer.outerHeight(),g=a+this.containerPadding.left+this.containerPadding.right+this.imageBorderWidth.left+this.imageBorderWidth.right,h=b+this.containerPadding.top+this.containerPadding.bottom+this.imageBorderWidth.top+this.imageBorderWidth.bottom;e!==g||f!==h?this.$outerContainer.animate({width:g,height:h},this.options.resizeDuration,"swing",function(){c()}):c()},b.prototype.showImage=function(){this.$lightbox.find(".lb-loader").stop(!0).hide(),this.$lightbox.find(".lb-image").fadeIn(this.options.imageFadeDuration),this.updateNav(),this.updateDetails(),this.preloadNeighboringImages(),this.enableKeyboardNav()},b.prototype.updateNav=function(){var a=!1;try{document.createEvent("TouchEvent"),a=!!this.options.alwaysShowNavOnTouchDevices}catch(a){}this.$lightbox.find(".lb-nav").show(),this.album.length>1&&(this.options.wrapAround?(a&&this.$lightbox.find(".lb-prev, .lb-next").css("opacity","1"),this.$lightbox.find(".lb-prev, .lb-next").show()):(this.currentImageIndex>0&&(this.$lightbox.find(".lb-prev").show(),a&&this.$lightbox.find(".lb-prev").css("opacity","1")),this.currentImageIndex1&&this.options.showImageNumberLabel){var d=this.imageCountLabel(this.currentImageIndex+1,this.album.length);this.$lightbox.find(".lb-number").text(d).fadeIn("fast")}else this.$lightbox.find(".lb-number").hide();this.$outerContainer.removeClass("animating"),this.$lightbox.find(".lb-dataContainer").fadeIn(this.options.resizeDuration,function(){return b.sizeOverlay()})},b.prototype.preloadNeighboringImages=function(){if(this.album.length>this.currentImageIndex+1){(new Image).src=this.album[this.currentImageIndex+1].link}if(this.currentImageIndex>0){(new Image).src=this.album[this.currentImageIndex-1].link}},b.prototype.enableKeyboardNav=function(){a(document).on("keyup.keyboard",a.proxy(this.keyboardAction,this))},b.prototype.disableKeyboardNav=function(){a(document).off(".keyboard")},b.prototype.keyboardAction=function(a){var b=a.keyCode,c=String.fromCharCode(b).toLowerCase();27===b||c.match(/x|o|c/)?this.end():"p"===c||37===b?0!==this.currentImageIndex?this.changeImage(this.currentImageIndex-1):this.options.wrapAround&&this.album.length>1&&this.changeImage(this.album.length-1):"n"!==c&&39!==b||(this.currentImageIndex!==this.album.length-1?this.changeImage(this.currentImageIndex+1):this.options.wrapAround&&this.album.length>1&&this.changeImage(0))},b.prototype.end=function(){this.disableKeyboardNav(),a(window).off("resize",this.sizeOverlay),this.$lightbox.fadeOut(this.options.fadeDuration),this.$overlay.fadeOut(this.options.fadeDuration),a("select, object, embed").css({visibility:"visible"}),this.options.disableScrolling&&a("html").removeClass("lb-disable-scrolling")},new b}); +//# sourceMappingURL=lightbox.min.map \ No newline at end of file diff --git a/js/lightbox-2.6.min.js b/js/lightbox-2.6.min.js deleted file mode 100644 index 562c29f..0000000 --- a/js/lightbox-2.6.min.js +++ /dev/null @@ -1 +0,0 @@ -(function() { var b, d, c; b = jQuery; c = (function() { function b() { this.fadeDuration = 500; this.fitImagesInViewport = true; this.resizeDuration = 700; this.showImageNumberLabel = true; this.wrapAround = false } b.prototype.albumLabel = function(b, c) { return"Image " + b + " sur " + c }; return b })(); d = (function() { function c(b) { this.options = b; this.album = []; this.currentImageIndex = void 0; this.init() } c.prototype.init = function() { this.enable(); return this.build() }; c.prototype.enable = function() { var c = this; return b('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(d) { c.start(b(d.currentTarget)); return false }) }; c.prototype.build = function() { var c = this; b("
").appendTo(b('body')); this.$lightbox = b('#lightbox'); this.$overlay = b('#lightboxOverlay'); this.$outerContainer = this.$lightbox.find('.lb-outerContainer'); this.$container = this.$lightbox.find('.lb-container'); this.containerTopPadding = parseInt(this.$container.css('padding-top'), 10); this.containerRightPadding = parseInt(this.$container.css('padding-right'), 10); this.containerBottomPadding = parseInt(this.$container.css('padding-bottom'), 10); this.containerLeftPadding = parseInt(this.$container.css('padding-left'), 10); this.$overlay.hide().on('click', function() { c.end(); return false }); this.$lightbox.hide().on('click', function(d) { if (b(d.target).attr('id') === 'lightbox') { c.end() } return false }); this.$outerContainer.on('click', function(d) { if (b(d.target).attr('id') === 'lightbox') { c.end() } return false }); this.$lightbox.find('.lb-prev').on('click', function() { if (c.currentImageIndex === 0) { c.changeImage(c.album.length - 1) } else { c.changeImage(c.currentImageIndex - 1) } return false }); this.$lightbox.find('.lb-next').on('click', function() { if (c.currentImageIndex === c.album.length - 1) { c.changeImage(0) } else { c.changeImage(c.currentImageIndex + 1) } return false }); return this.$lightbox.find('.lb-loader, .lb-close').on('click', function() { c.end(); return false }) }; c.prototype.start = function(c) { var f, e, j, d, g, n, o, k, l, m, p, h, i; b(window).on("resize", this.sizeOverlay); b('select, object, embed').css({visibility: "hidden"}); this.$overlay.width(b(document).width()).height(b(document).height()).fadeIn(this.options.fadeDuration); this.album = []; g = 0; j = c.attr('data-lightbox'); if (j) { h = b(c.prop("tagName") + '[data-lightbox="' + j + '"]'); for (d = k = 0, m = h.length; k < m; d = ++k) { e = h[d]; this.album.push({link: b(e).attr('href'), title: b(e).attr('title')}); if (b(e).attr('href') === c.attr('href')) { g = d } } } else { if (c.attr('rel') === 'lightbox') { this.album.push({link: c.attr('href'), title: c.attr('title')}) } else { i = b(c.prop("tagName") + '[rel="' + c.attr('rel') + '"]'); for (d = l = 0, p = i.length; l < p; d = ++l) { e = i[d]; this.album.push({link: b(e).attr('href'), title: b(e).attr('title')}); if (b(e).attr('href') === c.attr('href')) { g = d } } } } f = b(window); this.$lightbox.css({top: (f.height()/10) + 'px', left: 0 + 'px'}).fadeIn(this.options.fadeDuration); this.changeImage(g) }; c.prototype.changeImage = function(f) { var d, c, e = this; this.disableKeyboardNav(); d = this.$lightbox.find('.lb-image'); this.sizeOverlay(); this.$overlay.fadeIn(this.options.fadeDuration); b('.lb-loader').fadeIn('slow'); this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide(); this.$outerContainer.addClass('animating'); c = new Image(); c.onload = function() { var m, g, h, i, j, k, l; d.attr('src', e.album[f].link); m = b(c); d.width(c.width); d.height(c.height); if (e.options.fitImagesInViewport) { l = b(window).width(); k = b(window).height(); j = l - e.containerLeftPadding - e.containerRightPadding - 20; i = k - e.containerTopPadding - e.containerBottomPadding - 110; if ((c.width > j) || (c.height > i)) { if ((c.width / j) > (c.height / i)) { h = j; g = parseInt(c.height / (c.width / h), 10); d.width(h); d.height(g) } else { g = i; h = parseInt(c.width / (c.height / g), 10); d.width(h); d.height(g) } } } return e.sizeContainer(d.width(), d.height()) }; c.src = this.album[f].link; this.currentImageIndex = f }; c.prototype.sizeOverlay = function() { return b('#lightboxOverlay').width(b(document).width()).height(b(document).height()) }; c.prototype.sizeContainer = function(f, g) { var b, d, e, h, c = this; h = this.$outerContainer.outerWidth(); e = this.$outerContainer.outerHeight(); d = f + this.containerLeftPadding + this.containerRightPadding; b = g + this.containerTopPadding + this.containerBottomPadding; this.$outerContainer.animate({width: d, height: b}, this.options.resizeDuration, 'swing'); setTimeout(function() { c.$lightbox.find('.lb-dataContainer').width(d); c.$lightbox.find('.lb-prevLink').height(b); c.$lightbox.find('.lb-nextLink').height(b); c.showImage() }, this.options.resizeDuration) }; c.prototype.showImage = function() { this.$lightbox.find('.lb-loader').hide(); this.$lightbox.find('.lb-image').fadeIn('slow'); this.updateNav(); this.updateDetails(); this.preloadNeighboringImages(); this.enableKeyboardNav() }; c.prototype.updateNav = function() { this.$lightbox.find('.lb-nav').show(); if (this.album.length > 1) { if (this.options.wrapAround) { this.$lightbox.find('.lb-prev, .lb-next').show() } else { if (this.currentImageIndex > 0) { this.$lightbox.find('.lb-prev').show() } if (this.currentImageIndex < this.album.length - 1) { this.$lightbox.find('.lb-next').show() } } } }; c.prototype.updateDetails = function() { var b = this; if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") { this.$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast') } if (this.album.length > 1 && this.options.showImageNumberLabel) { this.$lightbox.find('.lb-number').text(this.options.albumLabel(this.currentImageIndex + 1, this.album.length)).fadeIn('fast') } else { this.$lightbox.find('.lb-number').hide() } this.$outerContainer.removeClass('animating'); this.$lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() { return b.sizeOverlay() }) }; c.prototype.preloadNeighboringImages = function() { var c, b; if (this.album.length > this.currentImageIndex + 1) { c = new Image(); c.src = this.album[this.currentImageIndex + 1].link } if (this.currentImageIndex > 0) { b = new Image(); b.src = this.album[this.currentImageIndex - 1].link } }; c.prototype.enableKeyboardNav = function() { b(document).on('keyup.keyboard', b.proxy(this.keyboardAction, this)) }; c.prototype.disableKeyboardNav = function() { b(document).off('.keyboard') }; c.prototype.keyboardAction = function(g) { var d, e, f, c, b; d = 27; e = 37; f = 39; b = g.keyCode; c = String.fromCharCode(b).toLowerCase(); if (b === d || c.match(/x|o|c/)) { this.end() } else if (c === 'p' || b === e) { if (this.currentImageIndex !== 0) { this.changeImage(this.currentImageIndex - 1) } } else if (c === 'n' || b === f) { if (this.currentImageIndex !== this.album.length - 1) { this.changeImage(this.currentImageIndex + 1) } } }; c.prototype.end = function() { this.disableKeyboardNav(); b(window).off("resize", this.sizeOverlay); this.$lightbox.fadeOut(this.options.fadeDuration); this.$overlay.fadeOut(this.options.fadeDuration); return b('select, object, embed').css({visibility: "visible"}) }; return c })(); b(function() { var e, b; b = new c(); return e = new d(b) }) }).call(this); \ No newline at end of file diff --git a/pages/projects.md b/pages/projects.md index f90fadd..6823dcb 100644 --- a/pages/projects.md +++ b/pages/projects.md @@ -251,7 +251,7 @@ In case of a disk failure, the server can be reinstalled in a __few hours__ (mos A funny one-day project. -I built a __conveyor belt__ actioned by a small reduced __DC motor__, controlled by a raspberry PI (with a H bridge for power separation). Every 3 hours, the bottles rotate for about _3 π / 4_, so my rhum is gently blended and get a __better__ _taste_ __faster__ :) +I built a __conveyor belt__ actioned by a small reduced __DC motor__, controlled by a raspberry PI (with a H bridge for power separation). Every 3 hours, the bottles rotate for about _3 π / 4_, so my rum is gently blended and get a __better__ _taste_ __faster__ :) ### Skills diff --git a/scss/lightbox-ovr.scss b/scss/lightbox-ovr.scss new file mode 100644 index 0000000..85a6562 --- /dev/null +++ b/scss/lightbox-ovr.scss @@ -0,0 +1,28 @@ + + +#lightbox{ + .lb-cancel { + background-image: url(#{$ImgPath}/ui/loading.gif) + } + .lb-nav a.lb-prev{ + background-image: url(#{$ImgPath}/ui/prev.png); + } + .lb-nav a.lb-next { + background-image: url(#{$ImgPath}/ui/next.png); + } + .lb-data .lb-close { + background-image: url(#{$ImgPath}/ui/close.png); + } + + + .lb-outerContainer { + background-image: url(#{$ImgPath}/ui/bgdark.png); + border-radius: 10px; + } + + .lb-image { + border: 4px solid $ClrBlack; + border-radius: 10px; + } + +} \ No newline at end of file diff --git a/scss/main.scss b/scss/main.scss index d0eaeac..05fe5c4 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -8,16 +8,16 @@ $ClrTrueBlack: #000000; $FontTitle: 'Croissant One',cursive; $FontText: 'Noto Serif',serif; - +$ImgPath: /img; @import "fonts.scss"; -@import "mixins.scss"; @import "nav.scss"; @import "section.scss"; @import "monokai.scss"; +@import "lightbox-ovr.scss"; body{ - background-image: url(../img/ui/gnome3.jpg); + background-image: url(/img/ui/gnome3.jpg); background-size: cover; background-attachment: fixed; @@ -60,7 +60,7 @@ body.skills{ article{ .skillexcellent, .skillgood, .skillmed, .skillknown, .skillperso, .skillstudy{ padding: 0 3px 0 3px; - @include border-radius(5px); + border-radius: 5px; } .skillexcellent {background: linear-gradient(#00C107, #00A806);} .skillgood {background: linear-gradient(#73C100, #64A800);} diff --git a/scss/mixins.scss b/scss/mixins.scss deleted file mode 100644 index 00d3adf..0000000 --- a/scss/mixins.scss +++ /dev/null @@ -1,63 +0,0 @@ -@mixin border-radius($value) { - -webkit-border-radius: $value; - -moz-border-radius: $value; - -ms-border-radius: $value; - -o-border-radius: $value; - border-radius: $value; -} -@mixin box-shadow($value) { - -webkit-box-shadow: $value; - -moz-box-shadow: $value; - -ms-box-shadow: $value; - -o-box-shadow: $value; - box-shadow: $value; -} -@mixin transition-property($value) { - -webkit-transition-property: $value; - -moz-transition-property: $value; - -ms-transition-property: $value; - -o-transition-property: $value; - transition-property: $value; -} -@mixin transition-property2($value, $value2) { - -webkit-transition-property: $value,$value2; - -moz-transition-property: $value,$value2; - -ms-transition-property: $value,$value2; - -o-transition-property: $value,$value2; - transition-property: $value,$value2; -} -@mixin transition-duration($value) { - -webkit-transition-duration: $value; - -moz-transition-duration: $value; - -ms-transition-duration: $value; - -o-transition-duration: $value; - transition-duration: $value; -} -@mixin transition-delay($value) { - -webkit-transition-delay: $value; - -moz-transition-delay: $value; - -ms-transition-delay: $value; - -o-transition-delay: $value; - transition-delay: $value; -} -@mixin text-shadow($value) { - -webkit-text-shadow: $value; - -moz-text-shadow: $value; - -ms-text-shadow: $value; - -o-text-shadow: $value; - text-shadow: $value; -} -@mixin animation($value) { - -webkit-animation: $value; - -moz-animation: $value; - -ms-animation: $value; - -o-animation: $value; - animation: $value; -} -@mixin animation-delay($value) { - -webkit-animation-delay: $value; - -moz-animation-delay: $value; - -ms-animation-delay: $value; - -o-animation-delay: $value; - animation-delay: $value; -} \ No newline at end of file diff --git a/scss/nav.scss b/scss/nav.scss index c1a69c9..2866edc 100644 --- a/scss/nav.scss +++ b/scss/nav.scss @@ -16,25 +16,25 @@ nav#left{ border-width: 0 1px 0 0; border-color: $ClrTrueBlack; - background-image: url(../img/ui/bggray.png); - @include box-shadow(-4px 0px 10px $ClrBlack inset); - + background-image: url(#{$ImgPath}/ui/bggray.png); + box-shadow: -4px 0px 10px $ClrBlack inset; + text-align: center; font-size: large; - - @include transition-property(left); - @include transition-duration(0.2s); - @include transition-delay(0.1s); + + transition-property: left; + transition-duration: 0.2s; + transition-delay: 0.1s; .arrow{ position: absolute; right: 0; top: 50%; height: 35px; - - @include transition-property(opacity); - @include transition-duration(0.2s); - @include transition-delay(0.1s); + + transition-property: opacity; + transition-duration: 0.2s; + transition-delay: 0.1s; } //
===================================== @@ -58,22 +58,22 @@ nav#left{ display: block; padding: 5px; margin: 7px 20px 7px 20px; - + background-color: #303030; border-style: solid; border-width: 1px; border-color: #000; - @include border-radius(3px); - + border-radius: 3px; + color: $ClrWhite; font-weight: bold; text-decoration: none; text-align: center; font-size: 1.2em; - @include transition-property(border-color background-color); - @include transition-duration(0.1s); + transition-property: border-color background-color; + transition-duration: 0.1s; } a:hover{ background-color: #383838; @@ -82,7 +82,7 @@ nav#left{ a:active, a.active{ background-color: #215D9C; } - + a.external:after{ content: "↳ "; } @@ -127,18 +127,18 @@ nav#top padding: 4px 0px; overflow: auto; - - background-image: url(../img/ui/bgdark.png); - + + background-image: url(#{$ImgPath}/ui/bgdark.png); + border-style: solid; border-width: 0 1px 1px 1px; border-color: $ClrTrueBlack; - + text-align: center; white-space: nowrap; - - @include transition-property(top); - @include transition-duration(0.1s); + + transition-property: top; + transition-duration: 0.1s; .arrow{ position: absolute; @@ -161,22 +161,22 @@ nav#top font-size: 18px; font-style: italic; text-decoration: none; - @include text-shadow(0 0 5px $ClrTrueBlack); + text-shadow: 0 0 5px $ClrTrueBlack; text-align: center; img{ margin: 4px 4px 0 4px; width: 128px; height: 128px; - @include border-radius(10px); - @include box-shadow(0px 0px 10px $ClrTrueBlack); + border-radius: 10px; + box-shadow: 0px 0px 10px $ClrTrueBlack; } figcaption{ width: 128px; } } a:hover{ - @include border-radius(5px); + border-radius: 5px; background-color: rgba(255,255,255,0.15); } diff --git a/scss/section.scss b/scss/section.scss index 3839283..a90c650 100644 --- a/scss/section.scss +++ b/scss/section.scss @@ -3,8 +3,8 @@ $ArticleMaxWidth: 800px; @keyframes UnwrapHeader { from { - margin-left: 50%; - margin-right: 50%; + margin-left: 40%; + margin-right: 40%; } to { margin-left: 40px; @@ -18,9 +18,9 @@ $ArticleMaxWidth: 800px; position: absolute; left: 20px; right: 0px; - @include transition-property(left); - @include transition-duration(0.2s); - @include transition-delay(0.1s); + transition-property: left; + transition-duration: 0.2s; + transition-delay: 0.1s; header{ @@ -65,8 +65,8 @@ $ArticleMaxWidth: 800px; font-size: 0.6em; line-height: 1.3em; - @include transition-property(border-radius); - @include transition-duration(0.5s); + transition-property: border-radius; + transition-duration: 0.5s; @@ -81,7 +81,7 @@ $ArticleMaxWidth: 800px; background-color: #215D9C; - background-image: url("../img/ui/stripes.png"); + background-image: url("#{$ImgPath}/ui/stripes.png"); color: $ClrWhite; @@ -95,8 +95,8 @@ $ArticleMaxWidth: 800px; letter-spacing: -0.03em; - @include transition-property(border-radius); - @include transition-duration(0.5s); + transition-property: border-radius; + transition-duration: 0.5s; img{ @@ -114,7 +114,7 @@ $ArticleMaxWidth: 800px; border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; - background-image: url("../img/ui/stripes.png"); + background-image: url("#{$ImgPath}/ui/stripes.png"); color: $ClrText; font-family: $FontTitle; @@ -226,8 +226,8 @@ $ArticleMaxWidth: 800px; color: $ClrWhite; - background-image: url("../img/ui/bgdark.png"); - @include box-shadow(0px 0px 10px #000 inset); + background-image: url("#{$ImgPath}/ui/bgdark.png"); + box-shadow: 0px 0px 10px #000 inset; img, video, iframe{ @@ -268,8 +268,8 @@ $ArticleMaxWidth: 800px; color: $ClrWhite; - background-image: url("../img/ui/bggray.png"); - @include box-shadow(0px 0px 10px #000 inset); + background-image: url("#{$ImgPath}/ui/bggray.png"); + box-shadow: 0px 0px 10px #000 inset; code, pre{ margin-bottom: 0px; @@ -296,7 +296,7 @@ $ArticleMaxWidth: 800px; display: block; width: 100%; height: 28px; - background-image: url(../img/ui/gototop.svg); + background-image: url(#{$ImgPath}/ui/gototop.svg); background-position: center; background-size: contain; background-repeat: no-repeat;