mobile-friendly-blog #47

Merged
rodude123 merged 3 commits from mobile-friendly-blog into master 2023-10-28 19:02:34 +01:00
12 changed files with 475 additions and 466 deletions
Showing only changes of commit 03f14ba174 - Show all commits

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

@ -4,7 +4,7 @@
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 70%;
max-width: 70%;
}
svg {
@ -17,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;
@ -48,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%;
@ -118,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

@ -20,9 +20,162 @@
div.mainContent {
width: 80%;
}
aside.sideaContent {
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;
}
}

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.