-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo.html
165 lines (143 loc) · 8.6 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Test Document</title>
<link rel="stylesheet" href="./build/generic.css" />
<style>
div[role="article"] > :not(p):not(div),
div[role="article"] > div:not([class]) {
border: 5px solid red;
}
</style>
</head>
<body>
<div id="workskin">
<div id="chapters" role="article">
<div class="userstuff">
<!-- Write your story here! -->
<p class="skin-warning">
<b>A/N:</b> This work relies on a skin to make it look better. Enable the
skin by clicking here:
<a href="?style=creator" rel="nofollow">[Enable work skin]</a>
</p>
<p>
<span title="The famous Lorem Ipsum filler text"
>Lorem ipsum dolor sit amet</span
>, consectetur adipiscing elit. Aliquam hendrerit pulvinar leo at lacinia.
Sed eu lectus feugiat, semper elit et, commodo sapien. Cras placerat sem
justo, at tristique erat malesuada in. Praesent condimentum porttitor tortor
et vestibulum. Suspendisse eu elit odio. Duis dapibus odio eget leo
dignissim semper. Nam ac dignissim sapien. Duis dictum, diam id volutpat
feugiat, mi orci tristique orci, at scelerisque nibh dolor a velit. Cras
ante velit, venenatis sed consequat vel, ultrices lacinia ligula. Sed
ultricies ligula sit amet leo blandit, et porttitor diam fringilla. Donec
porttitor eleifend odio, in ornare metus condimentum sit amet. Vestibulum ac
placerat sapien, ullamcorper consectetur mi. Phasellus luctus justo sem,
laoreet hendrerit diam semper in.
</p>
<div class="mediawrap">
<img
src="https://upload.wikimedia.org/wikipedia/commons/6/6c/Herjangsfjorden_%26_Ofotfjorden%2C_wide%2C_2009_09.jpg"
/>
</div>
<p>
Nulla suscipit nisl in nisl commodo ultrices eu et ante. Cras id sem nec
tellus aliquam tincidunt. Sed semper erat eu libero maximus volutpat. Sed et
dui at odio cursus laoreet sed sit amet massa. Suspendisse potenti. Maecenas
dolor justo, iaculis eu volutpat nec, tincidunt ac ante. Fusce sit amet
turpis leo. Proin eget lacinia elit. Integer eget viverra enim. Donec
molestie luctus euismod. Etiam cursus condimentum magna ut lacinia. Sed sed
eleifend est.
</p>
<p>
Maecenas eu nibh congue, euismod turpis in, volutpat ante. Ut consequat
velit sed lectus egestas, vitae varius ipsum molestie. Suspendisse auctor
orci libero, in rutrum erat porttitor id. Praesent a dui interdum, aliquam
justo at, commodo eros. Ut orci neque, facilisis sit amet nibh vitae,
blandit dictum libero. Aenean ac justo quam. Proin eu tortor eu neque
maximus commodo a vitae dolor. Suspendisse eu odio sagittis, consequat lorem
tincidunt, vulputate lacus. Ut lacus odio, bibendum ac nisl in, consectetur
commodo enim. Vestibulum efficitur augue lectus, nec ultricies tellus
pulvinar vitae. Nulla aliquam tortor non lacus fringilla, vel accumsan ex
molestie. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Aliquam eu mi in lorem maximus congue quis
eu elit. Suspendisse commodo odio eu turpis vestibulum, et placerat tellus
venenatis.
</p>
<p>
Nunc convallis ultricies ipsum, non dapibus turpis. Nunc ex arcu, pharetra
eget interdum et, efficitur at enim. In dapibus at tellus non finibus.
Mauris sed ipsum sed neque convallis lacinia a sed purus. Aliquam fermentum
mauris metus, id imperdiet lacus ullamcorper quis. Aenean vel dui sagittis,
mattis dui non, auctor dui. Phasellus elementum nibh non justo cursus, in
faucibus lectus malesuada. Praesent vestibulum feugiat lobortis. Integer
viverra urna in velit iaculis, consectetur ullamcorper nunc consequat.
Aliquam ultrices ex sed volutpat accumsan. Duis hendrerit tortor a blandit
laoreet. In posuere metus urna, convallis sodales ipsum pretium non.
</p>
<div class="texting-container">
<div class="left blue">
<p class="name">Legowerewolf</p>
<p>Check out this sweet CSS!</p>
<p>
I made it as a reaction to seeing poorly-formatted works posted on
Archive of Our Own.
</p>
<p>
One problem I had was with embedded images, especially on mobile.
Images would frequently overflow the edge of the page.
</p>
<p>Not with this formatting!</p>
<p>
Another issue I had was with the display of texting on works. I have
never come across a work with really well-formatted texting.
</p>
<p>
One last issue I had was that you wouldn't know when to turn on work
skins.
</p>
<p>
Some people have it off by default, not realizing that the author
has used a work skin to make the work look much better.
</p>
</div>
<div class="right red">
<p class="name">You</p>
<p>Can I use this in my own works?</p>
</div>
<div class="left blue">
<p class="name">Legowerewolf</p>
<p>
Certainly! Just follow the instructions here:
https://github.com/legowerewolf/AO3-themes
</p>
<p>
Oh! And another thing! It also supports media:
<code>img</code> and <code>audio</code>.
</p>
<p>Here's a basic <code>img</code>.</p>
<div class="mediawrap">
<p>
<img
src="https://upload.wikimedia.org/wikipedia/commons/6/6c/Herjangsfjorden_%26_Ofotfjorden%2C_wide%2C_2009_09.jpg"
/>
</p>
</div>
<p>And <code>audio</code>.</p>
<div class="mediawrap">
<audio
controls
src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Wilhelm_Scream.ogg"
></audio>
</div>
</div>
</div>
<!-- Don't write beyond this point. -->
</div>
</div>
</div>
</body>
</html>