tblyler/etch
1
0
Fork 0
mirror of https://github.com/LukasJoswiak/etch.git synced 2024-05-17 05:28:31 -04:00
Code Issues Projects Releases Wiki Activity

rename min770px.css to media.css to better reflect its purpose

Browse source
This commit is contained in:
acarril 2023-08-22 15:36:46 -04:00
parent 598f8aeb2c
commit febe518e18
3 changed files with 70 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
assets/css/media.css Normal file
View file

@ -0,0 +1,69 @@
/* Wide width ("desktop" view) */
@media (min-width: 968px) {
body {
width: 800px;
/* line-height: 1.5; */
}
main#content hr {
width: 108%;
margin-left: -3.8%;
}
main#content h3 {
font-size: 20px;
font-size: 2rem;
}
main#content ul#posts {
font-size: 18px;
font-size: 1.8rem;
}
/* single.html styles */
main#content header#post-header h1 {
font-size: 24px;
font-size: 2.4rem;
}
main#content img {
max-width: 108%;
margin-left: -3.8%;
}
main#content figure {
margin-left: -3.8%;
}
main#content figure img {
max-width: 108%;
}
main#content pre {
width: 108%;
margin-left: -3.8%;
padding: 1.5rem 2.2rem;
}
}
/* Mid width ("narrow desktop") with smooth body scaling from 800px to 600px */
@media (min-width: 768px) and (max-width: 967px) {
body {
width: calc(600px + (200 * (100vw - 768px) / 200)); /* This will proportionally increase the width */
}
}
/* Narrow width ("mobile") */
@media (max-width: 767px) {
.landing-page-content {
grid-template-columns: 1fr;
}
.image-content {
max-width: 180px;
margin-left: auto;
margin-right: auto;
}
header#banner h2 {
font-size: 2.1rem;
}
}

58
assets/css/min770px.css
View file

@ -1,58 +0,0 @@
@media (min-width: 768px) and (max-width: 967px) {
body {
width: calc(600px + (200 * (100vw - 768px) / 200)); /* This will proportionally increase the width */
}
}
@media (min-width: 968px) {
body {
width: 800px;
/* line-height: 1.5; */
}
main#content hr {
width: 108%;
margin-left: -3.8%;
}
/* index.html styles */
header#banner h2 {
font-size: 25px;
font-size: 2.5rem;
}
main#content h3 {
font-size: 20px;
font-size: 2rem;
}
main#content ul#posts {
font-size: 18px;
font-size: 1.8rem;
}
/* single.html styles */
main#content header#post-header h1 {
font-size: 24px;
font-size: 2.4rem;
}
main#content img {
max-width: 108%;
margin-left: -3.8%;
}
main#content figure {
margin-left: -3.8%;
}
main#content figure img {
max-width: 108%;
}
main#content pre {
width: 108%;
margin-left: -3.8%;
padding: 1.5rem 2.2rem;
}
}

2
layouts/partials/head.html
View file

@ -16,7 +16,7 @@
{{ $resources = $resources | append (resources.Get "css/main.css") -}}
{{ $resources = $resources | append (resources.Get "css/min770px.css") -}}
{{ $resources = $resources | append (resources.Get "css/media.css") -}}
{{ $dark := .Site.Params.dark | default "auto" -}}
{{ if not (eq $dark "off") -}}