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

added mobile responsiveness

This commit is contained in:
jpez 2022-03-10 16:17:19 +00:00
parent 4cb177b812
commit 532d289cfb
2 changed files with 124 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
home/index.html
View File

@ -14,12 +14,13 @@
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
<link rel="stylesheet" href="style/main.css" media = "screen">
<link rel="stylesheet" href="style/mobile.css" media ="screen and (max-width:800px)">
<link rel="stylesheet" href="home/index.css" media="screen">
<link rel="stylesheet" href="style/mobile.css" media ="screen and (max-width:800px)">
</head>
<body>
<body id="clicked">
<nav class="navigation">
<a class="hidenav" href="./home/index.html#"> X</a>
<a class="nav link" id="home" href="home/index.html"><h2>J-Pez Development</h2></a>
<a class="nav link" id="port" href="portfolio/portfolio.html"><h2>Portfolio</h2></a>
<a class="nav link" id="blog" href="blog/blog.html"><h2>Blog</h2></a>
@ -28,8 +29,10 @@
</nav>
<main>
<a class="shownav" href="./home/index.html#clicked"></a>
<h1>Welcome to my little corner of the Internet :)</h1>
<p id="intro">You might be wondering who I am and what I do. In which case, you are in luck.
<p id="intro">
You might be wondering who I am and what I do. In which case, you are in luck.
This website was created by Joshua Perry (me) to showcase the accomplishments, and projects I have completed
along the way.
</p>
@ -87,8 +90,8 @@
<section class="generalInfo dropdown" id="langDrop">
<span id="lang">
<a href="#lang" class="close">X</a>
<a href="#langDrop"><h2 class="title">Languages</h2></a>
<a href="./home/index.html#lang" class="close">X</a>
<a href="./home/index.html#langDrop"><h2 class="title">Languages</h2></a>
</span>
<ul class="langList">
<li>HTML5</li>
@ -104,8 +107,8 @@
<section class="generalInfo dropdown" id="qualDrop">
<span id="qual">
<a href="#qual" class="close">X</a>
<a href="#qualDrop"><h2 class="title">Qualifications</h2></a>
<a href="./home/index.html#qual" class="close">X</a>
<a href="./home/index.html#qualDrop"><h2 class="title">Qualifications</h2></a>
</span>
<ul class="qualList">
<li>A2 Computer Science</li>

116
style/mobile.css
View File

@ -1,7 +1,119 @@
.bio {
.arrow {
display: none;
}
.navigation {
body {
grid-template-areas:
"main main main"
"aside aside aside"
"footer footer footer";
}
.moreInfo:hover .extraInfo{
display: none;
}
main {
border-top-right-radius: 0em;
border-bottom-right-radius: 0em;
}
.bio {
border-top-left-radius: 0em;
border-bottom-left-radius: 0em;
}
.navigation {
min-width: 10em;
width: 200%;
height: 50vh;
white-space: nowrap;
grid-template-rows: 20% 20% 20% 20% 20%;
grid-template-areas:
"close"
"home"
"port"
"blog"
"contact";
position: fixed;
z-index: 1000;
top: -2.2em;
}
.shownav {
z-index: 1000;
margin-left: 0.1em;
margin-top: 0.1em;
height: 0.8em;
width: 1.25em;
display: block;
position: fixed;
border-top: 0.2em solid white;
border-bottom: 0.2em solid white;
}
.hidenav {
padding-right: 0.1em;
text-align: right;
opacity: 90%;
background-color: #000000;
z-index: 1;
display: block;
font-size: larger;
display: flex;
color: white;
text-decoration: none;
grid-area: close;
align-self: flex-end;
}
.shownav:before {
content:'';
position: absolute;
width: 1.25em;
margin-top: 0.3em;
border-top: 0.2em solid white;
}
#clicked .shownav {
display: block;
}
#clicked .hidenav {
display: none;
}
#clicked:target .shownav {
display: none;
}
#clicked:target .hidenav {
display: block;
}
#clicked:target > .navigation{
transform: translate(0%,0);
display: grid;
}
#contact{
border-top-right-radius: 0em;
}
.link {
max-height: 4em;
}
nav > .link:hover {
border-right: 0.1em solid #32cd32;
border-bottom: 0.1em solid #000000;
}
#home:hover {
border-right: none;
}
.navigation:hover {
transform: translate(-95%,0);
}