Skip to content

26 styling #27

Merged
merged 3 commits into from
Oct 16, 2026
+6 −17
Merged

26 styling #27

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cf70ed6
Fikset små puss på styling
andrborr Oct 16, 2026
341f440
Update README.md
wuringvo Oct 16, 2026
5fbf078
Merge branch 'main' into 26-styling
wuringvo Oct 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# T20-Project-2

Repository for team IT2810-H26-T20 in IT2810-H26.
Link to project: http://it2810-20.idi.ntnu.no/project2/

## Working in this repository

Expand Down
11 changes: 2 additions & 9 deletions t20-project-2/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,6 @@ function App() {
const [loading, setLoading] = useState(true)
const [loadingMore, setLoadingMore] = useState(false)
const [error, setError] = useState('')
const [apiConnected, setApiConnected] = useState(false)
const [refreshKey, setRefreshKey] = useState(0)
const [savedCities, setSavedCities] = useState<City[]>(readSavedCities)
const [activeView, setActiveView] = useState<'home' | 'saved'>('home')
Expand Down Expand Up @@ -197,12 +196,10 @@ function App() {
setCities(searchCities.items)
setTotalCount(searchCities.totalCount)
setHasMore(searchCities.hasMore)
setApiConnected(true)
setError('')
})
.catch((requestError: Error) => {
if (requestError.name !== 'AbortError') {
setApiConnected(false)
setError(requestError.message)
}
})
Expand Down Expand Up @@ -309,19 +306,16 @@ function App() {
Saved{savedCities.length > 0 && <span className="saved-count">{savedCities.length}</span>}
</button>
</nav>
<span className={`api-status${apiConnected ? '' : ' api-status-offline'}`}>
<span />{apiConnected ? 'Live database' : error ? 'Database unavailable' : 'Connecting…'}
</span>
</header>

<main id="top" className="page-shell">
<section className="intro" id="discover" aria-labelledby="page-title">
<div className="intro-copy">
<p className="eyebrow"><span className="eyebrow-dot" />CONNECTED TO THE CITY DATABASE</p>
<p className="eyebrow">EXPLORE CITIES AROUND THE WORLD</p>
<h1 id="page-title">Find the city that<br /><span>speaks to you.</span></h1>
<p className="intro-description">Search real city data, explore details, and leave a review.</p>
</div>
<div className="intro-image" role="img" aria-label="Colorful buildings along a Lisbon street"><span className="image-caption"><span className="caption-dot" />Lisbon, Portugal</span></div>
<div className="intro-image" role="img" aria-label="Colorful buildings along a Lisbon street"><span className="image-caption">Lisbon, Portugal</span></div>
</section>

<form className="search-form" role="search" onSubmit={(event) => {
Expand Down Expand Up @@ -397,7 +391,6 @@ function App() {
</section>
</div>

<footer className="site-footer"><a className="footer-brand" href="#top">Country Boys<span>.</span></a><p>City data from the live database.</p><span className="footer-note">Reviews are shared with the database</span></footer>
</main>
</>
)
Expand Down
8 changes: 0 additions & 8 deletions t20-project-2/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,22 +52,17 @@ button, a, input, select { -webkit-tap-highlight-color: transparent; }
.login-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid #dce4df; border-radius: 6px; background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color .2s, background-color .2s; }
.login-link:hover { border-color: #a7bdb1; background: #f8faf8; }
.login-icon, .login-icon svg { display: block; width: 18px; height: 18px; }
.api-status { display: inline-flex; align-items: center; gap: 8px; color: #52615a; font-size: 11px; font-weight: 600; }
.api-status span { width: 7px; height: 7px; border-radius: 50%; background: #4d9a6e; box-shadow: 0 0 0 3px #e1efe5; }
.api-status-offline span { background: #c07a42; box-shadow: 0 0 0 3px #f7e9dc; }

.page-shell { width: min(1184px, calc(100% - 64px)); margin: 0 auto; }
.intro { position: relative; min-height: 230px; margin-top: 34px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.intro-copy { position: relative; z-index: 1; padding: 15px 0 19px; }
.eyebrow, .results-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: 1.45px; }
.eyebrow-dot, .caption-dot { width: 7px; height: 7px; border-radius: 50%; background: #e5a151; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 10px; color: var(--ink); font: 700 42px/1.15 var(--serif); letter-spacing: 0; }
h1 span { color: var(--green); }
.intro-description { margin: 0; color: #697671; font-size: 14px; }
.intro-image { position: absolute; top: 0; right: 0; width: 45%; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #f5f7f4 0%, rgba(245,247,244,.08) 37%, rgba(22,44,36,.03) 100%), url('https://images.unsplash.com/photo-1555881400-74d7acaacd8b?auto=format&fit=crop&w=1100&q=82') center 48% / cover; }
.image-caption { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; color: white; background: rgba(23,43,36,.74); border: 1px solid rgba(255,255,255,.26); border-radius: 4px; font-size: 10px; font-weight: 600; }
.caption-dot { background: #f6bd76; }

.search-form { position: relative; z-index: 2; display: flex; gap: 10px; max-width: 785px; margin: 0 0 42px; padding: 8px; background: white; border: 1px solid #e2e9e3; border-radius: 7px; box-shadow: 0 8px 22px rgba(38,67,53,.06); }
.search-field { min-width: 0; min-height: 44px; flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 11px; }
Expand Down Expand Up @@ -187,8 +182,6 @@ h1 span { color: var(--green); }
.land-two { top: 21%; left: 37%; width: 16%; height: 30%; border-radius: 42% 58% 35% 65%; transform: rotate(9deg); clip-path: polygon(9% 12%,44% 0,71% 15%,100% 44%,73% 72%,62% 100%,39% 84%,22% 64%,0 46%); }
.land-three { top: 22%; right: 8%; width: 38%; height: 48%; border-radius: 50% 47% 35% 55% / 36% 40% 59% 51%; transform: rotate(7deg); clip-path: polygon(5% 18%,30% 7%,52% 0,83% 12%,100% 31%,88% 57%,65% 49%,58% 81%,39% 100%,23% 79%,18% 52%,0 42%); }
.land-four { bottom: 3%; left: 45%; width: 16%; height: 31%; border-radius: 44% 50% 59% 43%; transform: rotate(-14deg); clip-path: polygon(15% 0,74% 9%,100% 38%,76% 66%,64% 100%,42% 80%,33% 52%,0 33%); }
.map-pin { position: absolute; z-index: 1; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: #df9251; box-shadow: 0 1px 5px rgba(39,69,49,.28); }
.pin-one { top: 39%; left: 27%; }.pin-two { top: 31%; left: 48%; }.pin-three { top: 45%; left: 55%; }.pin-four { top: 37%; right: 22%; }.pin-five { bottom: 22%; left: 49%; }
.site-footer { min-height: 83px; display: flex; align-items: center; gap: 17px; margin-top: 25px; border-top: 1px solid var(--line); }
.footer-brand { font-size: 16px; }
.site-footer p { margin: 0; color: #87928b; font-size: 10px; }
Expand Down Expand Up @@ -216,7 +209,6 @@ h1 span { color: var(--green); }
.nav-link { font-size: 11px; }
.login-link { width: 34px; height: 34px; justify-content: center; padding: 0; font-size: 0; }
.login-icon, .login-icon svg { width: 19px; height: 19px; }
.api-status { font-size: 0; }
.page-shell { width: calc(100% - 36px); }
.intro { min-height: 246px; align-items: end; margin-top: 18px; }
.intro-copy { padding: 0 0 22px; }
Expand Down