aboutsummaryrefslogtreecommitdiff
path: root/assets/scss/home.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/scss/home.scss')
-rw-r--r--assets/scss/home.scss126
1 files changed, 67 insertions, 59 deletions
diff --git a/assets/scss/home.scss b/assets/scss/home.scss
index 57ebccc..8f31726 100644
--- a/assets/scss/home.scss
+++ b/assets/scss/home.scss
@@ -425,11 +425,11 @@ body > footer {
.media #gfx {
background: rgba(191, 138, 112,0.7);
transform: rotate(-4deg);
- margin: 0 -3vw 0 0;
+ margin: 0 -3vw 0 -2vw;
left: 0;
h3 {
- transform: rotate(4deg) translateX(1vw);
+ transform: rotate(4deg) translateX(3vw);
font-size: 5rem;
}
@@ -443,7 +443,7 @@ body > footer {
&:hover {
background: rgba(191, 138, 112, 0.9);
transform: rotate(0);
- margin: 0;
+ margin: 1vw 0 0 0;
color: black;
padding: 1rem;
@@ -471,23 +471,29 @@ body > footer {
.media #txt {
background: rgba(166, 191, 112, 0.7);
- transform: rotate(6deg);
- margin: 0 -3vw 0 0;
+ transform: rotate(6deg) translateX(-1.5vw);
+ margin: 1vw -3vw 0 0;
color: transparent;
+
+ h3 {
+ transform: rotate(-6deg) translateX(1.5vw) translateY(-1.2rem);
+ margin-left: -1vw;
+ }
+
+ &:hover {
+ background: rgba(166, 191, 112, 0.9);
+ transform: rotate(0);
+ margin: 1vw 0 0 0;
+ color: black;
+ padding: 1rem;
+
+ h3 {
+ transform: rotate(0) translateX(0) translateY(-4rem);
+ margin-left: 0;
+ }
+ }
}
- .media #txt h3 {
- transform: rotate(-6deg) translateX(-3vw) translateY(-0.1rem);
- }
- .media #txt:hover {
- background: rgba(166, 191, 112, 0.9);
- transform: rotate(0);
- margin: 0;
- color: black;
- padding: 1rem;
- }
- .media #txt:hover h3 {
- transform: rotate(0) translateX(0) translateY(-4.1rem);
- }
+
.media section h3 a {
position: relative;
display: block;
@@ -512,52 +518,54 @@ body > footer {
.media #vda {
left: 0;
background: rgba(112, 166, 191, 0.5);
- transform: rotate(-5deg);
- margin: 0 0 0 -2vw;
- width: 10vw;
+ transform: rotate(-2.5deg) translateX(1vw);
+ margin: 0 0 0 -3vw;
+ width: 12.5vw;
+
+ h3 {
+ padding-left: 1.5vw;
+ transform: rotate(2.5deg) translateX(-1vw);
+ font-size: 5rem;
+ }
p, h4 {
display: none;
}
- }
- .media #vdo video,
- .media #vda video {
- position: absolute;
- top: 50%;
- left: 50%;
- min-width: 100%;
- min-height: 100%;
- width: auto;
- height: auto;
- transform: translate(-50%, -50%);
- z-index: -101;
- opacity: 0.1;
- }
- .media #vdo:hover video,
- .media #vda:hover video {
- opacity: 1;
- }
- .media #vdo:hover,
- .media #vda:hover {
- background: rgba(112, 166, 191, 0.9);
- margin: 0;
- transform: rotate(0);
- width: 40vw;
- }
- .media #vdo h3,
- .media #vda h3 {
- transform: rotate(5deg) translateX(-2vw);
- }
- .media #vdo:hover h3,
- .media #vda:hover h3 {
- transform: rotate(0) translateX(0) translateY(-5rem);
- color: rgba(109, 144, 162, 0.7);
- font-size: 18vw;
+
+ video {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ min-width: 100%;
+ min-height: 100%;
+ width: auto;
+ height: auto;
+ transform: translate(-50%, -50%);
+ z-index: -101;
+ opacity: 0.2;
+ }
- a {
- display: block;
- height: 100%;
- width: 100%;
+ &:hover {
+ background: rgba(112, 166, 191, 0.9);
+ margin: 0;
+ transform: rotate(0);
+ width: 40vw;
+
+ h3 {
+ transform: rotate(0) translateX(0) translateY(-4rem);
+ color: rgba(109, 144, 162, 0.7);
+ font-size: 18vw;
+
+ a {
+ display: block;
+ height: 100%;
+ width: 100%;
+ }
+ }
+
+ video {
+ opacity: 1;
+ }
}
}