summaryrefslogtreecommitdiff
path: root/_sass
diff options
context:
space:
mode:
Diffstat (limited to '_sass')
-rw-r--r--_sass/yat.scss2
-rw-r--r--_sass/yat/_base.scss39
-rw-r--r--_sass/yat/_layout.scss52
3 files changed, 50 insertions, 43 deletions
diff --git a/_sass/yat.scss b/_sass/yat.scss
index 52162d7..c36c55c 100644
--- a/_sass/yat.scss
+++ b/_sass/yat.scss
@@ -31,7 +31,7 @@ $footer-height: $header-height * 1.05 !default;
$footer-text-color: rgba(lighten(invert($theme-color), 30%), 50%) !default;
$footer-background-color: darken($theme-color, 5%) !default;
-$banner-height: 350px !default;
+$banner-height: 380px !default;
$banner-text-color: lighten($white-color, 0%) !default;
$banner-background: darken(#333, 5%) !default;
diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss
index 15eacde..e92c561 100644
--- a/_sass/yat/_base.scss
+++ b/_sass/yat/_base.scss
@@ -227,15 +227,6 @@ table {
}
/**
- * Vertical center
- */
-%vertical-center {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
-}
-
-/**
* Flex layout
*/
%flex-layout {
@@ -256,3 +247,33 @@ table {
transform: scale(0.9999); /* <-- fix the sticky x overflow issue */
top: $top;
}
+
+/**
+ * Vertical center
+ */
+@mixin vertical-center($position) {
+ position: $position;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+/**
+ * Horizontal center
+ */
+@mixin horizontal-center($position) {
+ position: $position;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+/**
+ * Center background image
+ */
+@mixin center-image {
+ height: 100%;
+ max-width: 1000%;
+ background-size: cover;
+ background-position: center center;
+ overflow: hidden;
+}
+
diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss
index 3db7dde..757593f 100644
--- a/_sass/yat/_layout.scss
+++ b/_sass/yat/_layout.scss
@@ -16,36 +16,30 @@
}
.site-brand {
- @extend %vertical-center;
-
- float: left;
- height: 100%;
- max-height: 100%;
+ @include vertical-center(absolute);
margin-right: 50px;
- .site-favicon {
- margin-right: 10px;
- height: 65%;
- max-height: 65%;
- border-radius: 65%;
- box-shadow: 0 0 2px #080808d1;
- transition: 0.2s;
-
- &:hover {
- box-shadow: 0 0 5px #080808d1;
- }
- }
-
- .site-title {
+ .site-brand-inner {
@include relative-font-size(1.125);
font-weight: $base-font-weight;
- line-height: $header-height;
- text-shadow: 0 0 3px #080808d1;
+ filter: drop-shadow(0 0 2px #08080880);
+ text-shadow: 0 0 2px #080808d0;
letter-spacing: -1px;
+ transition: drop-shadow 0.2s;
&, &:visited {
color: $header-text-color;
}
+
+ &:hover {
+ filter: drop-shadow(0 0 3px #080808a0);
+ }
+
+ .site-favicon {
+ display: inline-block;
+ height: $header-height / 1.5;
+ margin-right: 5px;
+ }
}
}
@@ -157,7 +151,7 @@
*/
.page-content {
@extend %flex-1; /* <-- Keep footer on the bottom */
- padding: $spacing-unit 0;
+ padding: $spacing-unit * 1.5 0;
}
.page-heading {
@@ -280,19 +274,12 @@
.page-banner-img {
position: absolute;
+ width: 100%;
height: 100%;
overflow: hidden;
& > *:first-child {
- position: relative;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- height: 100%;
- max-width: 1000%;
- background-size: cover;
- background-position: center center;
- overflow: hidden;
+ @include center-image;
}
}
@@ -301,9 +288,8 @@
}
.page-banner-inner {
- @extend %vertical-center;
+ @include vertical-center(relative);
- position: relative;
color: $banner-text-color;
padding: 10px 5px;
text-shadow: 1px 1px 2px #333;