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

Roughly how CSS is at end of "How to make a nice site with less CSS" 

Different color scheme, and fonts. Slightly different line heights for body and h3 based on how it looked. Different marker color as my li's are links
This commit is contained in:
Robert McGovern 2024-02-02 03:03:01 +00:00
parent 2a9d10af21
commit e69bf49e05
2 changed files with 144 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,42 +5,51 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimal Styling riffing off Kevin Powell</title> <title>Minimal Styling riffing off Kevin Powell</title>
<link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=PT+Sans:wght@400;700&display=swap"
rel="stylesheet">
<!-- <link rel="stylesheet" href="style.css"> -->
<link rel="stylesheet" href="style-new.css">
</head> </head>
<body> <body>
<main> <main>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ratione?</h1> <article class="wrapper flow">
<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 <img src="./IMG_0030.JPG" alt="">
in <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus consectetur magni vero eum, autem
placeat reiciendis doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus 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
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2> consectetur magni vero eum, autem et in placeat reiciendis doloremque.
<h3>Lorem, ipsum dolor.</h3> </p>
<img src="IMG_0468.JPG" alt=""> <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
<p></p> <h3>Lorem, ipsum dolor.</h3>
<h3>Lorem ipsum dolor sit amet consectetur.</h3> <img src="IMG_0468.JPG" alt="">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio pariatur dolores nihil quas. Praesentium <p></p>
maxime <h3>Lorem ipsum dolor sit amet consectetur.</h3>
accusamus ipsam architecto debitis expedita?</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio pariatur dolores nihil quas. Praesentium
<ul> maxime
<li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li> 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>
</ul> <li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
<fieldset> <li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
<form action=""> </ul>
<label for="name">Name<input type="text" name="name" id="" placeholder="Enter your name"></label> <fieldset>
<label for="email">Email<input type="email" name="email" id="" <form action="">
placeholder="Enter your email address"></label> <label for="name">Name<input type="text" name="name" id="" placeholder="Enter your name"></label>
<label for="message">Message <label for="email">Email<input type="email" name="email" id=""
<textarea id="message" name="message" rows="4" cols="50" placeholder="Your message here"></textarea> placeholder="Enter your email address"></label>
</label> <label for="message">Message
</form> <textarea id="message" name="message" rows="4" cols="50"
</fieldset> placeholder="Your message here"></textarea>
<img src="./IMG_0835.JPG" alt=""> </label>
</form>
</fieldset>
<img src="./IMG_0835.JPG" alt="">
</article>
</main> </main>
</body> </body>

103
projects/random/minimal-styling/style-new.css Normal file
View File

@ -0,0 +1,103 @@
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
:root {
--clr-text: hsl(205, 96%, 9%);
--clr-body: hsl(205, 96%, 15%);
--clr-background: hsl(203, 94%, 94%);
--clr-primary: hsl(205, 94%, 28%);
--clr-secondary: hsl(320, 94%, 68%);
--clr-accent: hsl(2, 94%, 47%);
--ff-headings: "Nunito", sans-serif;
--ff-body: "PT Sans", sans-serif;
--fs-300: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
--fs-400: clamp(1.35rem, 1.2048rem + 0.7261vi, 1.7675rem);
--fs-500: clamp(1.62rem, 1.3142rem + 1.5291vi, 2.4992rem);
--fs-600: clamp(1.944rem, 1.391rem + 2.7651vi, 3.5339rem);
--fs-700: clamp(2.3328rem, 1.4061rem + 4.6334vi, 4.997rem);
--fs-800: clamp(2.7994rem, 1.3154rem + 7.4198vi, 7.0657rem);
}
@media (prefers-color-scheme: dark) {
:root {
--clr-text: hsl(205, 96%, 91%);
--clr-body: hsl(205, 61%, 93%);
--clr-background: hsl(203, 94%, 6%);
--clr-primary: hsl(205, 94%, 72%);
--clr-secondary: hsl(320, 94%, 32%);
--clr-accent: hsl(2, 94%, 53%);
}
}
html {
color-scheme: light dark;
}
:where(img, svg, video) {
width: 100%;
display: block;
}
.flow > * + * {
margin-block-start: var(--flow-space, 1em);
}
body {
font-family: var(--ff-body);
color: var(--clr-body);
font-size: var(--fs-400);
line-height: 1.2;
}
h1,
h2,
h3 {
font-family: var(--ff-headings);
line-height: 1.1;
text-wrap: balance;
}
h1 {
font-size: var(--fs-700);
color: var(--clr-primary);
--flow-space: 2em;
}
h2 {
font-size: var(--fs-600);
color: var(--clr-primary);
--flow-space: 1.5em;
}
h3 {
font-size: var(--fs-500);
color: var(--clr-text);
--flow-space: 0.5em;
}
a {
color: var(--clr-primary);
}
a:hover,
a:focus {
color: var(--clr-accent);
}
::marker {
color: var(--clr-secondary);
}
.wrapper {
width: min(100% - 3rem, 55ch);
margin-inline: auto;
}