Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/index.html

Created April 3, 2021 21:30
Show Gist options
  • Save prof3ssorSt3v3/af7fb9dec07da385a8503a84f91bae8e to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/af7fb9dec07da385a8503a84f91bae8e to your computer and use it in GitHub Desktop.
Download ZIP
Code from video about all the CSS Math functions - min, max, clamp, calc, and minmax
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>min, max, minmax, clamp, calc</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<header>
<h1>CSS Math Functions</h1>
<h2>min(), max(), minmax(), clamp(), calc()</h2>
</header>
<main>
<h3>A Relatively Important Title</h3>
<p>
<img alt="sample image" src="/img/pexels-29.jpeg" />Lorem ipsum dolor
sit amet consectetur, adipisicing elit. In optio expedita cumque dolores
consequatur ipsam id vel harum aliquam reprehenderit commodi iusto
dolorum dignissimos, maiores rem dolor asperiores nihil corrupti.
</p>
<p>
<img alt="sample image" src="/img/pexels-30.jpeg" />Numquam
necessitatibus sapiente soluta et, eveniet ipsum doloremque nostrum
voluptate reiciendis explicabo ipsa iure hic vel magni quia asperiores
inventore. Possimus iste, nihil eos dignissimos fuga deleniti commodi
magnam corporis.
</p>
<p>
<img alt="sample image" src="/img/pexels-31.jpeg" />Corrupti tempore
unde ipsum. Necessitatibus deleniti voluptates sapiente facere vero
earum? Dolorem, est suscipit accusamus debitis veritatis porro ea itaque
voluptatum, consequuntur, ratione reiciendis possimus omnis facere
corrupti? Animi, veritatis.
</p>
<p>
<img alt="sample image" src="/img/pexels-32.jpeg" />Necessitatibus
commodi aut iusto atque culpa dolorem dolore voluptatem eligendi
impedit, ratione neque nihil cupiditate exercitationem natus fuga totam.
Soluta, odio saepe. Voluptatum quos harum sapiente ea fugiat,
reprehenderit qui.
</p>
</main>
</body>
</html>
Raw
main.css
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: 300;
line-height: 1.5;
}
body {
min-height: 100vh;
background-color: #111;
color: #eee;
padding: 0;
margin: 0;
}
header,
main {
background-color: #222;
padding: 1rem 2rem;
margin: 0 auto;
max-width: 80vw;
}
header h1 {
color: gold;
font-size: 3.6rem;
line-height: 1;
padding: 1rem 0;
margin: 0;
font-weight: 500;
}
header h2 {
color: orangered;
font-size: 2.4rem;
line-height: 1;
padding: 1rem 0;
font-weight: 300;
}
main {
background-color: #333;
}
main h3 {
font-size: 1.8rem;
color: cornflowerblue;
margin: 0;
font-weight: 500;
}
/*
CSS MATH FUNCTIONS
min(a, b) with any numeric values
max(a, b) with any numeric values
minmax(min, max) with grid-template-* and grid-auto-*
clamp(min, default, max)
calc( ... ) with any numeric values
For more: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions
*/
header {
display: grid;
grid-template-columns: minmax(400px, 2fr) 1fr;
gap: 1rem;
justify-content: space-between;
align-items: center;
}
main p {
/* font-size: 1.2rem; */
font-size: clamp(0.8rem, 4vh, 2rem);
/* line-height: 1.8; */
line-height: calc(1.2rem + 4vh);
margin: 2rem 0;
clear: both;
overflow: auto;
font-weight: 300;
}
main p img {
float: left;
margin: 0.5rem 1rem 1rem 0;
/* width: 50%; */
width: max(50%, 300px); /* min-width:300px; width: 50%; */
width: min(50%, 300px); /* max-width: 300px; width: 50%; */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment