Line | |
---|
1 | /* Desktop */ |
---|
2 | |
---|
3 | body { |
---|
4 | background-color: white; |
---|
5 | margin: 0; |
---|
6 | padding: 2%; |
---|
7 | |
---|
8 | /*font-family: Arial,sans-serif;*/ |
---|
9 | font-family: Garamond,Georgia,"Times New Roman",Times,Palatino,serif; |
---|
10 | line-height: 140%; |
---|
11 | |
---|
12 | /* Centering content horizontally */ |
---|
13 | display: flex; |
---|
14 | align-items: center; |
---|
15 | justify-content: center; |
---|
16 | } |
---|
17 | |
---|
18 | /* General links */ |
---|
19 | a:link, a:visited { |
---|
20 | color: #555; |
---|
21 | } |
---|
22 | |
---|
23 | a:hover, a:focus, a:active { |
---|
24 | color: green; |
---|
25 | background-color: yellow; |
---|
26 | outline: .2em solid yellow; |
---|
27 | } |
---|
28 | |
---|
29 | main.schwarz { |
---|
30 | border: 1em solid black; |
---|
31 | /*outline: .5em solid black;*/ |
---|
32 | |
---|
33 | /*margin: 0 auto;*/ |
---|
34 | margin: .5em; |
---|
35 | padding: 3em; |
---|
36 | |
---|
37 | max-width: 60em; |
---|
38 | |
---|
39 | display: flex; |
---|
40 | flex-flow: row wrap; |
---|
41 | } |
---|
42 | |
---|
43 | main > section { |
---|
44 | flex-direction: row; |
---|
45 | } |
---|
46 | |
---|
47 | section.picture { flex-grow: 1; margin-bottom: 3em; } |
---|
48 | section.teaser { flex-grow: 2; } |
---|
49 | |
---|
50 | section.picture { |
---|
51 | padding: 2%; |
---|
52 | text-align: center; |
---|
53 | } |
---|
54 | |
---|
55 | section.picture img { |
---|
56 | max-width: 100%; |
---|
57 | } |
---|
58 | |
---|
59 | section.teaser { |
---|
60 | /* sollte css tabelle verwenden stattedessen */ |
---|
61 | /*padding-left: 460px;*/ |
---|
62 | |
---|
63 | /* |
---|
64 | padding-bottom: 2em; |
---|
65 | border-bottom: .5em solid black; |
---|
66 | margin-bottom: 1em; |
---|
67 | */ |
---|
68 | } |
---|
69 | |
---|
70 | /* teaser: clear-after */ |
---|
71 | |
---|
72 | blockquote { |
---|
73 | display: none; /* small screens */ |
---|
74 | |
---|
75 | font-style: oblique; |
---|
76 | width: 70%; |
---|
77 | margin-left: 10%; |
---|
78 | |
---|
79 | margin-bottom: 3em; |
---|
80 | } |
---|
81 | |
---|
82 | blockquote span { color: #555; } |
---|
83 | /* |
---|
84 | img.baum { |
---|
85 | float: left; |
---|
86 | } |
---|
87 | */ |
---|
88 | |
---|
89 | heading { |
---|
90 | text-align: center; |
---|
91 | } |
---|
92 | |
---|
93 | heading h1 { |
---|
94 | font-size: 180%; |
---|
95 | margin: 0; |
---|
96 | } |
---|
97 | |
---|
98 | |
---|
99 | @media (min-width: 900px) { |
---|
100 | main.schwarz { flex-flow: nowrap; border-width: 1.8em; } |
---|
101 | blockquote { display: block; } |
---|
102 | |
---|
103 | heading { text-align: left; } |
---|
104 | |
---|
105 | } /* media query: min-width: 500em; */ |
---|
Note: See
TracBrowser
for help on using the repository browser.