summaryrefslogtreecommitdiff
path: root/md/wedding/styles.css
blob: b6d0ddfbe0a1d621f2c377708f30c16439e23efb (plain) (blame)
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
/* stylesheet for wedding */

/* google fonts */
@import url('https://fonts.googleapis.com/css?family=Arapey:400,400i|Fredericka+the+Great|Reenie+Beanie');

:root {
  /* custom colors */
  --teal:#4eb4b4;
}

#topnav {
  margin: 0;
  padding: 0;
  width: 100%;
  top: 0;
  overflow: hidden;
  text-align: center;
  position: fixed;
  background-color: white;
  box-shadow: 0 0 10px black;
}

#topnav a {
  display: inline-block;
  text-align: center;
  padding: 1em 1em;
  text-decoration: none;
  color: var(--teal);
  transition: 0.25s;
  font-family: 'Arapey', serif;
  font-weight: 700;
  font-size: 1.5em;
}

#topnav a:hover {
  color: white;
  background-color: var(--teal);
}

@media screen and (max-width: 1400px) {
  #topnav {
    position: static;
  }
}

@media only screen and (max-width: 800px) {
  #topnav {
    position: static;
  }

  #topnav a {
    display: block;
    padding: 0.25em;
  }

}

html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%23009999' fill-opacity='0.42' fill-rule='evenodd'/%3E%3C/svg%3E");
}

article {
  margin-top: 5em;
  margin-left: 10%;
  margin-right: 10%;
  padding: 0;
  height: 100%;
}

figure {
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2em;
  padding-bottom: 2em;
  padding-left: 0;
  padding-right: 0;
  background-color: white;
  box-shadow: 0 0 5px black;
}

figure img {
  width: 100%;
}

figure figcaption {
  color: black;
  text-align: right;
  font-weight: 400;
  font-size: 2em;
  font-family: 'Reenie Beanie', cursive;
}

p {
  padding: 1em;
  text-indent: 2em;
  font-weight: 400;
  font-size: 2em;
  font-family: 'Arapey', serif;
  background-color: white;
  box-shadow: 0 0 5px black;
}

blockquote p {
  text-align: left;
  text-indent: 0;
  font-family: 'Reenie Beanie', cursive;
}

iframe {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2em;
  padding-bottom: 2em;
  padding-left: 0;
  padding-right: 0;
  background-color: white;
  box-shadow: 0 0 5px black;
}

h1 { /* decorative page title */
  word-wrap: break-word;
  margin: 0;
  margin-bottom: 5px;
  font-weight: 400;
  font-size: 5em;
  font-family: 'Fredericka the Great', cursive;
  text-align: center;
  color: black;
}

h2 { /* decorative page subtitle */
  font-weight: 400;
  font-size: 4em;
  font-family: 'Reenie Beanie', cursive;
  text-align: center;
  color: black;
}

h3 { /* section title */
  margin: 1em;
  margin-left: 0;
  padding: 0;
  font-weight: 400;
  font-size: 3em;
  font-family: 'Arapey', serif;
  text-align: left;
  text-indent: 0;
  color: black;
}