diff options
author | Katharina Fey <kookie@spacekookie.de> | 2018-01-21 23:45:24 +0100 |
---|---|---|
committer | Katharina Fey <kookie@spacekookie.de> | 2018-01-21 23:45:24 +0100 |
commit | 62fcc5d6245e4c547bb6bbff8f996d7abc7c1885 (patch) | |
tree | fbdbeb0eb7cbff142c21742e1da1b033b6faeb38 | |
parent | fcd91ca44d2fd9c55164fb72810286f5d38d2c92 (diff) |
Working on the theme redesign
-rw-r--r-- | crumbs/static/css/cr_title.css | 67 | ||||
-rw-r--r-- | crumbs/static/css/crums.css | 47 | ||||
-rwxr-xr-x | crumbs/templates/home.html | 64 |
3 files changed, 115 insertions, 63 deletions
diff --git a/crumbs/static/css/cr_title.css b/crumbs/static/css/cr_title.css new file mode 100644 index 0000000..4f8590c --- /dev/null +++ b/crumbs/static/css/cr_title.css @@ -0,0 +1,67 @@ +/* + +This file contains all definitions are are EXCLUSIVE for the title + +*/ + +.title { + padding-top: 50px; + padding-bottom: 50px; +} + +.title h1 { + font-family: 'Inconsolata', monospace; + font-size: 48px; +} + +.cursor { + animation: flash 0.75s infinite alternate; +} + +@keyframes flash { + 0% { opacity: 1; } + 49% { opacity: 1; } + 50% { opacity: 0; } + 100% { opacity: 0; } +} + +#t-color-red { color: #ef787b; } +#t-color-org { color: #f6915f; } +#t-color-ylw { color: #fdcb71; } +#t-color-grn { color: #99cb9b; } + + +/* This is the block container */ +.colours { + width: 0 auto; + height: 50px; + margin: 0 auto; + display: flex; + padding-bottom: 150px; + } + + /* This is a block */ + .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; } +
\ No newline at end of file diff --git a/crumbs/static/css/crums.css b/crumbs/static/css/crums.css index 5220117..aa28ff2 100644 --- a/crumbs/static/css/crums.css +++ b/crumbs/static/css/crums.css @@ -10,8 +10,8 @@ body { font-family: 'Montserrat', sans-serif; font-style: normal; font-variant: normal; - /*font-size: 26px;*/ - /*font-weight: 400;*/ + /* font-size: 26px; */ + /* font-weight: 400; */ color: #BEBEBE; background-color: #222222; background-image: none; @@ -21,44 +21,7 @@ body { margin: 0; } - - -/************************************** - - COLOUR BAR DEFINITIONS - -**************************************/ - - -/* This is the block container */ -.colours { - width: 0 auto; - height: 50px; - margin: 0 auto; - display: flex; +p { + font-size: 22px; + font-weight: 300; } - -/* This is a block */ -.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; } diff --git a/crumbs/templates/home.html b/crumbs/templates/home.html index 503602b..27fd976 100755 --- a/crumbs/templates/home.html +++ b/crumbs/templates/home.html @@ -10,7 +10,8 @@ <!-- <link href="https://fonts.googleapis.com/css?family=Inconsolata|Quicksand:300,400|Roboto:300,400&subset=cyrillic,cyrillic-ext" rel="stylesheet"> --> <!-- Fonts --> - <link href="https://fonts.googleapis.com/css?family=Montserrat: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=Inconsolata" rel="stylesheet"> <!-- Include font awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> @@ -18,6 +19,7 @@ <!-- 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/cr_title.css" rel="stylesheet"> <!-- /Stylesheets --> {% endblock head %} @@ -28,31 +30,51 @@ <!-- Outer bootstrap container --> <div class="container"> - <h1>Fun Memory Violations</h1> + <!-- Add dynamic header --> + <hr/> + + <!-- The page title --> + <div class="title"> + <h1> + <span id="t-color-red"><b># ~ </b></span> + <span id="t-color-org">Fun</span> + <span id="t-color-ylw">Memory</span> + <span id="t-color-grn">Violations</span> + <span class="cursor" id="cursor">▁</span> + </h1> + </div> + + <!-- Cool colour bar, yo --> <div class="colours"> - <div class="colour" id="colour1"></div> - <div class="colour" id="colour2"></div> - <div class="colour" id="colour3"></div> - <div class="colour" id="colour4"></div> - <div class="colour" id="colour5"></div> - <div class="colour" id="colour6"></div> - <div class="colour" id="colour7"></div> - <div class="colour" id="colour8"></div> - <div class="colour" id="colour9"></div> - <div class="colour" id="colour10"></div> - <div class="colour" id="colour11"></div> - <div class="colour" id="colour12"></div> - <div class="colour" id="colour13"></div> - <div class="colour" id="colour14"></div> - <div class="colour" id="colour15"></div> + <div class="colour colour1"></div> + <div class="colour colour2"></div> + <div class="colour colour3"></div> + <div class="colour colour4"></div> + <div class="colour colour5"></div> + <div class="colour colour6"></div> + <div class="colour colour7"></div> + <div class="colour colour8"></div> + <div class="colour colour9"></div> + <div class="colour colour10"></div> + <div class="colour colour11"></div> + <div class="colour colour12"></div> + <div class="colour colour13"></div> + <div class="colour colour14"></div> + <div class="colour colour15"></div> </div> - <br/> - - <p>Hi – Welcome to my dusty internet hangout place.</p> + <p> + <b>Hi – </b>Welcome to my dusty internet hangout place. + </p> + <p> + My name is <b>Katharina Fey</b> and I'm a software developer from Berlin. + I like taking photos, writing stories and starting way too many personal projects. + </p> + + + - <p>I'm a software developer from Berlin. I like taking photos, writing stories and starting way too many personal projects.</p> </div> </body> |