Check-in [898a546278]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Restyle layout
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA1: 898a546278adcb9cf6e6f392c5dccf5c412abbe4
User & Date: nalck 2016-01-19 23:26:06.332
Context
2016-01-20
02:42
Style slideshow check-in: b4753e765a user: nalck tags: trunk
2016-01-19
23:26
Restyle layout check-in: 898a546278 user: nalck tags: trunk
06:29
Add webserver check-in: 7c384fbb38 user: nalck tags: trunk
Changes
Unified Diff Ignore Whitespace Patch
Deleted 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
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <title>yellowfoxco</title>
    <link rel='stylesheet' type='text/css' href='style.css' />
  </head>
  <body>
    <header>
      <h1>YELLOWFOXCO</h1>
      <img src='logo.jpg' alt='Logo' />
      <nav>
	<a href='https://etsy.com/shop/YELLOWFOXCO'>Shop</a>
	<a href='#connect'>Connect</a>
	<a href='https://yellowfoxco.tumblr.com'>Blog</a>
      </nav>
    </header>
    <main>
      <h2 id='connect'>PASSION • MEETS • DESIGN</h2>
      <p>
        YELLOWFOXCO was created for the creative. Turning home decor 
        into a passion and letting inspiration unfold. Working hard &amp;
        getting our hands dirty is what we do, design is what we love. 
        We are the wild creative type, and so are our customers. We
	design for you in mind, making your dream home come true.
      </p>
      <iframe src='http://snapwidget.com/sc/?u=eWVsbG93Zm94Y298aW58MTUwfDN8M3x8bm98NXxub25lfG9uU3RhcnR8eWVzfG5v&ve=311215' 
                title='Instagram Widget' 
                class='snapwidget-widget' 
                allowTransparency='true' 
                frameborder='0' 
                scrolling='yes' 
                style='border:none; overflow:hidden; width:100%; height:20%'>
      </iframe>
      <p>
        You can view our work on our 
        <a href='https://etsy.com/shop/YELLOWFOXCO'>Etsy</a> shop. We
        write on
        <a href='https://yellowfoxco.tumblr.com'>Tumblr</a> and post
        photos to <a href='https://instagram.com/yellowfoxco/'>
        Instagram</a> You can also find us on 
        <a href='https://facebook.com/YellowFoxCo'>Facebook</a>.
      </p>
      <p>
        We often make custom orders. If you've got an idea,
        send us an <a href='mailto:emily@yellowfoxco.com'>email</a>
        to get in touch. You can also use the following form:
      </p>
      <form action='http://formspree.io/emily@yellowfoxco.com' method='POST'>
        <input type='text' name='name' placeholder='Your Name' />
        <input type='email' name='_replyto' placeholder='Email Address' />
        <textarea placeholder='Tell us about your project!' rows='5'>
        </textarea>
        <input id='submit' type='submit' value='Send' />
      </form>
    </main>
    <footer>
      &#169;
      2016
      YELLOWFOXCO
    </footer>
  </body>
</html>
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<






























































































































Deleted logo.jpg.

cannot compute difference between binary files

Deleted raw.css.
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
:root {
	--dark-white:	#bdc3c7;
	--light-white:	#ecf0f1;
	--dark-grey:	#7f8c8d;
	--light-grey:	#95a5a6;
	--dark-black:	#212121;
	--light-black:	#424242;
	--dark-red:	#c0392b;
	--light-red:	#e74c3c;
	--dark-orange:	#d35400;
	--light-orange:	#e67e22;
	--dark-yellow:	#f39c12;
	--light-yellow:	#f1c40f;
	--dark-green:	#27ae60;
	--light-green:	#2ecc71;
	--dark-blue:	#2980b9;
	--light-blue:	#3498db;
	--dark-indigo:	#2c3e50;
	--light-indigo:	#34495e;
	--dark-violet:	#8e44ad;
	--light-violet:	#9b59b6;
}

body {
  color: var(--dark-black);
  font-family: helvetica, arial, verdana, sans-serif;
  font-size: 1.5em;
  line-height: 1.5;
  margin: auto;
  width: 95%;
}

header {
  display: block;
  height: 100%;
}

h1 {
  border-top: 0.2ch solid;
  border-bottom: 0.2ch solid;
  display: block;
  margin: 2ch auto;
  padding: 0.5ch;
  text-align: center;
  width: 14ch;
}

nav {
  margin: 5% auto;
  text-align: center;
}

