manuth/mantra
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add a few style-changes

Browse source
This commit is contained in:
Manuel Thalmann 2019-11-22 13:12:55 +00:00
parent 1543603447
commit 5bb5999cde
4 changed files with 83 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/Templates/Page.ss
View file

@ -5,42 +5,56 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<% base_tag %> <% base_tag %>
$MetaTags() $MetaTags(false)
<title><% if $Title %>$Title ● <% end_if %>$SiteConfig.Title</title>
<% require themedCSS("mantra") %> <% require themedCSS("mantra") %>
<% require themedJavascript("main") %> <% require themedJavascript("main") %>
</head> </head>
<body class="d-flex flex-column h-100"> <body class="d-flex flex-column h-100">
<% if $Menu(1) %> <nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
<div class="col-1"> <a class="navbar-brand" href="$AbsoluteBaseURL">
<nav> <div class="navbar-title">$SiteConfig.Title</div>
<div class="active"> <div class="navbar-tagline">$SiteConfig.Tagline</div>
<a>
$Title
</a> </a>
<ul class="nav bd-sidenav"> <% if $Menu(1) %>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav">
<% loop $Menu(1) %> <% loop $Menu(1) %>
<li class="$LinkingMode"> <% if $Children %>
<a href="$Link"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle<% if $isCurrent || $isSection %> active <% end_if %>" href="#" id="mainNav_$URLSegment" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
$MenuTitle $MenuTitle
</a> </a>
<div class="dropdown-menu" aria-labelledby="mainNav_$URLSegment">
<a class="dropdown-item<% if $isCurrent %> active <% end_if %>" href="$Link">
$MenuTitle<% if $isCurrent %><span class="sr-only"> (current)</span><% end_if %>
</a>
<div class="dropdown-divider"></div>
<% loop $Children %>
<a class="dropdown-item<% if $isCurrent %> active <% end_if %>" href="$Link">
$MenuTitle
</a>
<% end_loop %>
</div>
</li> </li>
<% else %>
<li class="nav-item<% if $isCurrent %> active<% end_if %>">
<a class="nav-link" href="$Link">
$MenuTitle<% if $isCurrent %><span class="sr-only"> (current)</span><% end_if %>
</a>
</li>
<% end_if %>
<% end_loop %> <% end_loop %>
</ul> </ul>
</div> </div>
</nav>
</div>
<% end_if %> <% end_if %>
<main role="main" class="col-11 flex-shrink-0"> </nav>
<div class="container"> <main role="main" class="col-11 flex-shrink-0" style="padding-top: 4.5rem">
<% loop $Menu(1) %>
<li><a class="$LinkingMode" href="$Link" title="Go to the $Title page">$MenuTitle</a></li>
<% end_loop %>
<h1 class="display-4">
$MenuTitle
</h1>
$Content $Content
$Form $Form
</div>
</main> </main>
</body> </body>
</html> </html>

37
src/Theme/_nav.scss Normal file
View file

@ -0,0 +1,37 @@
.navbar {
.navbar-nav {
.nav-link {
position: relative;
&::before {
content: ' ';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-top: -($navbar-padding-x / 2);
margin-bottom: -($navbar-padding-x / 2);
}
}
.active > .nav-link, .nav-link.active {
&::before {
background: rgba(255, 255, 255, 0.1);
}
}
}
}
.navbar-brand {
.navbar-title {
@extend .d-inline-block;
}
.navbar-tagline {
@extend .text-muted;
@extend .d-none;
@extend .d-lg-inline-block;
font-size: 0.5em;
}
}

1
src/Theme/_variables.scss Normal file
View file

@ -0,0 +1 @@
$tagline-font-size: $small-font-size / 2;

2
src/Theme/main.scss
View file

@ -1 +1,3 @@
@import "~bootstrap/scss/bootstrap"; @import "~bootstrap/scss/bootstrap";
@import "variables";
@import "nav";