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

Add drop cap

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-29 13:51:49 +07:00
parent 9ee3e3a30a
commit 0ac778ba39
7 changed files with 133 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
client/patterns/drop-cap/Cover.tsx Normal file
View File

@@ -0,0 +1,55 @@
import React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
width: '100%',
}}
>
<div style={{ display: 'flex', height: '32px', width: '100%' }}>
<div
style={{
alignItems: 'center',
border: '2px dashed rgba(0, 0, 0, 0.3)',
display: 'flex',
marginRight: '8px',
justifyContent: 'center',
width: '32px',
}}
>
<Circle />
</div>
<div style={{ flex: 1 }}>
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
</div>
</div>
<div style={{ marginTop: '4px' }}>
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
</div>
</div>
</Frame>
);
};
export default Cover;

64
client/patterns/drop-cap/Details.tsx Normal file
View File

@@ -0,0 +1,64 @@
import React from 'react';
import './dropcap.css';
import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import Square from '../../placeholders/Square';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Drop cap">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '256px' }}>
<div className="p-drop-cap">
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document
written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript.
</div>
</div>
</div>
)}
source={`
<style>
/* Styles for the first letter */
.p-drop-cap:first-letter {
/* Display at the left */
float: left;
line-height: 1;
/* Spacing */
margin: 0 8px 0 0;
padding: 0 8px;
/* Optional */
font-size: 64px;
font-weight: 700;
}
</style>
<div class="p-drop-cap">
...
</div>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

9
client/patterns/drop-cap/dropcap.css Normal file
View File

@@ -0,0 +1,9 @@
.p-drop-cap:first-letter {
border: 2px solid rgba(0, 0, 0, 0.3);
float: left;
font-size: 64px;
font-weight: 700;
line-height: 1;
margin: 0 8px 0 0;
padding: 0 8px;
}