Skip to content

Commit

Permalink
feat: add devices breakpoints changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@flavioriper
flavioriper committed Nov 22, 2023
1 parent aec1eee commit 5c87af7
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 34 deletions.
81 changes: 50 additions & 31 deletions src/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6350,7 +6350,14 @@ table th {
gap: 20px;
order: 1;

@media(max-width: 767px){
@media(max-width: 810px){
flex-direction: row;
width: 100%;
margin: 0 auto;
}

@media(max-width: 470px){
flex-direction: column;
width: 100%;
max-width: 250px;
margin: 0 auto;
Expand All @@ -6368,7 +6375,7 @@ table th {
background: #FFF;
box-shadow: 0px 1px 2px 0px rgba(105, 81, 255, 0.05);

@media(max-width: 767px){
@media(max-width: 810px){
width: 100%;
max-width: 232px;
margin: 0 auto;
Expand Down Expand Up @@ -6437,7 +6444,7 @@ table th {
background-color: #04192B;
box-shadow: 0px 4px 10px 0px rgba(20, 20, 43, 0.04);

@media(max-width: 767px){
@media(max-width: 810px){
padding: 10px 50px;
}
}
Expand Down Expand Up @@ -6537,14 +6544,14 @@ table th {
padding: 2rem 16px 5rem;
}

@media(max-width: 767px) {
@media(max-width: 810px) {
padding: 16px 16px 5rem;
}

.tags-wrap {
margin: 0 0 24px 0;

@media(max-width: 767px) {
@media(max-width: 810px) {
margin: 0 0 16px 0;
}
}
Expand All @@ -6568,7 +6575,7 @@ table th {
justify-content: space-between;
align-items: center;

@media(max-width: 767px) {
@media(max-width: 810px) {
flex-direction: column;
}

Expand All @@ -6580,7 +6587,7 @@ table th {
max-width: 380px;
width: 100%;

@media(max-width: 767px) {
@media(max-width: 810px) {
margin-top: 16px;
max-width: 100%;
}
Expand Down Expand Up @@ -6608,7 +6615,7 @@ table th {
line-height: 42px;
}

@media(max-width: 767px) {
@media(max-width: 810px) {
font-size: 48px;
line-height: 60px;
margin: 16px 0 16px;
Expand Down Expand Up @@ -6642,8 +6649,16 @@ table th {
border-top: 1px solid #EEF0F3;
padding-right: 10px;
padding-left: 10px;

@media(max-width: 1400px) {
gap: 60px;
}

@media(max-width: 1200px) {
gap: 40px;
}

@media(max-width: 767px) {
@media(max-width: 810px) {
padding-top: 32px;
flex-direction: column;
gap: 25px;
Expand All @@ -6659,7 +6674,7 @@ table th {
font-size: 36px;
line-height: 48px;

@media(max-width: 767px) {
@media(max-width: 810px) {
margin-top: 32px;
font-size: 28px;
line-height: 36px;
Expand All @@ -6674,7 +6689,7 @@ table th {
font-weight: 500;
line-height: 48px;

@media(max-width: 767px) {
@media(max-width: 810px) {
font-size: 28px;
line-height: 36px;
}
Expand All @@ -6691,7 +6706,7 @@ table th {
font-family: "Inter", sans-serif !important;
font-weight: 500 !important;

@media(max-width: 767px) {
@media(max-width: 810px) {
font-size: 22px !important;
line-height: 28px !important;
}
Expand All @@ -6705,7 +6720,7 @@ table th {
font-family: "Inter", sans-serif !important;
font-weight: 500 !important;

@media(max-width: 767px) {
@media(max-width: 810px) {
font-size: 18px !important;
line-height: 26px !important;
}
Expand All @@ -6716,7 +6731,7 @@ table th {
width: 100%;

.sticky {
@media(min-width: 768px) {
@media(min-width: 810px) {
display: inline-block;
position: sticky;
top: 2rem;
Expand All @@ -6733,14 +6748,17 @@ table th {
overflow: hidden;
}
}
.post-sidebar {
display: flex;
flex-direction: column;
gap: 30px;
}

.post-sidebar, .post-sidebar-right{
max-width: 215px;
width: 100%;
@media(max-width: 991px){
max-width: 322px;
}

@media(max-width: 767px) {
@media(max-width: 810px) {
max-width: 100%;
padding-right: 0;
position: relative !important;
Expand All @@ -6758,7 +6776,7 @@ table th {
max-width: calc(100% - 322px);
}

@media(max-width: 767px) {
@media(max-width: 810px) {
max-width: 100%;
}

Expand All @@ -6780,7 +6798,7 @@ table th {
font-weight: 400;
line-height: 30px;

@media(max-width: 767px) {
@media(max-width: 810px) {
font-size: 14px;
line-height: 22px;
}
Expand Down Expand Up @@ -6814,7 +6832,7 @@ table th {
font-weight: 400 !important;
line-height: 30px !important;

@media(max-width: 767px) {
@media(max-width: 810px) {
font-size: 14px !important;
line-height: 22px !important;
}
Expand Down Expand Up @@ -6849,7 +6867,7 @@ table th {
line-height: 22px !important;
}

@media(max-width: 767px) {
@media(max-width: 810px) {
margin-top: 10px;
border-top: 1px solid #EEF0F3;
padding-top: 24px;
Expand All @@ -6870,7 +6888,7 @@ table th {
text-align: left;
}

@media(max-width: 767px) {
@media(max-width: 810px) {
max-width: 100%;
}

Expand All @@ -6879,7 +6897,7 @@ table th {
text-align: right;
}

@media(max-width: 767px) {
@media(max-width: 810px) {
margin-top: 28px;
}
}
Expand All @@ -6890,6 +6908,7 @@ table th {
background: #F9FAFC;
counter-reset: toc-counter;
padding: 16px;
width: 100%;

h3 {
margin: 0 0 8px;
Expand All @@ -6904,7 +6923,7 @@ table th {
margin: 0;
padding: 0 16px;

@media(max-width: 767px){
@media(max-width: 810px){
padding: 20px 16px;
display: flex;
flex-direction: column;
Expand All @@ -6917,7 +6936,7 @@ table th {
position: relative;
margin: 0;

@media(max-width: 767px){
@media(max-width: 810px){
opacity: 1;
}

Expand All @@ -6929,7 +6948,7 @@ table th {
right: -16px;
width: 3px;

@media(max-width: 767px){
@media(max-width: 810px){
display: none;
}
}
Expand Down Expand Up @@ -7007,12 +7026,12 @@ table th {
border-top: 1px solid #EEF0F3;
padding-top: 20px;

@media(max-width: 767px) {
@media(max-width: 810px) {
display: none;
}

&.mobile-only {
@media(max-width: 767px) {
@media(max-width: 810px) {
display: block;
}
}
Expand Down Expand Up @@ -7066,12 +7085,12 @@ table th {
background: #04192B url("./images/pattern-sidebar-cta.svg") no-repeat bottom left / contain;
text-align: center;

@media(max-width: 767px) {
@media(max-width: 810px) {
display: none;
}

&.mobile-only {
@media(max-width: 767px) {
@media(max-width: 810px) {
display: block;
}
}
Expand Down
5 changes: 3 additions & 2 deletions src/templates/blog-post/Body/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import RenderToc from "../../../components/BlogPostToc"
import PanelCTA from "../../../components/PanelCTA"
import { ProcessedPost } from "../../../components/BlogPostProcessor"

const BlogPostBody = ({ data, sticky }) => {
const BlogPostBody = ({ data, sticky, small }) => {
if (!data) return null;

return (
Expand All @@ -17,6 +17,7 @@ const BlogPostBody = ({ data, sticky }) => {
className="post-sidebar"
>
<RenderToc items={data.childHtmlRehype.tableOfContents} />
{small && <PanelCTA />}
</StickyBox>
)}
{!sticky && <RenderToc items={data.childHtmlRehype.tableOfContents} />}
Expand All @@ -25,7 +26,7 @@ const BlogPostBody = ({ data, sticky }) => {
body={data.childHtmlRehype.html}
/>

{sticky && (
{sticky && !small && (
<StickyBox
offsetBottom={16}
offsetTop={16}
Expand Down
2 changes: 1 addition & 1 deletion src/templates/blog-post/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const BlogPostTemplate = ({ data: { previous, next, post }, pageContext }) => {

return (
<Wrapper post={post}>
<Body data={post?.body?.data} sticky={windowWidth > 767} />
<Body data={post?.body?.data} sticky={windowWidth > 810} small={windowWidth < 1200} />
<RelatedPosts />
</Wrapper>
)
Expand Down

0 comments on commit 5c87af7

Please sign in to comment.