r0r-5chach/CSY1018-assignment-1
r0r-5chach
/
CSY1018-assignment-1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #12 from jpez-development/mobile_version 

Adjustments for home page mobile responsiveness
This commit is contained in:
Joshua Perry 2022-04-17 12:20:19 +01:00 committed by GitHub
parent b9757af113 d36aaf3f91
commit 963fc1b554
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
home/index.css
View File

@ -87,6 +87,7 @@
.langList {
margin-top: -1em;
margin-bottom: 2em;
display: none;
pointer-events: none;
}

1
home/index.html
View File

@ -16,6 +16,7 @@
<link rel="stylesheet" href="style/main.css" media = "screen">
<link rel="stylesheet" href="home/index.css" media="screen">
<link rel="stylesheet" href="style/mobile.css" media ="screen and (max-width:800px)">
<link rel="stylesheet" href="home/index_mobile.css" media ="screen and (max-width:800px)">
</head>
<body id="clicked">

15
home/index_mobile.css Normal file
View File

@ -0,0 +1,15 @@
.bio {
border-top-left-radius: 0em;
border-bottom-left-radius: 0em;
}
.langList {
margin-left: -5em;
font-size: small;
}
.generalInfo {
margin-top: 1em;
margin-left: 2em;
}

32
style/mobile.css
View File

@ -4,7 +4,6 @@
body {
grid-template-areas:
"main main main"
"aside aside aside"
"footer footer footer";
@ -20,15 +19,12 @@ main {
border-bottom-right-radius: 0em;
}
.bio {
border-top-left-radius: 0em;
border-bottom-left-radius: 0em;
}
.navigation {
min-width: 10em;
width: 200%;
height: 50vh;
height: 20em;
white-space: nowrap;
grid-template-rows: 20% 20% 20% 20% 20%;
grid-template-areas:
@ -111,24 +107,18 @@ nav > .link:hover {
border-bottom: 0.1em solid #000000;
}
#home:hover {
border-right: none;
footer {
margin: 0;
background-color: rgba(255, 255, 255, 60%);
grid-area: footer;
display:list-item;
}
.navigation:hover {
transform: translate(-95%,0);
footer > a > h1 {
margin: 0;
}
.generalInfo {
margin-top: 1em;
margin-left: 2em;
#footer_logo {
margin-top: 3em;
}
.moreInfo:hover {
cursor: initial;
}
.langList {
margin-left: -5em;
font-size: small;
}