1
0
weblog/_sass/_common.scss
JackCarterSmith 64f91ff50b
All checks were successful
Build Jekyll weblog / build (push) Successful in 2s
Initial commit
2023-09-02 18:55:02 +02:00

56 lines
1.8 KiB
SCSS

// Common site fonts:
$site-base-font-family: Helvetica, Arial, sans-serif;
$site-base-font-weight: lighter;
// ========================================================
// SCSS Mixins, common style blocks/macros:
// ========================================================
//
// Shadow effect used on images and embedded videos.
//
@mixin my-box-shadow {
-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 0, 0, 0.2) inset;
-o-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 0, 0, 0.2) inset;
}
//
// Mouse hover transition used in the main page.
//
@mixin my-mouse-hover-transition {
-webkit-transition: 0.4s ease;
-moz-transition: 0.4s ease;
-o-transition: 0.4s ease;
transition: 0.4s ease;
}
//
// Site background image and image sampling rules.
//
@mixin my-site-background {
background: url("../static/images/site-bg.png") repeat-y left top;
background-size: 100% 100%;
}
//
// Set a flex-box display in a portable way and
// aligns the content in the center of the parent box.
//
@mixin my-display-flex-center-align {
display: -webkit-box; // OLD - iOS 6-, Safari 3.1-6
display: -moz-box; // OLD - Firefox 19- (buggy but mostly works)
display: -ms-flexbox; // TWEENER - IE 10
display: -webkit-flex; // NEW - Chrome
display: flex; // NEW, Spec - Opera 12.1, Firefox 20+
-webkit-justify-content: center; // Safari 6.1+
justify-content: center; // Align horizontally
-webkit-align-items: center; // Safari 7.0+
align-items: center; // Align vertically
}