diff --git a/static/style.css b/static/style.css index 640879bec84c1a5f8b9b2c04f308c0a357fdc125..9c2158b087c7f70e807a4a65a05b2509cb7c8518 100644 --- a/static/style.css +++ b/static/style.css @@ -1,3 +1,38 @@ +@font-face { + font-family: CircularXX; + src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Book.6a347aa604467a4e6921af6f4fcb33d2.woff2) format("woff2"); + src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Book.b553c88291144f54bb8f6505b7807fa6.woff) format("woff"); + font-weight: 400; + font-style: normal +} + +@font-face { + font-family: CircularXX; + src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Medium.37d42a8b2771863248874d4ac886b68b.woff2) format("woff2"); + src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Medium.d21fa690d384f11a160d1b52328d8cda.woff) format("woff"); + font-weight: 500; + font-style: normal +} + +@font-face { + font-family: CircularXX; + src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Bold.074fd642e815669ff63e6600e9ea9e0d.woff2) format("woff2"); + src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Bold.87b459306fb0caf65b83213687bb517f.woff) format("woff"); + font-weight: 700; + font-style: normal +} + +body { + margin: 0; + font-family: CircularXX,sans-serif; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #111; + text-align: left; + background-color: #f5f5f5 +} + h1 { color: blue;} @@ -50,3 +85,43 @@ nav li a:hover:last-child { background-color: #111; } + +.workspace-item { + background-color: #fff; + border-radius: 0.5rem; + box-shadow: 0 2px 2px 0 rgb(17 17 17 / 5%); + padding: 1.5rem; + margin: 0.75rem; + display: flex; +} + +.workspace-item .image-col { + width: 200px; +} + +.workspace-item .image-col .image { + max-width: 100%; +} + +.workspace-item .main-col { + flex: 1 0; + margin-left: 1rem; +} + +.workspace-item .title { + color: inherit; + display: inline-block; + font-size: 1.25rem; + margin-bottom: 1rem; + font-weight: 600; + line-height: 1.2; +} + +.workspace-item .meta { + color: #666; +} + +.workspace-item .dot { + color: #666; + font-weight: 700; +} diff --git a/templates/home.html b/templates/home.html index 9a1af7ec00074ae49b10865085a71494a7d8b8d3..5ebde4c6b1cdfc7c4eaf46a5100964172b35d75c 100644 --- a/templates/home.html +++ b/templates/home.html @@ -3,16 +3,22 @@ {% block mainBlock %} <ul> {% for workspace in workspaces %} - <li><a href="{{ workspace.website }}">{{ workspace.name }}</a> - <img src="{{ workspace.main_photo }}"></li> - <ul> - <li>{{ workspace.address }}</li> - <li>{{ workspace.description }}</li> - <li>{{ workspace.email }}</li> - <li>{{ workspace.phone_number }}</li> - <li>{{ workspace.opening_hours }}</li> - <li>{{ workspace.checkin_instructions }}</li> - </ul> + <div class="workspace-item"> + <div class="image-col"> + <a href="/workspace/{{ workspace.id }}"><img class="image" src="{{ workspace.main_photo }}"></a> + </div> + <div class="main-col"> + <div><a href="/workspace/{{ workspace.id }}" class="title">{{ workspace.name }}</a></div> + <div> + <span class="meta"><a href="mailto:{{ workspace.email }}">{{ workspace.email }}</a></li> <span class="dot">·</span> + <span class="meta"><a href="tel:{{ workspace.phone_number }}">{{ workspace.phone_number }}</a></span> + </div> + <div> + <span class="meta">{{ workspace.address }}</span> <span class="dot">·</span> + <span class="meta">{{ workspace.opening_hours }}</span> + </div> + </div> + </div> {% endfor %} </ul> {% endblock %} \ No newline at end of file diff --git a/templates/main.html b/templates/main.html index 34903741b4d4bcc011c8909b6474a4f16a9e6add..b8d9536fa1f8631ee13bb5803819328a5462cacd 100644 --- a/templates/main.html +++ b/templates/main.html @@ -2,8 +2,6 @@ <html lang="en"> <head> - <link rel="stylesheet" href="static/style.css"> - <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" @@ -11,6 +9,8 @@ "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> + <link rel="stylesheet" href="static/style.css"> + <title>{% block title %}{% endblock %} - Tramshed Workspaces</title> </head>