1
0
mirror of https://github.com/comatory/fb2iCal synced 2025-02-26 08:27:40 +01:00

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) => { self.addEventListener('install', (event) => {
event.waitUntil( event.waitUntil(
@ -7,8 +7,9 @@ self.addEventListener('install', (event) => {
'/', '/',
'/favicon.ico', '/favicon.ico',
'/scripts.js?3', '/scripts.js?3',
'/style.css?4', '/style.css?5',
'/about?2', '/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) { @media screen and (max-width: 500px) {
h1 { h1 {
font-size: 1.6rem; font-size: 1.6rem;
margin: 0; margin: 0;
} }
article#main, input {
font-size: 1.1rem;
}
img#logo {
width: 64px;
height: 64px;
}
} }
/* Mobile screen query */
@media screen and (max-width: 320px) { @media screen and (max-width: 320px) {
h1 { h1 {
font-size: 1.1rem; font-size: 1.2rem;
margin: 0; margin: 0;
} }
article#main, input {
font-size: 1.2rem;
}
img#logo {
width: 32px;
height: 32px;
}
} }
body { body {
font-family:-apple-system; "system";
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
@ -23,6 +57,11 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
header {
display: flex;
align-items: center;
}
footer { footer {
background-color: #fff; background-color: #fff;
} }
@ -31,7 +70,11 @@ article#main {
flex: 1; flex: 1;
} }
p, input, table, button, label { img#logo {
margin: 5px;
}
input {
font-size: 1rem; font-size: 1rem;
} }
@ -76,6 +119,9 @@ input#url {
.status-item { .status-item {
display: none; display: none;
min-width: 200px; min-width: 200px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} }
.show { .show {

View File

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

View File

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