Skip to content

Commit ce82d06

Browse files
jessicarushjessicarush
committed
Initial commit
1 parent c2de510 commit ce82d06

File tree

2 files changed

+94
-0
lines changed

2 files changed

+94
-0
lines changed

‎css_conditional_border_radius/base.css

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@charset "UTF-8";
2+
3+
4+
5+
/* VARIABLES -------------------------------------------------------------- */
6+
7+
:root {
8+
--heading-font: 'Open Sans', sans-serif;
9+
--main-font: 'Open Sans', sans-serif;
10+
--minor-font: 'Open Sans', sans-serif;
11+
--heading-color: rgba(0,0,50,.9);
12+
--main-color: rgba(70,70,90,.9);
13+
--minor-color: rgb(190,190,200);
14+
--emphasis-color: rgb(27,211,165);
15+
}
16+
17+
18+
19+
/* DEFAULTS --------------------------------------------------------------- */
20+
21+
html {
22+
color: var(--main-color);
23+
font-family: var(--main-font);
24+
font-size: 16px;
25+
font-weight: 400;
26+
}
27+
28+
body {
29+
margin: 0;
30+
}
31+
p {
32+
margin: 0;
33+
}
34+
35+
/* TYPOGRAPHY ------------------------------------------------------------- */
36+
37+
.primary-heading {
38+
color: var(--heading-color);
39+
font-family: var(--heading-font);
40+
font-size: 2rem;
41+
font-weight: 400;
42+
}
43+
44+
45+
/* LINKS & BUTTONS -------------------------------------------------------- */
46+
47+
/* LAYOUT ----------------------------------------------------------------- */
48+
49+
.box {
50+
border-radius: max(0px, min(8px, calc((100vw - 100%) * 9999)));
51+
max-width: 400px;
52+
background-color: var(--heading-color);
53+
padding: 20px;
54+
margin: auto;
55+
color: #fff;
56+
57+
}
58+
/* COMPONENTS ------------------------------------------------------------- */
59+
60+
/* COSMETIC --------------------------------------------------------------- */
61+
62+
/* UTILITY ---------------------------------------------------------------- */
63+
64+
/* STATE ------------------------------------------------------------------ */

‎css_conditional_border_radius/index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Conditional border-radius</title>
7+
<link href="base.css" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
13+
<header>
14+
<h1 class="primary-heading">CSS Conditional border-radius</h1>
15+
</header>
16+
17+
<main>
18+
19+
<div class="box">
20+
<p></p>
21+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fringilla tempus malesuada. Proin elementum diam vitae ex feugiat lobortis. Maecenas ut quam et dolor pellentesque hendrerit</p>
22+
</div>
23+
24+
</main>
25+
26+
<footer>
27+
</footer>
28+
29+
</body>
30+
</html>

0 commit comments

Comments
 (0)