From 8501ab391b7ed35d67308594cb77acfbd8ccc6f0 Mon Sep 17 00:00:00 2001 From: Lorin Werthen Date: Sun, 6 Nov 2016 10:12:34 +0100 Subject: [PATCH] css fixes, add icons at bottom of page, fixes #71 --- .../assets/stylesheets/includes/blogpost.scss | 12 +- .../assets/stylesheets/includes/general.scss | 129 +++--------------- .../assets/stylesheets/includes/navbar.scss | 63 +++++++++ .../assets/stylesheets/includes/search.scss | 42 ++++++ content/assets/stylesheets/main.scss | 2 + layouts/blogpost.erb | 48 +++---- layouts/partials/_footer.erb | 27 ++++ layouts/partials/_navbar.erb | 2 +- 8 files changed, 180 insertions(+), 145 deletions(-) create mode 100644 content/assets/stylesheets/includes/navbar.scss create mode 100644 content/assets/stylesheets/includes/search.scss diff --git a/content/assets/stylesheets/includes/blogpost.scss b/content/assets/stylesheets/includes/blogpost.scss index 8a40efe..e97e42c 100644 --- a/content/assets/stylesheets/includes/blogpost.scss +++ b/content/assets/stylesheets/includes/blogpost.scss @@ -1,9 +1,3 @@ -.blogpost { - .blogtitle { - font-size: 4em; - } -} - #markdown-toc { @extend .menu-list; @@ -13,6 +7,7 @@ } } +// Definition list is not defined in bulma dl { dt { display: inline; @@ -29,11 +24,6 @@ dl { } } -.padbox { - margin-bottom:10px; - border-radius: 0 !important; -} - .blogwidth{ width: 75%; margin:auto; diff --git a/content/assets/stylesheets/includes/general.scss b/content/assets/stylesheets/includes/general.scss index ab5883a..01cab32 100644 --- a/content/assets/stylesheets/includes/general.scss +++ b/content/assets/stylesheets/includes/general.scss @@ -1,12 +1,21 @@ +// Small helper in bulma style .has-text-justified { text-align: justify; } +// Override box styling without round corners +.box { + margin-bottom:10px; + border-radius: 0 !important; +} + +// Add some hero attributes to make backgrounds prettier .hero { background-position: center; background-size: cover; } +// link borders are unnecessary .content { a { &:not(.button) { @@ -19,27 +28,21 @@ } } -#navbar { - z-index: 100; - margin-bottom: 10px; +footer .content a { + &:not(.button) { + color: $text-light; - .logo-wrapper { - padding-bottom: 0; - } + &:visited { + color: $text-light; + } - .actual-nav-bar { - padding: 0; - margin: 10px; - margin-bottom: 0; - border-bottom: 1px solid #eee; - } - - .nav-menu { - z-index: 20; + &:hover { + color: $link-hover; + } } } - +// Proper padding of these sections header.section { padding-bottom: 10px; } @@ -48,60 +51,11 @@ main.section { padding-top: 20px; } - -#navbar { - align-items: flex-end; - - #inline-logo { - min-width: 38.703px; - } - #logo-link { - #logo { - padding-top: 10px; - padding-left: 10px; - width: 100px; - } - } - .nav { - height: 100%; - align-items: flex-end; - z-index: auto; - - .nav-item { - transition: 0.2s; - - font-variant: small-caps; - font-size: 1.15em; - - &:hover { - transition: 0.2s; - } - - &.social-icon { - padding-left: 5px; - padding-right: 5px; - } - - &.is-tab { - border-bottom: 3px solid transparent; - border-top: 3px solid transparent; - - &:hover, &.is-active { - border-bottom-color: $zeus-orange; - } - } - } - } -} - footer.footer { padding-bottom: 40px; - - .fa { - vertical-align: inherit; - } } +// Cursor highlight color ::selection { color: white; background: rgba(255, 127, 0, 0.99); @@ -158,49 +112,6 @@ footer.footer { } } -#tipue_search_input { - background: none; - padding: 12px; - font: inherit; - color: inherit; - - width: 40px; - - border-color: rgba(0, 0, 0, 0); - - display: flex; - flex-direction: row; - - justify-content: inherit; - - transition: all 0.5s; - - - input { - background: none; - border: none; - -moz-appearance: none; - -webkit-appearance: none; - box-shadow: none; - outline: 0; - margin: 0; - - color: inherit; - } - - &:hover, &:focus, &.focused { - width: 170px; - border: 1px solid #e2e2e2; - } - - &::before { - font: normal normal normal 14px/1 FontAwesome; - content: "\f002 "; - color: inherit; - padding-right: 5px; - } -} - .fa { vertical-align: baseline; } diff --git a/content/assets/stylesheets/includes/navbar.scss b/content/assets/stylesheets/includes/navbar.scss new file mode 100644 index 0000000..4b227e4 --- /dev/null +++ b/content/assets/stylesheets/includes/navbar.scss @@ -0,0 +1,63 @@ +#navbar { + align-items: flex-end; + + z-index: 100; + margin-bottom: 10px; + + .logo-wrapper { + padding-bottom: 0; + } + + .nav-menu { + z-index: 20; + } + + .actual-nav-bar { + padding: 0; + margin: 10px; + margin-bottom: 0; + border-bottom: 1px solid #eee; + } + + #inline-logo { + min-width: 38.703px; + } + + #logo-link { + #logo { + padding-top: 10px; + padding-left: 10px; + width: 100px; + } + } + .nav { + height: 100%; + align-items: flex-end; + z-index: auto; + + .nav-item { + transition: 0.2s; + + font-variant: small-caps; + font-size: 1.15em; + + &:hover { + transition: 0.2s; + } + + &.social-icon { + padding-left: 5px; + padding-right: 5px; + } + + &.is-tab { + border-bottom: 3px solid transparent; + border-top: 3px solid transparent; + + &:hover, &.is-active { + border-bottom-color: $zeus-orange; + } + } + } + } +} diff --git a/content/assets/stylesheets/includes/search.scss b/content/assets/stylesheets/includes/search.scss new file mode 100644 index 0000000..a60cd58 --- /dev/null +++ b/content/assets/stylesheets/includes/search.scss @@ -0,0 +1,42 @@ +#tipue_search_input { + background: none; + padding: 12px; + font: inherit; + color: inherit; + + width: 40px; + + border-color: rgba(0, 0, 0, 0); + + display: flex; + flex-direction: row; + + justify-content: inherit; + + transition: all 0.5s; + + + input { + background: none; + border: none; + -moz-appearance: none; + -webkit-appearance: none; + box-shadow: none; + outline: 0; + margin: 0; + + color: inherit; + } + + &:hover, &:focus, &.focused { + width: 170px; + border: 1px solid #e2e2e2; + } + + &::before { + font: normal normal normal 14px/1 FontAwesome; + content: "\f002 "; + color: inherit; + padding-right: 5px; + } +} diff --git a/content/assets/stylesheets/main.scss b/content/assets/stylesheets/main.scss index 4362188..2096b9a 100644 --- a/content/assets/stylesheets/main.scss +++ b/content/assets/stylesheets/main.scss @@ -30,3 +30,5 @@ body.site { @import "includes/eventpage"; @import "includes/404"; @import "includes/projects"; +@import "includes/navbar"; +@import "includes/search"; diff --git a/layouts/blogpost.erb b/layouts/blogpost.erb index 8809a1e..9ad45b1 100644 --- a/layouts/blogpost.erb +++ b/layouts/blogpost.erb @@ -1,26 +1,26 @@
-
-
-

- <%= item[:title] %> -

-<% if item[:author] %> -

- <% if item[:lang] == :en %> - by - <% else %> - door - <% end %> - <%= item[:author] %> -

-<% end %> -

-Created at <%= item[:created_at] %> -

-
+
+
+

+ <%= item[:title] %> +

+ <% if item[:author] %> +

+ <% if item[:lang] == :en %> + by + <% else %> + door + <% end %> + <%= item[:author] %> +

+ <% end %> +

+ Created at <%= item[:created_at] %> +

+
+
+
+ <%= yield %> +
+
-
- <%= yield %> -
-
- \ No newline at end of file diff --git a/layouts/partials/_footer.erb b/layouts/partials/_footer.erb index d64bf8f..84f2159 100644 --- a/layouts/partials/_footer.erb +++ b/layouts/partials/_footer.erb @@ -1,6 +1,33 @@