mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 22:26:33 +02:00
Code Issues Releases Wiki Activity

Tweak layout

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-05-09 16:35:55 +07:00
parent f1644dd6ea
commit cdb3c2041d
3 changed files with 14 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/index.css
View File

@@ -41,19 +41,18 @@ a {
max-width: 80rem; max-width: 80rem;
padding: 0 1rem; padding: 0 1rem;
} }
.content {
display: flex;
margin: 4rem 0;
}
.main { .main {
flex: 1; flex: 1;
overflow: hidden;
padding: 4rem 0;
} }
.sidebar { .sidebar {
display: none; display: none;
padding: 4rem 0;
} }
/* Sidebar */ /* Sidebar */
.sidebar__inner { .sidebar__inner {
position: sticky; position: sticky;
top: 1rem; top: 1rem;
} }
@@ -100,11 +99,11 @@ pre {
color: #FFF; color: #FFF;
font-family: "Source Code Pro", monospace; font-family: "Source Code Pro", monospace;
font-size: 1rem; font-size: 1rem;
height: 100%;
line-height: 1.5; line-height: 1.5;
margin: 0px; margin: 0px;
overflow: auto; overflow-x: auto;
padding: 1rem; padding: 1rem;
white-space: pre;
} }
.token.tag, .token.tag,
@@ -157,6 +156,9 @@ pre {
/* Responsive */ /* Responsive */
@media (min-width: 640px) { @media (min-width: 640px) {
.content {
display: flex;
}
.sidebar { .sidebar {
display: block; display: block;
flex: 0 0 8rem; flex: 0 0 8rem;

12
client/placeholders/BrowserFrame.tsx
View File

@@ -15,17 +15,13 @@ interface BrowserFrameProps {
const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => { const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
return ( return (
<div className="demo"> <>
<div className="demo__html"> <SampleCode fullHeight={true} lang="html" code={html} />
<SampleCode fullHeight={true} lang="html" code={html} /> <SampleCode fullHeight={true} lang="css" code={css} />
</div>
<div className="demo__css">
<SampleCode fullHeight={true} lang="css" code={css} />
</div>
<div className="demo__live"> <div className="demo__live">
{children} {children}
</div> </div>
</div> </>
); );
}; };

14
client/placeholders/browserFrame.css
View File

@@ -3,20 +3,8 @@
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc> * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/ */
.demo {
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.5rem;
overflow: hidden;
}
.demo__live { .demo__live {
border: 1px solid rgba(0, 0, 0, 0.2);
height: 32rem; height: 32rem;
overflow: auto; overflow: auto;
}
.demo__css,
.demo__html {
border-bottom: 1px solid rgba(0, 0, 0, 0.8);
height: 16rem;
overflow: auto;
} }