Skip to content
Snippets Groups Projects
Commit ccd1f89e authored by Adam Conrad's avatar Adam Conrad
Browse files

[Adam] clean up wiki with design feedback

parent e4543b2c
No related branches found
No related tags found
No related merge requests found
......@@ -3,7 +3,7 @@ extends ../layout
block content
.container
.row
.span12
.offset2.span8
#bodyContent
h1 Positioning images and tables
#mw-content-text.mw-content-ltr(lang='en', dir='ltr')
......@@ -88,30 +88,27 @@ block content
p
| The default alignment for images and tables is set to
i left
p
div(style='margin-right: 100px;')
div(style='width: 59%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Positioning floats
div(style='border: 1px solid gray; padding: 4px; overflow: scroll;')
.mw-geshi.mw-code.mw-content-ltr(dir='ltr')
.latex.source-latex
pre.de1.
\nLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Etiam lobortis facilisis sem. Nullam nec mi et neque pharetra
sollicitudin.
Praesent imperdiet mi nec
ante. Donec ullamcorper, felis non sodales commodo, lectus velit
ultrices augue, a dignissim nibh lectus placerat pede.
Vivamus nunc nunc, molestie ut, ultricies
vel, semper in, velit. Ut porttitor.
div(style='width: 39%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Output
div(style='border: 1px solid gray; padding: 4px;')
p
a.image(href='/learn/File:PositioningTnIEX1.png')
figure.wikifigure
.row-fluid
.span6
pre(data-number)
| \nLorem ipsum dolor sit amet, consectetuer adipiscing elit.
| Etiam lobortis facilisis sem. Nullam nec mi et neque pharetra
| sollicitudin.
br
br
| Praesent imperdiet mi nec
| ante. Donec ullamcorper, felis non sodales commodo, lectus velit
| ultrices augue, a dignissim nibh lectus placerat pede.
| Vivamus nunc nunc, molestie ut, ultricies
| vel, semper in, velit. Ut porttitor.
.span6
a(href='/learn/File:PositioningTnIEX1.png')
img(alt='PositioningTnIEX1.png', src='/learn-scripts/images/thumb/2/23/PositioningTnIEX1.png/300px-PositioningTnIEX1.png', width='300', height='233')
figcaption
strong Figure 1.
| Positioning floats within a document.
p
p
| This is a simple example, for a description of this and other ways to include images in your
......@@ -145,29 +142,27 @@ block content
p
| to the preamble of your file and then use an additional option in your image importing statement
p
div(style='margin-right: 100px;')
div(style='width: 59%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Positioning floats
div(style='border: 1px solid gray; padding: 4px; overflow: scroll;')
.mw-geshi.mw-code.mw-content-ltr(dir='ltr')
.latex.source-latex
pre.de1.
\nLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Etiam lobortis facilisis sem. Nullam nec mi et neque
pharetra sollicitudin.
Praesent imperdiet mi necante. Donec ullamcorper, felis
non sodales commodo, lectus velit ultrices augue,
a dignissim nibh lectus placerat pede. Vivamus nunc nunc,
molestie ut, ultriciesvel, semper in, velit. Ut porttitor.
div(style='width: 39%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Output
div(style='border: 1px solid gray; padding: 4px;')
p
a.image(href='/learn/File:PositioningTnIEx2.png')
img(alt='PositioningTnIEx2.png', src='/learn-scripts/images/thumb/e/e3/PositioningTnIEx2.png/300px-PositioningTnIEx2.png', width='300', height='244')
p
figure.wikifigure
.row-fluid
.span6
pre(data-number)
| \nLorem ipsum dolor sit amet, consectetuer adipiscing elit.
| Etiam lobortis facilisis sem. Nullam nec mi et neque pharetra
| sollicitudin.
br
br
| Praesent imperdiet mi nec
| ante. Donec ullamcorper, felis non sodales commodo, lectus velit
| ultrices augue, a dignissim nibh lectus placerat pede.
| Vivamus nunc nunc, molestie ut, ultricies
| vel, semper in, velit. Ut porttitor.
.span6
a(href='/learn/File:PositioningTnIEX1.png')
img(alt='PositioningTnIEX1.png', src='/learn-scripts/images/thumb/2/23/PositioningTnIEX1.png/300px-PositioningTnIEX1.png', width='300', height='233')
figcaption
strong Figure 1.
| Positioning floats within a document.
p
| The package
b adjustbox
......@@ -197,24 +192,26 @@ block content
a(href='/learn/Inserting_Images', title='Inserting Images') Inserting Images
| ) is intended to provide automatic positioning.
p
div(style='margin-right: 100px;')
div(style='width: 59%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Positioning floats
div(style='border: 1px solid gray; padding: 4px; overflow: scroll;')
.mw-geshi.mw-code.mw-content-ltr(dir='ltr')
.latex.source-latex
pre.de1.
\nPraesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Duis fringilla tristique neque. Sed interdum libero ut metus.
Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet
ante lobortis sollicitudin.
div(style='width: 39%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Output
div(style='border: 1px solid gray; padding: 4px;')
p
a.image(href='/learn/File:PositioningTnIEx3.png')
img(alt='PositioningTnIEx3.png', src='/learn-scripts/images/thumb/0/00/PositioningTnIEx3.png/300px-PositioningTnIEx3.png', width='300', height='255')
p
figure.wikifigure
.row-fluid
.span6
pre(data-number)
| \nLorem ipsum dolor sit amet, consectetuer adipiscing elit.
| Etiam lobortis facilisis sem. Nullam nec mi et neque pharetra
| sollicitudin.
br
br
| Praesent imperdiet mi nec
| ante. Donec ullamcorper, felis non sodales commodo, lectus velit
| ultrices augue, a dignissim nibh lectus placerat pede.
| Vivamus nunc nunc, molestie ut, ultricies
| vel, semper in, velit. Ut porttitor.
.span6
a(href='/learn/File:PositioningTnIEX1.png')
img(alt='PositioningTnIEX1.png', src='/learn-scripts/images/thumb/2/23/PositioningTnIEX1.png/300px-PositioningTnIEX1.png', width='300', height='233')
figcaption
strong Figure 1.
| Positioning floats within a document.
p
| This environment uses a positioning parameter passed inside brackets, it can take the next values:
table.wikitable
......@@ -300,28 +297,26 @@ block content
p
| It is possible to insert several images in one figure, each one with its own reference and label
p
div(style='margin-right: 100px;')
div(style='width: 59%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Positioning floats
div(style='border: 1px solid gray; padding: 4px; overflow: scroll;')
.mw-geshi.mw-code.mw-content-ltr(dir='ltr')
.latex.source-latex
pre.de1.
\nPraesent in sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis fringilla tristique neque...
Praesent blandit blandit mauris. Praesent
lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris
lacinia loremsit amet ipsum. Nunc quis urna dictum turpis accumsan
semper.
div(style='width: 39%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Output
div(style='border: 1px solid gray; padding: 4px;')
p
a.image(href='/learn/File:PositioningTnIEx4.png')
img(alt='PositioningTnIEx4.png', src='/learn-scripts/images/thumb/e/eb/PositioningTnIEx4.png/300px-PositioningTnIEx4.png', width='300', height='267')
p
figure.wikifigure
.row-fluid
.span6
pre(data-number)
| \nLorem ipsum dolor sit amet, consectetuer adipiscing elit.
| Etiam lobortis facilisis sem. Nullam nec mi et neque pharetra
| sollicitudin.
br
br
| Praesent imperdiet mi nec
| ante. Donec ullamcorper, felis non sodales commodo, lectus velit
| ultrices augue, a dignissim nibh lectus placerat pede.
| Vivamus nunc nunc, molestie ut, ultricies
| vel, semper in, velit. Ut porttitor.
.span6
a(href='/learn/File:PositioningTnIEX1.png')
img(alt='PositioningTnIEX1.png', src='/learn-scripts/images/thumb/2/23/PositioningTnIEX1.png/300px-PositioningTnIEX1.png', width='300', height='233')
figcaption
strong Figure 1.
| Positioning floats within a document.
p
| First, you must import the package
b subcaption
......@@ -349,27 +344,26 @@ block content
b wrapfig
| provides a useful feature, text can be floated around the images.
p
div(style='margin-right: 100px;')
div(style='width: 59%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Positioning floats
div(style='border: 1px solid gray; padding: 4px; overflow: scroll;')
.mw-geshi.mw-code.mw-content-ltr(dir='ltr')
.latex.source-latex
pre.de1.
\nPraesent in sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis fringilla tristique neque. Sed interdum
libero ut metus. Pellentesque placerat.
Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis fringilla tristique neque. Sed interdum
div(style='width: 39%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Output
div(style='border: 1px solid gray; padding: 4px;')
p
a.image(href='/learn/File:PositioningTnIEx5.png')
img(alt='PositioningTnIEx5.png', src='/learn-scripts/images/thumb/4/47/PositioningTnIEx5.png/300px-PositioningTnIEx5.png', width='300', height='203')
p
figure.wikifigure
.row-fluid
.span6
pre(data-number)
| \nLorem ipsum dolor sit amet, consectetuer adipiscing elit.
| Etiam lobortis facilisis sem. Nullam nec mi et neque pharetra
| sollicitudin.
br
br
| Praesent imperdiet mi nec
| ante. Donec ullamcorper, felis non sodales commodo, lectus velit
| ultrices augue, a dignissim nibh lectus placerat pede.
| Vivamus nunc nunc, molestie ut, ultricies
| vel, semper in, velit. Ut porttitor.
.span6
a(href='/learn/File:PositioningTnIEX1.png')
img(alt='PositioningTnIEX1.png', src='/learn-scripts/images/thumb/2/23/PositioningTnIEX1.png/300px-PositioningTnIEX1.png', width='300', height='233')
figcaption
strong Figure 1.
| Positioning floats within a document.
p
| First import the package
i wrapfig
......@@ -411,27 +405,26 @@ block content
i centre
| .
p
div(style='margin-right: 100px;')
div(style='width: 59%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Positioning floats
div(style='border: 1px solid gray; padding: 4px; overflow: scroll;')
.mw-geshi.mw-code.mw-content-ltr(dir='ltr')
.latex.source-latex
pre.de1.
\nPraesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin.
Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Duis fringilla tristique neque. Sed interdum libero ut metus.
Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit
amet ante lobortis sollicitudin.
div(style='width: 39%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Output
div(style='border: 1px solid gray; padding: 4px;')
p
a.image(href='/learn/File:PositioningTnIEx6.png')
img(alt='PositioningTnIEx6.png', src='/learn-scripts/images/thumb/7/74/PositioningTnIEx6.png/300px-PositioningTnIEx6.png', width='300', height='233')
p
figure.wikifigure
.row-fluid
.span6
pre(data-number)
| \nLorem ipsum dolor sit amet, consectetuer adipiscing elit.
| Etiam lobortis facilisis sem. Nullam nec mi et neque pharetra
| sollicitudin.
br
br
| Praesent imperdiet mi nec
| ante. Donec ullamcorper, felis non sodales commodo, lectus velit
| ultrices augue, a dignissim nibh lectus placerat pede.
| Vivamus nunc nunc, molestie ut, ultricies
| vel, semper in, velit. Ut porttitor.
.span6
a(href='/learn/File:PositioningTnIEX1.png')
img(alt='PositioningTnIEX1.png', src='/learn-scripts/images/thumb/2/23/PositioningTnIEX1.png/300px-PositioningTnIEX1.png', width='300', height='233')
figcaption
strong Figure 1.
| Positioning floats within a document.
p
| To learn about how to create tables see the
a(href='/learn/Tables', title='Tables') Tables
......@@ -445,30 +438,26 @@ block content
p
| The table environment is intended to automatically position tables so they fit nicely in the flow of your document.
p
div(style='margin-right: 100px;')
div(style='width: 59%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Positioning floats
div(style='border: 1px solid gray; padding: 4px; overflow: scroll;')
.mw-geshi.mw-code.mw-content-ltr(dir='ltr')
.latex.source-latex
pre.de1.
\nPraesent in sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis fringilla tristique neque. Sed interdum
libero ut metus. Pellentesque placerat. Nam rutrum augue a leo.
Morbi sed elit sit amet ante lobortis sollicitudin.
Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis fringilla tristique neque. Sed interdum
libero ut metus. Pellentesque placerat. Nam rutrum augue a leo.
Morbi sed elit sit amet ante lobortis sollicitudin.
div(style='width: 39%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Output
div(style='border: 1px solid gray; padding: 4px;')
p
a.image(href='/learn/File:PositioningTnIEx7.png')
img(alt='PositioningTnIEx7.png', src='/learn-scripts/images/thumb/2/2c/PositioningTnIEx7.png/300px-PositioningTnIEx7.png', width='300', height='261')
p
figure.wikifigure
.row-fluid
.span6
pre(data-number)
| \nLorem ipsum dolor sit amet, consectetuer adipiscing elit.
| Etiam lobortis facilisis sem. Nullam nec mi et neque pharetra
| sollicitudin.
br
br
| Praesent imperdiet mi nec
| ante. Donec ullamcorper, felis non sodales commodo, lectus velit
| ultrices augue, a dignissim nibh lectus placerat pede.
| Vivamus nunc nunc, molestie ut, ultricies
| vel, semper in, velit. Ut porttitor.
.span6
a(href='/learn/File:PositioningTnIEX1.png')
img(alt='PositioningTnIEX1.png', src='/learn-scripts/images/thumb/2/23/PositioningTnIEX1.png/300px-PositioningTnIEX1.png', width='300', height='233')
figcaption
strong Figure 1.
| Positioning floats within a document.
p
| A position parameter, inside brackets, can be passed to the
b table
......@@ -566,30 +555,26 @@ block content
b wraptable
| .
p
div(style='margin-right: 100px;')
div(style='width: 59%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Positioning floats
div(style='border: 1px solid gray; padding: 4px; overflow: scroll;')
.mw-geshi.mw-code.mw-content-ltr(dir='ltr')
.latex.source-latex
pre.de1.
\nPraesent in sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis fringilla tristique neque. Sed interdum
libero ut metus. Pellentesque placerat. Nam rutrum augue a leo.
Morbi sed elit sit amet ante lobortis sollicitudin.
Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis fringilla tristique neque. Sed interdum
libero ut metus. Pellentesque placerat. Nam rutrum augue a leo.
Morbi sed elit sit amet ante lobortis sollicitudin...
div(style='width: 39%; display: inline-block; vertical-align: top;')
div(style='border: 1px solid gray; background-color: #ddd; border-bottom: none; padding: 4px;') Output
div(style='border: 1px solid gray; padding: 4px;')
p
a.image(href='/learn/File:PositioningTnIEx8.png')
img(alt='PositioningTnIEx8.png', src='/learn-scripts/images/thumb/d/d6/PositioningTnIEx8.png/300px-PositioningTnIEx8.png', width='300', height='268')
p
figure.wikifigure
.row-fluid
.span6
pre(data-number)
| \nLorem ipsum dolor sit amet, consectetuer adipiscing elit.
| Etiam lobortis facilisis sem. Nullam nec mi et neque pharetra
| sollicitudin.
br
br
| Praesent imperdiet mi nec
| ante. Donec ullamcorper, felis non sodales commodo, lectus velit
| ultrices augue, a dignissim nibh lectus placerat pede.
| Vivamus nunc nunc, molestie ut, ultricies
| vel, semper in, velit. Ut porttitor.
.span6
a(href='/learn/File:PositioningTnIEX1.png')
img(alt='PositioningTnIEX1.png', src='/learn-scripts/images/thumb/2/23/PositioningTnIEX1.png/300px-PositioningTnIEX1.png', width='300', height='233')
figcaption
strong Figure 1.
| Positioning floats within a document.
p
| First, import the package
.mw-geshi.mw-code.mw-content-ltr(dir='ltr')
......
......@@ -168,8 +168,29 @@ input.inputmodal {
}
}
}
.wikifigure {
margin: auto 0;
pre {
border: 0 none;
border-radius: 3px;
font-weight: 700;
padding: (@baseLineHeight / 2) (@gridGutterWidth / 2);
}
figcaption {
font-size: .8rem;
}
}
.wikitable {
margin-left: -230px;
width: 1170px;
@media screen and (max-width: 1200px) {
margin-left: -180px;
width: 940px;
}
@media screen and (max-width: 960px) {
margin-left: 0;
width: 100%;
}
th, td {
padding: 0 (@baseLineHeight / 2);
border-bottom: 1px solid @grayLighter;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment