edpibu/web2.0
1
Fork 0
Code Issues Activity

Add lists, font variants

Browse source
This commit is contained in:
Edgar P. Burkhart 2022-05-06 19:38:10 +02:00
parent 1f9e8ba7f6
commit 5c3d826e32
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
2 changed files with 32 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/index.html
View file

@ -16,6 +16,7 @@
<img class="logo" src="static/svg/logo.svg" /> <img class="logo" src="static/svg/logo.svg" />
<a class="active" href="#">Home</a> <a class="active" href="#">Home</a>
<a href="#test">Link 0</a>
<a href="#test">Link 1</a> <a href="#test">Link 1</a>
<a href="#test">Link 2</a> <a href="#test">Link 2</a>
</nav> </nav>
@ -35,50 +36,20 @@
lacinia facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. lacinia facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed sollicitudin lacus sit amet tempus feugiat. Nullam at ipsum sit amet Sed sollicitudin lacus sit amet tempus feugiat. Nullam at ipsum sit amet
risus ornare interdum vel sed ligula.</p> risus ornare interdum vel sed ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget
mollis odio, ac facilisis lorem. Sed elit ipsum, rhoncus quis tortor ut, <ul>
gravida aliquam neque. Proin ex nisl, cursus auctor consequat ac, molestie <li>Item 0</li>
quis nunc. <a href="#">Proin</a> lectus neque, rhoncus eget tincidunt sit amet, <li>Item 1</li>
sollicitudin in justo. Fusce lacinia augue odio, et accumsan purus pulvinar <li>Item 2</li>
ac. Sed sagittis urna in ipsum faucibus congue. Maecenas gravida massa non <li>Item 3</li>
lacinia facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <li>Item 4</li>
Sed sollicitudin lacus sit amet tempus feugiat. Nullam at ipsum sit amet </ul>
risus ornare interdum vel sed ligula.</p> <ol>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget <li>Item 0</li>
mollis odio, ac facilisis lorem. Sed elit ipsum, rhoncus quis tortor ut, <li>Item 1</li>
gravida aliquam neque. Proin ex nisl, cursus auctor consequat ac, molestie <li>Item 2</li>
quis nunc. <a href="#">Proin</a> lectus neque, rhoncus eget tincidunt sit amet, <li>Item 3</li>
sollicitudin in justo. Fusce lacinia augue odio, et accumsan purus pulvinar <li>Item 4</li>
ac. Sed sagittis urna in ipsum faucibus congue. Maecenas gravida massa non </ol>
lacinia facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed sollicitudin lacus sit amet tempus feugiat. Nullam at ipsum sit amet
risus ornare interdum vel sed ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget
mollis odio, ac facilisis lorem. Sed elit ipsum, rhoncus quis tortor ut,
gravida aliquam neque. Proin ex nisl, cursus auctor consequat ac, molestie
quis nunc. <a href="#">Proin</a> lectus neque, rhoncus eget tincidunt sit amet,
sollicitudin in justo. Fusce lacinia augue odio, et accumsan purus pulvinar
ac. Sed sagittis urna in ipsum faucibus congue. Maecenas gravida massa non
lacinia facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed sollicitudin lacus sit amet tempus feugiat. Nullam at ipsum sit amet
risus ornare interdum vel sed ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget
mollis odio, ac facilisis lorem. Sed elit ipsum, rhoncus quis tortor ut,
gravida aliquam neque. Proin ex nisl, cursus auctor consequat ac, molestie
quis nunc. <a href="#">Proin</a> lectus neque, rhoncus eget tincidunt sit amet,
sollicitudin in justo. Fusce lacinia augue odio, et accumsan purus pulvinar
ac. Sed sagittis urna in ipsum faucibus congue. Maecenas gravida massa non
lacinia facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed sollicitudin lacus sit amet tempus feugiat. Nullam at ipsum sit amet
risus ornare interdum vel sed ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget
mollis odio, ac facilisis lorem. Sed elit ipsum, rhoncus quis tortor ut,
gravida aliquam neque. Proin ex nisl, cursus auctor consequat ac, molestie
quis nunc. <a href="#">Proin</a> lectus neque, rhoncus eget tincidunt sit amet,
sollicitudin in justo. Fusce lacinia augue odio, et accumsan purus pulvinar
ac. Sed sagittis urna in ipsum faucibus congue. Maecenas gravida massa non
lacinia facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed sollicitudin lacus sit amet tempus feugiat. Nullam at ipsum sit amet
risus ornare interdum vel sed ligula.</p>
</body> </body>
</html> </html>

19
src/static/css/main.css
View file

@ -19,6 +19,10 @@ body {
font-family: "Inter var", "Inter", sans-serif; font-family: "Inter var", "Inter", sans-serif;
color: var(--text); color: var(--text);
margin: 0; margin: 0;
margin-top: 4rem;
padding: 1rem;
font-weight: 350;
font-feature-settings: "ss01", "ss02", "ss03", "cv05", "cv08";
} }
h1, h2, h3 {font-weight: 250} h1, h2, h3 {font-weight: 250}
@ -33,7 +37,10 @@ h4 {font-size: 1.2rem}
h5 {font-size: 1rem} h5 {font-size: 1rem}
h6 {font-size: .8rem} h6 {font-size: .8rem}
p {font-weight: 350} p {
line-height: 1.3rem;
}
a { a {
color: var(--link); color: var(--link);
text-decoration: none; text-decoration: none;
@ -45,14 +52,16 @@ a:hover {text-decoration: underline;}
} }
nav { nav {
position: sticky; position: fixed;
top: 0; top: 0;
left: 0;
right: 0;
height: 4rem; height: 4rem;
line-height: 2rem; line-height: 2rem;
padding: 1rem; padding: 1rem;
width: 100%;
background: var(--bg-00); background: var(--bg-00);
color: var(--text-00); color: var(--text-00);
font-variant: small-caps;
} }
nav > * { nav > * {
margin-right: 1rem; margin-right: 1rem;
@ -70,3 +79,7 @@ nav .logo {
height: 2rem; height: 2rem;
border: .1rem solid white; border: .1rem solid white;
} }
ul {list-style-type: "–"}
ol {list-style-type: decimal-leading-zero}
li {padding-left: .5rem}