nav a {
  color: var(--dark-black);
  display: inline-block;
  font-size: 1.5em;
  margin: 1%;
  max-width: 7ch;
}

img {
  border-radius: 300px;
  display: block;
  margin: 5% auto;
  width: 300px;
}

main {
  margin: 10% auto;
  width: 95%;
}

h2 {
  color: var(--dark-white);
  font-size: 1em;
  font-weight: normal;
  letter-spacing: 0.4ch;
  margin: 2ch auto 5ch auto;
  text-align: center;
}

p {
  margin: 3ch auto;
  max-width: 41ch;
}

a {
  border-bottom: 0.2ch solid transparent;
  color: var(--dark-blue);
  text-decoration: none;
}

a:hover {
  border-bottom: 0.2ch solid;
}

form {
  margin: 5ch auto;
}

input, textarea {
  font-size: 1em;
  font-family: helvetica, arial, verdana, sans-serif;
  display: block;
  margin: 2ch auto;
  padding: 1ch;
  width: 30ch;
}

#submit {
  width: 20ch;
}

footer {
  color: var(--dark-grey);
  margin: 5ch auto 2ch auto;
  text-align: center;
}

@media (max-width: 650px) {
  nav {
    margin: 10% auto;
  }

  nav a {
    display: block;
    margin: 1ch auto;
  }

  h2 {
    font-size: 0.9em;
  }
}

<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<












































































































































































































































































Deleted style.css.
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
body {
  color: #212121;
  font-family: helvetica, arial, verdana, sans-serif;
  font-size: 1.5em;
  line-height: 1.5;
  margin: auto;
  width: 95%;
}

header {
  display: block;
  height: 100%;
}

h1 {
  border-top: 0.2ch solid;
  border-bottom: 0.2ch solid;
  display: block;
  margin: 2ch auto;
  padding: 0.5ch;
  text-align: center;
  width: 14ch;
}

nav {
  margin: 5% auto;
  text-align: center;
}

nav a {
  color: #212121;
  display: inline-block;
  font-size: 1.5em;
  margin: 1%;
  max-width: 7ch;
}

img {
  border-radius: 300px;
  display: block;
  margin: 5% auto;
  width: 300px;
}

main {
  margin: 10% auto;
  width: 95%;
}

h2 {
  color: #bdc3c7;
  font-size: 1em;
  font-weight: normal;
  letter-spacing: 0.4ch;
  margin: 2ch auto 5ch auto;
  text-align: center;
}

p {
  margin: 3ch auto;
  max-width: 41ch;
}

a {
  border-bottom: 0.2ch solid transparent;
  color: #2980b9;
  text-decoration: none;
}

a:hover {
  border-bottom: 0.2ch solid;
}

form {
  margin: 5ch auto;
}

input,
textarea {
  font-size: 1em;
  font-family: helvetica, arial, verdana, sans-serif;
  display: block;
  margin: 2ch auto;
  padding: 1ch;
  width: 30ch;
}

#submit {
  width: 20ch;
}

footer {
  color: #7f8c8d;
  margin: 5ch auto 2ch auto;
  text-align: center;
}

@media (max-width: 650px) {
  nav {
    margin: 10% auto;
  }

  nav a {
    display: block;
    margin: 1ch auto;
  }

  h2 {
    font-size: 0.9em;
  }
}
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<






























































































































































































































Deleted www/404.html.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <title>Error: 404</title>
  </head>
  <body>
    <header>
      <h1>Error</h1>
    </header>
    <main>
      <h2>404: File Not Found</h2>
      <p>We could not find the content you requested.</p>
      <p>Please check your URL and try again.</p>
    </main>
    <footer>
      <p>This is an example file. Please change to suit your need</p>
    </footer>
  </body>
</html>
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<






































Changes to www/index.html.
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
        getting our hands dirty is what we do, design is what we love. 
        We are the wild creative type, and so are our customers. We
	design for you in mind, making your dream home come true.
      </p>
      <img src='shelf.jpg' alt='Shelf' />
      <p>
        You can view our work on our 
        <a href='https://etsy.com/shop/YELLOWFOXCO'>Etsy</a> shop. We
        write on
        <a href='https://yellowfoxco.tumblr.com'>Tumblr</a> and post

        photos to <a href='https://instagram.com/yellowfoxco/'>
        Instagram</a> You can also find us on 
        <a href='https://facebook.com/YellowFoxCo'>Facebook</a>.
      </p>
      <p>
        We often make custom orders. If you've got an idea,
        send us an <a href='mailto:emily@yellowfoxco.com'>email</a>
        to get in touch. You can also use the following form:
      </p>
      <form action='http://formspree.io/emily@yellowfoxco.com' method='POST'>
        <input type='text' name='name' placeholder='Your Name' />
        <input type='email' name='_replyto' placeholder='Email Address' />
        <textarea placeholder='Tell us about your project!' rows='5'>
        </textarea>
        <input id='submit' type='submit' value='Send' />
      </form>
    </main>
    <footer>
      &#169;
      2016
      YELLOWFOXCO
    </footer>
  </body>







