Merge pull request 'mobile-friendly-blog' (#47) from mobile-friendly-blog into master
All checks were successful
🚀 Deploy website on push / 🎉 Deploy (push) Successful in 16s

Reviewed-on: #47
This commit is contained in:
Rohit Pai 2023-10-28 19:02:34 +01:00
commit 929060ce70
15 changed files with 494 additions and 467 deletions

File diff suppressed because one or more lines are too long

BIN
dist/imgs/profile.jpg vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 87 KiB

2
dist/index.html vendored

File diff suppressed because one or more lines are too long

Binary file not shown.

759
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,8 +1,10 @@
/**** Individual Blog Posts *****/
.profile {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 70%;
max-width: 70%;
}
svg {
@ -15,6 +17,13 @@ footer {
margin-top: 0;
}
section#individualPost {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}
div.byLine {
display: flex;
flex-direction: row;
@ -46,13 +55,6 @@ div.cover {
box-shadow: 0 4px 2px 0 var(--mutedBlack);
}
section#individualPost {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}
div.mainContent {
border-right: 5px solid var(--mutedGrey);
min-height: 100%;
@ -116,6 +118,7 @@ div.authorInfo {
padding-left: 1em;
padding-top: 0.5em;
border-bottom: 5px solid var(--mutedGrey);
width: 100%;
}
div.authorInfo .picture {

View File

@ -1,3 +1,4 @@
/**** Categories Pages ****/
main > h1 {
padding-left: 3em;

View File

@ -1,3 +1,5 @@
/**** Blog Home page *****/
.banner {
max-width: 30%;
box-shadow: 0 6px 4px 0 var(--mutedBlack);

View File

@ -10,3 +10,172 @@
@import "category.css";
@import "prism.css";
/**** Media Queries *****/
@media screen and (max-width: 90em) {
/***** Individual Blog Posts ***/
div.mainContent {
width: 80%;
}
aside.sideContent {
width: 20%;
}
}
@media screen and (max-width: 75em) {
/*** Large Post for Home and Category ***/
section.largePost {
padding: 1em;
}
section.largePost .outerContent {
flex-direction: column;
justify-content: center;
align-items: center;
}
.banner {
max-width: 50%;
}
section.largePost .outerContent > .content,
section.largePost .outerContent > img {
width: 90%;
}
/***** Individual Blog Posts ***/
section#individualPost {
flex-direction: column-reverse;
justify-content: center;
align-items: center;
}
div.mainContent {
width: 100%;
border-right: none;
}
aside.sideContent {
width: 100%;
flex-direction: row;
align-items: stretch;
justify-content: space-around;
border-bottom: 5px solid var(--mutedGrey);
}
div.otherPosts, div.authorInfo {
border-bottom: none;
}
aside.sideContent > div.authorInfo {
grid-template-columns: 1fr 1fr 1fr;
}
aside.sideContent > div.authorInfo .picture {
grid-row: 1;
grid-column: span 3;
}
aside.sideContent > div.authorInfo h3 {
grid-column: span 3;
}
div.otherPosts {
justify-content: space-between;
}
aside.sideContent > div {
border-right: 5px solid var(--mutedGrey);
flex-basis: 50%;
}
aside.sideContent > div:last-child {
border-right: none;
}
}
@media screen and (max-width: 55em) {
/*** Large Post for Home and Category ***/
.banner {
max-width: 75%;
}
/***** Individual Blog Posts ***/
aside.sideContent {
flex-wrap: wrap;
}
aside.sideContent > div.authorInfo {
grid-template-columns: 2fr 1fr;
border-bottom: 5px solid var(--mutedGrey);
flex-basis: 100%;
}
aside.sideContent > div.authorInfo .picture {
grid-row: span 3;
grid-column: initial;
}
div.byLine {
flex-direction: column;
align-items: flex-start;
}
div.byLine h3:last-child {
border-left: none;
padding-left: 0;
}
aside.sideContent > div.authorInfo h3 {
grid-column: span 2;
}
aside.sideContent > div.categories {
flex-basis: 100%;
}
aside.sideContent > div.otherPosts {
border-bottom: 5px solid var(--mutedGrey);
}
}
@media screen and (max-width: 30em) {
/***** Individual Blog Posts ***/
.profile {
max-width: 50%;
}
section#individualPost {
flex-direction: column;
}
aside.sideContent {
flex-direction: column;
align-items: center;
border-bottom: none;
}
aside.sideContent > div.authorInfo {
grid-template-columns: 1fr 1fr 1fr;
border-top: 5px solid var(--mutedGrey);
}
aside.sideContent > div.authorInfo .picture {
grid-row: 1;
grid-column: span 3;
}
aside.sideContent > div.authorInfo h3 {
grid-column: span 3;
}
}

View File

@ -64,9 +64,6 @@ nav ul li span {
visibility: hidden;
}
/*nav ul li a:hover span, nav ul li .active span {*/
/* visibility: visible;*/
/*}*/
nav ul li .active::before,
nav ul li .active::after {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 87 KiB

View File

@ -48,7 +48,9 @@
programming languages such as Java, C#, Python, HTML, CSS, JS, PHP. Bringing forth a motivated
attitude and a variety of powerful skills. Very good at bringing a team together to get a project
finished. Below are some of my projects that I have worked on. </p>
<a href="other/rohitpaicv.pdf" class="btn btnOutline boxShadowIn boxShadowOut" download>Download CV</a>
<a href="https://cloud.rohitpai.co.uk/index.php/s/e4LkFiE3wMK8x3C"
class="btn btnOutline boxShadowIn boxShadowOut" download>Download
CV</a>
</div>
</section>

Binary file not shown.