update to bulma 0.7.0
This commit is contained in:
Lorin Werthen
parent
1ac6365d16
commit
1516622f91
9 changed files with 90 additions and 133 deletions
|
|
@ -4,6 +4,6 @@ $('#tipue_search_input_field').on 'focusin', ->
|
|||
$('#tipue_search_input_field').on 'focusout', ->
|
||||
$('#tipue_search_input').removeClass("focused")
|
||||
|
||||
$('.nav-toggle').on 'click', ->
|
||||
$('.nav-menu').toggleClass('is-active')
|
||||
$('.nav-toggle').toggleClass('is-active')
|
||||
$('.navbar-burger').on 'click', ->
|
||||
$('.navbar-menu').toggleClass('is-active')
|
||||
$('.navbar-burger').toggleClass('is-active')
|
||||
|
|
|
|||
|
|
@ -50,20 +50,13 @@
|
|||
}
|
||||
}
|
||||
#cammie-section {
|
||||
|
||||
.nav-center{
|
||||
width:100%;
|
||||
}
|
||||
button{
|
||||
background-color: $orange;
|
||||
color: white;
|
||||
margin-top: 5px;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
width: 33.333333333333333333333333333333333333333333333333333%;
|
||||
&:not(:last-child){
|
||||
margin-right: 5px;
|
||||
}
|
||||
width: 100%;
|
||||
&:hover{
|
||||
color: #363636;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,62 +17,39 @@
|
|||
}
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
z-index: 20;
|
||||
|
||||
.nav-transparent {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.actual-nav-bar {
|
||||
padding: 0;
|
||||
margin: 10px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#inline-logo {
|
||||
min-width: 38.703px;
|
||||
}
|
||||
|
||||
#logo-link {
|
||||
@include desktop {
|
||||
width: 124px;
|
||||
border-bottom: 2px solid $body-background;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
#logo {
|
||||
padding-left: 10px;
|
||||
width: 100px;
|
||||
@include desktop {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
left: 0;
|
||||
bottom: 5px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Height of the line underneath when hovering over a menu item
|
||||
$border-height: 3px;
|
||||
.navbar-item {
|
||||
font-variant: small-caps;
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.nav {
|
||||
height: 100%;
|
||||
align-items: flex-end;
|
||||
z-index: auto;
|
||||
|
||||
.nav-item {
|
||||
transition: 0.2s;
|
||||
|
||||
font-variant: small-caps;
|
||||
font-size: 1.15em;
|
||||
|
||||
&:not(.nav-search) {
|
||||
border-bottom: $border-height solid transparent;
|
||||
border-top: 3px solid transparent;
|
||||
.navbar:not(.is-transparent) {
|
||||
.navbar-item {
|
||||
&:not(.is-active) {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
&.social-icon {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
&:not(.nav-search):hover, &.is-active {
|
||||
border-bottom-color: $zeus-orange;
|
||||
&.is-active {
|
||||
color: $primary;
|
||||
border-bottom: 2px solid;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ $turquoise: #30D1B2;
|
|||
|
||||
$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
$link: $orange;
|
||||
$link-visited: $orange;
|
||||
|
||||
$border-hover: $blue;
|
||||
|
|
|
|||
|
|
@ -49,14 +49,18 @@ title: Cammie
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="nav">
|
||||
<div class="nav-center">
|
||||
<nav class="nav columns">
|
||||
<div class="column">
|
||||
<button class="button ctrl" data-command="set_pos" data-x="16" data-y="16">
|
||||
Kleine tafel
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button class="button ctrl" data-command="set_pos" data-x="50" data-y="10">
|
||||
Grote tafel
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button class="ctrl button" data-command="set_pos" data-x="0" data-y="12">
|
||||
Zetel
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -35,11 +35,8 @@
|
|||
</div>
|
||||
<!-- latest blogpost -->
|
||||
<div class="tile is-6 is-parent">
|
||||
<%= render '/partials/_tile.*',
|
||||
article: sorted_articles.first,
|
||||
small_text: "Latest blogpost",
|
||||
htmlclass:"highlighted"%>
|
||||
</div>
|
||||
<%= render '/partials/_blog_preview.*', post: sorted_articles.first %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<div class="tile is-vertical">
|
||||
|
|
@ -52,9 +49,7 @@
|
|||
<div class="tile is-vertical">
|
||||
<% sorted_articles[1..3].each do |post| %>
|
||||
<div class="tile is-parent ">
|
||||
<%= render '/partials/_tile.*',
|
||||
article: post,
|
||||
small_text: "Blogpost"%>
|
||||
<%= render '/partials/_blog_preview.*', post: post %>
|
||||
</div>
|
||||
<%end%>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,72 +1,59 @@
|
|||
<div id="navbar">
|
||||
<div class="columns">
|
||||
<div class="logo-wrapper column is-narrow is-hidden-mobile">
|
||||
<a id="logo-link" href="/">
|
||||
<div class="navbar <%= 'is-transparent' if defined? @transparent_nav %>">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" id="logo-link" href="/">
|
||||
<% if christmastime? %>
|
||||
<img id="santa" src="/assets/images/pusheen.png">
|
||||
<% end %>
|
||||
<img id="logo" src="<%= zeus_logo_url color: @zeus_logo_color %>" alt="" />
|
||||
</a>
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="actual-nav-bar column">
|
||||
<nav class="nav">
|
||||
<a class="is-hidden-tablet nav-item" href="/">
|
||||
<img id="inline-logo" src="<%= zeus_logo_url color: @zeus_logo_color %>" alt="" />
|
||||
</a>
|
||||
<div class="nav-menu nav-left <%= 'nav-transparent' if defined? @transparent_nav %>">
|
||||
<% navigables.each do |i| %>
|
||||
<a class="nav-item is-tab <%= 'is-active' if child_of(i) %>" href="<%= i.path %>">
|
||||
<%= i[:title] %>
|
||||
</a>
|
||||
<% end %>
|
||||
<div class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<% navigables.each do |i| %>
|
||||
<a class="navbar-item <%= 'is-active' if child_of(i) %>" href="<%= i.path %>">
|
||||
<%= i[:title] %>
|
||||
</a>
|
||||
<% end %>
|
||||
</div>
|
||||
<!-- TODO: Remove this is-hidden-touch, it's just a convenience for now -->
|
||||
<div class="navbar-end is-hidden-touch">
|
||||
<form action="/search/?" method="get" class="navbar-item nav-search">
|
||||
<div id="tipue_search_input">
|
||||
<input type="text" name="q" id="tipue_search_input_field" autocomplete="off">
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Filler for when mobile -->
|
||||
<div class="nav-left is-hidden-tablet"></div>
|
||||
|
||||
<div class="nav-right">
|
||||
<form action="/search/?" method="get">
|
||||
<div id="tipue_search_input" class="nav-item nav-search">
|
||||
<input type="text" name="q" id="tipue_search_input_field" autocomplete="off">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</form>
|
||||
<a class="navbar-item social-icon" href="https://github.com/ZeusWPI" target="_blank">
|
||||
<span class="icon">
|
||||
<%= fa :github %>
|
||||
</span>
|
||||
|
||||
<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 %>
|
||||
</span>
|
||||
</a>
|
||||
<a class="nav-item social-icon" href="https://www.facebook.com/zeus.wpi/" target="_blank">
|
||||
<span class="icon">
|
||||
<%= fa :facebook %>
|
||||
</span>
|
||||
</a>
|
||||
<a class="nav-item social-icon" href="/feed.xml" target="_blank">
|
||||
<span class="icon">
|
||||
<%= fa :rss %>
|
||||
</span>
|
||||
</a>
|
||||
<a class="nav-item social-icon" href="/ical.ics">
|
||||
<span class="icon">
|
||||
<%= fa :calendar %>
|
||||
</span>
|
||||
</a>
|
||||
<a class="nav-item social-icon" href="//zeus.ugent.be/wiki">
|
||||
<span class="icon">
|
||||
<%= fa :'wikipedia-w' %>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</a>
|
||||
<a class="navbar-item social-icon" href="https://www.facebook.com/zeus.wpi/" target="_blank">
|
||||
<span class="icon">
|
||||
<%= fa :facebook %>
|
||||
</span>
|
||||
</a>
|
||||
<a class="navbar-item social-icon" href="/feed.xml" target="_blank">
|
||||
<span class="icon">
|
||||
<%= fa :rss %>
|
||||
</span>
|
||||
</a>
|
||||
<a class="navbar-item social-icon" href="/ical.ics">
|
||||
<span class="icon">
|
||||
<%= fa :calendar %>
|
||||
</span>
|
||||
</a>
|
||||
<a class="navbar-item social-icon" href="//zeus.ugent.be/wiki">
|
||||
<span class="icon">
|
||||
<%= fa :'wikipedia-w' %>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
6
package-lock.json
generated
6
package-lock.json
generated
|
|
@ -5,9 +5,9 @@
|
|||
"requires": true,
|
||||
"dependencies": {
|
||||
"bulma": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.5.1.tgz",
|
||||
"integrity": "sha1-2ygxyUr+cyJQx7ElJ6e3kqTcnvg="
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.0.tgz",
|
||||
"integrity": "sha1-1IAXDIdoy3dP9galqvXeqpLNpiI="
|
||||
},
|
||||
"bulma-divider": {
|
||||
"version": "0.0.1",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
"license": "MIT",
|
||||
"repository": "https://github.com/ZeusWPI/zeus.ugent.be",
|
||||
"dependencies": {
|
||||
"bulma": "0.5.1",
|
||||
"bulma": "0.7.0",
|
||||
"bulma-divider": "~0.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue