css fixes, add icons at bottom of page, fixes #71
This commit is contained in:
Lorin Werthen
parent
0e2afe07b6
commit
8501ab391b
8 changed files with 180 additions and 145 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
63
content/assets/stylesheets/includes/navbar.scss
Normal file
63
content/assets/stylesheets/includes/navbar.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
42
content/assets/stylesheets/includes/search.scss
Normal file
42
content/assets/stylesheets/includes/search.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -30,3 +30,5 @@ body.site {
|
|||
@import "includes/eventpage";
|
||||
@import "includes/404";
|
||||
@import "includes/projects";
|
||||
@import "includes/navbar";
|
||||
@import "includes/search";
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
<div class="columns">
|
||||
<article class="column is-8 is-offset-2">
|
||||
<div class="heading">
|
||||
<h1 class="title is-1 has-text-centered">
|
||||
<%= item[:title] %>
|
||||
</h1>
|
||||
<% if item[:author] %>
|
||||
<h2 class="subtitle is-3 has-text-centered">
|
||||
<% if item[:lang] == :en %>
|
||||
by
|
||||
<% else %>
|
||||
door
|
||||
<% end %>
|
||||
<%= item[:author] %>
|
||||
</h2>
|
||||
<% end %>
|
||||
<p class="has-text-centered">
|
||||
<small>Created at <%= item[:created_at] %></small>
|
||||
</p>
|
||||
<hr>
|
||||
<article class="column is-8 is-offset-2">
|
||||
<div class="heading">
|
||||
<h1 class="title is-1 has-text-centered">
|
||||
<%= item[:title] %>
|
||||
</h1>
|
||||
<% if item[:author] %>
|
||||
<h2 class="subtitle is-3 has-text-centered">
|
||||
<% if item[:lang] == :en %>
|
||||
by
|
||||
<% else %>
|
||||
door
|
||||
<% end %>
|
||||
<%= item[:author] %>
|
||||
</h2>
|
||||
<% end %>
|
||||
<p class="has-text-centered">
|
||||
<small>Created at <%= item[:created_at] %></small>
|
||||
</p>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="content is-medium">
|
||||
<%= yield %>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="content is-medium">
|
||||
<%= yield %>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,33 @@
|
|||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="content has-text-centered">
|
||||
<p class="is-hidden-tablet">
|
||||
<a class="icon" href="https://github.com/ZeusWPI" target="_blank">
|
||||
<span class="icon">
|
||||
<%= fa :github %>
|
||||
</span>
|
||||
</a>
|
||||
<a class="icon" href="https://www.facebook.com/zeus.wpi/" target="_blank">
|
||||
<span class="icon">
|
||||
<%= fa :facebook %>
|
||||
</span>
|
||||
</a>
|
||||
<a class="icon" href="/feed.xml" target="_blank">
|
||||
<span class="icon">
|
||||
<%= fa :rss %>
|
||||
</span>
|
||||
</a>
|
||||
<a class="icon" href="/ical.ics">
|
||||
<span class="icon">
|
||||
<%= fa :calendar %>
|
||||
</span>
|
||||
</a>
|
||||
<a class="icon" href="//zeus.ugent.be/wiki">
|
||||
<span class="icon">
|
||||
<%= fa :'wikipedia-w' %>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
Made with <%= fa :heart %> by Zeus WPI
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
<span></span>
|
||||
</span>
|
||||
|
||||
<div class="nav-right is-hidden-mobile social-icons">
|
||||
<div class="nav-right is-hidden-mobile">
|
||||
<a class="nav-item social-icon" href="https://github.com/ZeusWPI" target="_blank">
|
||||
<span class="icon">
|
||||
<%= fa :github %>
|
||||
|
|
|
|||
Loading…
Reference in a new issue