Start to futz with the CSS
Getty Ritter
4 years ago
Binary diff not shown
1 | @font-face { | |
2 | font-family: sacramento; | |
3 | src: url("/static/sacramento.ttf"); | |
4 | } | |
5 | ||
1 | 6 | body { |
2 | 7 | background-repeat: repeat-y, repeat; |
3 | 8 | background-color: #ddeeff; |
4 |
font-family: " |
|
9 | font-family: "Noto Sans", "Arial", sans-serif; | |
5 | 10 | font-size: medium; |
6 | } | |
7 | ||
8 | a:link { | |
11 | margin: 0pt; | |
12 | } | |
13 | ||
14 | h1 { | |
15 | font-family: sacramento, sans-serif; | |
16 | font-size: 36pt; | |
17 | } | |
18 | ||
19 | h1 a { | |
20 | color: #000; | |
21 | text-decoration: none; | |
22 | } | |
23 | ||
24 | .contents a:link { | |
9 | 25 | color: #6666ff; |
10 | 26 | } |
11 | 27 | |
12 |
|
|
28 | .contents a:visited { | |
13 | 29 | color: #4444bb; |
14 | 30 | } |
15 | 31 | |
21 | 37 | |
22 | 38 | #page { |
23 | 39 | background-color: #ffffff; |
24 | min-width: 600px; | |
25 | border-style: solid; | |
26 | border-width: 1px; | |
27 | border-color: #000000; | |
28 | padding-left: 50px; | |
29 | padding-right: 50px; | |
30 | padding-bottom: 30px; | |
31 | padding-top: 30px; | |
32 | margin-left: 100px; | |
33 | margin-right: 100px; | |
34 | -moz-border-radius: 15px; | |
35 | border-radius: 15px; | |
40 | width: 100%; | |
36 | 41 | } |
37 | 42 | |
38 | 43 | #header { |
39 | -moz-border-radius: 15px; | |
40 | border-radius: 15px; | |
41 | background-color: #ddeeff; | |
42 | max-width: 80%; | |
43 | font-size: large; | |
44 | padding: 20px; | |
45 | margin: 10px; | |
46 | margin-left: auto; | |
47 | margin-right: auto; | |
48 | border-style: solid; | |
49 | border-width: 1px; | |
50 | border-color: #000000; | |
51 | text-align: center; | |
52 | } | |
53 | ||
54 | #nav { | |
55 | text-align: center; | |
56 | -moz-border-radius: 15px; | |
57 | border-radius: 15px; | |
58 | background-color: #ddeeff; | |
59 | max-width: 80%; | |
60 | font-size: medium; | |
61 | padding: 10px; | |
62 | margin-left: auto; | |
63 | margin-right: auto; | |
64 | border-style: solid; | |
65 |
|
|
44 | width: 100%; | |
45 | text-align: center; | |
46 | } | |
47 | ||
48 | .nav { | |
49 | display: flex; | |
50 | justify-content: space-evenly; | |
51 | flex-wrap: nowrap; | |
52 | ||
53 | width: 100%; | |
54 | background-color: #fff; | |
55 | } | |
56 | ||
57 | .nav a { | |
58 | width: 12%; | |
59 | display: inline-block; | |
60 | text-align: center; | |
61 | padding: 3pt 0pt; | |
62 | margin: 5pt 0pt; | |
63 | background-color: #44b; | |
64 | color: #fff; | |
65 | border-radius: 5pt; | |
66 | text-decoration: none; | |
66 | 67 | } |
67 | 68 | |
68 | 69 | #contents { |
69 | -moz-border-radius: 15px; | |
70 | border-radius: 15px; | |
71 | 70 | background-color: #ddeeff; |
72 | 71 | width: 70%; |
73 | 72 | font-size: medium; |
90 | 89 | } |
91 | 90 | |
92 | 91 | #footer { |
93 | text-align: center; | |
94 | -moz-border-radius: 15px; | |
95 | border-radius: 15px; | |
96 | 92 | background-color: #ddeeff; |
97 | 93 | max-width: 80%; |
98 | 94 | font-size: medium; |
104 | 100 | } |
105 | 101 | |
106 | 102 | .all-designs { |
107 | margin-left: auto; | |
108 | margin-right: auto; | |
109 | overflow: hidden; | |
110 | height: auto; | |
111 | font-size: 0.1px; | |
112 | text-align: justify; | |
103 | display: grid; | |
104 | margin-left: auto; | |
105 | margin-right: auto; | |
106 | grid-template-columns: 25% 25% 25% 25%; | |
113 | 107 | } |
114 | 108 | |
115 | 109 | .design-tile { |
116 | -moz-border-radius: 15px; | |
117 | 110 | font-size: 12px; |
118 | 111 | display: inline-block; |
119 | border-radius: 15px; | |
120 | 112 | background-color: #ffffff; |
121 | 113 | text-align: center; |
122 | float: left; | |
123 | 114 | width: 150px; |
124 | 115 | height: 150px; |
125 | border: 1px solid #000000; | |
126 | 116 | margin: 0 15px 15px 0; |
127 | 117 | padding: 5px; |
128 | 118 | } |
132 | 122 | } |
133 | 123 | |
134 | 124 | .design .title { |
135 | ||
136 | 125 | font-weight: bold; |
137 | 126 | } |
138 | 127 | |
153 | 142 | } |
154 | 143 | |
155 | 144 | .lrnav { |
156 | -moz-border-radius: 15px; | |
157 | border-radius: 15px; | |
158 | 145 | background-color: #ffffff; |
159 | 146 | width: 100%; |
160 | 147 | } |
161 | 148 | |
162 | 149 | .topnav { |
163 | -moz-border-radius: 15px; | |
164 | border-radius: 15px; | |
165 | 150 | background-color: #ddeeff; |
166 | 151 | width: 22%; |
167 | 152 | border-style: solid; |
196 | 181 | display: inline; |
197 | 182 | } |
198 | 183 | |
199 | .navitem { | |
200 | display: inline-block; | |
201 | padding-top: 15px; | |
202 | width: 20%; | |
203 | text-align: center; | |
204 | } | |
205 | ||
206 | 184 | .greyed { |
207 | 185 | color: #999999; |
208 | 186 | } |
17 | 17 | <title>Frony Ritter Designs – {{title}}</title> |
18 | 18 | </head> |
19 | 19 | <body> |
20 | <div id="header"> | |
21 | <h1><a href="/">Frony Ritter Designs</a></h1> | |
22 | </div> | |
20 | 23 | <div id="page"> |
21 | <div id="header"> | |
22 | <p> | |
23 | <a href="/"><img src="/static/frd_logo.png"/></a> | |
24 | </p> | |
25 |
|
|
24 | <div class="nav"> | |
25 | <a href="http://blog.fronyritterdesigns.com/">Blog</a> | |
26 | <a href="/wheretobuy">Where To Buy</a> | |
27 | <a href="/retailinfo">Info For Retailers</a> | |
28 | <a href="/corrections/">Corrections</a> | |
29 | <a href="/about/">About</a> | |
26 | 30 | </div> |
27 | 31 | <div id="sidebyside"> |
28 | 32 | <div class="topnav"> |
29 | 33 | <ul> |
30 | <a href="/"><li class="topitem">Home</li></a> | |
31 | <a href="http://blog.fronyritterdesigns.com/"><li class="topitem">Blog</li></a> | |
32 | 34 | |
33 | 35 | <a href="/category/charts"><li class="topitem">Cross-Stitch Charts</li></a> |
34 | 36 | |
68 | 70 | |
69 | 71 | <a href="/category/gallery"><li class="topitem">Stitchers' Gallery</li></a> |
70 | 72 | |
71 | <a href="/wheretobuy"><li class="topitem">Where To Buy</li></a> | |
72 | <a href="/retailinfo"><li class="topitem">Info For Retailers</li></a> | |
73 | <a href="/corrections/"><li class="topitem">Corrections</li></a> | |
74 | <a href="/about/"><li class="topitem">About</li></a> | |
75 | 73 | |
76 | 74 | </ul> |
77 | 75 | </div> |