|
|
|
>
|
|







|





|







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
        getting our hands dirty is what we do, design is what we love. 
        We are the wild creative type, and so are our customers. We
	design for you in mind, making your dream home come true.
      </p>
      <img src='shelf.jpg' alt='Shelf' />
      <p>
        You can view our work on our 
        <a href='https://etsy.com/shop/YELLOWFOXCO'>Etsy</a>
        shop. We write on
        <a href='https://yellowfoxco.tumblr.com'>Tumblr</a>
        and post photos to
        <a href='https://instagram.com/yellowfoxco/'>Instagram</a>
        You can also find us on
        <a href='https://facebook.com/YellowFoxCo'>Facebook</a>.
      </p>
      <p>
        We often make custom orders. If you've got an idea,
        send us an <a href='mailto:emily@yellowfoxco.com'>email</a>
        to get in touch. You can also use the following form:
      </p>
      <form action='http://formspree.io/nathaniel@ixtech.net' method='POST'>
        <input type='text' name='name' placeholder='Your Name' />
        <input type='email' name='_replyto' placeholder='Email Address' />
        <textarea placeholder='Tell us about your project!' rows='5'>
        </textarea>
        <input id='submit' type='submit' value='Send' />
      </form> 
    </main>
    <footer>
      &#169;
      2016
      YELLOWFOXCO
    </footer>
  </body>
