tomit4/notes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

📝 Added sensible default stylings

Browse source
This commit is contained in:
z3rOR0ne 2022-10-05 00:19:45 -07:00
parent 40c7c599f5
commit 3e5e0022a5
2 changed files with 66 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

28
web_dev_defaults/default_index.html
View file

@ -7,5 +7,33 @@
<link rel="stylesheet" href="default_styles.css">
</head>
<body>
<main>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>test list item</li>
<li>test list item</li>
<li>test list item</li>
<li>test list item</li>
<li>test list item</li>
<li>test list item</li>
<li>test list item</li>
<li>test list item</li>
<li>test list item</li>
<li>test list item</li>
<li>test list item</li>
<li>test list item</li>
<li>test list item</li>
<li>test list item</li>
<li>test list item</li>
<li>test list item</li>
<li>test list item</li>
</ul>
</main>
</body>
</html>

45
web_dev_defaults/default_styles.css
View file

@ -1,8 +1,39 @@
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
/* * { */
/* border: 2px solid lime; */
/* } */
/* alternatively select using :root */
html {
max-width: 70ch;
padding: 3em 1em;
margin: auto;
line-height: 1.75;
font-size: 1.25em;
}
/* more for a centered div, doesn't play well with main below*/
/* body { */
/* width: 100vw; */
/* height: 100vh; */
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
/* margin: 0 auto; */
/* } */
main {
max-width: 38rem;
padding: 1.5em;
margin: auto;
}
h1, h2, h3, h4, h5, h6 {
margin: 3em 0 1em;
font-family: sans-serif;
}
p, ul, ol {
margin-bottom: 2em;
color: #1d1d1d;
font-family: sans-serif;
}