emilia
/
personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial mobile styling 

Width changes to 100%, pgp key always visible, etc
This commit is contained in:
Emilia Allison 2022-01-22 01:01:27 -05:00
parent 8bb55dd9d6
commit 4c1992105a
Signed by: emilia
GPG Key ID: 71D938CBB74EF7EA
14 changed files with 61 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/about.html
View File

@ -3,6 +3,7 @@
<head> <head>
<title>Emilia Allison</title> <title>Emilia Allison</title>
<link rel="stylesheet" href="css/about.css"> <link rel="stylesheet" href="css/about.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head> </head>
<body> <body>
<div class="overlay"> <div class="overlay">

4
src/css/about.css
View File

@ -10,6 +10,9 @@ body {
margin: 0 0 0 0; margin: 0 0 0 0;
overflow: hidden; overflow: hidden;
background-color: black; background-color: black;
--test: 13;
--is-mobile: 0;
--is-mobile: 1;
} }
.overlay { .overlay {
@ -31,6 +34,7 @@ body {
height: 100vh; height: 100vh;
background-color: #091519; background-color: #091519;
flex-direction: column; flex-direction: column;
width: 100%;
} }
.contentholder { .contentholder {

2
src/css/about.css.map
View File

@ -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"} {"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"}

4
src/css/global.css
View File

@ -10,6 +10,9 @@ body {
margin: 0 0 0 0; margin: 0 0 0 0;
overflow: hidden; overflow: hidden;
background-color: black; background-color: black;
--test: 13;
--is-mobile: 0;
--is-mobile: 1;
} }
.overlay { .overlay {
@ -31,6 +34,7 @@ body {
height: 100vh; height: 100vh;
background-color: #091519; background-color: #091519;
flex-direction: column; flex-direction: column;
width: 100%;
} }
.contentholder { .contentholder {

2
src/css/global.css.map
View File

@ -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"} {"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"}

7
src/css/index.css
View File

@ -10,6 +10,9 @@ body {
margin: 0 0 0 0; margin: 0 0 0 0;
overflow: hidden; overflow: hidden;
background-color: black; background-color: black;
--test: 13;
--is-mobile: 0;
--is-mobile: 1;
} }
.overlay { .overlay {
@ -31,6 +34,7 @@ body {
height: 100vh; height: 100vh;
background-color: #091519; background-color: #091519;
flex-direction: column; flex-direction: column;
width: 100%;
} }
.contentholder { .contentholder {
@ -112,6 +116,7 @@ mark.internet {
.name__subcontent { .name__subcontent {
text-align: left; text-align: left;
text-align: center;
} }
.name__subcontent a { .name__subcontent a {
font-size: small; font-size: small;
@ -119,6 +124,7 @@ mark.internet {
position: absolute; position: absolute;
margin-left: 5px; margin-left: 5px;
margin-top: 5px; margin-top: 5px;
position: relative;
} }
.links { .links {
@ -130,6 +136,7 @@ mark.internet {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 80%;
} }
.links .links__sub { .links .links__sub {
height: 6vh; height: 6vh;

2
src/css/index.css.map
View File

@ -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"} {"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"}

3
src/css/responsive.css Normal file
View File

@ -0,0 +1,3 @@
/*# sourceMappingURL=responsive.css.map */

1
src/css/responsive.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"responsive.css"}

1
src/index.html
View File

@ -4,6 +4,7 @@
<title>Emilia Allison</title> <title>Emilia Allison</title>
<link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/index.css">
<script src="js/index.js" defer></script> <script src="js/index.js" defer></script>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head> </head>
<body> <body>
<div class="overlay"> <div class="overlay">

8
src/js/index.js
View File

@ -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_p = document.getElementById('pgp_p')
const pgp_a = document.getElementById('pgp_a') const pgp_a = document.getElementById('pgp_a')
if (is_mobile) {
pgp_a.style.display = "block";
} else {
pgp_p.onmouseover = function() {pgp_a.style.display = "inline";} pgp_p.onmouseover = function() {pgp_a.style.display = "inline";}
pgp_p.onmouseout = function() {pgp_a.style.display = "none";} pgp_p.onmouseout = function() {pgp_a.style.display = "none";}
}
const moon = document.getElementById('moonlink'); const moon = document.getElementById('moonlink');
console.log(moon); console.log(moon);

10
src/sass/global.sass
View File

@ -1,3 +1,5 @@
@import 'responsive'
$primary-color: #F5A9B8 $primary-color: #F5A9B8
$secondary-color: #FFFFFF $secondary-color: #FFFFFF
$outer-bg: #091519 $outer-bg: #091519
@ -19,6 +21,11 @@ body
overflow: hidden overflow: hidden
background-color: black background-color: black
--test: 13
--is-mobile: 0
@include mobile()
--is-mobile: 1
.overlay .overlay
width: 100% width: 100%
height: 100vh height: 100vh
@ -36,6 +43,9 @@ body
background-color: $outer-bg background-color: $outer-bg
flex-direction: column flex-direction: column
@include mobile()
width: 100%
.contentholder .contentholder
justify-content: flex-start justify-content: flex-start
div div

9
src/sass/index.sass
View File

@ -9,6 +9,9 @@
.name__subcontent .name__subcontent
text-align: left text-align: left
@include mobile
text-align: center
a a
font-size: small font-size: small
display: none display: none
@ -16,6 +19,9 @@
margin-left: 5px margin-left: 5px
margin-top: 5px margin-top: 5px
@include mobile
position: relative
.links .links
//background-color: rgba(255,0,0,.2) //background-color: rgba(255,0,0,.2)
@ -29,6 +35,9 @@
justify-content: center justify-content: center
align-items: center align-items: center
@include mobile
width: 80%
.links__sub .links__sub
height: 6vh height: 6vh
width: 15% width: 15%

8
src/sass/responsive.sass Normal file
View File

@ -0,0 +1,8 @@
// ok yikes I'll do my best
// Disable actual check for desktop testing
@mixin mobile()
@content
//
@media (pointer: coarse)
@content