Minor css changes for mobile
This commit is contained in:
parent
b5e2881010
commit
74439469ec
8 changed files with 109 additions and 11 deletions
BIN
images/profile7.png
Normal file
BIN
images/profile7.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 25 KiB |
|
@ -31,7 +31,7 @@
|
|||
|
||||
<div id = "mainContent">
|
||||
<div id = "profileImageContainer" class = "orangeBorder">
|
||||
<img src = "images/Profile6.webp" alt = "An image of Rosia Evans, Me" class = "profileImage">
|
||||
<img src = "images/Profile7.png" alt = "An image of Rosia Evans, Me" class = "profileImage">
|
||||
</div>
|
||||
|
||||
<div id = "sideText" class = "textBox">
|
||||
|
|
|
@ -1,13 +1,18 @@
|
|||
#Title{
|
||||
max-width: 15vw;
|
||||
margin-bottom: 10vh;
|
||||
transition: background-color 0.5s
|
||||
}
|
||||
|
||||
#Title:hover{
|
||||
background-color: var(--highlight);
|
||||
color: var(--base);
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2{
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
|
||||
.item{
|
||||
display: flex;
|
||||
margin-top: 4vh;
|
||||
|
@ -68,3 +73,28 @@ h2{
|
|||
a.galleryLink{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (orientation:portrait){
|
||||
body{
|
||||
padding: 5vw;
|
||||
}
|
||||
|
||||
.galleryLink{
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.galleryImage{
|
||||
visibility: visible;
|
||||
max-height: 10vh;
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
#Title{
|
||||
max-width: 80vw;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -13,9 +13,11 @@
|
|||
</header>
|
||||
|
||||
<body>
|
||||
<h1>All Projects</h1>
|
||||
<h2>click to find out more</h2>
|
||||
|
||||
<div id = "Title">
|
||||
<h1>All Projects</h1>
|
||||
<h2>click to find out more</h2>
|
||||
</div>
|
||||
|
||||
<a href = "./gallery/aardvark-work/aardvark-work.html" class = "galleryLink">
|
||||
<div class = "galleryLinkContainer">
|
||||
<h3>Aardvark XR</h3>
|
||||
|
|
|
@ -48,3 +48,14 @@ h1{
|
|||
margin-bottom: 7vh;
|
||||
margin-top: 7vh;
|
||||
}
|
||||
|
||||
@media (orientation:portrait){
|
||||
#socialBar{
|
||||
font-size: 3rem;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
#backButtonContainer{
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -46,3 +46,22 @@ span:hover{
|
|||
background-color: var(--highlight);
|
||||
color: var(--base);
|
||||
}
|
||||
|
||||
@media (orientation:portrait){
|
||||
a{
|
||||
background-color: var(--highlight);
|
||||
color: var(--base);
|
||||
text-decoration: none;
|
||||
border-radius:4px;
|
||||
}
|
||||
|
||||
#Title{
|
||||
background-color: var(--highlight);
|
||||
color: var(--base);
|
||||
text-decoration: none;
|
||||
border-radius:4px;
|
||||
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -89,7 +89,7 @@ iframe:hover{
|
|||
margin-left: 0vw;
|
||||
margin-right: 0vw;
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 20vh;
|
||||
margin-bottom: 5vh;
|
||||
|
||||
padding-top: 0.5vh;
|
||||
|
||||
|
@ -121,7 +121,7 @@ iframe:hover{
|
|||
iframe{
|
||||
border: 2px solid var(--secondary);
|
||||
|
||||
width: 90vw;
|
||||
width: 70vw;
|
||||
height: 50vw;
|
||||
}
|
||||
|
||||
|
|
|
@ -59,7 +59,43 @@
|
|||
}
|
||||
|
||||
@media (orientation:portrait){
|
||||
|
||||
body{
|
||||
padding: 5vw;
|
||||
}
|
||||
|
||||
#Title{
|
||||
font-size: 5rem;
|
||||
text-align: left;
|
||||
margin-bottom: 2rem;
|
||||
max-width: 80vw;
|
||||
|
||||
border-bottom: 2px solid var(--secondary);
|
||||
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
.textBox{
|
||||
text-align: left;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
#mainContent{
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#sideText{
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#galleryButton{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#profileImageContainer{
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue