diff --git a/assets/neon-border-image-corner.svg b/assets/neon-border-image-corner.svg new file mode 100644 index 0000000..b714444 --- /dev/null +++ b/assets/neon-border-image-corner.svg @@ -0,0 +1,85 @@ + + + + diff --git a/css/style-desktop.css b/css/style-desktop.css new file mode 100644 index 0000000..2060e5c --- /dev/null +++ b/css/style-desktop.css @@ -0,0 +1,57 @@ +#main-header { + flex-direction: row; + align-items: stretch; + + background: radial-gradient(black, transparent 50%); + background-size: 40rem 20rem; + background-repeat: no-repeat; + background-position: -15rem -10rem; +} + +body { + display: grid; + grid-template-columns: min-content 1fr; + grid-template-rows: min-content 1fr min-content; + max-height: 100vh; + column-gap: 10px; +} + +body > #main-header { + grid-column: 1 / 3; + grid-row: 1; + z-index: 100; +} + +body > #result-panel-dialog { + grid-column: 1; + grid-row: 1 / 4; + padding-top: calc(clamp(2rem, 10vh, 5rem) + 45px); +} + +body > #search-section { + grid-column: 2; + grid-row: 3; +} + +#result-panel-dialog { + box-sizing: border-box; + width: 35vw; + min-width: 200px; + max-height: 100vh; + height: min-content; + overflow-x: hidden; + overflow-y: auto; + background: transparent; + align-self: flex-end; + + pointer-events: none; +} + +#result-panel-dialog > * { + pointer-events: all; +} + +#result-panel { + border-image: url("../assets/neon-border-image-corner.svg") 12; + border-right: 5.5px white solid; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index efd425b..1d085e4 100644 --- a/css/style.css +++ b/css/style.css @@ -34,14 +34,11 @@ body > hr { #main-header { display: flex; justify-content: start; - align-items: stretch; - flex-direction: row; - - background: radial-gradient(black, transparent 50%); - background-size: 40rem 20rem; - background-repeat: no-repeat; - background-position: -15rem -10rem; + align-items: center; + flex-direction: column; + background: linear-gradient(to bottom, black, transparent); + padding: 15px; padding-bottom: 30px; @@ -52,15 +49,6 @@ body > hr { } } -@media screen and (max-width: 600px) { - #main-header { - flex-direction: column; - align-items: center; - - background: linear-gradient(to bottom, black, transparent); - } -} - #main-header #logo { max-height: clamp(2rem, 10vh, 5rem); filter: drop-shadow(rgba(0,0,0,0.5) 0 0 10px); diff --git a/index.html b/index.html index 9516f51..f4a09a3 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Carte Interhack Camp 2026 +