dp/wish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More styling

Browse Source
This commit is contained in:
Daniel Patterson
2023-11-28 17:06:50 +00:00
committed by Daniel Patterson
parent 8ece628b30
commit 99397d7388
6 changed files with 267 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
assets/images/logo.svg Normal file
View File

@@ -0,0 +1,96 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="256.27863"
height="91.198029"
viewBox="0 0 67.807053 24.129478"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20e, 2023-11-25)"
sodipodi:docname="logo.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="true"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="3.8187023"
inkscape:cx="103.83108"
inkscape:cy="83.798101"
inkscape:window-width="2560"
inkscape:window-height="1387"
inkscape:window-x="1312"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1">
<filter
style="color-interpolation-filters:sRGB"
inkscape:label="Drop Shadow"
id="filter22"
x="-0.020945052"
y="-0.067772631"
width="1.0735551"
height="1.2361475">
<feFlood
result="flood"
in="SourceGraphic"
flood-opacity="1.000000"
flood-color="rgb(0,0,0)"
id="feFlood21" />
<feGaussianBlur
result="blur"
in="SourceGraphic"
stdDeviation="0.000000"
id="feGaussianBlur21" />
<feOffset
result="offset"
in="blur"
dx="2.000000"
dy="1.963746"
id="feOffset21" />
<feComposite
result="comp1"
operator="in"
in="flood"
in2="offset"
id="feComposite21" />
<feComposite
result="comp2"
operator="over"
in="SourceGraphic"
in2="comp1"
id="feComposite22" />
</filter>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="filter:url(#filter22)"
transform="translate(-44.319593,-67.956586)">
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.4px;font-family:Fraunces;-inkscape-font-specification:'Fraunces, @opsz=72,SOFT=100,wght=887,WONK=0.00';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'opsz' 72, 'SOFT' 100, 'wght' 887, 'WONK' 0;mix-blend-mode:multiply;fill:#000000;fill-rule:nonzero;stroke:#000000;stroke-width:2.64583;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
x="45.36311"
y="88.443802"
id="text1"><tspan
sodipodi:role="line"
id="tspan1"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.4px;font-family:Fraunces;-inkscape-font-specification:'Fraunces, @opsz=72,SOFT=100,wght=887,WONK=0.00';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'opsz' 72, 'SOFT' 100, 'wght' 887, 'WONK' 0;fill:#7c3aed;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2.64583;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
x="45.36311"
y="88.443802"
rotate="0 0 0 0 0"
dy="0">Wish</tspan></text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

99
assets/logo.svg Normal file
View File

@@ -0,0 +1,99 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="256.27863"
height="91.198029"
viewBox="0 0 67.807053 24.129478"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20e, 2023-11-25)"
sodipodi:docname="logo.svg"
inkscape:export-filename="../priv/static/images/logo.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="true"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="3.8187023"
inkscape:cx="103.83108"
inkscape:cy="83.798101"
inkscape:window-width="2560"
inkscape:window-height="1387"
inkscape:window-x="1312"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1">
<filter
style="color-interpolation-filters:sRGB"
inkscape:label="Drop Shadow"
id="filter22"
x="-0.020945052"
y="-0.067772631"
width="1.0735551"
height="1.2361475">
<feFlood
result="flood"
in="SourceGraphic"
flood-opacity="1.000000"
flood-color="rgb(0,0,0)"
id="feFlood21" />
<feGaussianBlur
result="blur"
in="SourceGraphic"
stdDeviation="0.000000"
id="feGaussianBlur21" />
<feOffset
result="offset"
in="blur"
dx="2.000000"
dy="1.963746"
id="feOffset21" />
<feComposite
result="comp1"
operator="in"
in="flood"
in2="offset"
id="feComposite21" />
<feComposite
result="comp2"
operator="over"
in="SourceGraphic"
in2="comp1"
id="feComposite22" />
</filter>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="filter:url(#filter22)"
transform="translate(-44.319593,-67.956586)">
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.4px;font-family:Fraunces;-inkscape-font-specification:'Fraunces, @opsz=72,SOFT=100,wght=887,WONK=0.00';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'opsz' 72, 'SOFT' 100, 'wght' 887, 'WONK' 0;mix-blend-mode:multiply;fill:#000000;fill-rule:nonzero;stroke:#000000;stroke-width:2.64583;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
x="45.36311"
y="88.443802"
id="text1"><tspan
sodipodi:role="line"
id="tspan1"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.4px;font-family:Fraunces;-inkscape-font-specification:'Fraunces, @opsz=72,SOFT=100,wght=887,WONK=0.00';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'opsz' 72, 'SOFT' 100, 'wght' 887, 'WONK' 0;fill:#7c3aed;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2.64583;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
x="45.36311"
y="88.443802"
rotate="0 0 0 0 0"
dy="0">Wish</tspan></text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

6
lib/wish_web/components/core_components.ex
View File

@@ -230,9 +230,9 @@ defmodule WishWeb.CoreComponents do
<button
type={@type}
class={[
"phx-submit-loading:opacity-75 bg-purple-400 hover:bg-purple-500 py-2 px-3",
"text-sm font-semibold leading-6 text-white active:text-white/80",
"border-2 border-black",
"phx-submit-loading:opacity-75 bg-purple-200 hover:bg-purple-300 py-2 px-3",
"text-sm font-semibold leading-6 text-zinc-800 active:bg-purple-400 active:text-zinc-800/80",
"border-2 border-black hover:shadow-sharp transition-shadow",
@class
]}
{@rest}

7
lib/wish_web/components/layouts/app.html.heex
View File

@@ -1,8 +1,11 @@
<header class="px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
<div class="flex items-center gap-4">
<a class="font-display text-6xl font-black text-violet-600" href="/">
Wish
<a
class="font-display text-6xl font-black text-violet-600 drop-shadow-[e_0_15px_violet]"
href="/"
>
<img src="/images/logo.svg" />
</a>
</div>
<div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900"></div>

6
lib/wish_web/live/home_live/index.html.heex
View File

@@ -15,7 +15,7 @@
<div
:for={item <- @items}
phx-click={JS.navigate(~p"/details/#{item}")}
class="p-3 hover:bg-purple-200 active:bg-purple-300 border-2 border-black hover:shadow-sharp transition cursor-pointer"
class="p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black hover:shadow-sharp transition cursor-pointer"
>
<div class="aspect-square relative flex flex-col justify-center bg-white border border-black">
<img
@@ -50,10 +50,10 @@
<div class="flex flex-col mt-4 space-y-4">
<div
:for={item <- @items}
class="grid grid-cols-6 grid-rows-4 gap-3 h-56 p-3 border-2 border-black hover:shadow-sharp transition"
class="grid grid-cols-6 grid-rows-4 gap-3 h-56 p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black hover:shadow-sharp transition cursor-pointer"
phx-click={JS.navigate(~p"/details/#{item}")}
>
<div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 border border-black">
<div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 bg-white border border-black">
<img :if={item.image_url} src={item.image_url} alt={item.title} class="max-h-full" />
<%= if item.received && !@current_user do %>
<div class="absolute bg-red-400 text-xs text-white w-full h-7 bottom-0">

66
priv/static/images/logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB