|
| 1 | +/* |
| 2 | + Oh Hello! |
| 3 | +
|
| 4 | + These are some base styles so that our tutorial looks good. |
| 5 | +
|
| 6 | + Let's go through the important bits real quick |
| 7 | +*/ |
| 8 | +:root { |
| 9 | + --yellow: #ffc600; |
| 10 | + --black: #272727; |
| 11 | +} |
| 12 | + |
| 13 | +html { |
| 14 | + /* border-box box model allows us to add padding and border to our elements without increasing their size */ |
| 15 | + box-sizing: border-box; |
| 16 | + /* A system font stack so things load nice and quick! */ |
| 17 | + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, |
| 18 | + Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
| 19 | + font-weight: 900; |
| 20 | + font-size: 10px; |
| 21 | + color: var(--black); |
| 22 | + text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07); |
| 23 | +} |
| 24 | + |
| 25 | +/* |
| 26 | + WAT IS THIS?! |
| 27 | + We inherit box-sizing: border-box; from our <html> selector |
| 28 | + Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector |
| 29 | +*/ |
| 30 | +*, |
| 31 | +*:before, |
| 32 | +*:after { |
| 33 | + box-sizing: inherit; |
| 34 | +} |
| 35 | + |
| 36 | +body { |
| 37 | + background-image: url("./images/topography.svg"), |
| 38 | + linear-gradient(110deg, #f93d66, #6d47d9); |
| 39 | + background-size: 340px, auto; |
| 40 | + min-height: calc(100vh - 100px); |
| 41 | + margin: 50px; |
| 42 | + /* background: white; */ |
| 43 | + background-position: fixed; |
| 44 | + letter-spacing: -1px; |
| 45 | +} |
| 46 | + |
| 47 | +h1, |
| 48 | +h2, |
| 49 | +h3, |
| 50 | +h4, |
| 51 | +h5, |
| 52 | +h6 { |
| 53 | + margin: 0 0 5px 0; |
| 54 | +} |
| 55 | +/* Each item in our grid will contain numbers */ |
| 56 | +.item { |
| 57 | + /* We center the contents of these items. You can also do this with flexbox too! */ |
| 58 | + display: grid; |
| 59 | + justify-content: center; |
| 60 | + align-items: center; |
| 61 | + border: 5px solid rgba(0, 0, 0, 0.03); |
| 62 | + border-radius: 3px; |
| 63 | + font-size: 35px; |
| 64 | + background-color: var(--yellow); /* best colour */ |
| 65 | +} |
| 66 | + |
| 67 | +.item p { |
| 68 | + margin: 0 0 5px 0; |
| 69 | +} |
0 commit comments