diff options
Diffstat (limited to 'crumbs')
-rw-r--r-- | crumbs/static/css/cr_title.css | 98 | ||||
-rw-r--r-- | crumbs/static/css/crumbs.css (renamed from crumbs/static/css/crums.css) | 30 | ||||
-rwxr-xr-x | crumbs/templates/home.html | 38 |
3 files changed, 129 insertions, 37 deletions
diff --git a/crumbs/static/css/cr_title.css b/crumbs/static/css/cr_title.css index 4f8590c..742a535 100644 --- a/crumbs/static/css/cr_title.css +++ b/crumbs/static/css/cr_title.css @@ -5,13 +5,13 @@ This file contains all definitions are are EXCLUSIVE for the title */ .title { - padding-top: 50px; + padding-top: 20px; padding-bottom: 50px; } .title h1 { font-family: 'Inconsolata', monospace; - font-size: 48px; + font-size: 58px; } .cursor { @@ -38,30 +38,84 @@ This file contains all definitions are are EXCLUSIVE for the title margin: 0 auto; display: flex; padding-bottom: 150px; - } +} /* This is a block */ - .colour { +.colour { display: flex; flex-direction: column; height: 75px; width: 75px; - } +} + +/* Colour defitions */ +.colour1 { background-color: #3c3c3c; } +.colour2 { background-color: #525252; } +.colour3 { background-color: #74736a; } +.colour4 { background-color: #9f9e93; } +.colour5 { background-color: #d2cfc7; } +.colour6 { background-color: #e7e5df; } +.colour7 { background-color: #f1f0ec; } +.colour8 { background-color: #ef787b; } +.colour9 { background-color: #f6915f; } +.colour10 { background-color: #fdcb71; } +.colour11 { background-color: #99cb9b; } +.colour12 { background-color: #6ccaca; } +.colour13 { background-color: #6997c8; } +.colour14 { background-color: #ca98c9; } +.colour15 { background-color: #ce7b59; } - /* Colour defitions */ - .colour1 { background-color: #3c3c3c; } - .colour2 { background-color: #525252; } - .colour3 { background-color: #74736a; } - .colour4 { background-color: #9f9e93; } - .colour5 { background-color: #d2cfc7; } - .colour6 { background-color: #e7e5df; } - .colour7 { background-color: #f1f0ec; } - .colour8 { background-color: #ef787b; } - .colour9 { background-color: #f6915f; } - .colour10 { background-color: #fdcb71; } - .colour11 { background-color: #99cb9b; } - .colour12 { background-color: #6ccaca; } - .colour13 { background-color: #6997c8; } - .colour14 { background-color: #ca98c9; } - .colour15 { background-color: #ce7b59; } -
\ No newline at end of file + +.span { + display: inline-block; +} + +a, a:visited, a:hover, a:active, a:link{ + color: #BEBEBE; + text-decoration: none; +} + +#twitter:hover { + color: #6997c8; + animation: .45s jump infinite linear; +} +#github:hover { + color: #ef787b; + animation: .45s jump infinite linear; +} +#keys:hover { + color: #ca98c9; + animation: .45s jump infinite linear; +} + +#email:hover { + color: #99cb9b; +} + +div.icons { + padding-top: 25px; + padding-bottom: 25px; +} + +.icons h1 { + font-family: Inconsolata; + font-size: 42px; + line-height: 42px; + font-style: normal; + font-variant: normal; +} + +@keyframes jump { + 0% { + transform: translateY(0); + } + 20% { + transform: translateY(-.075em); + } + 80% { + transform: translateY(.025em); + } + 100% { + transform: translateY(0); + } +} diff --git a/crumbs/static/css/crums.css b/crumbs/static/css/crumbs.css index aa28ff2..3ec495a 100644 --- a/crumbs/static/css/crums.css +++ b/crumbs/static/css/crumbs.css @@ -5,13 +5,8 @@ **************************************/ - body { font-family: 'Montserrat', sans-serif; - font-style: normal; - font-variant: normal; - /* font-size: 26px; */ - /* font-weight: 400; */ color: #BEBEBE; background-color: #222222; background-image: none; @@ -25,3 +20,28 @@ p { font-size: 22px; font-weight: 300; } + + +div.navigation { + padding-top: 12px; + padding-bottom: 75px; + padding-right: 32px; + height: 75px; + line-height: 75px; +} + +div.navigation a { + font-weight: 500; + font-size: 22px; + color:#FFF; + + text-decoration: none; + padding-left: 48px; + /* margin-left: 20px; */ + text-transform: lowercase; + /* transition: all 0.2s ease-out; */ +} + +div.navigation a:hover { + +}
\ No newline at end of file diff --git a/crumbs/templates/home.html b/crumbs/templates/home.html index 27fd976..3199d9c 100755 --- a/crumbs/templates/home.html +++ b/crumbs/templates/home.html @@ -2,15 +2,12 @@ <html lang="{{ DEFAULT_LANG }}"> <head> <meta charset="utf-8"> - {% block head %} - <title>{% block title %}{{ SITENAME }}{% endblock title %}</title> - - <!-- Inconsolata for code? --> - <!-- <link href="https://fonts.googleapis.com/css?family=Inconsolata|Quicksand:300,400|Roboto:300,400&subset=cyrillic,cyrillic-ext" rel="stylesheet"> --> + <title{{ SITENAME }}</title> <!-- Fonts --> - <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500|Raleway:200,200i,300,300i,400,400i,500" rel="stylesheet"> + <!-- <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500|Raleway:200,200i,300,300i,400,400i,500" rel="stylesheet"> --> + <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500;subset=cyrillic,latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> <!-- Include font awesome --> @@ -18,11 +15,10 @@ <!-- Load bootstrap, then my own CSS --> <link href="{{ SITEURL }}/theme/css/bootstrap.min.css" rel="stylesheet"> - <link href="{{ SITEURL }}/theme/css/crums.css" rel="stylesheet"> + <link href="{{ SITEURL }}/theme/css/crumbs.css" rel="stylesheet"> <link href="{{ SITEURL }}/theme/css/cr_title.css" rel="stylesheet"> <!-- /Stylesheets --> - {% endblock head %} </head> <body> @@ -31,11 +27,28 @@ <div class="container"> <!-- Add dynamic header --> + <div class="navigation"> + <div class="nav pull-right"> + + <!-- Loop through all pages --> + {% for title, link in MENUITEMS %} + + <!-- Do magic with http/https --> + {% if 'http://' in link or 'https://' in link %} + <a class="naughty" href="{{ link }}">{{ title }} </a> + {% else %} + <a class="naughty" href="{{ SITEURL }}{{ link }}">{{ title }} </a> + {% endif %} + + {% endfor %} + </div> + </div> + <!-- /Static navbar --> <hr/> <!-- The page title --> - <div class="title"> + <div class="title" title="Inconsolata is my favourite monospace font"> <h1> <span id="t-color-red"><b># ~ </b></span> <span id="t-color-org">Fun</span> @@ -72,8 +85,13 @@ I like taking photos, writing stories and starting way too many personal projects. </p> + <div class="icons"> + <a href="https://twitter.com/spacekookie"><h1 id="twitter"><i class="fa fa-twitter"></i> Twitter</h1></a> + <a href="https://github.com/spacekookie"><h1 id="github"><i class="fa fa-github"></i> Github</h1></a> + <a href="https://spacekookie.de/kookie.txt"><h1 id="keys"><i class="fa fa-key"></i> Keys</h1></a> + </div> - + <p>To get in touch with me, you can also send an e-mail to <a href="mailto:kookie@spacekookie.de" id="email"><b>kookie@spacekookie.de</b></a></p> </div> |