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