mirror of https://gitea.com/gitea/theme.git
New design (#54)
This commit is contained in:
kolaente
techknowlogick
parent
2cc499cb4b
commit
a1e45d4360
|
|
@ -1,17 +1,11 @@
|
|||
{{ partial "header.html" . }}
|
||||
{{ partial "navbar.html" . }}
|
||||
|
||||
<div class="container content">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
<div class="container is-centered page">
|
||||
<div class=" content">
|
||||
{{ .Content }}
|
||||
|
||||
{{ if .Site.DisqusShortname }}
|
||||
<div class="col-xs-12">
|
||||
{{ partial "disqus.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ partial "disqus.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,15 @@
|
|||
{{ partial "header.html" . }}
|
||||
{{ partial "navbar.html" . }}
|
||||
|
||||
<div class="container content">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="container is-centered page">
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
{{ partial "menu" . }}
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
{{ .Content }}
|
||||
|
||||
{{ if .Site.DisqusShortname }}
|
||||
<div class="col-xs-12">
|
||||
{{ partial "disqus.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="column">
|
||||
<div class=" content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
{{ partial "header.html" . }}
|
||||
|
||||
<section class="hero is-primary homepage-hero">
|
||||
<!-- Hero head: will stick at the top -->
|
||||
<div class="hero-head">
|
||||
{{ partial "navbar.html" . }}
|
||||
</div>
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<img src="{{ .Site.BaseURL }}/images/screenshot.jpg"/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hero is-link feature-shoutout">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
{{ range $index, $element := .Data.Pages }}
|
||||
{{ if eq .Section "features" }}
|
||||
<div class="column">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
{{ partial "header" . }}
|
||||
{{ partial "navbar" . }}
|
||||
|
||||
<div class="container content">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
{{ range .Site.Pages }}
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ partial "footer" . }}
|
||||
|
|
@ -1,19 +1,17 @@
|
|||
{{ partial "header.html" . }}
|
||||
{{ partial "navbar.html" . }}
|
||||
|
||||
<div class="container content">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="container is-centered page">
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
{{ partial "menu" . }}
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
{{ .Content }}
|
||||
<div class="column">
|
||||
<div class=" content">
|
||||
{{ .Content }}
|
||||
|
||||
{{ if .Site.DisqusShortname }}
|
||||
<div class="col-xs-12">
|
||||
{{ partial "disqus.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ partial "disqus.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,49 @@
|
|||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 text-xs-center">
|
||||
<p>
|
||||
Copyright © {{ now.Year }} <a href="{{ .Site.Params.website }}">{{ .Site.Params.author }}</a>. All rights reserved. Made with <i class="fa fa-heart" aria-hidden="true"></i> and <a href="https://gohugo.io">Hugo</a>. Sponsored by <a href="http://inblockchain.com">INBlockchain</a>.
|
||||
</p>
|
||||
|
||||
<nav class="nav nav-inline">
|
||||
{{ $lang := .Lang }}{{ $base := .Site.BaseURL }}{{ range .Site.Languages }}
|
||||
<a class="nav-link" href="{{ $base }}{{ .Lang }}">{{ .LanguageName }}</a>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
Copyright © {{ now.Year }} <a href="{{ .Site.Params.website }}">{{ .Site.Params.author }}</a>. All rights reserved. Made with <i class="fa fa-heart" aria-hidden="true"></i> and <a href="https://gohugo.io">Hugo</a>. Sponsored by <a href="http://inblockchain.com">INBlockchain</a>.
|
||||
</p>
|
||||
<p>
|
||||
{{ $lang := .Lang }}{{ $base := .Site.BaseURL }}{{ range .Site.Languages }}
|
||||
<a class="nav-link" href="{{ $base }}{{ .Lang }}">{{ .LanguageName }}</a>
|
||||
{{ end }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
|
||||
<script src="{{.Site.BaseURL}}scripts/main.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
// Get all "navbar-burger" elements
|
||||
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
||||
|
||||
// Check if there are any navbar burgers
|
||||
if ($navbarBurgers.length > 0) {
|
||||
|
||||
// Add a click event on each of them
|
||||
$navbarBurgers.forEach(function ($el) {
|
||||
$el.addEventListener('click', function () {
|
||||
|
||||
// Get the target from the "data-target" attribute
|
||||
var target = $el.dataset.target;
|
||||
var $target = document.getElementById(target);
|
||||
|
||||
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
|
||||
$el.classList.toggle('is-active');
|
||||
$target.classList.toggle('is-active');
|
||||
|
||||
|
||||
document.getElementById('navbar-background').classList.toggle('is-active');
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,20 @@
|
|||
<nav class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler hidden-md-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbar-responsive" aria-controls="navbar-responsive" aria-expanded="false" aria-label="{{ i18n "navbar_menu" }}"></button>
|
||||
|
||||
<a class="navbar-brand" href="{{ .Site.BaseURL }}">
|
||||
<img src="{{ .Site.BaseURL }}images/gitea.png" alt="{{ .Site.Title }}">
|
||||
</a>
|
||||
|
||||
<div class="collapse navbar-toggleable-sm" id="navbar-responsive">
|
||||
<ul class="nav navbar-nav float-xs-left float-md-right">
|
||||
{{ partial "toplinks.html" . }}
|
||||
</ul>
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ .Site.BaseURL }}">
|
||||
<img src="{{ .Site.BaseURL }}images/gitea.png" alt="{{ .Site.Title }}">
|
||||
</a>
|
||||
<span class="navbar-burger burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="navbar-menu" id="navMenu">
|
||||
<div class="navbar-end">
|
||||
{{ partial "toplinks.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-background" id="navbar-background"></div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
|
@ -1,29 +1,28 @@
|
|||
<aside>
|
||||
<ul class="nav">
|
||||
{{ $currentNode := . }}{{ range .Site.Menus.sidebar }}
|
||||
{{ if .HasChildren }}
|
||||
<li class="nav-item">
|
||||
<aside class="menu">
|
||||
{{ $currentNode := . }}{{ range .Site.Menus.sidebar }}
|
||||
{{ if .HasChildren }}
|
||||
<p class="menu-label">
|
||||
{{ .Pre }}
|
||||
{{ .Name }}
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
{{ range .Children }}
|
||||
<li>
|
||||
<a href="{{ .URL | relLangURL }}" {{ if $currentNode.IsMenuCurrent "sidebar" . }}class="is-active"{{ end }}>
|
||||
{{ .Pre }}
|
||||
{{ .Name }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ else }}
|
||||
<li>
|
||||
<a href="{{ .URL | relLangURL }}">
|
||||
{{ .Pre }}
|
||||
{{ .Name }}
|
||||
<ul>
|
||||
{{ range .Children }}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{{ if $currentNode.IsMenuCurrent "sidebar" . }} active{{ end }}" href="{{ .URL | relLangURL }}">
|
||||
{{ .Pre }}
|
||||
{{ .Name }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</li>
|
||||
{{ else }}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{{ if $currentNode.HasMenuCurrent "sidebar" . }} active{{ end }}" href="{{ .URL | relLangURL }}">
|
||||
{{ .Pre }}
|
||||
{{ .Name }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<span class="navbar-item logo"><img src="{{ .Site.BaseURL }}images/gitea.png" alt="{{ .Site.Title }}"></span>
|
||||
{{ $currentNode := . }}{{ range .Site.Menus.page }}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ .Post }}" href="{{ .URL }}">
|
||||
<i class="fa fa-{{ .Pre }}"></i>
|
||||
{{ .Name }}
|
||||
</a>
|
||||
</li>
|
||||
<a class="navbar-item" href="{{ .URL }}">
|
||||
<i class="fa fa-{{ .Pre }}"></i>
|
||||
{{ .Name }}
|
||||
</a>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,61 +1,40 @@
|
|||
{{ partial "header.html" . }}
|
||||
{{ partial "navbar.html" . }}
|
||||
|
||||
<div class="container content">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 offset-lg-2">
|
||||
{{ $paginator := .Paginate (where .Data.Pages "Type" "post") }}{{ range $paginator.Pages }}
|
||||
<article>
|
||||
<header>
|
||||
<h2>
|
||||
<a href="{{ .Permalink }}">
|
||||
{{ .Title }}
|
||||
<div class="container content page">
|
||||
{{ $paginator := .Paginate (where .Data.Pages "Type" "post") }}{{ range $paginator.Pages }}
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-content">
|
||||
<a class="title is-4" href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
<p class="subtitle is-6">{{ .Date.Format "Mon Jan 2, 2006" }} {{ i18n "authored_by" }}
|
||||
<a href="https://github.com/{{ .Params.author | default .Site.Params.author }}">
|
||||
{{ .Params.author | default .Site.Params.author }}
|
||||
</a>
|
||||
</h2>
|
||||
<p>
|
||||
<i>{{ .Date.Format "Mon Jan 2, 2006" }}</i>
|
||||
{{ i18n "authored_by" }}
|
||||
<b>
|
||||
<a href="https://github.com/{{ .Params.author | default .Site.Params.author }}">
|
||||
{{ .Params.author | default .Site.Params.author }}
|
||||
</a>
|
||||
</b>
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{{ .Summary }}
|
||||
|
||||
<a href="{{ .Permalink }}">
|
||||
{{ i18n "read_more" }}
|
||||
</a>
|
||||
</article>
|
||||
{{ end }}
|
||||
|
||||
{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
|
||||
<div>
|
||||
{{ if and (.Paginator.HasPrev) (.Paginator.HasNext) }}
|
||||
<a class="btn" href="{{ .Paginator.Prev.URL }}" role="button">{{ i18n "page_prev" }}</a>
|
||||
<a class="btn" href="{{ .Paginator.Next.URL }}" role="button">{{ i18n "page_next" }}</a>
|
||||
{{ end }}
|
||||
{{ if and (.Paginator.HasPrev) (not .Paginator.HasNext) }}
|
||||
<a class="btn" href="{{ .Paginator.Prev.URL }}" role="button">{{ i18n "page_prev" }}</a>
|
||||
<a class="btn disabled" href="#" role="button" aria-disabled="true">{{ i18n "page_next" }}</a>
|
||||
{{ end }}
|
||||
{{ if and (not .Paginator.HasPrev) (.Paginator.HasNext) }}
|
||||
<a class="btn disabled" href="#" role="button" aria-disabled="true">{{ i18n "page_prev" }}</a>
|
||||
<a class="btn" href="{{ .Paginator.Next.URL }}" role="button">{{ i18n "page_next" }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ if .Site.DisqusShortname }}
|
||||
<div class="col-xs-12">
|
||||
{{ partial "disqus.html" . }}
|
||||
<div class="content">
|
||||
{{ .Summary }}
|
||||
</div>
|
||||
|
||||
<a href="{{ .Permalink }}" class="button is-success is-outlined">
|
||||
{{ i18n "read_more" }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
|
||||
{{ if .Paginator.HasPrev}}
|
||||
<a class="pagination-previous" href="{{ .Paginator.Prev.URL }}">{{ i18n "page_prev" }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ if .Paginator.HasNext }}
|
||||
<a class="pagination-next" href="{{ .Paginator.Next.URL }}">{{ i18n "page_next" }}</a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
@ -1,38 +1,26 @@
|
|||
{{ partial "header.html" . }}
|
||||
{{ partial "navbar.html" . }}
|
||||
|
||||
<div class="container content">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 offset-lg-2">
|
||||
<article>
|
||||
<header>
|
||||
<h2>
|
||||
<a href="{{ .Permalink }}">
|
||||
{{ .Title }}
|
||||
</a>
|
||||
</h2>
|
||||
<p>
|
||||
<i>{{ .Date.Format "Mon Jan 2, 2006" }}</i>
|
||||
{{ i18n "authored_by" }}
|
||||
<b>
|
||||
<a href="https://github.com/{{ .Params.author | default .Site.Params.author }}">
|
||||
{{ .Params.author | default .Site.Params.author }}
|
||||
</a>
|
||||
</b>
|
||||
</p>
|
||||
</header>
|
||||
<div class="container is-centered page">
|
||||
<div class="content">
|
||||
<h2>
|
||||
<a href="{{ .Permalink }}">
|
||||
{{ .Title }}
|
||||
</a>
|
||||
</h2>
|
||||
<p>
|
||||
<i>{{ .Date.Format "Mon Jan 2, 2006" }}</i>
|
||||
{{ i18n "authored_by" }}
|
||||
<b>
|
||||
<a href="https://github.com/{{ .Params.author | default .Site.Params.author }}">
|
||||
{{ .Params.author | default .Site.Params.author }}
|
||||
</a>
|
||||
</b>
|
||||
</p>
|
||||
|
||||
{{ .Content }}
|
||||
{{ .Content }}
|
||||
|
||||
{{ if .Site.DisqusShortname }}
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
{{ partial "disqus.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</article>
|
||||
</div>
|
||||
{{ partial "disqus.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
"watch": "gulp watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "4.0.0-alpha.5"
|
||||
"bulma": "^0.7.1",
|
||||
"bulmaswatch": "^0.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.1",
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
//Palette generated by Material Palette
|
||||
//materialpalette.com/light-green/orange
|
||||
$primary-color-dark: #689F38;
|
||||
$primary-color: #8BC34A;
|
||||
$primary-color-light: #DCEDC8;
|
||||
$primary-color-text: #212121;
|
||||
$accent-color: #FF9800;
|
||||
$primary-text-color: #212121;
|
||||
$secondary-text-color: #757575;
|
||||
$divider-color: #BDBDBD;
|
||||
|
||||
//Set bootstrap colors
|
||||
$brand-primary: $primary-color;
|
||||
$body-color: $primary-text-color;
|
||||
$code-color: darken($accent-color, 10);
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.landingpage {
|
||||
@extend .content;
|
||||
text-align: center;
|
||||
|
||||
.jumbotron {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 220px;
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
svg.octicon {
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
fill: $brand-primary;
|
||||
}
|
||||
}
|
||||
162
src/main.scss
162
src/main.scss
|
|
@ -1,75 +1,125 @@
|
|||
@import "colors";
|
||||
@import "../node_modules/bootstrap/scss/bootstrap";
|
||||
|
||||
@import "landingpage";
|
||||
|
||||
.navbar {
|
||||
padding: 21px 32px;
|
||||
border-bottom: 1px solid $accent-color;
|
||||
*, *:hover, *:active, *:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: 0;
|
||||
@import '../node_modules/bulmaswatch/flatly/variables';
|
||||
@import "../node_modules/bulma/bulma";
|
||||
@import '../node_modules/bulmaswatch/flatly/overrides';
|
||||
|
||||
img {
|
||||
height: 38px;
|
||||
.homepage-hero{
|
||||
height: 100vh;
|
||||
min-height: 700px;
|
||||
overflow: hidden;
|
||||
|
||||
.hero-body .container{
|
||||
padding: 3em 0 1em;
|
||||
|
||||
.button:first-child{
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-foot img {
|
||||
max-width: 100vw;
|
||||
width: 1000px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
#navbar-responsive {
|
||||
clear: right;
|
||||
}
|
||||
.feature-shoutout {
|
||||
font-size: 1.2em;
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
padding: 32px 0;
|
||||
background-color: #f7f7f9;
|
||||
svg{
|
||||
height: 36px;
|
||||
vertical-align: middle;
|
||||
padding-right: 5px;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 16px 0;
|
||||
a{
|
||||
color: darken($turquoise, 20%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 64px auto;
|
||||
.page{
|
||||
margin: 2em auto;
|
||||
|
||||
pre {
|
||||
padding: 16px;
|
||||
background-color: $code-bg;
|
||||
}
|
||||
.card{
|
||||
margin-bottom: 2em;
|
||||
|
||||
blockquote{
|
||||
@extend .blockquote;
|
||||
}
|
||||
}
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 3px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1);
|
||||
color: #4a4a4a;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
border: none;
|
||||
border-radius: 0.2em;
|
||||
|
||||
aside ul.nav {
|
||||
@include media-breakpoint-up(sm) {
|
||||
border-right: 1px solid lighten($accent-color, 30);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
margin-left: -8px;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 16px;
|
||||
border-top: 1px dashed lighten($accent-color, 30);
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin:0;
|
||||
padding: 0;
|
||||
|
||||
li a {
|
||||
font-size: 0.9rem;
|
||||
.media-content a{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// see https://github.com/go-gitea/theme/issues/48
|
||||
article img {
|
||||
max-width: 100%;
|
||||
// Mobile Styles
|
||||
|
||||
.navbar-background{
|
||||
-webkit-transition: opacity ease 300ms;
|
||||
transition: opacity ease 300ms;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.navbar-menu{
|
||||
-webkit-transition: all ease 300ms;
|
||||
transition: all ease 300ms;
|
||||
}
|
||||
|
||||
@media screen and (max-width:1087px){
|
||||
.navbar-menu{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: -160px;
|
||||
z-index: 2;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu .logo{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-menu.is-active{
|
||||
-webkit-transition: all ease 300ms;
|
||||
transition: all ease 300ms;
|
||||
left: 0;
|
||||
|
||||
.navbar-item{
|
||||
padding: 0.5em 2em 0.5em 1.5em;
|
||||
}
|
||||
|
||||
.logo{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-burger.burger{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.navbar-background.is-active{
|
||||
background: rgba(0,0,0,0.5);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Loading…
Reference in New Issue