From d43986bfe756137bc58329e589aa703a354d631b Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Fri, 15 Feb 2019 14:27:00 -0800 Subject: [PATCH] moved shared styles out ot assets --- assets/shared.css | 90 +++++++++++++++++++++++++++++++++++++++ index.html | 93 +---------------------------------------- step1-00/css-demo.css | 31 ++++++++++---- step1-00/html-demo.html | 3 +- step1-00/index.html | 17 +++++++- 5 files changed, 131 insertions(+), 103 deletions(-) create mode 100644 assets/shared.css diff --git a/assets/shared.css b/assets/shared.css new file mode 100644 index 0000000..d5e1d84 --- /dev/null +++ b/assets/shared.css @@ -0,0 +1,90 @@ +html { + box-sizing: border-box; +} +*, +*:before, +*:after { + box-sizing: inherit; +} + +body { + align-items: center; + background-color: #f3f2f1; + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjxzdmcgIHdpZHRoPSI2MDAiICBoZWlnaHQ9IjYwMCIgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCwzMDApIj4gICAgPHBhdGggZD0iTTEyMi42LC0xMTQuOEMxNzAuMywtNzUsMjI4LjEsLTM3LjUsMjM0LjQsNi4yQzI0MC42LDUwLDE5NS4zLDk5LjksMTQ3LjYsMTI5LjZDOTkuOSwxNTkuMyw1MCwxNjguNiw0LjcsMTYzLjlDLTQwLjUsMTU5LjIsLTgxLjEsMTQwLjQsLTExNS43LDExMC43Qy0xNTAuNCw4MS4xLC0xNzkuMiw0MC41LC0xOTMuOCwtMTQuNkMtMjA4LjQsLTY5LjgsLTIwOC45LC0xMzkuNSwtMTc0LjIsLTE3OS40Qy0xMzkuNSwtMjE5LjIsLTY5LjgsLTIyOS4xLC0xNi4xLC0yMTNDMzcuNSwtMTk2LjgsNzUsLTE1NC42LDEyMi42LC0xMTQuOFoiIGZpbGw9IiMzZDk3ZTMiIC8+ICA8L2c+PC9zdmc+); + background-attachment: fixed; + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: 900px 740px; + + height: 100vh; +} + +.Container { + display: flex; + justify-content: center; + padding: 20px; +} + +.Tiles { + display: flex; + flex-wrap: wrap; + list-style-type: none; + margin: 0; + width: 800px; + padding: 0; +} + +.Tile { + background-color: white; + border-radius: 2px; + box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108); + margin: 0 12px 12px 0; + opacity: 0.96; + transition: all 0.15s linear; +} + +.Tile:not(.Tile--intro):hover { + box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108); + opacity: 1; +} + +.Tile-link { + align-items: center; + color: #323130; + display: flex; + flex-direction: column; + height: 148px; + justify-content: center; + padding: 20px; + text-decoration: none; + width: 148px; +} + +.Tile-link i { + font-size: 32px; + margin-bottom: 12px; + color: #605e5c; +} + +.Tile--intro { + max-width: 468px; + padding: 20px; + width: 100%; +} + +.Tile--intro h1 { + font-size: 24px; + font-weight: 300; + margin: 8px 0; + padding: 0; +} + +.Tile--intro p { + font-size: 14px; + margin: 0; +} + +.Tile--intro a, +.Tile--intro a:visited { + color: #0078d4; +} diff --git a/index.html b/index.html index 1995ffe..c174c0b 100644 --- a/index.html +++ b/index.html @@ -3,98 +3,7 @@ - +
diff --git a/step1-00/css-demo.css b/step1-00/css-demo.css index d8f4ffb..db7481a 100644 --- a/step1-00/css-demo.css +++ b/step1-00/css-demo.css @@ -2,12 +2,21 @@ /* Targeting an HTML tag */ h1 { + /* Color name */ color: black; - background: #ddd; - border: 1px solid #ababab; + + /* 6 digit hex */ + background: #ababab; + + /* Margin: property for each side */ margin-bottom: 15px; margin-top: 15px; + + /* Shorthand: Padding applies to all sides */ padding: 10px; + + /* 3 digit hex and border shorthand */ + border: 1px solid #ddd; } /* Overriding inherited styles */ @@ -27,11 +36,17 @@ span { /* Direct decendant selector */ .tiles > div { + /* rgb colors */ background: rgb(10, 10, 10); color: white; flex-basis: 100%; + /* Longhand goes clockwise from top + 10px - all + 10px 20px - top/bottom left/right + 10px 20px 15px - top left/right bottom + */ padding: 10px 20px 15px; - margin-right: 20px; + margin: 10px 20px 10px 0; } /* Qualified selector */ @@ -51,18 +66,20 @@ a:hover { /* Sibling selectors */ a ~ a { + /* Changing elements from inline to block */ display: block; } /* Positional Pseudo Selectors */ .tiles > div:last-child { + /* overrides margin-right but leaves other margins alone */ margin-right: 0; } -/* ID and selector lists */ -#contact-form label, -#contact-form input { - display: block; +/* ID selector */ +#contact-form { + display: flex; + flex-direction: column; } /* Attribute selector */ diff --git a/step1-00/html-demo.html b/step1-00/html-demo.html index c15b04d..40a1672 100644 --- a/step1-00/html-demo.html +++ b/step1-00/html-demo.html @@ -2,6 +2,7 @@ Intro to HTML +