lots of ie 11 support and less css sloppiness
This commit is contained in:
James Shiffer
parent
888001aea2
commit
9be3f1096c
1959
package-lock.json
generated
1959
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
30
package.json
30
package.json
@ -12,39 +12,39 @@
|
||||
"test": "run-p --race dev cy:run"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/polyfill": "^7.10.1",
|
||||
"@babel/runtime": "^7.10.3",
|
||||
"bcrypt": "^4.0.1",
|
||||
"body-parser": "^1.19.0",
|
||||
"cl-editor": "^2.0.0",
|
||||
"cl-editor": "^2.1.0",
|
||||
"compression": "^1.7.1",
|
||||
"cookie-parser": "^1.4.5",
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^8.2.0",
|
||||
"express": "^4.17.1",
|
||||
"express-fileupload": "^1.1.6",
|
||||
"express-fileupload": "^1.2.0",
|
||||
"express-session": "^1.17.1",
|
||||
"helmet": "^3.23.2",
|
||||
"mongoose": "^5.9.18",
|
||||
"helmet": "^3.23.3",
|
||||
"mongoose": "^5.10.2",
|
||||
"mongoose-fuzzy-searching": "^1.3.1",
|
||||
"passport": "^0.4.1",
|
||||
"passport-local": "^1.0.0",
|
||||
"rate-limiter-flexible": "^2.1.7",
|
||||
"rate-limiter-flexible": "^2.1.10",
|
||||
"session-file-store": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.10.3",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.10.3",
|
||||
"@babel/core": "^7.11.4",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.11.0",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/plugin-transform-runtime": "^7.10.3",
|
||||
"@babel/preset-env": "^7.10.3",
|
||||
"@babel/plugin-transform-runtime": "^7.11.0",
|
||||
"@babel/preset-env": "^7.11.0",
|
||||
"babel-loader": "^8.1.0",
|
||||
"core-js": "^3.6.5",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"sapper": "^0.27.0",
|
||||
"svelte": "^3.0.0",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"sapper": "^0.27.16",
|
||||
"svelte": "^3.24.1",
|
||||
"svelte-loader": "^2.9.0",
|
||||
"terser-webpack-plugin": "^3.0.6",
|
||||
"webpack": "^4.43.0"
|
||||
"terser-webpack-plugin": "^3.1.0",
|
||||
"webpack": "^4.44.1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
import 'core-js/stable';
|
||||
import 'regenerator-runtime/runtime';
|
||||
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
sapper.start({
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<style>
|
||||
footer {
|
||||
div.footer {
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
@ -12,6 +12,6 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<footer>
|
||||
<div class="footer">
|
||||
Copyright © {new Date().getFullYear()} FemboyFinancial Holdings Co., Ltd. (USA LLC). All rights reserved.
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@ -3,17 +3,10 @@
|
||||
const { session } = stores();
|
||||
|
||||
let query = '';
|
||||
|
||||
function search(e)
|
||||
{
|
||||
if (e.keyCode === 13) {
|
||||
goto(`/search/${encodeURIComponent(query)}`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
div.nav {
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
padding: 0.5rem;
|
||||
@ -49,35 +42,6 @@
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
div.wordmark {
|
||||
width: 15rem !important;
|
||||
}
|
||||
div.items {
|
||||
flex-direction: row;
|
||||
}
|
||||
div.link a {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
div.items > div {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
input.search {
|
||||
height: 2.75rem !important;
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
div.wordmark {
|
||||
width: 17.5rem !important;
|
||||
}
|
||||
div.link a {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
div.items > div {
|
||||
margin: 0 2rem !important;
|
||||
}
|
||||
}
|
||||
div.search {
|
||||
flex: 1 1 0;
|
||||
min-width: 8rem;
|
||||
@ -99,13 +63,48 @@
|
||||
font-weight: bold;
|
||||
font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
div.wordmark {
|
||||
width: 15rem;
|
||||
}
|
||||
div.items {
|
||||
flex-direction: row;
|
||||
}
|
||||
div.link a {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
div.items > div {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
input.search {
|
||||
height: 2.75rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
div.wordmark {
|
||||
width: 17.5rem;
|
||||
}
|
||||
div.link a {
|
||||
font-size: 2rem;
|
||||
}
|
||||
div.items > div {
|
||||
margin: 0 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<nav>
|
||||
<div class="nav">
|
||||
<div class="items">
|
||||
<div class="wordmark"><a href="/"><img class="wordmark" src="/logo.png" alt="HowFeed.biz"></a></div>
|
||||
<div class="search">
|
||||
<input class="search" on:keyup={search} bind:value={query} type="text" placeholder="Search">
|
||||
<form action="/search" method="GET">
|
||||
<input class="search" on:keyup={e => {
|
||||
if (e.keyCode === 13) {
|
||||
e.target.parentElement.submit();
|
||||
}
|
||||
}} type="text" placeholder="Search" name="query">
|
||||
</form>
|
||||
</div>
|
||||
{#if !$session.user}
|
||||
<div class="link"><a href="/contact">Contact Us</a></div>
|
||||
@ -114,4 +113,4 @@
|
||||
<div class="link"><a href="/cms/logout">Logout</a></div>
|
||||
{/if}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
main {
|
||||
div.main {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
<Nav />
|
||||
|
||||
<main>
|
||||
<div class="main">
|
||||
<slot></slot>
|
||||
<Footer />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@ -87,30 +87,17 @@
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.content {
|
||||
width: 75vw;
|
||||
}
|
||||
form input, form textarea {
|
||||
width: 25% !important;
|
||||
}
|
||||
figure.article-image {
|
||||
height: 24rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
figure.article-image {
|
||||
div.article-image {
|
||||
height: 12rem;
|
||||
width: auto !important;
|
||||
width: auto;
|
||||
margin: -2rem;
|
||||
margin-bottom: 1rem;
|
||||
background: #81b0cd;
|
||||
}
|
||||
|
||||
figure.article-image img {
|
||||
max-height: 100%;
|
||||
div.article-image img {
|
||||
box-shadow: -5px 5px 1rem black;
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div.article-meta {
|
||||
@ -158,6 +145,18 @@
|
||||
div.comment-content {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.content {
|
||||
width: 75vw;
|
||||
}
|
||||
form input, form textarea {
|
||||
width: 25%;
|
||||
}
|
||||
div.article-image {
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
@ -165,9 +164,9 @@
|
||||
</svelte:head>
|
||||
|
||||
<div class="content">
|
||||
<figure class="article-image">
|
||||
<div class="article-image">
|
||||
<img alt={article.title} src={`/a/${article.image}`}>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="article-meta">
|
||||
<h1 class="article-title">{article.title}</h1>
|
||||
<blockquote>
|
||||
|
||||
@ -32,12 +32,12 @@
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
h1 {
|
||||
font-size: 4rem !important;
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
h1 {
|
||||
font-size: 8rem !important;
|
||||
font-size: 8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -53,9 +53,9 @@
|
||||
<div class="article-list">
|
||||
{#each articles as {title, slug, image, created_at}}
|
||||
<a rel="prefetch" href={`/a/${slug}`}>
|
||||
<figure class="article-image">
|
||||
<div class="article-image">
|
||||
<img src={image ? `/a/${image}` : '/logo.png'} alt={title}>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="article-meta">
|
||||
<p class="article-title">{title}</p>
|
||||
<p class="article-date">{new Date(created_at).toLocaleDateString()}</p>
|
||||
|
||||
@ -11,6 +11,9 @@
|
||||
flex: 1 0 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
iframe {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="content">
|
||||
|
||||
@ -19,23 +19,6 @@
|
||||
h1, h2, p {
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
h1.welcome {
|
||||
font-size: 8rem !important;
|
||||
display: block !important;
|
||||
}
|
||||
h2.desc {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
h1.welcome {
|
||||
font-size: 10rem !important;
|
||||
}
|
||||
h2.desc {
|
||||
font-size: 3.5rem !important;
|
||||
}
|
||||
}
|
||||
h1.welcome {
|
||||
margin: 1rem 0;
|
||||
font-size: 3.75rem;
|
||||
@ -48,6 +31,23 @@
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
h1.welcome {
|
||||
font-size: 8rem;
|
||||
display: block;
|
||||
}
|
||||
h2.desc {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
h1.welcome {
|
||||
font-size: 10rem;
|
||||
}
|
||||
h2.desc {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
@ -60,9 +60,9 @@
|
||||
<div class="article-list">
|
||||
{#each articles as {title, slug, image, created_at}}
|
||||
<a rel="prefetch" href={`/a/${slug}`}>
|
||||
<figure class="article-image">
|
||||
<div class="article-image">
|
||||
<img src={image ? `/a/${image}` : '/logo.png'} alt={title}>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="article-meta">
|
||||
<p class="article-title">{title}</p>
|
||||
<p class="article-date">{new Date(created_at).toLocaleDateString()}</p>
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
<script context="module">
|
||||
export async function preload({ params })
|
||||
{
|
||||
let query = params.query;
|
||||
const res = await this.fetch(`/search.json?query=${encodeURIComponent(query)}`);
|
||||
const json = await res.json();
|
||||
if (res.status === 200) {
|
||||
return { query, results: json };
|
||||
} else {
|
||||
this.error(res.status, res.message);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export let query;
|
||||
export let results;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
margin: 0 auto;
|
||||
margin-top: 1rem;
|
||||
font-size: 2rem;
|
||||
font-size: 3rem;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
max-width: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>Search Results for: {query} | HOWFEED.BIZ</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="background"></div>
|
||||
<div class="floaty">
|
||||
<h1>Search Results for: {query}</h1>
|
||||
<div class="article-list">
|
||||
{#each results as {title, slug, image, created_at}}
|
||||
<a rel="prefetch" href={`/a/${slug}`}>
|
||||
<figure class="article-image">
|
||||
<img src={image ? `/a/${image}` : '/logo.png'} alt={title}>
|
||||
</figure>
|
||||
<div class="article-meta">
|
||||
<p class="article-title">{title}</p>
|
||||
<p class="article-date">{new Date(created_at).toLocaleDateString()}</p>
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<p>No results found :(</p>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@ -1,18 +1,68 @@
|
||||
<script>
|
||||
import { goto } from '@sapper/app';
|
||||
<script context="module">
|
||||
export async function preload({ query })
|
||||
{
|
||||
if (query && query.query) {
|
||||
let q = query.query;
|
||||
const res = await this.fetch(`/search.json?query=${encodeURIComponent(q)}`);
|
||||
const json = await res.json();
|
||||
if (res.status === 200) {
|
||||
return { query: q, results: json };
|
||||
} else {
|
||||
this.error(res.status, res.message);
|
||||
}
|
||||
} else {
|
||||
return { query: null, results: [] };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
let query = '';
|
||||
<script>
|
||||
export let query;
|
||||
export let results;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
input {
|
||||
width: 440px;
|
||||
h1 {
|
||||
margin: 1rem auto;
|
||||
font-size: 2rem;
|
||||
font-size: 3rem;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
max-width: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>{query ? `Search Results for: ${query}` : 'Search Results'} | HOWFEED.BIZ</title>
|
||||
</svelte:head>
|
||||
|
||||
{#if query}
|
||||
<div class="background"></div>
|
||||
<div class="floaty">
|
||||
<h1>Search Results for: {query}</h1>
|
||||
<div class="article-list">
|
||||
{#each results as {title, slug, image, created_at}}
|
||||
<a rel="prefetch" href={`/a/${slug}`}>
|
||||
<div class="article-image">
|
||||
<img src={image ? `/a/${image}` : '/logo.png'} alt={title}>
|
||||
</div>
|
||||
<div class="article-meta">
|
||||
<p class="article-title">{title}</p>
|
||||
<p class="article-date">{new Date(created_at).toLocaleDateString()}</p>
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<p>No results found :(</p>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="content">
|
||||
<h1>Search Results</h1>
|
||||
<p>You haven't entered any search terms.</p>
|
||||
<input type="text" placeholder="Search Articles" bind:value={query}>
|
||||
<button type="submit" on:click={() => { goto(`/search/${encodeURIComponent(query)}`); }}>Search</button>
|
||||
<form action="/search" method="GET">
|
||||
<input type="text" placeholder="Search Articles" name="query">
|
||||
<button type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -6,26 +6,23 @@
|
||||
<meta name='description' content='HOWFEED.BIZ: Helping you to navigate a modern world.'>
|
||||
<meta name='keywords' content='news, satire, blog'>
|
||||
<meta name='theme-color' content='#508FC3'>
|
||||
%sapper.base%
|
||||
%sapper.base%
|
||||
<link rel='stylesheet' href='global.css'>
|
||||
<link rel='icon' type='image/png' href='favicon.png'>
|
||||
%sapper.styles%
|
||||
%sapper.head%
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-175013738-1"></script>
|
||||
<script>window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-175013738-1');
|
||||
</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexibility/2.0.1/flexibility.js"></script>
|
||||
gtag('config', 'UA-175013738-1');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id='hydrate'>%sapper.html%</div>
|
||||
%sapper.scripts%
|
||||
<script type="text/javascript">
|
||||
flexibility(document.documentElement);
|
||||
</script>
|
||||
%sapper.scripts%
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -34,44 +34,6 @@ code {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
.content {
|
||||
margin: 8rem auto !important;
|
||||
}
|
||||
.article-title {
|
||||
font-size: 3rem !important;
|
||||
}
|
||||
.article-date {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
div.article-list > a {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
div.article-meta {
|
||||
margin: 2rem !important;
|
||||
margin-right: 0 !important;
|
||||
padding-top: 0.75rem !important;
|
||||
}
|
||||
div.article-list {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
div.floaty {
|
||||
padding-top: 5rem !important;
|
||||
}
|
||||
figure.article-image {
|
||||
max-height: 300px !important;
|
||||
width: 33.33% !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.article-title {
|
||||
font-size: 4rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
div.article-list {
|
||||
padding: 1rem;
|
||||
background: #508FC3;
|
||||
@ -87,20 +49,23 @@ div.article-list > a {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
figure.article-image {
|
||||
div.article-image {
|
||||
background: white;
|
||||
-js-display: flex;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
max-height: 200px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
figure.article-image img {
|
||||
div.article-image img {
|
||||
display: block;
|
||||
width: auto;
|
||||
object-fit: cover;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
max-height: 168px;
|
||||
}
|
||||
div.article-meta {
|
||||
background: white;
|
||||
@ -108,6 +73,8 @@ div.article-meta {
|
||||
padding-top: 0;
|
||||
line-height: 1;
|
||||
flex: 1 0 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
.article-title {
|
||||
@ -150,3 +117,44 @@ img.avatar {
|
||||
width: 48px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
.content {
|
||||
margin: 8rem auto;
|
||||
}
|
||||
.article-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.article-date {
|
||||
font-size: 2rem;
|
||||
}
|
||||
div.article-list > a {
|
||||
flex-direction: row;
|
||||
}
|
||||
div.article-meta {
|
||||
margin: 2rem;
|
||||
margin-right: 0;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
div.article-list {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
div.floaty {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
div.article-image {
|
||||
max-height: 300px;
|
||||
width: 33.33%;
|
||||
}
|
||||
div.article-image img {
|
||||
max-height: 268px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.article-title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@ module.exports = {
|
||||
options: {
|
||||
presets: [
|
||||
['@babel/preset-env', {
|
||||
targets: '> 0.25%, ie >= 6, not dead'
|
||||
targets: '> 0.25%, ie >= 8, not dead'
|
||||
}]
|
||||
],
|
||||
plugins: [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user