mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-09 15:46:55 +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

1
client/constants/Pattern.ts
View File

@@ -9,6 +9,7 @@ enum Pattern {
DotLeader = 'Dot leader',
DotNavigation = 'Dot navigation',
DropArea = 'Drop area',
DropCap = 'Drop cap',
Dropdown = 'Dropdown',
FeatureList = 'Feature list',
FixedAtCorner = 'Fixed at corner',

1
client/pages/ExplorePage.tsx
View File

@@ -93,6 +93,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.DotLeader} />
<CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.DropArea} />
<CoverCard pattern={Pattern.DropCap} />
<CoverCard pattern={Pattern.Dropdown} />
<CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} />

2
client/pages/HomePage.tsx
View File

@@ -195,6 +195,7 @@ const HomePage = () => {
<CoverCard pattern={Pattern.SplitScreen} />
<CoverCard pattern={Pattern.StickyFooter} />
<CoverCard pattern={Pattern.StickyHeader} />
<CoverCard pattern={Pattern.AvatarList} />
<CoverCard pattern={Pattern.Badge} />
<CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.ButtonWithIcon} />
@@ -204,6 +205,7 @@ const HomePage = () => {
<CoverCard pattern={Pattern.DotLeader} />
<CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.DropArea} />
<CoverCard pattern={Pattern.DropCap} />
<CoverCard pattern={Pattern.Dropdown} />
<CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} />

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;
}

1
public/sitemap.xml
View File

@@ -15,6 +15,7 @@
<url><loc>https://csslayout.io/patterns/dot-leader</loc></url>
<url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>
<url><loc>https://csslayout.io/patterns/drop-area</loc></url>
<url><loc>https://csslayout.io/patterns/drop-cap</loc></url>
<url><loc>https://csslayout.io/patterns/dropdown</loc></url>
<url><loc>https://csslayout.io/patterns/feature-list</loc></url>
<url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>