Skip to content

Website

Layered Dreamy Drop Shadow For Images#

Add the following .css code to your stylesheet to add beautiful dreamy drop shadows to images: 

1
2
3
4
5
6
7
8
img {
    box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
                0 2px 4px rgba(0,0,0,0.07), 
                0 4px 8px rgba(0,0,0,0.07), 
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07), 
                0 32px 64px rgba(0,0,0,0.07);
}

Improve Font Rendering#

Add the following .css code to your stylesheet to improve font-rendering (probably does not work on all devices and browsers): 

1
2
3
4
5
6
7
* {
    font-smooth: auto;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: optimizeLegibility;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

Improve Page Speed#

  1. Create the .htaccess text file in the root directory of the web server.
  2. Paste the following config into the file: 
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    # Activate gzip compression of text
mod_gzip_on Yes

# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot 
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType image/svg+xml .svg

# Create file hashes based on the modification time and size.
# If the modification time or size of the file changes
# the existing cache is invalidated on the user's web browser
FileETag MTime Size

# Configure expiry periods
ExpiresActive On
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/x-icon "access plus 1 months"
ExpiresByType application/vnd.ms-fontobject "access plus 1 years"
ExpiresByType application/x-font-ttf "access plus 1 years"
ExpiresByType application/x-font-opentype "access plus 1 years"
ExpiresByType application/x-font-woff "access plus 1 years"
ExpiresByType application/x-font-woff2  "access plus 1 years"
ExpiresByType image/svg+xml "access plus 1 years"

HEAD Meta#

Minimum#

1
2
3
4
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Marvin's Digital Garden</title>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Marvin's Digital Garden</title>

<meta name="theme-color" content="#108761">
<meta name="application-name" content="Marvin's Digital Garden">

<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">

<meta name="rating" content="General">
<meta name="referrer" content="no-referrer">

<link rel="license" href="/license/">
<link rel="me" href="mailto:contact@marvin-elsen.com">

Set Table Width to 100%#

To stretch every table to 100% of its available width in Material for MkDocs add the following to your extra.css stylesheet.

1
2
3
4
5
6
7
.md-typeset__table {
   min-width: 100%;
}

.md-typeset table:not([class]) {
    display: table;
}
  • https://securitytxt.org/
  • https://spacehost.de/10-apache-header-eintraege-webseite-sicher-machen/
  • https://www.strato.de/faq/hosting/wie-kann-ich-die-htaccess-anpassen/

Tests For This Website#

References#

Last update: January 29, 2021
Authors: Marvin Elsen