BitGoblin/goliath
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added some styles and a navbar

Browse Source
This commit is contained in:
Gregory Ballantine 2022-11-19 22:26:16 -05:00
parent f4cf324280
commit 4bf5e73179
3 changed files with 54 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

@ -5,8 +5,11 @@ vendor/
node_modules/
# Compiled CSS and JS
public/css/
public/styles/
public/js/
# SASS compilation cache
.sass-cache/
# PHP CodeSniffer cache
.phpcs-cache

38
assets/sass/darkmeyer.sass Normal file
View File

@ -0,0 +1,38 @@
$primary-color: yellow
$primary-color-highlight: darken($primary-color, 10%)
$box-shadow-1: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
$box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)
body
background: lightgrey
#main-nav
position: fixed
top: 0
left: 0
width: 100%
height: 60px
background: #212121
color: #eee
font-size: 2.75rem
box-shadow: $box-shadow-1
.nav-left
float: left
.nav-menu
list-style: none
padding-left: 15px
li
display: inline-block
margin-top: 6px
margin-left: 15px
.nav-link a
color: $primary-color
transition: all 230ms ease-in-out
&:hover
color: $primary-color-highlight

12
views/layout.twig
View File

@ -6,9 +6,21 @@
<title>{% block title %}{% endblock %} | Goliath</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="/styles/darkmeyer.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<nav id="main-nav">
<div class="nav-left">
<ul class="nav-menu">
<li>Goliath</li>
<li class="nav-link"><a href="/">Home</a></li>
<li class="nav-link"><a href="/tickets">Tickets</a></li>
<li class="nav-link"><a href="/search">Search</a></li>
</ul>
</div>
</nav>
{% block content %}{% endblock %}
</body>
</html>