Skip to content

Commit

Permalink
toolbox content css
Browse files Browse the repository at this point in the history
  • Loading branch information
@GraemeFulton
GraemeFulton committed Mar 11, 2024
1 parent 92ca0e2 commit 3b302e1
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 28 deletions.
8 changes: 4 additions & 4 deletions pages/toolbox/[slug].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
</div>
</div>

<div className="flex mt-6 md:mt-0 md:flex-col md:justify-center">
<div className="flex flex-none mt-6 md:mt-0 md:flex-col md:justify-center">
<div className="flex justify-end">
<a
target={"_blank"}
Expand Down Expand Up @@ -185,7 +185,7 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
{gallery?.length ? <Carousel gallery={gallery}/>:''}
</div>
<div className="max-w-[1100px] mx-auto w-full">
<div className="max-w-[900px] mx-auto">
<div className="max-w-[900px] blog-content toolbox-content mx-auto">
<h2 class="text-2xl font-medium mb-8">Overview</h2>
<div
style={{ color: "#222", fontSize: "18px", lineHeight: '33px' }}
Expand All @@ -211,9 +211,10 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
: "https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png"
}
/>:''}
</div>
{post?.attributes?.author && (
<>
<h1 tabIndex={0} className="mt-10 text-sm mb-3 font-semibold">{post?.attributes?.creator?'Contributors':'Posted by'}</h1>
<h1 tabIndex={0} className="mt-16 text-sm mb-3 font-semibold">{post?.attributes?.creator?'Contributors':'Posted by'}</h1>
<div className=" mb-3 flex">
<AuthorCard
title={post?.attributes?.creator?"Curator":null}
Expand All @@ -230,7 +231,6 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
</div>
</>
)}
</div>
</div>
</div>
<SectionDivider py="py-3" transparentLine={true}/>
Expand Down
123 changes: 99 additions & 24 deletions styles/posts-page.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,103 @@ p:empty + p:empty {
p:empty + p:not(:empty) {
display: block;
}

/**********************
***********************/
// content max width
.blog-content{
*:not(.tippy-content *, .tippy-box, [data-tippy-root]), ul, ol{
max-width: 44rem;
}
figure>img.w-full, figure.size-large>img{
width:44rem;
}
blockquote.wp-block-quote, figure.wp-block-image.size-large.full-size, figure.wp-block-image.size-full{
max-width:44rem;
p{
max-width: 44rem;
font-size:1.8rem;
line-height:2.5rem;
}
}
blockquote {
max-width: 46.4rem!important;
}
.wp-block-image {
img.full-size{
max-width:56rem;
}
}
.fig-img{
max-width: 100%!important;
}
figcaption{
max-width: 40rem!important;
}
blockquote.wp-block-quote.main-menu{
max-width: 40rem;
}
blockquote.wp-block-quote{
max-width: 42.5rem!important;
}
.wp-block-pullquote{
max-width: 36rem;
}
}
/**********************
***********************/
/**
toolbox width
**/
.blog-content.toolbox-content{
iframe{
width:100%!important;
margin-top: 1rem;
margin-bottom: 2rem;
min-height: 440px;
}
*:not(.tippy-content *, .tippy-box, [data-tippy-root]), ul, ol{
max-width: 54rem;
}
figure>img.w-full, figure.size-large>img{
width:54rem;
}
blockquote.wp-block-quote, figure.wp-block-image.size-large.full-size, figure.wp-block-image.size-full{
max-width:54rem;
p{
max-width: 54rem;
font-size:1.8rem;
line-height:2.5rem;
}
}
blockquote {
max-width: 56.4rem!important;
}
.wp-block-image {
img.full-size{
max-width:66rem;
}
}
.fig-img{
max-width: 100%!important;
}
figcaption{
max-width: 50rem!important;
}
blockquote.wp-block-quote.main-menu{
max-width: 50rem;
}
blockquote.wp-block-quote{
max-width: 52.5rem!important;
}
.wp-block-pullquote{
max-width: 46rem;
}
}
/**********************
***********************/
/**********************
***********************/
.blog-content{

*{
Expand Down Expand Up @@ -115,7 +212,6 @@ figure, pre{
strong{
font-weight: normal;
}
max-width: 46.4rem!important;
}
// blockquote:before {
// color: #1d3d7d;
Expand All @@ -133,11 +229,7 @@ figure, pre{
margin: 2.5rem auto;
border-radius: 0.375rem;
}
*:not(.tippy-content *, .tippy-box, [data-tippy-root]), ul, ol{
max-width: 44rem;
// margin-right: auto;
// margin-left: auto;
}

ul{
list-style-type: disc;
list-style-position: inside;
Expand All @@ -158,21 +250,14 @@ figure, pre{
list-style-position: inherit;
}
}
.wp-block-image {
img.full-size{
max-width:56rem;
}
}

li{
// margin-left:2rem;
margin-top:1.25rem;
}
li>p, ol>p{
display:inline;
}
.fig-img{
max-width: 100%!important;
}
figure>img{
margin-bottom:0px!important;
}
Expand All @@ -194,14 +279,8 @@ figure, pre{
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border-radius: 4px;
}
figure>img.w-full, figure.size-large>img{
width:44rem;
}
blockquote.wp-block-quote, figure.wp-block-image.size-large.full-size, figure.wp-block-image.size-full{
max-width:44rem;
p{
max-width: 44rem;
// font-style:normal;
font-size:1.8rem;
line-height:2.5rem;
}
Expand All @@ -216,7 +295,6 @@ figure, pre{
color: #242424b6;
margin-top: -0.5rem;
text-align: center;
max-width: 40rem!important;
}
.p-3{
padding:0.75rem;
Expand All @@ -238,7 +316,6 @@ figure, pre{
max-width: 100%;
}
blockquote.wp-block-quote.main-menu{
max-width: 40rem;
margin: 0em 0px;
margin-left:auto;
margin-right: auto;
Expand All @@ -256,7 +333,6 @@ figure, pre{
strong{
font-weight: 300!important;
}
max-width: 42.5rem!important;
// margin: 2.5em auto;
font-size:1.5rem;
a{
Expand Down Expand Up @@ -348,7 +424,6 @@ figure, pre{
background: none;
border-left:none;
padding: 0px;
max-width: 36rem;
}
blockquote:before{
display: none;
Expand Down

0 comments on commit 3b302e1

Please sign in to comment.