kennethnym/7am
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

improve website style

Browse Source
This commit is contained in:
Kenneth
2025-05-10 16:21:43 +01:00
parent 0ffd6b9b94
commit 3b00a71391
4 changed files with 80 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/index.html
View File

@@ -7,25 +7,36 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
<link href="/style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<h1>7am</h1>
<h2>Daily weather updates delivered to you at 7am.</h2>
<hr class="divider" />
<ul>
<li><a href="/london">London</a></li>
<li><a href="/sf">San Francisco</a></li>
<li><a href="/sj">San Jose</a></li>
<li><a href="/la">Los Angeles</a></li>
<li><a href="/nyc">New York City</a></li>
<li><a href="/tokyo">Tokyo</a></li>
</ul>
</main>
<div class="container">
<header>
<h1>7am</h1>
<h2>Daily weather updates delivered to you at 7am.</h2>
</header>
<main>
<hr class="divider" />
<ul>
<li><a href="/london">London</a></li>
<li><a href="/sf">San Francisco</a></li>
<li><a href="/sj">San Jose</a></li>
<li><a href="/la">Los Angeles</a></li>
<li><a href="/nyc">New York City</a></li>
<li><a href="/tokyo">Tokyo</a></li>
</ul>
</main>
<footer>
<p>
Source code:&nbsp;<a href="https://github.com">GitHub</a>
</p>
</footer>
</div>
</body>
</html>

40
web/style.css
View File

@@ -17,14 +17,27 @@
html, body {
font-family: Geist, sans-serif;
width: 100%;
padding-top: 4rem;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--background-color);
color: var(--text-color);
}
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
padding-top: 8rem;
padding-left: 1rem;
padding-right: 1rem;
}
h1 {
font-weight: bolder;
font-size: 1em;
@@ -57,11 +70,12 @@ a {
hr.divider {
border-color: var(--text-color);
margin: 1.5rem 0;
width: 100%;
}
main {
padding-left: 1rem;
padding-right: 1rem;
width: 100%;
flex: 1;
}
button {
@@ -73,7 +87,25 @@ button {
font-weight: bold;
}
footer {
padding-top: 2rem;
padding-bottom: 4rem;
opacity: 80%;
font-size: 0.8em;
display: flex;
flex-direction: column;
justify-content: center;
}
footer > p {
margin: 0;
}
.summary {
max-width: 30ch;
font-size: 2em;
}
.back-link {
font-size: 0.8em;
}

13
web/summary.html
View File

@@ -7,16 +7,19 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
<link href="/style.css" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<p class="summary">{{.Summary}}</p>
<button type="button" id="get-summary-btn" data-loc="{{.Location}}">Get daily updates at 7am</button>
</main>
<div class="container">
<main>
<a href="/">&lt;- All locations</a>
<p class="summary">{{.Summary}}</p>
<button type="button" id="get-summary-btn" data-loc="{{.Location}}">Get daily updates at 7am</button>
</main>
</div>
<script src="/summary.js"></script>
</body>