-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (151 loc) · 10.6 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-144817975-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-144817975-3');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fourpointfive</title>
<link rel="stylesheet" href="style.css">
<!-- Set favicon -->
<link rel="shortcut icon" href="images/folkstore_favicon.jpg"/>
<!-- Load Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<!-- Google -->
<script data-ad-client="ca-pub-8595333601352383" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Load Vue.js - Dev Version -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- fourpointfive is a product built by Jesse Cooke of Pixl Haus. Learn more about Pixl Haus at www.pixlhaus.design -->
</head>
<body>
<div id="app">
<header>
<div id="header_container">
<div id="header_nav_container">
<a href="index.html">
<svg version="1.1" id="fpf_logo_main" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 269.1 269.1" style="enable-background:new 0 0 269.1 269.1;" xml:space="preserve">
<g>
<path d="M241.5,32.6V13.9H13.9v227.7h18.7v13.7h222.7V32.6H241.5z M236.5,236.5H18.9V18.9h217.7V236.5z"/>
<polygon points="50.9,82.3 66.2,82.3 66.2,76.1 50.9,76.1 50.9,68.2 66.4,68.2 66.4,62 44.4,62 44.4,96.4 50.9,96.4 "/>
<path d="M91.1,97.1c4,0,7.1-1.2,9.3-3.6c2.2-2.4,3.4-5.9,3.4-10.5v-7.7c0-4.5-1.1-7.9-3.4-10.4c-2.2-2.5-5.3-3.7-9.3-3.7
c-4,0-7.1,1.2-9.3,3.7c-2.2,2.5-3.4,5.9-3.4,10.4v7.7c0,4.6,1.1,8.1,3.4,10.5C84,95.9,87.1,97.1,91.1,97.1z M84.9,75
c0-1.1,0.1-2.1,0.3-3c0.2-0.9,0.6-1.8,1.1-2.5c0.5-0.7,1.1-1.2,1.9-1.6c0.8-0.4,1.7-0.6,2.8-0.6c1.1,0,2.1,0.2,2.9,0.6
c0.8,0.4,1.4,1,1.9,1.6c0.5,0.7,0.9,1.5,1.1,2.5c0.2,1,0.3,2,0.3,3v8.5c0,1.1-0.1,2.2-0.3,3.1c-0.2,1-0.5,1.8-1,2.5
c-0.5,0.7-1.1,1.2-1.9,1.6s-1.8,0.6-2.9,0.6c-1.2,0-2.2-0.2-2.9-0.6c-0.8-0.4-1.4-0.9-1.9-1.6c-0.5-0.7-0.8-1.5-1-2.5
c-0.2-0.9-0.3-2-0.3-3.1V75z"/>
<path d="M127.1,97.1c4.1,0,7.2-1.1,9.3-3.3c2.1-2.2,3.1-5.3,3.1-9.2V62H133v22.5c0,2-0.5,3.6-1.4,4.8c-1,1.1-2.4,1.7-4.5,1.7
c-2,0-3.5-0.6-4.5-1.7c-1-1.1-1.4-2.7-1.4-4.8V62h-6.5v22.5c0,3.9,1,7,3.1,9.2C119.9,96,123,97.1,127.1,97.1z"/>
<path d="M158.1,83.5h7.5c0.9,0,1.6,0.2,2,0.7c0.4,0.5,0.6,1.1,0.6,1.9v10.3h6.5V84.5c0-1.1-0.3-2.1-1-2.9c-0.7-0.8-1.6-1.2-2.7-1.3
v-0.9c1.6-0.7,2.7-1.6,3.5-2.8c0.8-1.2,1.1-2.5,1.1-4v-1.2c0-1.3-0.2-2.5-0.7-3.7c-0.5-1.1-1.2-2.2-2.1-3c-0.9-0.9-2-1.5-3.4-2
c-1.3-0.5-2.9-0.7-4.7-0.7h-13.2v34.4h6.5V83.5z M158.1,68.2h6.2c1.6,0,2.8,0.4,3.6,1.3c0.8,0.8,1.2,1.8,1.2,3v0.6
c0,1.3-0.4,2.4-1.2,3.1c-0.8,0.7-2,1.1-3.6,1.1h-6.2V68.2z"/>
<path d="M50.1,132.4h7c1.8,0,3.3-0.3,4.6-0.9c1.3-0.6,2.4-1.4,3.3-2.3c0.9-1,1.5-2.1,2-3.3c0.4-1.2,0.7-2.5,0.7-3.8V121
c0-1.2-0.2-2.5-0.7-3.7c-0.4-1.2-1.1-2.3-2-3.2c-0.9-0.9-2-1.7-3.3-2.3c-1.3-0.6-2.9-0.9-4.6-0.9H43.6v34.4h6.5V132.4z M50.1,117.2
h6.3c1.4,0,2.6,0.4,3.4,1.2c0.8,0.8,1.3,1.8,1.3,3v0.6c0,1.2-0.4,2.3-1.3,3c-0.8,0.8-2,1.2-3.4,1.2h-6.3V117.2z"/>
<path d="M91.1,146.1c4,0,7.1-1.2,9.3-3.6c2.2-2.4,3.4-5.9,3.4-10.5v-7.7c0-4.5-1.1-7.9-3.4-10.4c-2.2-2.5-5.3-3.7-9.3-3.7
c-4,0-7.1,1.2-9.3,3.7c-2.2,2.5-3.4,5.9-3.4,10.4v7.7c0,4.6,1.1,8.1,3.4,10.5C84,144.9,87.1,146.1,91.1,146.1z M84.9,124
c0-1.1,0.1-2.1,0.3-3c0.2-0.9,0.6-1.8,1.1-2.5c0.5-0.7,1.1-1.2,1.9-1.6c0.8-0.4,1.7-0.6,2.8-0.6c1.1,0,2.1,0.2,2.9,0.6
c0.8,0.4,1.4,1,1.9,1.6c0.5,0.7,0.9,1.5,1.1,2.5c0.2,1,0.3,2,0.3,3v8.5c0,1.1-0.1,2.2-0.3,3.1c-0.2,0.9-0.5,1.8-1,2.5
c-0.5,0.7-1.1,1.2-1.9,1.6s-1.8,0.6-2.9,0.6c-1.2,0-2.2-0.2-2.9-0.6c-0.8-0.4-1.4-0.9-1.9-1.6c-0.5-0.7-0.8-1.5-1-2.5
c-0.2-1-0.3-2-0.3-3.1V124z"/>
<polygon points="138.6,117.2 138.6,111 115.6,111 115.6,117.2 123.8,117.2 123.8,139.2 115.6,139.2 115.6,145.4 138.6,145.4
138.6,139.2 130.3,139.2 130.3,117.2 "/>
<polygon points="157.5,114.3 158.4,114.3 162.4,145.4 175.1,145.4 175.1,111 168.6,111 168.6,142.2 167.7,142.2 163.7,111 151,111
151,145.4 157.5,145.4 "/>
<polygon points="195.8,145.4 202.3,145.4 202.3,117.2 211.4,117.2 211.4,111 186.6,111 186.6,117.2 195.8,117.2 "/>
<polygon points="44.4,194.4 50.9,194.4 50.9,180.2 66.2,180.2 66.2,174.1 50.9,174.1 50.9,166.2 66.4,166.2 66.4,160 44.4,160 "/>
<polygon points="79.6,166.2 87.9,166.2 87.9,188.2 79.6,188.2 79.6,194.4 102.6,194.4 102.6,188.2 94.4,188.2 94.4,166.2
102.6,166.2 102.6,160 79.6,160 "/>
<polygon points="133.2,194.4 140.9,160 134.3,160 127.5,191.2 126.6,191.2 119.9,160 113.2,160 121,194.4 "/>
<polygon points="158.5,180.2 173.2,180.2 173.2,174.1 158.5,174.1 158.5,166.2 173.8,166.2 173.8,160 152,160 152,194.4
174.3,194.4 174.3,188.2 158.5,188.2 "/>
</g>
</svg>
</a>
<nav>
<a href="signup.html">SUBMIT A DESIGN</a>
</nav>
</div>
<div id="header_content_container">
<div id="header_col_1">
<h1 id="header_h1">ACCESSIBLE DESIGN INSPIRATION</h1>
<h2 id="header_h2">that meets or exceeds WCAG 2.1 guidelines for color contrast.</h2>
</div>
</div>
<details class="header_details" v-on:click="detailsOpen1" :class="{'details_active': detailsActive1}">
<summary class="header_summary">What is color contrast?</summary>
<p class="header_p">Color contrast is a key part in designing ADA-compliant web experiences.<br><br>The rules for color contrast come from WCAG 2.1 (Web Content Accessibility Guidelines) which define how to make web content more accessible to people with disabilities.</p>
</details>
<details class="header_details" v-on:click="detailsOpen2" :class="{'details_active': detailsActive2}">
<summary class="header_summary">What are the guidelines?</summary>
<p class="header_p">WCAG 2.1 lists the following for color contrast guidelines:<br><br>The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:</p>
<ul id="wcag_list">
<li><span class="header_details_li_head">Large Text</span><br>Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.</li>
<li><span class="header_details_li_head">Incidental</span><br>Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.</li>
<li><span class="header_details_li_head">Logotypes</span><br>Text that is part of a logo or brand name has no contrast requirement.</li>
</ul>
</details>
<div class="headeranchor_container">
<a href="https://www.w3.org/TR/WCAG21/#contrast-minimum" class="headeranchor">Learn more here</a>
</div>
<div class="headeranchor_container">
<a href="https://webaim.org/resources/contrastchecker/" class="headeranchor">Contrast checking tool</a>
</div>
</div>
</header>
<div id="blocks_header">
<h2>Most Recent</h2>
</div>
<div id="blocks_wrapper">
<!-- START: Card Template -->
<template>
<div v-for="(block, id) in cardData" :key="id" class="block_container">
<img :src="block.imgsrc" :alt="block.imgalt" class="block_img"/>
<p class="block_label">Posted by: <span class="block_info">{{ block.postedby }}</span></p>
<p class="block_label">Posted on: <span class="block_info">{{ block.posteddate }}</span></p>
<p class="block_label">Source: <a v-bind:href="block.sourceurl" target="_blank" class="block_link">{{ block.source }}</a></p>
<div class="block_color_container">
<div>
<div class="block_color" :style="{ background: block.color1 }"></div><p>{{ block.color1 }}</p>
</div>
<div>
<div class="block_color" :style="{ background: block.color2 }"></div><p>{{ block.color2 }}</p>
</div>
<div v-if="block.color3">
<div class="block_color" :style="{ background: block.color3 }"></div><p>{{ block.color3 }}</p>
</div>
</div>
<div class="margin_top_bottom_20">
<hr class="hr_grey">
</div>
<div>
<div class="block_ratings_container" v-if="block.colorrating1">
<div class="block_ratingcolor" :style="{ background: block.colormatcha1 }"></div>
<div class="block_ratingcolor" :style="{ background: block.colormatcha2 }"></div>
<p class="block_rating_text">=</p>
<p class="block_rating_text">{{ block.colorrating1 }}</p>
</div>
<div class="block_ratings_container" v-if="block.colorrating2">
<div class="block_ratingcolor" :style="{ background: block.colormatchb1 }"></div>
<div class="block_ratingcolor" :style="{ background: block.colormatchb2 }"></div>
<p class="block_rating_text">=</p>
<p class="block_rating_text">{{ block.colorrating2 }}</p>
</div>
</div>
</div>
</template>
<!-- END: Card Template -->
</div>
</div>
<!-- Load Vue files -->
<script src="./main.js"></script>
</body>
</html>