little styling touches

This commit is contained in:
Ondrej Synacek 2019-10-24 21:29:28 +02:00
parent 1302433f7f
commit bdd80ca1c4
4 changed files with 54 additions and 6 deletions

View File

@ -1,4 +1,4 @@
// Worker v5
// Worker v7
self.addEventListener('install', (event) => {
event.waitUntil(
@ -7,8 +7,9 @@ self.addEventListener('install', (event) => {
'/',
'/favicon.ico',
'/scripts.js?3',
'/style.css?4',
'/style.css?5',
'/about?2',
'/icon-512.png',
])
})
)

View File

@ -1,18 +1,52 @@
/* Define platform-specific typefaces */
@font-face {
font-family: system;
font-style: normal;
font-weight: 300;
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}
/* Web query */
@media screen and (min-width: 501px) {
img#logo {
width: 72px;
height: 72px;
}
}
/* Mobile screen+ query */
@media screen and (max-width: 500px) {
h1 {
font-size: 1.6rem;
margin: 0;
}
article#main, input {
font-size: 1.1rem;
}
img#logo {
width: 64px;
height: 64px;
}
}
/* Mobile screen query */
@media screen and (max-width: 320px) {
h1 {
font-size: 1.1rem;
font-size: 1.2rem;
margin: 0;
}
article#main, input {
font-size: 1.2rem;
}
img#logo {
width: 32px;
height: 32px;
}
}
body {
font-family:-apple-system; "system";
display: flex;
flex-direction: column;
min-height: 100vh;
@ -23,6 +57,11 @@ body {
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
}
footer {
background-color: #fff;
}
@ -31,7 +70,11 @@ article#main {
flex: 1;
}
p, input, table, button, label {
img#logo {
margin: 5px;
}
input {
font-size: 1rem;
}
@ -76,6 +119,9 @@ input#url {
.status-item {
display: none;
min-width: 200px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.show {

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/style.css?3">
<link rel="stylesheet" type="text/css" href="/style.css?5">
<link rel="apple-touch-icon" sizes="180x180" href="/icon-180.png">
<title>Facebook Events to iCal Converter | about</title>
</head>

View File

@ -5,13 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" sizes="180x180" href="/icon-180.png">
<link rel="stylesheet" type="text/css" href="/style.css?3">
<link rel="stylesheet" type="text/css" href="/style.css?5">
<title>Facebook Event to iCal Converter</title>
</head>
<body>
<header>
<a id="current-download" href="javascript:void(0)"></a>
<img id="logo" src="/icon-512.png" />
<h1>Facebook Events to iCal Converter</h1>
</header>