Minor css changes for mobile

This commit is contained in:
Rosia E Evans 2023-02-01 21:02:04 +00:00
parent b5e2881010
commit 74439469ec
8 changed files with 109 additions and 11 deletions

BIN
images/profile7.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

View file

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

View file

@ -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;
}
}

View file

@ -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>

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}

View file

@ -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;
}
}