Recount/Recount-Server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

style setup

Browse source
This commit is contained in:
Nickiel12 2024-01-12 21:59:19 -08:00
parent 77b7591c57
commit 7b9a760e67
4 changed files with 71 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
web/sass/mixins.scss Normal file
View file

@ -0,0 +1,9 @@
@mixin button_link() {
cursor: pointer;
background-color: transparent;
background-repeat: no-repeat;
border: none;
overflow: hidden;
outline: none;
border-radius: 5px;
}

30
web/sass/nav.scss Normal file
View file

@ -0,0 +1,30 @@
nav {
background-color: $nav-bg;
display: flex;
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
button.title {
color: $green;
}
button.active {
background-color: $nav-active-bg;
color: $nav-active-color;
}
button {
color: $nav-color;
display: block;
padding: 12px 24px;
text-decoration: none;
@include button_link;
}
button:hover {
background-color: $nav-hover;
}
}

18
web/sass/site.scss
View file

@ -1,5 +1,23 @@
@import 'catpuccin'; @import 'catpuccin';
$bg: $latte-base;
$nav-bg: $latte-crust;
$nav-color: $latte-text;
$nav-hover: $latte-surface2;
$nav-active-bg: $latte-mauve;
$nav-active-color: $latte-base;
$green: $latte-green;
@import 'mixins';
@import 'nav';
body { body {
background-color: $latte-base; background-color: $latte-base;
} }
body.dark-mode {
$bg: $macchiato-base;
$nav-bg: $macchiato-crust;
$green: $macchiato-green;
}

20
web/templates/index.html
View file

@ -8,14 +8,22 @@
<title>{{.Title}}</title> <title>{{.Title}}</title>
</head> </head>
<body> <body>
<div> <header>
<nav>
<button class="title" href="/">Recount!</button>
<ul>
<li><button hx-boost="true" class="active" href="/home">Home!</button></li>
<li><button href="/nohome">Not home!</button></li>
</ul>
</nav>
</header>
<div id="main-body-content">
<h1>Hello World!</h1>
<button hx-get="/hello" hx-trigger="click" hx-target="#hello" hx-swap="outerHtml">Hello you!</button>
</div> <div id="hello">
<h1>Hello World!</h1>
<button hx-get="/hello" hx-trigger="click" hx-target="#hello" hx-swap="outerHtml">Hello you!</button>
<div id="hello">
</div>
</div> </div>
<script type="module" src="/static/index.js"></script> <script type="module" src="/static/index.js"></script>
<script type="module"> <script type="module">