From 4c1992105a6aa8e5c1e30e891c5d5afee8434550 Mon Sep 17 00:00:00 2001 From: Emilia Date: Sat, 22 Jan 2022 01:01:27 -0500 Subject: [PATCH] Initial mobile styling Width changes to 100%, pgp key always visible, etc --- src/about.html | 1 + src/css/about.css | 4 ++++ src/css/about.css.map | 2 +- src/css/global.css | 4 ++++ src/css/global.css.map | 2 +- src/css/index.css | 7 +++++++ src/css/index.css.map | 2 +- src/css/responsive.css | 3 +++ src/css/responsive.css.map | 1 + src/index.html | 1 + src/js/index.js | 12 ++++++++++-- src/sass/global.sass | 10 ++++++++++ src/sass/index.sass | 9 +++++++++ src/sass/responsive.sass | 8 ++++++++ 14 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 src/css/responsive.css create mode 100644 src/css/responsive.css.map create mode 100644 src/sass/responsive.sass diff --git a/src/about.html b/src/about.html index 6db997d..a8266e4 100644 --- a/src/about.html +++ b/src/about.html @@ -3,6 +3,7 @@ Emilia Allison +
diff --git a/src/css/about.css b/src/css/about.css index c45695f..b602e7f 100644 --- a/src/css/about.css +++ b/src/css/about.css @@ -10,6 +10,9 @@ body { margin: 0 0 0 0; overflow: hidden; background-color: black; + --test: 13; + --is-mobile: 0; + --is-mobile: 1; } .overlay { @@ -31,6 +34,7 @@ body { height: 100vh; background-color: #091519; flex-direction: column; + width: 100%; } .contentholder { diff --git a/src/css/about.css.map b/src/css/about.css.map index ab5dfda..fcaf852 100644 --- a/src/css/about.css.map +++ b/src/css/about.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/global.sass","../sass/anim.sass"],"names":[],"mappings":"AAYA;EANE;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EAEA;EAEA;EACA;EACA;;;AAEF;EAzBE;EACA;EACA;EACA;EACA;EAuBA;EACA;EACA,kBAjCS;EAkCT;;;AAEF;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;;;AAGF;EACE,OArDc;EAsDd;EACA;EACA;EACA;;;AAEF;EACE,OA3DgB;EA4DhB;EACA;EACA;EACA;;;AAGF;EACE,OAnEgB;EAoEhB;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EAEE;;AACA;EACE;;;AC7EJ;EACE;IACE;;EACF;IACE;;;AAMJ;EACE,kBAdiB;EAejB;EACA;EACA;EACA;EARA;;;AAYF;EAEE","file":"about.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/global.sass","../sass/anim.sass"],"names":[],"mappings":"AAcA;EANE;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEE;;;AAEJ;EACE;EACA;EAEA;EAEA;EACA;EACA;;;AAEF;EA9BE;EACA;EACA;EACA;EACA;EA4BA;EACA;EACA,kBAtCS;EAuCT;EAGE;;;AAEJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;;;AAGF;EACE,OA7Dc;EA8Dd;EACA;EACA;EACA;;;AAEF;EACE,OAnEgB;EAoEhB;EACA;EACA;EACA;;;AAGF;EACE,OA3EgB;EA4EhB;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EAEE;;AACA;EACE;;;ACvFJ;EACE;IACE;;EACF;IACE;;;AAMJ;EACE,kBAdiB;EAejB;EACA;EACA;EACA;EARA;;;AAYF;EAEE","file":"about.css"} \ No newline at end of file diff --git a/src/css/global.css b/src/css/global.css index 124427e..31b850d 100644 --- a/src/css/global.css +++ b/src/css/global.css @@ -10,6 +10,9 @@ body { margin: 0 0 0 0; overflow: hidden; background-color: black; + --test: 13; + --is-mobile: 0; + --is-mobile: 1; } .overlay { @@ -31,6 +34,7 @@ body { height: 100vh; background-color: #091519; flex-direction: column; + width: 100%; } .contentholder { diff --git a/src/css/global.css.map b/src/css/global.css.map index 731d9c3..5cb1260 100644 --- a/src/css/global.css.map +++ b/src/css/global.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/global.sass"],"names":[],"mappings":"AAYA;EANE;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EAEA;EAEA;EACA;EACA;;;AAEF;EAzBE;EACA;EACA;EACA;EACA;EAuBA;EACA;EACA,kBAjCS;EAkCT;;;AAEF;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;;;AAGF;EACE,OArDc;EAsDd;EACA;EACA;EACA;;;AAEF;EACE,OA3DgB;EA4DhB;EACA;EACA;EACA;;;AAGF;EACE,OAnEgB;EAoEhB;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EAEE;;AACA;EACE","file":"global.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/global.sass"],"names":[],"mappings":"AAcA;EANE;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEE;;;AAEJ;EACE;EACA;EAEA;EAEA;EACA;EACA;;;AAEF;EA9BE;EACA;EACA;EACA;EACA;EA4BA;EACA;EACA,kBAtCS;EAuCT;EAGE;;;AAEJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;;;AAGF;EACE,OA7Dc;EA8Dd;EACA;EACA;EACA;;;AAEF;EACE,OAnEgB;EAoEhB;EACA;EACA;EACA;;;AAGF;EACE,OA3EgB;EA4EhB;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EAEE;;AACA;EACE","file":"global.css"} \ No newline at end of file diff --git a/src/css/index.css b/src/css/index.css index a8d11be..95afc46 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -10,6 +10,9 @@ body { margin: 0 0 0 0; overflow: hidden; background-color: black; + --test: 13; + --is-mobile: 0; + --is-mobile: 1; } .overlay { @@ -31,6 +34,7 @@ body { height: 100vh; background-color: #091519; flex-direction: column; + width: 100%; } .contentholder { @@ -112,6 +116,7 @@ mark.internet { .name__subcontent { text-align: left; + text-align: center; } .name__subcontent a { font-size: small; @@ -119,6 +124,7 @@ mark.internet { position: absolute; margin-left: 5px; margin-top: 5px; + position: relative; } .links { @@ -130,6 +136,7 @@ mark.internet { display: flex; justify-content: center; align-items: center; + width: 80%; } .links .links__sub { height: 6vh; diff --git a/src/css/index.css.map b/src/css/index.css.map index 78f1b9f..2ddb800 100644 --- a/src/css/index.css.map +++ b/src/css/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/global.sass","../sass/anim.sass","../sass/index.sass"],"names":[],"mappings":"AAYA;EANE;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EAEA;EAEA;EACA;EACA;;;AAEF;EAzBE;EACA;EACA;EACA;EACA;EAuBA;EACA;EACA,kBAjCS;EAkCT;;;AAEF;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;;;AAGF;EACE,OArDc;EAsDd;EACA;EACA;EACA;;;AAEF;EACE,OA3DgB;EA4DhB;EACA;EACA;EACA;;;AAGF;EACE,OAnEgB;EAoEhB;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EAEE;;AACA;EACE;;;AC7EJ;EACE;IACE;;EACF;IACE;;;AAMJ;EACE,kBAdiB;EAejB;EACA;EACA;EACA;EARA;;;AAYF;EAEE;;;ACtBF;EACE;EAEA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGJ;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/global.sass","../sass/anim.sass","../sass/index.sass"],"names":[],"mappings":"AAcA;EANE;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEE;;;AAEJ;EACE;EACA;EAEA;EAEA;EACA;EACA;;;AAEF;EA9BE;EACA;EACA;EACA;EACA;EA4BA;EACA;EACA,kBAtCS;EAuCT;EAGE;;;AAEJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;;;AAGF;EACE,OA7Dc;EA8Dd;EACA;EACA;EACA;;;AAEF;EACE,OAnEgB;EAoEhB;EACA;EACA;EACA;;;AAGF;EACE,OA3EgB;EA4EhB;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EAEE;;AACA;EACE;;;ACvFJ;EACE;IACE;;EACF;IACE;;;AAMJ;EACE,kBAdiB;EAejB;EACA;EACA;EACA;EARA;;;AAYF;EAEE;;;ACtBF;EACE;EAEA;;;AAEF;EACE;EAGE;;AAEF;EACE;EACA;EACA;EACA;EACA;EAGA;;;AAGJ;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAGE;;AAEF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA","file":"index.css"} \ No newline at end of file diff --git a/src/css/responsive.css b/src/css/responsive.css new file mode 100644 index 0000000..0af2633 --- /dev/null +++ b/src/css/responsive.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=responsive.css.map */ diff --git a/src/css/responsive.css.map b/src/css/responsive.css.map new file mode 100644 index 0000000..51fab36 --- /dev/null +++ b/src/css/responsive.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"responsive.css"} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 70b593e..1a02864 100644 --- a/src/index.html +++ b/src/index.html @@ -4,6 +4,7 @@ Emilia Allison +
diff --git a/src/js/index.js b/src/js/index.js index e84207d..ea0ed68 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,7 +1,15 @@ +// If CSS determines that the device is mobile, set flag +const is_mobile = getComputedStyle(document.body).getPropertyValue('--is-mobile'); + const pgp_p = document.getElementById('pgp_p') const pgp_a = document.getElementById('pgp_a') -pgp_p.onmouseover = function() {pgp_a.style.display = "inline";} -pgp_p.onmouseout = function() {pgp_a.style.display = "none";} + +if (is_mobile) { + pgp_a.style.display = "block"; +} else { + pgp_p.onmouseover = function() {pgp_a.style.display = "inline";} + pgp_p.onmouseout = function() {pgp_a.style.display = "none";} + } const moon = document.getElementById('moonlink'); console.log(moon); diff --git a/src/sass/global.sass b/src/sass/global.sass index 4d310a8..450d287 100644 --- a/src/sass/global.sass +++ b/src/sass/global.sass @@ -1,3 +1,5 @@ +@import 'responsive' + $primary-color: #F5A9B8 $secondary-color: #FFFFFF $outer-bg: #091519 @@ -19,6 +21,11 @@ body overflow: hidden background-color: black + --test: 13 + --is-mobile: 0 + @include mobile() + --is-mobile: 1 + .overlay width: 100% height: 100vh @@ -36,6 +43,9 @@ body background-color: $outer-bg flex-direction: column + @include mobile() + width: 100% + .contentholder justify-content: flex-start div diff --git a/src/sass/index.sass b/src/sass/index.sass index 089e455..b0988ab 100644 --- a/src/sass/index.sass +++ b/src/sass/index.sass @@ -9,6 +9,9 @@ .name__subcontent text-align: left + @include mobile + text-align: center + a font-size: small display: none @@ -16,6 +19,9 @@ margin-left: 5px margin-top: 5px + @include mobile + position: relative + .links //background-color: rgba(255,0,0,.2) @@ -29,6 +35,9 @@ justify-content: center align-items: center + @include mobile + width: 80% + .links__sub height: 6vh width: 15% diff --git a/src/sass/responsive.sass b/src/sass/responsive.sass new file mode 100644 index 0000000..575679b --- /dev/null +++ b/src/sass/responsive.sass @@ -0,0 +1,8 @@ +// ok yikes I'll do my best + +// Disable actual check for desktop testing +@mixin mobile() + @content +// + @media (pointer: coarse) + @content