diff options
| -rw-r--r-- | index.html | 27 | ||||
| -rw-r--r-- | style.css | 82 |
2 files changed, 48 insertions, 61 deletions
@@ -6,31 +6,30 @@ <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> - <section> - <header class="header"> + <section class="header" title="Header"> + <header> <img src="lambda.svg" class="logo" alt="Lambda" title="Lambda"> ndato.com.ar </header> - <nav class="navigation"><nav><a href="/">Home</a></nav></nav> + <nav class="navigation"><a href="/">Home</a></nav> </section> <div class="main"> - <section class="left column"> - <header class="column-header">Left</header> + <section class="left column" title="Left Column"> + <header>Left</header> Lorem <a href="file:///home/nico/ndato.com.ar/index.html">ipsum dolor</a> sit amet </section> - <section class="content"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="file:///home/nico/ndato.com.ar/index.html">Amet nisl suscipit adipiscing</a> bibendum est ultricies. Sit amet risus nullam eget felis eget. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Pretium aenean pharetra <em>magna ac placerat</em> vestibulum lectus mauris. Lorem ipsum dolor sit amet consectetur adipiscing elit duis. <strong>Massa enim nec dui nunc mattis</strong>. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Enim ut sem viverra aliquet. Ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Ac tortor vitae purus faucibus ornare suspendisse sed.</p> + <section class="content column" title="Content Column"> + <main> + <header>Home</header> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="file:///home/nico/ndato.com.ar/index.html">Amet nisl suscipit adipiscing</a> bibendum est ultricies. Sit amet risus nullam eget felis eget. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Pretium aenean pharetra <em>magna ac placerat</em> vestibulum lectus mauris. Lorem ipsum dolor sit amet consectetur adipiscing elit duis. <strong>Massa enim nec dui nunc mattis</strong>. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Enim ut sem viverra aliquet. Ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Ac tortor vitae purus faucibus ornare suspendisse sed.</p> - <p>Faucibus purus in massa tempor nec feugiat nisl pretium. Augue ut lectus arcu bibendum at varius vel pharetra. Vitae auctor eu augue ut. Vestibulum lorem sed risus ultricies tristique. Ipsum nunc aliquet bibendum enim facilisis gravida neque. Rutrum quisque non tellus orci. Integer quis auctor elit sed vulputate mi sit amet. Facilisi etiam dignissim diam quis enim. At consectetur lorem donec massa. Cum sociis natoque penatibus et magnis dis parturient montes. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Netus et malesuada fames ac turpis egestas sed tempus urna. Facilisis gravida neque convallis a cras semper. Mauris vitae ultricies leo integer malesuada nunc vel. Leo in vitae turpis massa sed elementum tempus. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Dui ut ornare lectus sit amet. Risus nullam eget felis eget nunc lobortis mattis. Sagittis eu volutpat odio facilisis. Id ornare arcu odio ut sem nulla.</p> + <p>Faucibus purus in massa tempor nec feugiat nisl pretium. Augue ut lectus arcu bibendum at varius vel pharetra. Vitae auctor eu augue ut. Vestibulum lorem sed risus ultricies tristique. Ipsum nunc aliquet bibendum enim facilisis gravida neque. Rutrum quisque non tellus orci. Integer quis auctor elit sed vulputate mi sit amet. Facilisi etiam dignissim diam quis enim. At consectetur lorem donec massa. Cum sociis natoque penatibus et magnis dis parturient montes. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus.</p> - <p>Aliquam etiam erat velit scelerisque. Cras semper auctor neque vitae tempus quam pellentesque. Lectus urna duis convallis convallis tellus id interdum velit. Ut enim blandit volutpat maecenas volutpat blandit. Pellentesque sit amet porttitor eget dolor morbi non arcu. Dolor sit amet consectetur adipiscing elit duis. Nullam vehicula ipsum a arcu cursus vitae congue. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. In hendrerit gravida rutrum quisque non tellus orci. Tellus rutrum tellus pellentesque eu tincidunt. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Pharetra pharetra massa massa ultricies mi quis. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Purus viverra accumsan in nisl. Senectus et netus et malesuada fames. Pharetra massa massa ultricies mi quis. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Nisl vel pretium lectus quam id leo in vitae.</p> - </section> - <section class="right column"> - <header class="column-header">Right</header> - Lorem ipsum dolor sit amet + <p>Aliquam etiam erat velit scelerisque. Cras semper auctor neque vitae tempus quam pellentesque. Lectus urna duis convallis convallis tellus id interdum velit. Ut enim blandit volutpat maecenas volutpat blandit. Pellentesque sit amet porttitor eget dolor morbi non arcu.</p> + </main> </section> </div> - <section class="footer"> + <section title="Footer"> <footer>Lorem ipsum dolor sit amet</footer> </section> </body> @@ -15,6 +15,16 @@ --blue: #268bd2; --cyan: #2aa198; --green: #859900; + --header-font-size: 175%; + --column-min-width: 25ex; + --border-width: 1px; + --padding: 2ex; + --margin: 2ex; + --content-padding-left: 9ex; + --content-padding-right: 5ex; + --body-max-width: 140ex; + --body-min-width: 75ex; + --body-font-size: 110%; } @font-face { @@ -53,12 +63,17 @@ body { font-family: 'Libertinus'; color: var(--base1); background-color: var(--base02); - font-size: 110%; + font-size: var(--body-font-size); + min-width: var(--body-min-width); + max-width: var(--body-max-width); + margin: auto; } section { - margin: 2ex; - padding: 1ex; + border: var(--border-width) solid var(--blue); + background-color: var(--base03); + margin: var(--margin); + padding: var(--padding); } p::first-letter { @@ -71,19 +86,21 @@ em { } strong { - color: var(--red); + color: var(--orange); +} + +header, +footer { + text-align: center; } :link, :visited { - color: var(--blue); + color: var(--cyan); } -.header { - text-align: center; +.header header { font-size: 200%; - color: var(--base1); - background-color: var(--base03); } .logo { @@ -92,16 +109,7 @@ strong { } .navigation { - padding: 1ex; - color: var(--base1); - background-color: var(--base03); -} - -.footer { - padding: 1ex; text-align: center; - color: var(--base1); - background-color: var(--base03); } .main { @@ -109,41 +117,21 @@ strong { justify-content: center; } -.column { - color: var(--base01); - background-color: var(--base3); -} - -.column-header { - text-align: center; - font-size: 175%; - color: var(--base01); - background-color: var(--base2); -} - - -.left, -.right { - min-width: 10ex; - max-width: 25ex; +.column header { + font-size: var(--header-font-size); + background-color: var(--base02); } -.left, -.right, -.content { - float: left; +.left { + min-width: var(--column-min-width); } .content { text-indent: 4ex; text-align: justify; - min-width: 30ex; - max-width: 80ex; - padding-left: 8ex; - padding-right: 4ex; - padding-top: 4ex; - padding-bottom: 1ex; - color: var(--base1); - background-color: var(--base03); + padding-left: var(--content-padding-left); + padding-right: var(--content-padding-right); + padding-top: 2ex; + padding-bottom: 5ex; } |