tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changes per end of "Stop over-engineering your CSS" video

This commit is contained in:
Robert McGovern 2024-02-01 20:08:51 +00:00
parent bd79b9c569
commit 2a9d10af21
2 changed files with 72 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
projects/random/minimal-styling/index.html
View File

@ -9,39 +9,39 @@
</head> </head>
<body> <body>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ratione?</h1> <main>
<img src="./IMG_0030.JPG" alt=""> <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ratione?</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus consectetur magni vero eum, autem et in <img src="./IMG_0030.JPG" alt="">
placeat reiciendis doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus consectetur magni vero eum, autem et
consectetur magni vero eum, autem et in placeat reiciendis doloremque. in
</p> placeat reiciendis doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus
consectetur magni vero eum, autem et in placeat reiciendis doloremque.
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2> </p>
<h3>Lorem, ipsum dolor.</h3> <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
<img src="IMG_0468.JPG" alt=""> <h3>Lorem, ipsum dolor.</h3>
<p></p> <img src="IMG_0468.JPG" alt="">
<p></p>
<h3>Lorem ipsum dolor sit amet consectetur.</h3> <h3>Lorem ipsum dolor sit amet consectetur.</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio pariatur dolores nihil quas. Praesentium maxime <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio pariatur dolores nihil quas. Praesentium
accusamus ipsam architecto debitis expedita?</p> maxime
<ul> accusamus ipsam architecto debitis expedita?</p>
<li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li> <ul>
<li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li> <li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
<li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li> <li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
</ul> <li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
</ul>
<fieldset> <fieldset>
<form action=""> <form action="">
<label for="name">Name<input type="text" name="name" id="" placeholder="Enter your name"></label> <label for="name">Name<input type="text" name="name" id="" placeholder="Enter your name"></label>
<label for="email">Email<input type="email" name="email" id="" <label for="email">Email<input type="email" name="email" id=""
placeholder="Enter your email address"></label> placeholder="Enter your email address"></label>
<label for="message">Message <label for="message">Message
<textarea id="message" name="message" rows="4" cols="50" placeholder="Your message here"></textarea>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Your message here"></textarea> </label>
</label> </form>
</form> </fieldset>
</fieldset> <img src="./IMG_0835.JPG" alt="">
<img src="./IMG_0835.JPG" alt=""> </main>
</body> </body>

39
projects/random/minimal-styling/style.css
View File

@ -0,0 +1,39 @@
/* * {
margin: 0;
} */
/* img, svg, video {
width: 100%;
display: block;
} */
html {
color-scheme: light dark;
}
body {
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Open Sans",
"Helvetica Neue",
sans-serif;
font-size: 1.125rem;
line-height: 1.5;
}
main {
width: min(65ch, 100% - 4rem);
margin-inline: auto;
}
:where(img, svg, video) {
width: 100%;
display: block;
}