Created
February 11, 2022 09:12
-
-
Save diegogd/c60c325d4cc6f9f937b2823ef96ab0e4 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Copy to src/styles/base.css | |
| :root { | |
| --color1: #eeeadf; | |
| --color2: #313026; | |
| --color3: #6a3e2e; | |
| --color4: #a34c37; | |
| --color5: #dd5a40; | |
| --color6: #BBB6DF; | |
| --fg-dark: #ffffff; | |
| --font1: 'Fira Sans Condensed', sans-serif; | |
| --font2: 'Special Elite', cursive; | |
| } | |
| *, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: var(--font1); | |
| } | |
| body { | |
| background-color: var(--color1); | |
| color: var(--color2); | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| color: var(--color5); | |
| font-family: var(--font2); | |
| margin-bottom: 0.5em; | |
| } | |
| #header { | |
| background-color: var(--color3); | |
| color: var(--fg-dark); | |
| min-height: 2em; | |
| } | |
| #header .container { | |
| max-width: 960px; | |
| margin: 0 auto; | |
| padding: 0.5em 2em; | |
| display: grid; | |
| grid-template-columns: 200px 1fr; | |
| } | |
| #header a { | |
| color: inherit; | |
| } | |
| #menu ul { | |
| display: flex; | |
| gap: 10px; | |
| justify-content: end; | |
| margin-right: 1em; | |
| } | |
| #menu ul li { | |
| list-style: none; | |
| padding: 0.5em; | |
| } | |
| .box { | |
| min-height: 2em; | |
| width: 100%; | |
| } | |
| .box.color1 { | |
| background-color: var(--color1); | |
| } | |
| .box.color2 { | |
| background-color: var(--color2); | |
| } | |
| .box.color3 { | |
| background-color: var(--color3); | |
| } | |
| .box.color4 { | |
| background-color: var(--color4); | |
| } | |
| .box.color5 { | |
| background-color: var(--color5); | |
| } | |
| .blog-post .title { | |
| font-size: 1.4em; | |
| font-weight: 600; | |
| margin-bottom: 1em; | |
| } | |
| .blog-post p { | |
| margin-bottom: 0.6em; | |
| } | |
| .blog-top { | |
| font-family: Fira Sans Condensed; | |
| font-style: normal; | |
| font-weight: 250; | |
| font-size: 20px; | |
| line-height: 24px; | |
| color: #b4290d; | |
| padding-top: 24px; | |
| padding-bottom: 24px; | |
| } | |
| .main { | |
| max-width: 960px; | |
| margin: 0 auto; | |
| padding: 2em; | |
| } | |
| .foot { | |
| background-color: var(--color2); | |
| color: var(--color1); | |
| font-size: 0.8em; | |
| text-align: center; | |
| padding: 2em; | |
| margin-top: 2em; | |
| } | |
| .foot .links ul { | |
| display: flex; | |
| flex-direction: row; | |
| gap: 10px; | |
| margin: 2em auto; | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .links ul li { | |
| list-style: none; | |
| } | |
| img.logo { | |
| filter: drop-shadow(0px 0px 2px var(--color4)); | |
| } | |
| img.logo:hover { | |
| filter: drop-shadow(2px 2px 2px var(--color5)); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment