Comments (2)
By the same reasons and to improve readability, I made some extra styles.
But also moved Profile panel to right side in full mode and made some modifications for print, e-ink.
But some Kindle readers still ignore media requests and absolutely remove space around article (page borders/margins/paddings).
My customizations
.app-header {
left: unset;
right: 0;
}
.app-container {
max-width: 1100px;
margin: 0 auto;
}
.post,
.posts-list-item {
font-size: 1.6em;
}
.post-meta {
font-size: 0.4em;
text-align: end;
}
pre {
font-size: 1.4rem;
code {
font-size: 1em;
}
}
@media (max-width: 1680px) {
.app-container {
margin-right: 22rem;
margin-left: calc(75% - 65rem);
max-width: calc(100% - 20rem);
}
}
@media (max-width: 1366px) {
html {
line-height: 1.3;
font-size: 1em;
}
.app-header {
position: relative;
right: unset;
width: 100%;
min-height: 14rem;
top: 0px;
padding: 1.2em;
.app-header-avatar {
width: 5rem;
height: 5rem;
border: .1rem;
}
.app-header-title {
font-size: 1.2em;
}
.app-header-social {
font-size: 1.4em;
}
}
.app-container {
max-width: 100%;
margin: 0 0;
padding: 0.7rem 1.5rem;
}
}
@media only screen and (max-width: 600px) {
pre {
font-size: 1.2rem;
code {
font-size: 1.0em;
}
}
.post,
.posts-list-item {
font-size: 1.2em;
}
}
// styles for Print and e-books (include 4096 colors)
@media print, monochrome, (hover: none) and (any-pointer: none) {
body {
color: #000000;
background: #ffffff;
}
.app-header {
background-color: inherit;
line-height: 0.8em;
padding: 0.5em;
min-height: 7rem;
.app-header-avatar {
display: none;
}
.app-header-title {
color: unset;
}
}
a {
color: #1c4c31;
}
.post-title, h1, h2, h3, h4 {
color: #000000;
}
.app-container {
padding: 0 1.5rem;
pre {
color: #1c4c31 !important;
background-color: unset !important;
font-size: 1.2rem;
}
code {
background-color: unset;
color: #1c4c31 !important;
white-space: pre-wrap;
font-size: 1.0em;
span {
color: #1c4c31 !important;
}
}
.post,
.posts-list-item {
font-size: 1.2em;
}
}
}
@media print {
.app-header {
display: none;
}
.app-container {
margin-top: 0vh;
}
}
from hugo-theme-m10c.
I have used a slightly different approach for mobile headers: On the homepage I show the image; on other pages I don't. Feels like a reasonable compromise for me
from hugo-theme-m10c.
Related Issues (20)
- Add top ten topics to menu section
- Put about section as home HOT 1
- RSS link tags missing in the <head>
- Add Persistent HTML to index
- Add a demo
- Table formatting
- 🐞 Bug: Tags list line break does not work.
- app-header-menu-item CSS class does not exist
- Table of content
- add support for _index.md HOT 1
- maybe add Matrix and Pleroma logo? HOT 1
- Rendering works in local server, fails in site generation HOT 1
- Xing Icon HOT 1
- Create functionality to add footer HOT 1
- Add custom icons HOT 6
- Module Error HOT 2
- m10c is not compatible with Hugo v0.104 HOT 4
- --minify breaks space between elements HOT 3
- Module "m10c" is not compatible with Hugo v0.105.0 HOT 2
- Enable description to be displayed under title in the posts list page
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hugo-theme-m10c.