Jonas_Jones/dash.jonasjones.dev
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/dash.jonasjones.dev.git synced 2025-10-22 21:09:20 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed and added CSS

Browse source
This commit is contained in:
Jonas_Jones 2025-01-24 23:12:11 +01:00
parent ed332459d1
commit 8841d97b29
3 changed files with 83 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/app.css
View file

@ -7,27 +7,27 @@
--color-bg-0: rgb(202, 216, 228); --color-bg-0: rgb(202, 216, 228);
--color-bg-1: hsl(209, 36%, 86%); --color-bg-1: hsl(209, 36%, 86%);
--color-bg-2: hsl(224, 44%, 95%); --color-bg-2: hsl(224, 44%, 95%);
--color-theme-1: #ff3e00; --color-theme-1: #058800;
--color-theme-2: #4075a6; --color-theme-2: #4075a6;
--color-text: rgba(0, 0, 0, 0.7); --color-text: white;
--column-width: 42rem; --column-width: 42rem;
--column-margin-top: 4rem; --column-margin-top: 4rem;
font-family: var(--font-body); font-family: var(--font-body);
color: var(--color-text); color: var(--color-text);
} }
html {
margin: 0;
padding: 0;
}
body { body {
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
padding:0;
background-attachment: fixed; background-attachment: fixed;
background-color: var(--color-bg-1); background-color: #1b1b1d;
background-size: 100vw 100vh; background-size: 100vw 100vh;
background-image: radial-gradient(
50% 50% at 50% 50%,
rgba(255, 255, 255, 0.75) 0%,
rgba(255, 255, 255, 0) 100%
),
linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);
} }
h1, h1,

2
src/routes/Header.svelte
View file

@ -66,7 +66,7 @@
nav { nav {
display: flex; display: flex;
justify-content: center; justify-content: center;
--background: rgba(255, 255, 255, 0.7); --background: #242526;
} }
svg { svg {

73
src/routes/login/+page.svelte
View file

@ -45,3 +45,76 @@
<button type="submit">Login</button> <button type="submit">Login</button>
</form> </form>
<style>
.login-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
position: fixed;
top: 50px;
left: 0;
align-items: center;
height: 100vh;
width: 100vw;
}
.login-prompt {
background-color: black;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
}
label {
font-size: 14px;
margin-bottom: 5px;
}
input {
padding: 10px;
font-size: 14px;
margin-bottom: 15px;
border: 1px solid #222222;
border-radius: 4px;
background-color: rgb(44, 44, 44);
color: white;
}
input:focus {
border-color: #036300;
outline: none;
}
button {
background-color: #036300;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
p {
text-align: center;
font-size: 14px;
margin-top: -10px;
}
</style>