Updated lightbox & fixed CSS

This commit is contained in:
Crom (Thibaut CHARLES) 2018-05-17 11:41:09 +02:00
parent c76127b7c8
commit 2f6a5cd09c
Signed by: tcharles
GPG Key ID: 45A3D5F880B9E6D0
11 changed files with 191 additions and 300 deletions

View File

@ -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);

View File

@ -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 {

View File

@ -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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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
View 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;
}
}

View File

@ -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);}

View File

@ -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;
}

View File

@ -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;
}
// <figure> =====================================
@ -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);
}

View File

@ -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;