Skip to content

Commit

Permalink
BC1-120-Work-on-Responsive-Featured-Articles-and-Subscription-for-Blo…
Browse files Browse the repository at this point in the history 
…g-Section (#121)

* BC1-120-feat: Implement responsive design for Featured Articles and Subscription section

* BC1-120-fix: deleted the comments

* BC1-120-fix: Fixing the bugs of the whole page

* BC1-120-fix: Improved responsive design; resolved layout issues on various screen sizes

* BC1-120-Chore: Remove unused CSS rule for first child

* modified:   apps/original/blog/css/style.css
	modified:   apps/original/blog/css/style.css.map
	new file:   apps/original/blog/fonts/icons/icomoon.eot
	new file:   apps/original/blog/fonts/icons/icomoon.svg
	new file:   apps/original/blog/fonts/icons/icomoon.ttf
	new file:   apps/original/blog/fonts/icons/icomoon.woff
	new file:   apps/original/blog/img/favicon.png
	new file:   apps/original/blog/img/logo.png
	new file:   apps/original/blog/img/weprodev-3.jpg
	modified:   apps/original/blog/index.html
	modified:   apps/original/blog/scss/_icomoon.scss
	modified:   apps/original/blog/scss/main.scss

* BC1-120-fix: Update base structure

* BC1-120-fix: Remove commit code in featured articles subscription to improve the code

---------

Co-authored-by: Naser <[email protected]>
  • Loading branch information
@MaxRichard2007 @naser7496
MaxRichard2007 and naser7496 authored Dec 27, 2024
1 parent ac8b599 commit dd4dbfc
Show file tree
Hide file tree
Showing 17 changed files with 1,047 additions and 108 deletions.
453 changes: 409 additions & 44 deletions apps/original/blog/css/style.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion apps/original/blog/css/style.css.map
View file

Large diffs are not rendered by default.

Binary file added apps/original/blog/fonts/icons/icomoon.eot
View file
Binary file not shown.
156 changes: 156 additions & 0 deletions apps/original/blog/fonts/icons/icomoon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/original/blog/fonts/icons/icomoon.ttf
View file
Binary file not shown.
Binary file added apps/original/blog/fonts/icons/icomoon.woff
View file
Binary file not shown.
Binary file added apps/original/blog/img/favicon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/original/blog/img/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/original/blog/img/weprodev-3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 8 additions & 8 deletions apps/original/blog/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
/>

<!-- FAVICON -->
<link rel="icon" href="../../../shared/assets/images/weprodev-favicon.png" />
<link rel="icon" href="img/favicon.png" type="image/png" />

<link rel="stylesheet" href="css/style.css" />
<title>Blog</title>
Expand All @@ -22,7 +22,7 @@
<div class="weprodev-header__top-section">
<img
class="weprodev-header__logo"
src="../../../shared/assets/images/weprodev-logo.png"
src="img/logo.png"
alt="WeProDev Logo"
/>
<div class="weprodev-header__select-lang dropdown">
Expand Down Expand Up @@ -169,7 +169,7 @@ <h2>

<div class="blog__highlights">
<div class="blog__highlights-img">
<img src="img/blog1.png" alt="Blog Image" />
<img src="img/blog1.png" alt="Key components of a marketing strategy" />
</div>

<div class="info-card">
Expand Down Expand Up @@ -215,7 +215,7 @@ <h1>2020 State of Marketing Report</h1>

<div class="content__card">
<div class="content__card-img">
<img src="img/blog5.jpg" alt="" />
<img src="img/blog5.jpg" alt="Tips for working remotely" />
</div>

<div class="info-card">
Expand All @@ -236,7 +236,7 @@ <h2>
<div class="box3">
<div class="content__card">
<div class="content__card-img">
<img src="img/blog4.png" alt="" />
<img src="img/blog4.png" alt="Sales team success story" />
</div>

<div class="info-card">
Expand All @@ -254,7 +254,7 @@ <h2>

<div class="blog__highlights">
<div class="blog__highlights-img">
<img src="img/blog2.jpg" alt="" />
<img src="img/blog2.jpg" alt="Female entrepreneurs to follow" />
</div>

<div class="info-card">
Expand Down Expand Up @@ -335,7 +335,7 @@ <h2>Explore More Topic</h2>
class="footer"
style="
background-image: linear-gradient(#141414e6, #141414e6),
url(../../../shared/assets/images/weprodev-footer-bg.jpg);
url(./img/weprodev-3.jpg);
"
>
<div class="footer__container">
Expand Down Expand Up @@ -383,7 +383,7 @@ <h1 class="footer__title">Follow Us</h1>
<!-- Footer Bottom -->
<div class="footer__bottom">
<div class="footer__bottom-container">
<img src="../../../shared/assets/images/weprodev-favicon.png" alt="logo" class="footer__logo" />
<img src="img/favicon.png" alt="logo" class="footer__logo" />
<p class="footer__copy">&copy;2024 All rights reserved</p>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions apps/original/blog/scss/_icomoon.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@

@font-face {
font-family: 'icomoon';
src: url('../../../../shared/assets/fonts/icons/icomoon.eot?5sy53h');
src: url('../../../../shared/assets/fonts/icons/icomoon.eot?5sy53h#iefix') format('embedded-opentype'),
url('../../../../shared/assets/fonts/icons/icomoon.ttf?5sy53h') format('truetype'),
url('../../../../shared/assets/fonts/icons/icomoon.woff?5sy53h') format('woff'),
url('../../../../shared/assets/fonts/icons/icomoon.svg?5sy53h#icomoon') format('svg');
src: url('../fonts/icons/icomoon.eot?5sy53h');
src: url('../fonts/icons/icomoon.eot?5sy53h#iefix') format('embedded-opentype'),
url('../fonts/icons/icomoon.ttf?5sy53h') format('truetype'),
url('../fonts/icons/icomoon.woff?5sy53h') format('woff'),
url('../fonts/icons/icomoon.svg?5sy53h#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Expand Down
119 changes: 111 additions & 8 deletions apps/original/blog/scss/_typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ html {
}

hr {
width: 43rem;
width: 50rem;
margin: 0 auto;
display: none;
border-color: $black;
Expand All @@ -32,11 +32,18 @@ html {
top: 2rem;
position: relative;
}

.weprodev-header {
display: flex;
flex-direction: column;
position: relative;
top: 0;
}
}

/*========================================================================================*\
*---------------------------- MEDIA QUERY ----------------------------
\*========================================================================================*/
/*========================================================================================*\
*---------------------------- MEDIA QUERY ----------------------------
\*========================================================================================*/

/*--------------------------------
*** 4K AND HIGH RESOULOTIONS
Expand All @@ -49,18 +56,114 @@ html {

/*--------------------------------
*** FOR ANY DEVICE MAX SIZE UNTIL
** MAX-WIDTH : 992px OR 62em
** MAX-WIDTH : 1200px OR 75em
*/

@include tablet {
@include laptop {
font-size: 1rem;

body {
.hr {
width: 47rem;
}
}
}

/*--------------------------------
*** FOR ANY DEVICE MAX SIZE UNTIL
** MAX-WIDTH : 1024px OR 64em
*/

@include miniLaptop {
font-size: 1rem;

body {
.hr {
width: 27rem;
}

hr {
display: block;
width: 100%;
width: 32rem;
top: -2.5rem;
position: relative;
}
}
}

/*--------------------------------
*** FOR MINI MOBILE
** MAX : 400PX / 25em
--------------------------------*/
@include miniMobile {
font-size: 0.8rem;

body {
.hr {
width: 100%;
width: 18rem;
}

hr {
width: 19.5rem;
display: block;
}
}
}

/*--------------------------------
*** FOR MOBILE
** MAX : 640PX / 40em
--------------------------------*/
@include mobile {
@media (min-width: 401px) and (max-width: 640px) {
font-size: 1rem;

body {
.hr {
width: 20rem;
}

hr {
width: 23rem;
display: block;
}
}
}
}

/*--------------------------------
*** FOR RETINA MOBILE AND LANDSCAPE
** MIN : 500px / 31.25em | MAX : 767PX / 47.9375em
--------------------------------*/
@include retinaMobile {
@media (min-width: 641px) and (max-width: 767px) {
font-size: 0.7rem;

.hr {
width: 16rem !important;
}
}
}

/*--------------------------------
*** FOR TABLET
** MAX-WIDTH : 992px OR 62em
--------------------------------*/
@include tablet {
@media (min-width: 768px) and (max-width: 992px) {
font-size: 1.5rem;

body {
.hr {
width: 17.5rem;
display: block;
}

hr {
width: 21rem;
top: -2.5rem;
position: relative;
}
}
}
}
Expand Down
89 changes: 77 additions & 12 deletions apps/original/blog/scss/layout/_content-section.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,9 +164,56 @@
}
}

/*========================================================================================*\
*---------------------------- MEDIA QUERY ----------------------------
\*========================================================================================*/
/*========================================================================================*\
*---------------------------- MEDIA QUERY ----------------------------
\*========================================================================================*/

/*--------------------------------
*** FOR SOM OF THE DEVICES
** MIN-WIDTH : 1201px OR 75.0625em
*/

@include lcd {

.container {
.sidebar {
.sidebar__list {
& > :first-child {
.sidebar__item-title {
top: -0.5rem;
position: relative;
}
.blog-meta {
top: -0.5rem;
}
}
}
}
}
}

/*--------------------------------
*** FOR ANY DEVICE MAX SIZE UNTIL
** MAX-WIDTH : 1200px OR 75em
*/

@include laptop {
.container {
.sidebar {
.sidebar__list {
& > :first-child {
.sidebar__item-title {
top: -0.5rem;
position: relative;
}
.blog-meta {
top: -0.5rem;
}
}
}
}
}
}

/*--------------------------------
*** FOR ANY DEVICE MAX SIZE UNTIL
Expand All @@ -187,8 +234,14 @@
width: 75%;
padding-top: nth($spaces, 8);

.sidebar__list .sidebar__item {
width: 100%;
.sidebar__list {
& > :first-child {
// background-color: red;
// color: red;
}
.sidebar__item {
width: 100%;
}
}
}
}
Expand All @@ -209,11 +262,19 @@
width: 75%;

&__informations {
width: 18rem;
.img__box {
width: 18rem;
img {
width: 28rem;
width: 18rem;
height: 17rem;
}
}
.title-box {
padding-top: 0;
top: -1rem;
position: relative;
}
}
}

Expand Down Expand Up @@ -279,16 +340,20 @@

@include mobile {
.container {
width: 62%;

.main-post {
width: 80%;
height: 39rem;
width: 23rem;
height: 30rem;

.main-post__informations {
width: 95%;

.img__box {
width: 20rem;

img {
width: 23.2rem;
width: 20rem;
}
}

Expand All @@ -299,7 +364,7 @@
}

.sidebar {
width: 80%;
width: 23rem;

.sidebar__title {
left: 0;
Expand All @@ -315,11 +380,11 @@

@include miniMobile {
.container {
width: 100%;
width: 62%;

.main-post {
width: 100%;
height: 34rem;
height: 31rem;
border-radius: 0;

&__informations {
Expand Down
Loading

0 comments on commit dd4dbfc

Please sign in to comment.