redstrate/redstrate.com
1
Fork 0
Code Activity Actions

Improve site resizing, and image viewing

Browse source 
Images are no longer super blown up on desktop devices, images are
now limited in size according to the current article width. On
large displays, the article width is now limited so the text is
actually readable.
This commit is contained in:
Joshua Goins 2022-11-06 22:08:00 -05:00
parent f131b7aa12
commit 7cb42d47f3
2 changed files with 20 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
themes/red/assets/css/site.css
View file

@ -1,15 +1,13 @@
/* desktop devices */ /* desktop devices */
@media (min-width: 768px) { @media (min-width: 768px) {
aside {
flex: 200px 0 0;
}
header { header {
margin: 10px; margin: 10px;
} }
aside { aside {
margin: 10px; margin: 10px;
flex: 15em 0 0;
} }
article { article {
@ -19,14 +17,17 @@
footer { footer {
margin: 10px; margin: 10px;
} }
#content {
display: flex;
flex-direction: row;
max-width: 100em;
}
} }
/* mobile devices */ /* mobile devices */
@media (max-width: 768px) { @media (max-width: 768px) {
aside {
width: 100%;
}
aside div { aside div {
padding: 2px; padding: 2px;
} }
@ -42,12 +43,10 @@ body {
background-color: var(--background-primary); background-color: var(--background-primary);
accent-color: var(--accent-color); accent-color: var(--accent-color);
display: flex;
flex-flow: row wrap;
color: var(--text-color); color: var(--text-color);
} }
:root { :root {
--primary-accent: #9f5858; --primary-accent: #9f5858;
--secondary-accent: #c99192; --secondary-accent: #c99192;
@ -107,7 +106,8 @@ article {
padding: 15px; padding: 15px;
flex: 2 0; min-width: 0;
flex: 1 1 auto;
} }
footer { footer {
@ -130,16 +130,17 @@ footer {
margin-bottom: 5px; margin-bottom: 5px;
} }
.article-img {
width: 100%;
height: auto;
}
.gallery-img { .gallery-img {
border: 1px black solid; border: 1px black solid;
border-radius: 5px; border-radius: 5px;
} }
.article-img {
max-width: 100%;
max-height: 100%;
height: auto;
}
figure { figure {
flex-grow: 1; flex-grow: 1;
text-align: center; text-align: center;

2
themes/red/layouts/_default/baseof.html
View file

@ -3,8 +3,10 @@
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body> <body>
<header>{{- partial "header.html" . -}}</header> <header>{{- partial "header.html" . -}}</header>
<div id="content">
<aside>{{- partial "sidebar.html" . -}}</aside> <aside>{{- partial "sidebar.html" . -}}</aside>
<article>{{- block "main" . }}{{- end }}</article> <article>{{- block "main" . }}{{- end }}</article>
</div>
<footer>{{- partial "footer.html" . -}}</footer> <footer>{{- partial "footer.html" . -}}</footer>
</body> </body>
</html> </html>