diff options
| -rw-r--r-- | index.template.html | 6 | ||||
| -rw-r--r-- | static/css/index.css | 43 | ||||
| -rw-r--r-- | static/css/style.css | 4 |
3 files changed, 42 insertions, 11 deletions
diff --git a/index.template.html b/index.template.html index 13c0fb1..55a1df7 100644 --- a/index.template.html +++ b/index.template.html @@ -1,4 +1,8 @@ -<h1 id="site-title">cacharle</h1> +<h1 id="site-title"> + <!-- <div class="site-title-row"> --> + <div>c</div><div>a</div><div>c</div><div>h</div><div>a</div><div>r</div><div>l</div><div>e + <!-- </div> --> +</h1> <div class="slogan"> <div class="slogan-row"> diff --git a/static/css/index.css b/static/css/index.css index 3c8786d..e1213c2 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -8,33 +8,56 @@ } #site-title { + --color-blue: #0E26B1; + + display: flex; font-family: Montserrat-Light, sans-serif; - font-size: 17vw; + font-size: 14vw; font-weight: 100; width: 100%; margin: 0px auto; text-align: center; text-transform: uppercase; + background-color: var(--color-blue); + padding: 40px 10px; } @media screen and (min-width: 1100px) { #site-title { - font-size: 10rem; + font-size: 9.0rem; } } -@media screen and (max-width: 500px) { - #site-title { - font-size: 15vw; - } +#site-title div:nth-child(odd) { + transform: translateY(15%); +} + +#site-title div:nth-child(even) { + transform: translateY(-15%); } +#site-title:hover div { + transform: translateY(0); +} + +/* after hover to avoid transition on page load */ +#site-title div { + transition: transform .3s ease-in-out; +} + +/* #site-title::before { */ +/* content: ''; */ +/* height: 5px; */ +/* width: 100%; */ +/* background-color: var(--color-white); */ +/* } */ + /*****************************************************************************/ /* solgan */ .slogan { - margin: 50px auto; - padding: 30px 20px; + margin: 0 auto 50px auto; + padding: 50px 20px; background: black; color: red; text-transform: uppercase; @@ -42,13 +65,13 @@ font-weight: bold; font-style: italic; font-size: 2rem; - letter-spacing: 5px; + letter-spacing: 10px; } @media screen and (min-width: 600px) { .slogan { font-size: 2.3rem; - padding: 30px 70px; + padding: 50px 70px; } } diff --git a/static/css/style.css b/static/css/style.css index 0fda80b..b28af2a 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -8,6 +8,10 @@ --color-white: #eee; } +* { + box-sizing: border-box; +} + @font-face { font-family: OpenSans; font-weight: normal; |