Updated lightbox & fixed CSS
This commit is contained in:
parent
c76127b7c8
commit
2f6a5cd09c
GPG Key ID:
45A3D5F880B9E6D0
137
css/lightbox.css
137
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);
|
||||
|
||||
145
css/main.css
145
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 {
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
<script src="/js/marked.min.js"></script>
|
||||
<script src="/js/jquery-3.3.1.min.js"></script>
|
||||
<script src="/js/ChartNew.js"></script>
|
||||
<script src="/js/lightbox-2.6.min.js"></script>
|
||||
<script src="/js/lightbox-2.10.0.min.js"></script>
|
||||
<script src="/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
15
js/lightbox-2.10.0.min.js
vendored
Normal file
15
js/lightbox-2.10.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
js/lightbox-2.6.min.js
vendored
1
js/lightbox-2.6.min.js
vendored
File diff suppressed because one or more lines are too long
@ -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
|
||||
|
||||
28
scss/lightbox-ovr.scss
Normal file
28
scss/lightbox-ovr.scss
Normal file
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -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);}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -16,15 +16,15 @@ 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;
|
||||
@ -32,9 +32,9 @@ nav#left{
|
||||
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;
|
||||
}
|
||||
|
||||
// <figure> =====================================
|
||||
@ -64,7 +64,7 @@ nav#left{
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: #000;
|
||||
@include border-radius(3px);
|
||||
border-radius: 3px;
|
||||
|
||||
color: $ClrWhite;
|
||||
font-weight: bold;
|
||||
@ -72,8 +72,8 @@ nav#left{
|
||||
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;
|
||||
@ -128,7 +128,7 @@ nav#top
|
||||
|
||||
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;
|
||||
@ -137,8 +137,8 @@ nav#top
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user