Initial commit

jessicarush · Dec 3, 2021 · ce82d06 · ce82d06
1 parent c2de510
commit ce82d06
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 0 deletions.
diff --git a/css_conditional_border_radius/base.css b/css_conditional_border_radius/base.css
@@ -0,0 +1,64 @@
+@charset "UTF-8";
+
+
+
+/* VARIABLES -------------------------------------------------------------- */
+
+:root {
+  --heading-font: 'Open Sans', sans-serif;
+  --main-font: 'Open Sans', sans-serif;
+  --minor-font: 'Open Sans', sans-serif;
+  --heading-color: rgba(0,0,50,.9);
+  --main-color: rgba(70,70,90,.9);
+  --minor-color: rgb(190,190,200);
+  --emphasis-color: rgb(27,211,165);
+}
+
+
+
+/* DEFAULTS --------------------------------------------------------------- */
+
+html {
+  color: var(--main-color);
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+body {
+  margin: 0;
+}
+p {
+  margin: 0;
+}
+
+/* TYPOGRAPHY ------------------------------------------------------------- */
+
+.primary-heading {
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-size: 2rem;
+  font-weight: 400;
+}
+
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+.box {
+  border-radius: max(0px, min(8px, calc((100vw - 100%) * 9999)));
+  max-width: 400px; 
+  background-color: var(--heading-color);
+  padding: 20px;
+  margin: auto;
+  color: #fff;
+
+}
+/* COMPONENTS ------------------------------------------------------------- */
+
+/* COSMETIC --------------------------------------------------------------- */
+
+/* UTILITY ---------------------------------------------------------------- */
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_conditional_border_radius/index.html b/css_conditional_border_radius/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Conditional border-radius</title>
+  <link href="base.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
+</head>
+
+<body>
+
+  <header>
+    <h1 class="primary-heading">CSS Conditional border-radius</h1>
+  </header>
+
+  <main>
+
+    <div class="box">
+      <p></p>
+      <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>
+    </div>
+
+  </main>
+
+  <footer>
+  </footer>
+
+</body>
+</html>