mirror of https://github.com/E-Almqvist/hsf
parent
0e1891a987
commit
d10b6bab45
Binary file not shown.
@ -1,56 +1,93 @@ |
||||
:root { |
||||
--magic-number:2vw; |
||||
--magic-number: 2vw; |
||||
} |
||||
|
||||
* { |
||||
color: #111015; |
||||
} |
||||
|
||||
|
||||
html { |
||||
background-color: #f7edf0; |
||||
} |
||||
|
||||
body{ |
||||
margin:0; |
||||
background: rgb(131,58,180); |
||||
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); |
||||
font-family:Arial, Helvetica, sans-serif; |
||||
font-weight:500; |
||||
color:white; |
||||
position:relative; |
||||
margin: 0; |
||||
font-family: "Source Code Pro", monospace; |
||||
font-weight: 1000; |
||||
color: #fefefe; |
||||
position: relative; |
||||
} |
||||
|
||||
nav { |
||||
height:100px; |
||||
background:rgba(80,80,80,0.2); |
||||
display:flex; |
||||
justify-content: space-around; |
||||
align-items:center; |
||||
height: 60px; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
align-items: center; |
||||
} |
||||
|
||||
nav a, nav a:link { |
||||
color:black; |
||||
text-decoration:none; |
||||
text-transform:uppercase; |
||||
font-size:1.2em; |
||||
font-weight:900; |
||||
opacity:0.5; |
||||
color: #111015; |
||||
text-decoration: none; |
||||
text-transform: uppercase; |
||||
font-size: 1.8rem; |
||||
font-weight: 900; |
||||
opacity: 0.5; |
||||
} |
||||
|
||||
|
||||
img { |
||||
position:fixed; |
||||
bottom:0; |
||||
right:0; |
||||
width:25vw; |
||||
margin:0 var(--magic-number) var(--magic-number) 0; |
||||
position: fixed; |
||||
bottom: 0; |
||||
right: 0; |
||||
width: 25vw; |
||||
margin: 0 var(--magic-number) var(--magic-number) 0; |
||||
} |
||||
|
||||
|
||||
|
||||
h1 { |
||||
margin:var(--magic-number); |
||||
margin: var(--magic-number); |
||||
} |
||||
|
||||
a { |
||||
color: #40a0e5; |
||||
transition: opacity; |
||||
transition-duration: .2s; |
||||
} |
||||
a:hover { opacity: .4; } |
||||
|
||||
form.page { |
||||
width: 40%; |
||||
margin: auto; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
a, form { |
||||
display:inline-block; |
||||
margin:10px; |
||||
form input { |
||||
margin-bottom: 1rem; |
||||
} |
||||
|
||||
a, form.inline { |
||||
display: inline-block; |
||||
margin: 10px; |
||||
} |
||||
|
||||
input, button { |
||||
border-radius: .2rem; |
||||
border: 1px solid black; |
||||
color: #111015; |
||||
padding-top: 0; |
||||
transition: opacity; |
||||
transition-duration: .2s; |
||||
} |
||||
|
||||
input:hover, button:hover { |
||||
opacity: .5; |
||||
} |
||||
|
||||
.center { |
||||
width: 80vw; |
||||
margin: auto; |
||||
text-align: center; |
||||
} |
||||
|
||||
@ -1,4 +1,6 @@ |
||||
form action="/albums/#{album['AlbumId']}/update" method="post" |
||||
form.page action="/albums/#{album['AlbumId']}/update" method="post" |
||||
span Album Title |
||||
input type="text" name="new_title" value="#{album['Title']}" placeholder="Album title" |
||||
span Artist ID |
||||
input type="number" name="new_artistid" value="#{album['ArtistId']}" placeholder="Artist ID" |
||||
input type="submit" value="Update" |
||||
|
||||
@ -1,5 +1,8 @@ |
||||
h1 = result or "" |
||||
h1 = "Album: #{album['Title']}" |
||||
h2 Created by: #{artist["Name"]}. |
||||
|
||||
p Albumet som du har sökt efter heter #{result["Title"]}. |
||||
// p Artisten som du har sökt efter heter #{result["ArtistId"]}. |
||||
p Artisten som du har sökt efter heter #{artist["Name"]}. |
||||
|
||||
form.inline action="/albums/#{album['AlbumId']}/edit" method="get" |
||||
input type="submit" value="Edit" |
||||
form.inline action="/albums/#{album['AlbumId']}/delete" method="post" |
||||
input type="submit" value="Remove" |
||||
|
||||
@ -1 +1,8 @@ |
||||
h2 Welcome to Music zite! |
||||
.center |
||||
h1 Welcome to Music zite! |
||||
p |
||||
|This is a album database site. Add, delete, edit or view all of the albums |
||||
a href="/albums" target="_self" here |
||||
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices nibh, eu ultricies mauris ornare viverra. Curabitur ut metus semper, rhoncus justo at, egestas risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam consequat hendrerit risus eu eleifend. Aenean eget nulla non nulla tincidunt volutpat. Vestibulum aliquet ipsum in eros porta, at posuere purus mollis. Aenean lobortis dolor vitae bibendum ornare. Sed non gravida ex. Curabitur blandit mattis dictum. Ut eu magna et leo feugiat mattis quis sit amet justo. Curabitur id convallis lacus. Praesent tristique lorem et tristique finibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In gravida arcu metus, ac porttitor diam laoreet a. Duis fringilla tortor ut nunc finibus mollis. Vestibulum convallis ligula neque, at condimentum lectus egestas sed. |
||||
|
||||
p Curabitur sed dolor ac quam maximus faucibus. Donec ullamcorper leo arcu. Maecenas aliquam pharetra egestas. Mauris ornare, ligula sit amet rutrum suscipit, nunc elit ultricies urna, nec scelerisque orci dui ut neque. Quisque non tellus ac lorem viverra efficitur eget at massa. Fusce hendrerit augue neque, sed tincidunt mauris congue vel. Morbi accumsan, dolor vel viverra imperdiet, purus augue sodales mi, a imperdiet tortor lectus ac dolor. Aliquam varius efficitur ligula tempus venenatis. Curabitur mollis velit ex, vitae euismod erat vestibulum pretium. Fusce eu gravida leo, nec cursus urna. Donec dictum, ligula id malesuada convallis, ex dui sollicitudin mi, nec mollis lorem odio laoreet velit. Integer nec ex urna. Fusce posuere ut odio quis vehicula. |
||||
|
||||
Loading…
Reference in new issue