zoeissleeping/passport
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

tailwindcss

Browse Source
This commit is contained in:
Zoe
2024-11-15 01:36:47 -06:00
parent d9785498aa
commit a458d9ae8c
13 changed files with 67 additions and 864 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -3,12 +3,14 @@
Passport is a simple, fast, and lightweight web dashboard/new tab replacement. Passport is a simple, fast, and lightweight web dashboard/new tab replacement.
## Getting Started ## Getting Started
![Screenshot 2024-11-11 at 00-20-06 Passport](https://github.com/user-attachments/assets/ba16da2f-fb84-4f45-827f-3de0af6626a0) ![Screenshot 2024-11-11 at 00-20-06 Passport](https://github.com/user-attachments/assets/ba16da2f-fb84-4f45-827f-3de0af6626a0)
### Prerequisites ### Prerequisites
- [Go](https://go.dev/doc/install) - [Go](https://go.dev/doc/install)
- [sqlite3](https://www.sqlite.org/download.html) - [sqlite3](https://www.sqlite.org/download.html)
- [TailwdinCSS CLI](https://github.com/tailwindlabs/tailwindcss/releases/latest)
### Usage ### Usage

BIN
assets/fonts/InstrumentSans-Italic.ttf
View File

Binary file not shown.

BIN
assets/fonts/InstrumentSans-Regular.ttf
View File

Binary file not shown.

BIN
assets/fonts/InstrumentSans-SemiBold.ttf
View File

Binary file not shown.

BIN
assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2 Normal file
View File

Binary file not shown.

1
assets/tailwind.css Normal file
View File

File diff suppressed because one or more lines are too long

11
main.go
View File

@@ -1,3 +1,5 @@
//go:generate tailwindcss -i styles/main.css -o assets/tailwind.css --minify
package main package main
import ( import (
@@ -470,7 +472,16 @@ func main() {
log.Fatal(err) log.Fatal(err)
} }
css, err := fs.ReadFile(assetsFS, "assets/tailwind.css")
if err != nil {
log.Fatal(err)
}
engine := handlebars.NewFileSystem(http.FS(viewsDir), ".hbs") engine := handlebars.NewFileSystem(http.FS(viewsDir), ".hbs")
engine.AddFunc("inlineCSS", func() string {
return string(css)
})
router := fiber.New(fiber.Config{ router := fiber.New(fiber.Config{
Views: engine, Views: engine,

34
styles/main.css Normal file
View File

@@ -0,0 +1,34 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "Instrument Sans";
src: url("/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2")
format("woff2");
}
html {
line-height: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
@apply font-semibold;
}
h1 {
font-size: clamp(48px, 10vw, 64px);
}
h2 {
font-size: clamp(30px, 6vw, 36px);
}
h3 {
font-size: 1.25rem;
}

12
tailwind.config.js Normal file
View File

@@ -0,0 +1,12 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./views/**/*.hbs"],
theme: {
extend: {
fontFamily: {
sans: ["Instrument Sans", "sans-serif"],
},
},
},
plugins: [],
};

2
views/admin/index.hbs
View File

@@ -1,5 +1,5 @@
<section class="flex justify-center w-full"> <section class="flex justify-center w-full">
<div class="w-full sm:w-8/10 p-2.5"> <div class="w-full sm:w-4/5 p-2.5">
{{#each Categories}} {{#each Categories}}
<div class="flex items-center"> <div class="flex items-center">
<img class="object-contain mr-2 select-none" width="32" height="32" draggable="false" src="{{this.Icon}}" /> <img class="object-contain mr-2 select-none" width="32" height="32" draggable="false" src="{{this.Icon}}" />

6
views/index.hbs
View File

@@ -1,4 +1,4 @@
<main class="flex justify-center items-center h-100vh relative bg-[#0E0A0E]"> <main class="flex justify-center items-center h-screen relative bg-[#0E0A0E]">
<div class="absolute top-2.5 left-2.5"> <div class="absolute top-2.5 left-2.5">
<div class="text-[#BABABA] flex items-center"> <div class="text-[#BABABA] flex items-center">
<span class="mr-2 flex items-center"> <span class="mr-2 flex items-center">
@@ -15,11 +15,11 @@
<svg class="mr-3 aspect-square w-[clamp(48px,10vw,60px)]" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="12.1483" y="24.7693" width="70" height="47" rx="12" transform="rotate(14.63 12.1483 24.7693)" fill="url(#paint0_linear_20_10)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M52.7386 13.4812C46.8869 10.3698 39.6209 12.5913 36.5096 18.4429L32.7819 25.4537L68.4322 34.7599C77.5166 37.1313 82.9586 46.418 80.5872 55.5025L74.7779 77.7567C74.7752 77.7674 74.7724 77.778 74.7696 77.7886C79.7728 78.7022 85.0029 76.3441 87.518 71.6138L98.3159 51.306C101.427 45.4543 99.2058 38.1883 93.3542 35.0769L52.7386 13.4812Z" fill="url(#paint1_linear_20_10)"/><defs><linearGradient id="paint0_linear_20_10" x1="12.359" y1="44.8681" x2="82.491" y2="48.2607" gradientUnits="userSpaceOnUse"><stop stop-color="#F0389B"/><stop offset="1" stop-color="#EEE740"/></linearGradient><linearGradient id="paint1_linear_20_10" x1="33.8935" y1="25.6926" x2="94.2236" y2="61.6131" gradientUnits="userSpaceOnUse"><stop stop-color="#AA38F0"/><stop offset="1" stop-color="#EE406A"/></linearGradient></defs></svg> <svg class="mr-3 aspect-square w-[clamp(48px,10vw,60px)]" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="12.1483" y="24.7693" width="70" height="47" rx="12" transform="rotate(14.63 12.1483 24.7693)" fill="url(#paint0_linear_20_10)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M52.7386 13.4812C46.8869 10.3698 39.6209 12.5913 36.5096 18.4429L32.7819 25.4537L68.4322 34.7599C77.5166 37.1313 82.9586 46.418 80.5872 55.5025L74.7779 77.7567C74.7752 77.7674 74.7724 77.778 74.7696 77.7886C79.7728 78.7022 85.0029 76.3441 87.518 71.6138L98.3159 51.306C101.427 45.4543 99.2058 38.1883 93.3542 35.0769L52.7386 13.4812Z" fill="url(#paint1_linear_20_10)"/><defs><linearGradient id="paint0_linear_20_10" x1="12.359" y1="44.8681" x2="82.491" y2="48.2607" gradientUnits="userSpaceOnUse"><stop stop-color="#F0389B"/><stop offset="1" stop-color="#EEE740"/></linearGradient><linearGradient id="paint1_linear_20_10" x1="33.8935" y1="25.6926" x2="94.2236" y2="61.6131" gradientUnits="userSpaceOnUse"><stop stop-color="#AA38F0"/><stop offset="1" stop-color="#EE406A"/></linearGradient></defs></svg>
<h1>Passport</h1> <h1>Passport</h1>
</div> </div>
<input id="search-input" class="w-full max-w-3xl bg-[#1C1C21] border border-[rgb(86,86,91)/30] rounded-full px-3 py-1 text-white h-7" placeholder="Search..." /> <input id="search-input" class="w-full max-w-3xl bg-[#1C1C21] border border-[#56565b]/30 rounded-full px-3 py-1 text-white h-7 focus-visible:outline-none placeholder:italic placeholder:text-[#434343]" placeholder="Search..." />
</div> </div>
</main> </main>
<section class="flex justify-center w-full"> <section class="flex justify-center w-full">
<div class="w-full sm:w-8/10 p-2.5"> <div class="w-full sm:w-4/5 p-2.5">
{{#each Categories}} {{#each Categories}}
<div class="flex items-center w-fit"> <div class="flex items-center w-fit">
<img class="object-contain mr-2 select-none" width="32" height="32" draggable="false" src="{{this.Icon}}" /> <img class="object-contain mr-2 select-none" width="32" height="32" draggable="false" src="{{this.Icon}}" />

438
views/layouts/main.hbs
View File

@@ -5,443 +5,11 @@
<title>Passport</title> <title>Passport</title>
<link rel="favicon" href="/favicon.ico"> <link rel="favicon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> <link rel="prefetch" href="/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2">
@font-face { <style>{{{inlineCSS}}}</style>
font-family: "Instrument Sans";
src: url("/assets/fonts/InstrumentSans-Regular.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Instrument Sans";
src: url("/assets/fonts/InstrumentSans-SemiBold.ttf");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "Instrument Sans";
src: url("/assets/fonts/InstrumentSans-Italic.ttf");
font-weight: normal;
font-style: italic;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background-color: #151316;
color: white;
font-family: "Instrument Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
"wdth" 100;
}
p {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-weight: 600;
}
h1 {
font-size: clamp(48px,10vw,64px);
}
h2 {
font-size: clamp(30px,6vw,36px);
}
.font-semibold {
font-weight: 600;
}
.bg-transparent {
background-color: transparent;
}
.bg-\[\#211F23\] {
background-color: #211F23;
}
.bg-\[\#0E0A0E\] {
background-color: #0E0A0E;
}
.bg-\[\#1C1C21\] {
background-color: #1C1C21;
}
.hover\:bg-\[\#29292e\]:hover {
background-color: #29292e;
}
.bg-\[\#151316\] {
background-color: #151316;
}
.bg-\[\#8A42FF\] {
background-color: #8A42FF;
}
.bg-\[\#00000070\] {
background-color: rgba(0, 0, 0, 0.7);
}
.border-0 {
border-width: 0px;
}
.border {
border-style: solid;
border-width: 1px;
}
.border-solid {
border-style: solid;
}
.border-dashed {
border-style: dashed;
}
.border-\[rgb\(86\,86\,91\)\/30\] {
border-color: rgba(86, 86, 91, 0.30);
}
.border-\[\#656565\] {
border-color: #656565;
}
.border-\[\#211F23\] {
border-color: #211F23;
}
.rounded-full {
border-radius: 9999px;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.hidden {
display: none;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.grid-cols-\[repeat\(auto-fill\,_minmax\(min\(330px\,_100\%\)\,_1fr\)\)\] {
grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
}
.gap-2 {
gap: 0.5rem;
}
.gap-y-3 {
row-gap: 0.75rem;
}
.justify-center {
justify-content: center;
}
.items-center {
align-items: center;
}
.h-100vh {
height: 100vh;
}
.h-7 {
height: 1.752rem;
}
.h-96 {
height: 24rem;
}
.h-fit {
height: fit-content;
}
.w-64 {
width: 16rem;
}
.w-full {
width: 100%;
}
.w-fit {
width: fit-content;
}
.w-\[clamp\(48px\,10vw\,60px\)\] {
width: clamp(48px,10vw,60px);
}
.aspect-square {
aspect-ratio: 1/1;
}
@media (min-width: 640px) {
.sm\:w-8\/10 {
width: 80%;
}
}
.max-w-3xl {
max-width: 48rem;
}
.flex-col {
flex-direction: column;
}
.mr-3 {
margin-right: 0.75rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mx-6 {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.p-0\.5 {
padding: 0.125rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pb-2\.5 {
padding-bottom: 0.625rem;
}
.p-2\.5 {
padding: 0.625rem;
}
.p-4 {
padding: 1rem;
}
.h-2 {
height: 2rem;
}
.top-0 {
top: 0px;
}
.left-0 {
left: 0px;
}
.bottom-0 {
bottom: 0px;
}
.right-0 {
right: 0px;
}
.top-1 {
top: 0.25rem;
}
.right-1 {
right: 0.25rem;
}
.top-2\.5 {
top: 0.625rem;
}
.left-2\.5 {
left: 0.625rem;
}
.text-\[\#BABABA\] {
color: #BABABA;
}
.text-\[\#D7D7D7\] {
color: #D7D7D7;
}
.text-\[\#656565\] {
color: #656565;
}
.text-white {
color: white;
}
.text-4xl {
font-size: 2.25rem;
}
.underline-none {
text-decoration: none;
}
.underline {
text-decoration: underline;
}
.decoration-dashed {
text-decoration-style: dashed;
}
.text-unset {
color: unset;
}
.text-sm {
font-size: 0.875rem;
}
.text-center {
text-align: center;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.overflow-hidden {
overflow: hidden;
}
.shadow-md {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.hover\:shadow-xl:hover {
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.transition-\[shadow\,transform\] {
transition-property: box-shadow,transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.ease-\[cubic-bezier\(0\.16\,1\,0\.3\,1\)\] {
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.capitalize {
text-transform: capitalize;
}
.hover\:-translate-y-1:hover {
transform: translateY(-0.25rem);
}
.object-contain {
object-fit: contain;
}
.object-cover {
object-fit: cover;
}
.select-none {
user-select: none;
}
.cursor-pointer {
cursor: pointer;
}
input,
textarea,
select {
color: inherit;
font: inherit;
}
input:focus-visible {
outline: none;
}
input::placeholder {
color: #656565;
font-style: italic;
}
</style>
</head> </head>
<body> <body class="bg-[#151316] text-white">
{{embed}} {{embed}}
</body> </body>

425
views/styles/main.css
View File

@@ -1,425 +0,0 @@
@font-face {
font-family: "Instrument Sans";
src: url("/fonts/InstrumentSans-Regular.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Instrument Sans";
src: url("/fonts/InstrumentSans-SemiBold.ttf");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "Instrument Sans";
src: url("/fonts/InstrumentSans-Italic.ttf");
font-weight: normal;
font-style: italic;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background-color: #151316;
color: white;
font-family: "Instrument Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
"wdth" 100;
}
p {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-weight: 600;
}
h1 {
font-size: 64px;
}
h2 {
font-size: 36px;
}
.font-semibold {
font-weight: 600;
}
.bg-transparent {
background-color: transparent;
}
.bg-\[\#211F23\] {
background-color: #211F23;
}
.bg-\[\#0E0A0E\] {
background-color: #0E0A0E;
}
.bg-\[\#1C1C21\] {
background-color: #1C1C21;
}
.hover\:bg-\[\#29292e\]:hover {
background-color: #29292e;
}
.bg-\[\#151316\] {
background-color: #151316;
}
.bg-\[\#8A42FF\] {
background-color: #8A42FF;
}
.bg-\[\#00000070\] {
background-color: rgba(0, 0, 0, 0.7);
}
.border-0 {
border-width: 0px;
}
.border {
border-style: solid;
border-width: 1px;
}
.border-solid {
border-style: solid;
}
.border-dashed {
border-style: dashed;
}
.border-\[rgb\(86\,86\,91\)\/30\] {
border-color: rgba(86, 86, 91, 0.30);
}
.border-\[\#656565\] {
border-color: #656565;
}
.border-\[\#211F23\] {
border-color: #211F23;
}
.rounded-full {
border-radius: 9999px;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.hidden {
display: none;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gap-2 {
gap: 0.5rem;
}
.gap-y-3 {
row-gap: 0.75rem;
}
.justify-center {
justify-content: center;
}
.items-center {
align-items: center;
}
.h-100vh {
height: 100vh;
}
.h-7 {
height: 1.752rem;
}
.h-96 {
height: 24rem;
}
.h-fit {
height: fit-content;
}
.w-64 {
width: 16rem;
}
.w-full {
width: 100%;
}
.w-fit {
width: fit-content;
}
.w-\[700px\] {
width: 700px;
}
.min-w-\[50vw\] {
min-width: 50vw;
}
.max-w-\[80vw\] {
max-width: 80vw;
}
.flex-col {
flex-direction: column;
}
.mr-3 {
margin-right: 0.75rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.p-0\.5 {
padding: 0.125rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pb-2\.5 {
padding-bottom: 0.625rem;
}
.p-2\.5 {
padding: 0.625rem;
}
.p-4 {
padding: 1rem;
}
.h-2 {
height: 2rem;
}
.w-8\/10 {
width: 80%;
}
.top-0 {
top: 0px;
}
.left-0 {
left: 0px;
}
.bottom-0 {
bottom: 0px;
}
.right-0 {
right: 0px;
}
.top-1 {
top: 0.25rem;
}
.right-1 {
right: 0.25rem;
}
.top-2\.5 {
top: 0.625rem;
}
.left-2\.5 {
left: 0.625rem;
}
.text-\[\#BABABA\] {
color: #BABABA;
}
.text-\[\#D7D7D7\] {
color: #D7D7D7;
}
.text-\[\#656565\] {
color: #656565;
}
.text-white {
color: white;
}
.text-4xl {
font-size: 2.25rem;
}
.underline-none {
text-decoration: none;
}
.underline {
text-decoration: underline;
}
.decoration-dashed {
text-decoration-style: dashed;
}
.text-unset {
color: unset;
}
.text-sm {
font-size: 0.875rem;
}
.text-center {
text-align: center;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.overflow-hidden {
overflow: hidden;
}
.shadow-md {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.hover\:shadow-xl:hover {
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.transition-\[shadow\,transform\] {
transition-property: box-shadow,transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.ease-\[cubic-bezier\(0\.16\,1\,0\.3\,1\)\] {
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.capitalize {
text-transform: capitalize;
}
.hover\:-translate-y-1:hover {
transform: translateY(-0.25rem);
}
.object-contain {
object-fit: contain;
}
.object-cover {
object-fit: cover;
}
.select-none {
user-select: none;
}
.cursor-pointer {
cursor: pointer;
}
input,
textarea,
select {
color: inherit;
font: inherit;
}
input:focus-visible {
outline: none;
}
input::placeholder {
color: #656565;
font-style: italic;
}