james/howfeed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

possibly helping responsiveness

Browse Source
This commit is contained in:
James Shiffer 2020-06-05 00:24:24 -07:00
parent d4f976cd43
commit d55696e301
5 changed files with 44 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Nav.svelte
View File

@ -26,16 +26,21 @@
} }
div.link a { div.link a {
text-decoration: none; text-decoration: none;
font-size: 2rem; font-size: 1.5rem;
} }
img.wordmark { img.wordmark {
height: 3rem; height: 3rem;
max-width: 100%;
object-fit: contain;
} }
@media (min-width: 640px) { @media (min-width: 800px) {
div.items { div.items {
flex-direction: row; flex-direction: row;
align-items: end; align-items: end;
} }
div.link a {
font-size: 2rem !important;
}
} }
</style> </style>

2
src/routes/_error.svelte
View File

@ -20,7 +20,7 @@
margin: 1em auto; margin: 1em auto;
} }
@media (min-width: 640px) { @media (min-width: 800px) {
h1 { h1 {
font-size: 4em; font-size: 4em;
} }

2
src/routes/a/[slug].svelte
View File

@ -52,7 +52,7 @@
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
} }
@media (min-width: 640px) { @media (min-width: 800px) {
.content { .content {
width: 75vw; width: 75vw;
} }

11
src/routes/index.svelte
View File

@ -25,11 +25,11 @@
margin: 0; margin: 0;
} }
img { img {
width: 100%; object-fit: contain;
max-width: 640px; max-width: 100%;
margin: 1rem; margin: 1rem;
} }
@media (min-width: 640px) { @media (min-width: 800px) {
div.homepage { div.homepage {
padding-top: 5rem !important; padding-top: 5rem !important;
} }
@ -70,7 +70,7 @@
} }
h1.welcome { h1.welcome {
margin-top: 1rem; margin-top: 1rem;
font-size: 4rem; font-size: 3.75rem;
} }
h2 { h2 {
text-transform: uppercase; text-transform: uppercase;
@ -79,6 +79,9 @@
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
div.article-list {
box-shadow: 0 0 5px #000;
}
</style> </style>
<svelte:head> <svelte:head>

33
static/global.css
View File

@ -33,26 +33,44 @@ code {
border-radius: 2px; border-radius: 2px;
} }
@media (min-width: 640px) { @media (min-width: 800px) {
body { body {
font-size: 16px; font-size: 16px;
} }
.content { .content {
margin: 8rem auto !important; margin: 8rem auto !important;
} }
.article-title {
font-size: 4rem !important;
}
.article-date {
font-size: 2rem !important;
}
figure.article-image img {
height: 12rem !important;
}
div.article-list > a {
margin: 2rem !important;
}
div.article-meta {
margin: 2rem;
}
div.article-list {
padding: 2rem 1rem;
}
} }
div.article-list { div.article-list {
padding: 1rem;
background: #508FC3; background: #508FC3;
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
padding: 2rem 1rem;
} }
div.article-list > a { div.article-list > a {
margin: 0;
display: flex; display: flex;
text-decoration: none; text-decoration: none;
flex-direction: row; flex-direction: row;
margin: 2rem;
align-items: start; align-items: start;
} }
figure.article-image { figure.article-image {
@ -63,22 +81,23 @@ figure.article-image {
width: 33.33%; width: 33.33%;
} }
figure.article-image img { figure.article-image img {
height: 12rem; height: 6rem;
width: auto; width: auto;
} }
div.article-meta { div.article-meta {
margin: 1rem;
background: white; background: white;
margin: 2rem; margin-right: 0;
padding: 0.75rem; padding: 0.75rem;
line-height: 1; line-height: 1;
font-weight: bold; font-weight: bold;
flex: 1 0 0; flex: 1 0 0;
} }
.article-title { .article-title {
font-size: 4rem; font-size: 2rem;
} }
.article-date { .article-date {
font-size: 2rem; font-size: 1rem;
} }
.content { .content {