diff options
author | Queensferry <queensferry.me@gmail.com> | 2019-09-15 17:08:42 +0300 |
---|---|---|
committer | Queensferry <queensferry.me@gmail.com> | 2019-09-15 17:08:42 +0300 |
commit | 426b0dd0277f0c9cc5dc725053a17e1d53ff721e (patch) | |
tree | 609288f110dabb43c449fa4bcd91e66de11a79f4 /static | |
parent | e1bd50e3357e346723e17d53c3f8d397a8401c34 (diff) |
feat(css): layout of header
Diffstat (limited to 'static')
-rw-r--r-- | static/css/Cocodayo.css | 5 | ||||
-rw-r--r-- | static/css/main.css | 69 |
2 files changed, 69 insertions, 5 deletions
diff --git a/static/css/Cocodayo.css b/static/css/Cocodayo.css deleted file mode 100644 index 4f3b3f8..0000000 --- a/static/css/Cocodayo.css +++ /dev/null @@ -1,5 +0,0 @@ -body { - font-family : 'Avenir', Helvetica, Arial, sans-serif; - -webkit-font-smoothing : antialiased; - -moz-osx-font-smoothing: grayscale; -}
\ No newline at end of file diff --git a/static/css/main.css b/static/css/main.css new file mode 100644 index 0000000..11c2389 --- /dev/null +++ b/static/css/main.css @@ -0,0 +1,69 @@ +/* global styles */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +a { + color: black; + text-decoration: none; +} + +body { + margin: 0 auto; + max-width: 1440px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.link { + box-shadow: inset 0 -3px 0 #208020; + display: inline-block; + transition: box-shadow .1s; +} + +.link:hover { + box-shadow: inset 0 -6px 0 #208020; +} + +/* header styles */ +#header > .title { + font-size: 2rem; +} + +#header > .nav-bar > .nav-bar-item > a { + font-size: 1rem; +} + +@media screen and (min-width: 512px) { + #header { + align-items: center; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 1rem 3rem; + } + + #header > .nav-bar > .nav-bar-item a { + margin-left: 4rem; + } +} + +@media screen and (max-width: 512px) { + #header { + display: block; + margin-bottom: .7rem; + } + + #header > .title { + margin: .7rem 0; + text-align: center; + } + + #header > .nav-bar { + display: flex; + flex-direction: row; + justify-content: space-around; + } +} |