-
Notifications
You must be signed in to change notification settings - Fork 2
/
fensterbilder.html
182 lines (156 loc) · 12.5 KB
/
fensterbilder.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="de" prefix="og: http://ogp.me/ns#">
<!--
Hallo Fremde:r,
schön, dass du dich umschaust! Falls du Fragen hast oder wissen
möchtest, wie bestimmte Sachen auf meiner Website funktionieren,
schreib doch einfach an postfach2b [ät] web.de oder sende einen
Post an @[email protected].
Weiterhin viele schöne Entdeckungen!
-->
<head>
<meta charset="UTF-8">
<title>Bilder für die da draußen // @cz+</title>
<link href='bestand/style.css' rel='stylesheet'>
<link href="bestand/czSlab.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="https://charakterziffer.github.io/rss.xml" rel="alternate" type="application/rss+xml" title="@cz+ Blogartikel">
<link rel="icon" href="/bestand/favicon.png">
<link rel="apple-touch-icon" href="/bestand/touchicon.png">
<meta name="theme-color" content="#228811">
<meta name="color-scheme" content="light dark">
<meta name="description" content="Fürs Fenster meines Arbeitszimmers male ich monatlich ein neues Bild. Eine kreative Motivation für mich, ein kleiner Hingucker für Passanten.">
<meta name="author" content="Gerhard Großmann, postfach2b [ät] web.de">
<meta name="fediverse:creator" content="[email protected]" />
<meta name="keywords" content="Gerhard Großmann, Regensburg, Hohenfels, charakterziffer, Blog, Twitter, Mastodon">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="referrer" content="strict-origin">
<style> /* QR-Code mit URL für Ausdrucke, siehe smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ */
@media print { header:after {
content: url('https://chart.googleapis.com/chart?cht=qr&chs=110x110&chl=https://charakterziffer.github.io/fensterbilder.html&choe=UTF-8');
position: absolute; right: .5em; top:.2em; z-index:-1; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } </style>
<meta property="og:image" content="https://charakterziffer.github.io/bestand/cz200x200.jpg">
</head>
<body>
<header>
<a title="Zur Startseite" href="https://charakterziffer.github.io/"><img src="https://charakterziffer.github.io/bestand/favicon.png" width="59.8" height="59.8" alt="">@charak<br>terziffer</a>
<div>
<form id="suchform" method="GET" action="https://duckduckgo.com/" onsubmit="javascript:document.getElementById('q').value = document.getElementById('keyword').value + ' site:charakterziffer.github.io'">
<input type="text" id="keyword" placeholder="Suche mit DuckDuckGo" aria-label="Seite extern durchsuchen mit DuckDuckGo">
<input type="hidden" id="q" name="q">
<input type="hidden" name="kl" value="de-de">
<input type="hidden" name="kj" value="281">
<input type="hidden" name="kx" value="666">
<input type="hidden" name="k9" value="281">
<input type="hidden" name="kaa" value="839">
<input type="hidden" name="ka" value="Source Sans Pro">
<input type="submit" value="🔍" aria-label="Suchen">
</form>
<nav class="no-hyphens no-print"><ul>
<li><a href="/archiv.html">Archiv</a></li>
<li><a href="/extra/index.html">Extra</a></li>
<li><a href="/rss.xml">RSS</a></li>
<li><a href="/index.html#impressum">Impressum</a></li>
</ul></nav>
</div>
</header>
<main>
<article>
<time datetime="2022-11-15">Di, 15. Nov. 2022</time>
<h1>Bilder für die da draußen</h1>
<p>Mein Arbeitszimmer hat zur Straße hin ein recht breites Fenster. Seit letztem Jahr hänge ich monatlich ein neues Bild an die Scheibe und wer draußen vorbeiläuft, kann es sehen und freut sich vielleicht darüber. Für mich selbst ist es als kreative Herausforderung gedacht; so muss ich mir regelmäßig ein neues Motiv überlegen und zum Malkasten greifen.</p>
<p>Ich denke nicht, dass ich wahnsinnig gut mit Pinsel und Farben umgehen kann, aber wer weiß, vielleicht wird das ja noch. Ohne Übung passiert jedenfalls gar nichts. Hier nun die ersten zwölf meiner Fensterbilder (anklicken für eine größere Version):</p>
<style>
<!--
.bildraster { margin: 2.2em 0; display: grid; grid-gap: 1em;
grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); }
.bildraster > a { display: flex; justify-content: center;
align-items: center; margin: 0; padding: 0; }
.bildraster img { max-width: 100%; width: 100%; height: 11em;
object-fit: contain; overflow: clip; }
@supports not (display: grid) {
.bildraster { margin:1.1em -.5em -.75em; display: flex; flex-wrap: wrap; }
.bildraster > a { flex: 1 1 9em; margin: .5em; } }
.lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0;
display:none; z-index:1; background:rgba(0,0,0,.8); padding:3vmin; }
.lightbox:target { display: block; animation: none; }
.lightbox span { display: block; width: 100%; height: 100%;
background-position: center; background-repeat: no-repeat; background-size: contain; }
-->
</style>
<div class="bildraster">
<a href="#bild-01"><img src="material/galerie/fb01k.jpg" alt="Ein sitzender roter Fuchs." /></a>
<a href="#bild-02"><img src="material/galerie/fb02k.jpg" alt="Ein Christbaum mit lila Kerzen." /></a>
<a href="#bild-03"><img src="material/galerie/fb03k.jpg" alt="Ein winkender Pinguin mit blau-grün gestreiftem Schal und einer roten Wollmütze." /></a>
<a href="#bild-04"><img src="material/galerie/fb04k.jpg" alt="Abstrakte Formen: Je ein breiter gelber und pinkfarbener Strich verdecken eine blassgrüne Kugel. Außerdem ein blaues Dreieck, kleine blaue Punkte und eine schwache, pinkfarbene Schraffur." /></a>
<a href="#bild-05"><img src="material/galerie/fb05k.jpg" alt="Ein blühender Eukalyptuszweig." /></a>
<a href="#bild-06"><img src="material/galerie/fb06k.jpg" alt="Eine einfach gemalte, orangefarbene Biene." /></a>
<a href="#bild-07"><img src="material/galerie/fb07k.jpg" alt="Der Burgberg von Hohenfels bei Nacht, in Grün-, Blau und Violett. Auf dem runden Turm weht eine blaue Fahne, ein Vollmond im Hintergrund." /></a>
<a href="#bild-08"><img src="material/galerie/fb08k.jpg" alt="Tuschezeichnung eines Männerkopfs im Profil. Er trägt ein Halstuch und einen Hut mit einer Blume." /></a>
<a href="#bild-09"><img src="material/galerie/fb09k.jpg" alt="Ein blaues Propellerflugzeug mit einem Maulwurf als Pilot." /></a>
<a href="#bild-10"><img src="material/galerie/fb10k.jpg" alt="Ein ockerfarbenes Muster: verschiedene eckige und runde Linien, mit denen die ganze Bildfläche gefüllt ist." /></a>
<a href="#bild-11"><img src="material/galerie/fb11k.jpg" alt="Ein schwarzer Hexenhut, verziert mit Sternen und einem Halbmond." /></a>
<a href="#bild-12"><img src="material/galerie/fb12k.jpg" alt="Eine graue Laterne, in der eine Kerze nadelförmige Strahlen aussendet." /></a>
</div>
<!-- Bilder als Hintergrund, so laden sie erst beim Lightbox-Öffnen -->
<p><a href="#_" class="lightbox" id="bild-01"><span style="background-image:url(material/galerie/fb01.jpg)"></span></a>
<a href="#_" class="lightbox" id="bild-02"><span style="background-image:url(material/galerie/fb02.jpg)"></span></a>
<a href="#_" class="lightbox" id="bild-03"><span style="background-image:url(material/galerie/fb03.jpg)"></span></a>
<a href="#_" class="lightbox" id="bild-04"><span style="background-image:url(material/galerie/fb04.jpg)"></span></a>
<a href="#_" class="lightbox" id="bild-05"><span style="background-image:url(material/galerie/fb05.jpg)"></span></a>
<a href="#_" class="lightbox" id="bild-06"><span style="background-image:url(material/galerie/fb06.jpg)"></span></a>
<a href="#_" class="lightbox" id="bild-07"><span style="background-image:url(material/galerie/fb07.jpg)"></span></a>
<a href="#_" class="lightbox" id="bild-08"><span style="background-image:url(material/galerie/fb08.jpg)"></span></a>
<a href="#_" class="lightbox" id="bild-09"><span style="background-image:url(material/galerie/fb09.jpg)"></span></a>
<a href="#_" class="lightbox" id="bild-10"><span style="background-image:url(material/galerie/fb10.jpg)"></span></a>
<a href="#_" class="lightbox" id="bild-11"><span style="background-image:url(material/galerie/fb11.jpg)"></span></a>
<a href="#_" class="lightbox" id="bild-12"><span style="background-image:url(material/galerie/fb12.jpg)"></span></a></p>
<p>Habt ihr ähnliche Projekte, mit denen ihr eure Kreativität herausfordert? Gibt es eine Fertigkeit, die ihr gern üben möchtet?</p>
<p style="margin-bottom:2.25em;">---<br>
<i>Rubrik(en):</i> <a href="archiv.html?ansporn">#ansporn</a> <a href="archiv.html?sujet">#sujet</a> </p>
</article>
<div class="no-print">
<h2 id="kommentieren">Artikel kommentieren</h2>
<p>Ich lege Wert auf eine respektvolle Diskussion und überprüfe jeden Kommentar, bevor er hier erscheint. Beleidigende oder unsachliche Beiträge ignoriere ich mit großem Vergnügen. Alle Angaben sind freiwillig.</p>
<form name="kommentarformular" id="kommentarformular" method="post" action="https://www.onlex.de/_formmailer.php?username=charakterziffer" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" onsubmit="javascript:document.getElementById('aktuelles-datum').value = new Date().toLocaleString('de-DE')">
<input type="hidden" name="post_id" value="/fensterbilder">
<input type="hidden" name="date" id="aktuelles-datum" value="">
<input type="hidden" name="nummer" value="1">
<div>
<label for="name">Name</label>
<div><input name=" name" id="name" type="text" size="25" spellcheck="false">
<i>(Pseudonym möglich)</i></div>
<!-- fügt in der Onlex-Mail eine Leerzeile davor ein -->
</div>
<div>
<label for="mail">E-Mail</label>
<div><input name="mail" id="mail" type="email" size="25" autocomplete="email" spellcheck="false" autocapitalize="off">
<i>(wird nicht veröffentlicht)</i></div>
</div>
<div>
<label for="link">Website</label>
<div><input name="link" id="link" type="url" size="25" spellcheck="false" onblur="javascript:if ( (this.value!='') && !(this.value.match(/^https?:\/\//g)) ) { this.value = 'http://' + this.value;}"></div>
<!-- Beim Verlassen des Feldes: Falls Webadresse nicht leer und nicht mit „http(s)://“ beginnt, dann ergänze „http://“. So bekommt der Nutzer wegen type="url" keine Fehlermeldung, auch wenn er das http:// vergisst. -->
</div>
<div>
<label for="comment">Kommentar</label><br>
<textarea name="comment" id="comment" rows="8" cols="50" required spellcheck="true"></textarea>
</div>
<input type="hidden" name=" --- Hinweis" value="Mehrzeilige Kommentare in 'Apostrophe' einschließen und um </р><р> ergänzen.">
<input name="onlex_password" id="onlex_password" type="hidden" value="5">
<div><input name="submit" id="submit" type="submit" value="Veröffentlichen"></div>
</form>
<p class="no-hyphens" style="font-size:0.9em;line-height:1.667em;">Formatierungen mit HTML sind möglich, z.<small> </small>B. <em><em>betont</em></em>, <strong><strong>hervor­gehoben</strong></strong> oder <code><code>Quelltext</code></code>. Außerdem Verlinkungen (<a href="http://verlinkte-website.de">Linktext</a>) und Bilder (<img src="http://pfad-zum.de/bild.jpg" alt="Bildbeschreibung">).</p>
</div> <!-- .no-print -->
<p style="width:48%; float:left; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="kalender-2023.html">← 2023 in bewährter Form</a></p>
<p style="width:48%; float:right; text-align:right; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="perfekte-kuerze.html">Die perfekte Kürze im Mikroblog →</a></p>
<p style="clear:both;" class="no-print"></p>
</main>
<aside class="no-hyphens">
<p>Hallo, ich bin <a href="javascript:new%20Audio('bestand/aussprache.mp3').play()" class="anhoeren" title="Aussprache anhören">Gerhard Großmann</a> aus Hohen­fels<span class="no-print"> (siehe <a href="/index.html#impressum">Impres­sum/Daten­schutz</a>)</span>. Über Fragen, Kritik und Anmer­kungen freue ich mich sehr – z.<small> </small>B.<span class="no-print"> via <a href="https://typo.social/@charakterziffer" target="_blank" rel="noopener noreferrer">Masto­don</a> oder</span> per Mail an <em>postfach2b [ät] web.de</em>.</p>
<p class="no-print">Mein <a href="/rss.xml" class="icon-rss">RSS-Feed</a> informiert immer pünkt­lich über neue Artikel. Alle bis­herigen Ein­träge finden sich <a href="/archiv.html">im Archiv</a>.</p>
<p>Die Texte in diesem Blog stehen unter einer <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de" class="icon-ccbysa">Crea­tive-Commons-Lizenz 4.0 (Deutsch­land)</a> mit Namens­nennung und Weiter­gabe unter gleichen Bedin­gungen.</p>
</aside>
<script src="https://www.onlex.de/_counter.php?username=charakterziffer" defer></script>
</body>
</html>