From 9d629f9579efa79ef53cb79a4d06ce5f78577f78 Mon Sep 17 00:00:00 2001
From: gil <kalanggam@proton.me>
Date: Sun, 26 May 2024 19:40:39 -0500
Subject: [PATCH] Add some rotation to floating gba portrait

---
 src/css/global.css     | 9 ++++++++-
 src/css/global.css.map | 2 +-
 src/css/global.scss    | 9 ++++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/css/global.css b/src/css/global.css
index 481f952..e182e26 100644
--- a/src/css/global.css
+++ b/src/css/global.css
@@ -87,12 +87,13 @@ article {
   border-image: url(../img/nine-patch.png) 32 round;
   -webkit-border-image: url(../img/nine-patch.png) 32 round;
   background-color: rgb(255, 252, 240);
-  box-shadow: 0px 0px 20px rgb(16, 15, 15);
+  box-shadow: 0 8px rgb(52, 51, 49);
 }
 @media screen and (min-width: 600px) {
   main,
   article {
     margin: 0 2em;
+    box-shadow: 8px 8px rgb(52, 51, 49);
   }
 }
 main ol,
@@ -149,6 +150,11 @@ footer.footer-main {
 .gba-portrait {
   margin: auto;
   margin-bottom: 1em;
+  transform: rotate(2deg);
+  border: 4px solid #e7e2cc;
+  background: white;
+  box-shadow: 4px 4px 0px rgb(183, 181, 172);
+  padding: 8px;
   width: 100%;
   height: auto;
   max-width: 288px;
@@ -164,6 +170,7 @@ footer.footer-main {
   display: inline;
   image-rendering: crisp-edges;
   vertical-align: text-bottom;
+  opacity: 0.2;
 }
 
 /*# sourceMappingURL=global.css.map */
diff --git a/src/css/global.css.map b/src/css/global.css.map
index 6e75eb0..75e7850 100644
--- a/src/css/global.css.map
+++ b/src/css/global.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_colors.scss","_fonts.scss","global.scss","_mixins.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAGA;EACE;EACA;;ACLF;AAAA;AAAA;AAAA;AAWA;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;ACpBA;EDcF;AAAA;AAAA;AAAA;AAAA;AAAA;IAQI;;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,OA5CG;EA6CH;EACA;EACA;EACA;EACA;;AC9CA;EDsCF;AAAA;IAUI;;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AC3GA;EDsGF;IAOI;IACA;;;;AAIJ;EACE;EACA;EACA","file":"global.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["_colors.scss","_fonts.scss","global.scss","_mixins.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAGA;EACE;EACA;;ACLF;AAAA;AAAA;AAAA;AAWA;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;ACpBA;EDcF;AAAA;AAAA;AAAA;AAAA;AAAA;IAQI;;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,OA5CG;EA6CH;EACA;EACA;EACA;EACA;;AC9CA;EDsCF;AAAA;IAUI;IACA;;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACjHA;EDuGF;IAYI;IACA;;;;AAIJ;EACE;EACA;EACA;EACA","file":"global.css"}
\ No newline at end of file
diff --git a/src/css/global.scss b/src/css/global.scss
index dee85ed..b8b589f 100644
--- a/src/css/global.scss
+++ b/src/css/global.scss
@@ -57,9 +57,10 @@ article {
   border-image: url(../img/nine-patch.png) 32 round;
   -webkit-border-image: url(../img/nine-patch.png) 32 round;
   background-color: #{colors.$paper};
-  box-shadow: 0px 0px 20px #{colors.$black};
+  box-shadow: 0 8px #{colors.$base-850};
   @include breakpoint("sm") {
     margin: 0 2em;
+    box-shadow: 8px 8px #{colors.$base-850};
   }
 
   ol,
@@ -116,6 +117,11 @@ footer.footer-main {
 .gba-portrait {
   margin: auto;
   margin-bottom: 1em;
+  transform: rotate(2deg);
+  border: 4px solid #e7e2cc;
+  background: white;
+  box-shadow: 4px 4px 0px #{colors.$base-300};
+  padding: 8px;
   width: 100%;
   height: auto;
   max-width: 288px;
@@ -129,4 +135,5 @@ footer.footer-main {
   display: inline;
   image-rendering: crisp-edges;
   vertical-align: text-bottom;
+  opacity: 0.2;
 }