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 { .langList {
margin-top: -1em; margin-top: -1em;
margin-bottom: 2em;
display: none; display: none;
pointer-events: 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="style/main.css" media = "screen">
<link rel="stylesheet" href="home/index.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="style/mobile.css" media ="screen and (max-width:800px)">
<link rel="stylesheet" href="home/index_mobile.css" media ="screen and (max-width:800px)">
</head> </head>
<body id="clicked"> <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 { body {
grid-template-areas: grid-template-areas:
"main main main" "main main main"
"aside aside aside" "aside aside aside"
"footer footer footer"; "footer footer footer";
@ -20,15 +19,12 @@ main {
border-bottom-right-radius: 0em; border-bottom-right-radius: 0em;
} }
.bio {
border-top-left-radius: 0em;
border-bottom-left-radius: 0em;
}
.navigation { .navigation {
min-width: 10em; min-width: 10em;
width: 200%; width: 200%;
height: 50vh; height: 20em;
white-space: nowrap; white-space: nowrap;
grid-template-rows: 20% 20% 20% 20% 20%; grid-template-rows: 20% 20% 20% 20% 20%;
grid-template-areas: grid-template-areas:
@ -111,24 +107,18 @@ nav > .link:hover {
border-bottom: 0.1em solid #000000; border-bottom: 0.1em solid #000000;
} }
#home:hover { footer {
border-right: none; margin: 0;
background-color: rgba(255, 255, 255, 60%);
grid-area: footer;
display:list-item;
} }
.navigation:hover { footer > a > h1 {
transform: translate(-95%,0); margin: 0;
} }
.generalInfo { #footer_logo {
margin-top: 1em; margin-top: 3em;
margin-left: 2em;
} }
.moreInfo:hover {
cursor: initial;
}
.langList {
margin-left: -5em;
font-size: small;
}