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