diff options
| -rw-r--r-- | src/styles/main.css | 43 |
1 files changed, 41 insertions, 2 deletions
diff --git a/src/styles/main.css b/src/styles/main.css index e61c05d..fb5aa62 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -1,3 +1,5 @@ +/* font */ + @font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/ibm-plex-mono-medium-normal.woff2") format("woff2"); @@ -26,6 +28,22 @@ font-weight: 600; } +@font-face { + font-family: "Recoleta"; + src: url("/static/fonts/recoleta-medium-normal.woff") format("woff"); + font-style: normal; + font-weight: 400; +} + +@font-face { + font-family: "Recoleta"; + src: url("/static/fonts/recoleta-bold-normal.woff") format("woff"); + font-style: normal; + font-weight: 600; +} + +/* page */ + * { font-family: "IBM Plex Mono", monospace; } @@ -35,6 +53,8 @@ body { max-width: 96ch; } +/* title */ + h1 { font-size: 2em; margin-top: 1em; @@ -44,10 +64,19 @@ header h1 { margin-bottom: 30vh; } -h1 > a { - text-decoration-style: wavy; +header h1 a { + text-decoration: none; + font-size: 2em; + font-family: "Recoleta"; + letter-spacing: .08em; + background-image: url("/static/underline.svg"); + background-position-y: .5em; + background-repeat: repeat-x; + background-size: auto; } +/* elements */ + a, a:hover, a:visited { color: blue; } @@ -83,3 +112,13 @@ img { .img-item:not(:last-child) { margin-right: 1em; } + +/* mobile */ +@media only screen and (max-width: 72ch) { + + /* title */ + + header h1 a { + font-size: 13vw; + } +} |