Deleted www/instafeed.min.js.
1
2
// Generated by CoffeeScript 1.9.3
(function(){var e;e=function(){function e(e,t){var n,r;this.options={target:"instafeed",get:"popular",resolution:"thumbnail",sortBy:"none",links:!0,mock:!1,useHttp:!1};if(typeof e=="object")for(n in e)r=e[n],this.options[n]=r;this.context=t!=null?t:this,this.unique=this._genKey()}return e.prototype.hasNext=function(){return typeof this.context.nextUrl=="string"&&this.context.nextUrl.length>0},e.prototype.next=function(){return this.hasNext()?this.run(this.context.nextUrl):!1},e.prototype.run=function(t){var n,r,i;if(typeof this.options.clientId!="string"&&typeof this.options.accessToken!="string")throw new Error("Missing clientId or accessToken.");if(typeof this.options.accessToken!="string"&&typeof this.options.clientId!="string")throw new Error("Missing clientId or accessToken.");return this.options.before!=null&&typeof this.options.before=="function"&&this.options.before.call(this),typeof document!="undefined"&&document!==null&&(i=document.createElement("script"),i.id="instafeed-fetcher",i.src=t||this._buildUrl(),n=document.getElementsByTagName("head"),n[0].appendChild(i),r="instafeedCache"+this.unique,window[r]=new e(this.options,this),window[r].unique=this.unique),!0},e.prototype.parse=function(e){var t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m,g,y,b,w,E,S,x,T,N,C,k,L,A,O,M,_,D;if(typeof e!="object"){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"Invalid JSON data"),!1;throw new Error("Invalid JSON response")}if(e.meta.code!==200){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,e.meta.error_message),!1;throw new Error("Error from Instagram: "+e.meta.error_message)}if(e.data.length===0){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"No images were returned from Instagram"),!1;throw new Error("No images were returned from Instagram")}this.options.success!=null&&typeof this.options.success=="function"&&this.options.success.call(this,e),this.context.nextUrl="",e.pagination!=null&&(this.context.nextUrl=e.pagination.next_url);if(this.options.sortBy!=="none"){this.options.sortBy==="random"?M=["","random"]:M=this.options.sortBy.split("-"),O=M[0]==="least"?!0:!1;switch(M[1]){case"random":e.data.sort(function(){return.5-Math.random()});break;case"recent":e.data=this._sortBy(e.data,"created_time",O);break;case"liked":e.data=this._sortBy(e.data,"likes.count",O);break;case"commented":e.data=this._sortBy(e.data,"comments.count",O);break;default:throw new Error("Invalid option for sortBy: '"+this.options.sortBy+"'.")}}if(typeof document!="undefined"&&document!==null&&this.options.mock===!1){m=e.data,A=parseInt(this.options.limit,10),this.options.limit!=null&&m.length>A&&(m=m.slice(0,A)),u=document.createDocumentFragment(),this.options.filter!=null&&typeof this.options.filter=="function"&&(m=this._filter(m,this.options.filter));if(this.options.template!=null&&typeof this.options.template=="string"){f="",d="",w="",D=document.createElement("div");for(c=0,N=m.length;c<N;c++){h=m[c],p=h.images[this.options.resolution];if(typeof p!="object")throw o="No image found for resolution: "+this.options.resolution+".",new Error(o);E=p.width,y=p.height,b="square",E>y&&(b="landscape"),E<y&&(b="portrait"),v=p.url,l=window.location.protocol.indexOf("http")>=0,l&&!this.options.useHttp&&(v=v.replace(/https?:\/\//,"//")),d=this._makeTemplate(this.options.template,{model:h,id:h.id,link:h.link,type:h.type,image:v,width:E,height:y,orientation:b,caption:this._getObjectProperty(h,"caption.text"),likes:h.likes.count,comments:h.comments.count,location:this._getObjectProperty(h,"location.name")}),f+=d}D.innerHTML=f,i=[],r=0,n=D.childNodes.length;while(r<n)i.push(D.childNodes[r]),r+=1;for(x=0,C=i.length;x<C;x++)L=i[x],u.appendChild(L)}else for(T=0,k=m.length;T<k;T++){h=m[T],g=document.createElement("img"),p=h.images[this.options.resolution];if(typeof p!="object")throw o="No image found for resolution: "+this.options.resolution+".",new Error(o);v=p.url,l=window.location.protocol.indexOf("http")>=0,l&&!this.options.useHttp&&(v=v.replace(/https?:\/\//,"//")),g.src=v,this.options.links===!0?(t=document.createElement("a"),t.href=h.link,t.appendChild(g),u.appendChild(t)):u.appendChild(g)}_=this.options.target,typeof _=="string"&&(_=document.getElementById(_));if(_==null)throw o='No element with id="'+this.options.target+'" on page.',new Error(o);_.appendChild(u),a=document.getElementsByTagName("head")[0],a.removeChild(document.getElementById("instafeed-fetcher")),S="instafeedCache"+this.unique,window[S]=void 0;try{delete window[S]}catch(P){s=P}}return this.options.after!=null&&typeof this.options.after=="function"&&this.options.after.call(this),!0},e.prototype._buildUrl=function(){var e,t,n;e="https://api.instagram.com/v1";switch(this.options.get){case"popular":t="media/popular";break;case"tagged":if(!this.options.tagName)throw new Error("No tag name specified. Use the 'tagName' option.");t="tags/"+this.options.tagName+"/media/recent";break;case"location":if(!this.options.locationId)throw new Error("No location specified. Use the 'locationId' option.");t="locations/"+this.options.locationId+"/media/recent";break;case"user":if(!this.options.userId)throw new Error("No user specified. Use the 'userId' option.");t="users/"+this.options.userId+"/media/recent";break;default:throw new Error("Invalid option for get: '"+this.options.get+"'.")}return n=e+"/"+t,this.options.accessToken!=null?n+="?access_token="+this.options.accessToken:n+="?client_id="+this.options.clientId,this.options.limit!=null&&(n+="&count="+this.options.limit),n+="&callback=instafeedCache"+this.unique+".parse",n},e.prototype._genKey=function(){var e;return e=function(){return((1+Math.random())*65536|0).toString(16).substring(1)},""+e()+e()+e()+e()},e.prototype._makeTemplate=function(e,t){var n,r,i,s,o;r=/(?:\{{2})([\w\[\]\.]+)(?:\}{2})/,n=e;while(r.test(n))s=n.match(r)[1],o=(i=this._getObjectProperty(t,s))!=null?i:"",n=n.replace(r,function(){return""+o});return n},e.prototype._getObjectProperty=function(e,t){var n,r;t=t.replace(/\[(\w+)\]/g,".$1"),r=t.split(".");while(r.length){n=r.shift();if(!(e!=null&&n in e))return null;e=e[n]}return e},e.prototype._sortBy=function(e,t,n){var r;return r=function(e,r){var i,s;return i=this._getObjectProperty(e,t),s=this._getObjectProperty(r,t),n?i>s?1:-1:i<s?1:-1},e.sort(r.bind(this)),e},e.prototype._filter=function(e,t){var n,r,i,s,o;n=[],r=function(e){if(t(e))return n.push(e)};for(i=0,o=e.length;i<o;i++)s=e[i],r(s);return n},e}(),function(e,t){return typeof define=="function"&&define.amd?define([],t):typeof module=="object"&&module.exports?module.exports=t():e.Instafeed=t()}(this,function(){return e})}).call(this);
<
<




Changes to www/raw.css.
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
  --dark-indigo:  #2c3e50;
  --light-indigo: #34495e;
  --dark-violet:  #8e44ad;
  --light-violet: #9b59b6;
}

body {
  color: var(--dark-black);
  font-family: helvetica, arial, verdana, sans-serif;
  font-size: 1.5em;
  line-height: 1.5;
  margin: auto;
  width: 95%;
}

header {
  display: block;
  height: 100%;
}

h1 {
  border-top: 0.2ch solid;
  border-bottom: 0.2ch solid;
  display: block;
  margin: 2ch auto;
  padding: 0.5ch;
  text-align: center;
  width: 14ch;
}

nav {

  margin: 5% auto;


  text-align: center;
}

nav a {

  color: var(--dark-black);
  display: inline-block;
  font-size: 1.5em;
  margin: 2ch;

  max-width: 7ch;


}

header img {
  border-radius: 300px;
  display: block;
  margin: 5% auto;
  width: 300px;
}

main {
  margin: 10% auto;
  width: 95%;
}

h2 {
  color: var(--dark-white);
  font-size: 1em;


  font-weight: normal;
  letter-spacing: 0.4ch;

  margin: 2ch auto 5ch auto;
  text-align: center;
}

p {
  margin: 3ch auto;
  max-width: 41ch;
}

main img {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  display: block;
  margin: 5ch auto;
  width: 320px;
}

a {
  border-bottom: 0.2ch solid transparent;
  color: var(--dark-blue);
  text-decoration: none;
}

a:hover {
  border-bottom: 0.2ch solid;
}

form {
  margin: 5ch auto;
}

input, textarea {
  font-size: 1em;
  font-family: helvetica, arial, verdana, sans-serif;
  display: block;
  margin: 2ch auto;
  padding: 1ch;
  width: 30ch;
}

#submit {
  width: 20ch;
}

footer {
  color: var(--dark-grey);
  margin: 5ch auto 2ch auto;
  text-align: center;
}

@media (max-width: 650px) {
  nav {
    margin: 10% auto;
  }

  nav a {
    display: block;
    margin: 1ch auto;
  }

  h2 {
    font-size: 0.9em;
  }
}








|
|
|
|
|
<



|
|



|
|
<
|
<
|
|


|
>
|
>
>
|


|
>
|
<
|
|
>
|
>
>



|
|
|
|


|
|
|


|
|
|
>
>
|
|
>
|
|



<
|


|
<
|
<
<
<
|
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
|
<
<
|
|
|



|



<
|
|


|
|
|
|
|
<
<
<
|
|
|
|
|

<
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

  --dark-indigo:  #2c3e50;
  --light-indigo: #34495e;
  --dark-violet:  #8e44ad;
  --light-violet: #9b59b6;
}

body {
	color: var(--dark-black);
	font-family: helvetica, arial, verdana, sans-serif;
	font-size: 2em;
	line-height: 1.5;
	margin: auto;

}

header {
	display: block;
	height: 100vh;
}

h1 {
	border-top: 0.2ch solid;
	border-bottom: 0.2ch solid;

	margin: 0.5ch auto;

	text-align: center;
	width: 15ch;
}

h2 {
	color: var(--dark-grey);
	font-size: 1.2em;
	font-weight: normal;
	letter-spacing: 0.5ch;
	text-align: center;
}

a {
	border-bottom: solid 0.2ch transparent;
	color: var(--dark-blue);

	padding-bottom: 0.2ch;
	text-decoration: none;
}

a:hover {
	border-bottom: solid 0.2ch;
}

header img {
	border-radius: 100%;
	display: block;
	margin: 4% auto;
	width: 500px;
}

nav {
	margin: 2% auto;
	text-align: center;
}

nav a {
	color: var(--dark-black);
	font-size: 1.5em;
	margin: auto 2ch;
}

main img {
	display: block;
	margin: 3ch auto;
	max-width: 500px;
}

p {

	max-width: 72ch;
}

form, input, textarea {

	display: block;



	font-family: helvetica, arial, verdana, sans-serif;















	font-size: 1em;


	margin: 2ch auto;
	padding: 1ch;
	width: 80%;
}

#submit {
	width: 10ch;
}

footer {

	padding: 2ch;
	text-align: center;
}

@media screen and (orientation: landscape) {
	body {
		width: 60%;
	}
}




@media screen and (orientation: portrait) {
	body {
		width: 95%;
	}
}

Changes to www/style.css.
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
body {
  color: #212121;
  font-family: helvetica, arial, verdana, sans-serif;
  font-size: 1.5em;
  line-height: 1.5;
  margin: auto;
  width: 95%;
}

header {
  display: block;
  height: 100%;
}

h1 {
  border-top: 0.2ch solid;
  border-bottom: 0.2ch solid;


  display: block;

  margin: 2ch auto;




  padding: 0.5ch;
  text-align: center;

















  width: 14ch;
}

nav {
  margin: 5% auto;
  text-align: center;
}

nav a {
  color: #212121;
  display: inline-block;
  font-size: 1.5em;
  margin: 2ch;
  max-width: 7ch;
}

header img {
  border-radius: 300px;
  display: block;
  margin: 5% auto;
  width: 300px;
}

main {
  margin: 10% auto;
  width: 95%;
}



h2 {
  color: #bdc3c7;

  font-size: 1em;
  font-weight: normal;
  letter-spacing: 0.4ch;
  margin: 2ch auto 5ch auto;
  text-align: center;
}

p {
  margin: 3ch auto;
  max-width: 41ch;
}

main img {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  display: block;
  margin: 5ch auto;
  width: 320px;
}

a {
  border-bottom: 0.2ch solid transparent;
  color: #2980b9;
  text-decoration: none;
}

a:hover {
  border-bottom: 0.2ch solid;
}

form {
  margin: 5ch auto;
}

input,
textarea {
  font-size: 1em;
  font-family: helvetica, arial, verdana, sans-serif;
  display: block;
  margin: 2ch auto;
  padding: 1ch;
  width: 30ch;
}

#submit {
  width: 20ch;
}

footer {
  color: #7f8c8d;
  margin: 5ch auto 2ch auto;
  text-align: center;
}

@media (max-width: 650px) {
  nav {
    margin: 10% auto;
  }

  nav a {
    display: block;
    margin: 1ch auto;
  }

  h2 {
    font-size: 0.9em;
  }
}



|


<




|





>
>
|
>
|
>
>
>
>
|

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|



|





<

|
<


|
<

|
|


|
<
|


>
>
|
|
>

<
<
|
<
<
|
<
<
<
<
<
<
<
<
<
|

<
<
<
<
<
|
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<

|



<
|



|
|
|

|
<
<
<
|
|
|
|


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
body {
  color: #212121;
  font-family: helvetica, arial, verdana, sans-serif;
  font-size: 2em;
  line-height: 1.5;
  margin: auto;

}

header {
  display: block;
  height: 100vh;
}

h1 {
  border-top: 0.2ch solid;
  border-bottom: 0.2ch solid;
  margin: 0.5ch auto;
  text-align: center;
  width: 15ch;
}

h2 {
  color: #7f8c8d;
  font-size: 1.2em;
  font-weight: normal;
  letter-spacing: 0.5ch;
  text-align: center;
}

a {
  border-bottom: solid 0.2ch transparent;
  color: #2980b9;
  padding-bottom: 0.2ch;
  text-decoration: none;
}

a:hover {
  border-bottom: solid 0.2ch;
}

header img {
  border-radius: 100%;
  display: block;
  margin: 4% auto;
  width: 500px;
}

nav {
  margin: 2% auto;
  text-align: center;
}

nav a {
  color: #212121;

  font-size: 1.5em;
  margin: auto 2ch;

}

main img {

  display: block;
  margin: 3ch auto;
  max-width: 500px;
}

p {

  max-width: 72ch;
}

form,
input,
textarea {
  display: block;
  font-family: helvetica, arial, verdana, sans-serif;
  font-size: 1em;


  margin: 2ch auto;


  padding: 1ch;









  width: 80%;
}

























#submit {
  width: 10ch;
}

footer {

  padding: 2ch;
  text-align: center;
}

@media screen and (orientation: landscape) {
  body {
    width: 60%;
  }
}




@media screen and (orientation: portrait) {
  body {
    width: 95%;
  }
}