DressOrc/Portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Minor css changes for mobile

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
images/profile7.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

2
index.html
View file

@ -31,7 +31,7 @@
<div id = "mainContent"> <div id = "mainContent">
<div id = "profileImageContainer" class = "orangeBorder"> <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>
<div id = "sideText" class = "textBox"> <div id = "sideText" class = "textBox">

38
pages/AllProjects.css
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{ h1{
font-size: 2rem; font-size: 2rem;
} }
h2{
margin-bottom: 10vh;
}
.item{ .item{
display: flex; display: flex;
margin-top: 4vh; margin-top: 4vh;
@ -68,3 +73,28 @@ h2{
a.galleryLink{ a.galleryLink{
text-decoration: none; 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;
}
}

2
pages/AllProjects.html
View file

@ -13,8 +13,10 @@
</header> </header>
<body> <body>
<div id = "Title">
<h1>All Projects</h1> <h1>All Projects</h1>
<h2>click to find out more</h2> <h2>click to find out more</h2>
</div>
<a href = "./gallery/aardvark-work/aardvark-work.html" class = "galleryLink"> <a href = "./gallery/aardvark-work/aardvark-work.html" class = "galleryLink">
<div class = "galleryLinkContainer"> <div class = "galleryLinkContainer">

11
pages/basic.css
View file

@ -48,3 +48,14 @@ h1{
margin-bottom: 7vh; margin-bottom: 7vh;
margin-top: 7vh; margin-top: 7vh;
} }
@media (orientation:portrait){
#socialBar{
font-size: 3rem;
margin-top: 5vh;
}
#backButtonContainer{
font-size: 3rem;
}
}

19
pages/effects.css
View file

@ -46,3 +46,22 @@ span:hover{
background-color: var(--highlight); background-color: var(--highlight);
color: var(--base); 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;
}
}

4
pages/gallery/blog-post-default.css
View file

@ -89,7 +89,7 @@ iframe:hover{
margin-left: 0vw; margin-left: 0vw;
margin-right: 0vw; margin-right: 0vw;
margin-top: 5vh; margin-top: 5vh;
margin-bottom: 20vh; margin-bottom: 5vh;
padding-top: 0.5vh; padding-top: 0.5vh;
@ -121,7 +121,7 @@ iframe:hover{
iframe{ iframe{
border: 2px solid var(--secondary); border: 2px solid var(--secondary);
width: 90vw; width: 70vw;
height: 50vw; height: 50vw;
} }

36
pages/mainpage.css
View file

@ -59,7 +59,43 @@
} }
@media (orientation:portrait){ @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;
}
} }