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: 2020-10-07