Browse Source

Demo page finessing. Paragraph margin bottom increase and addition of author credits at bottom of page.

master
Lokesh Dhakar 7 years ago
parent
commit
994ae69a08
3 changed files with 54 additions and 35 deletions
  1. +30
    -24
      css/screen.css
  2. +11
    -3
      index.html
  3. +13
    -8
      sass/screen.sass

+ 30
- 24
css/screen.css View File

@@ -115,7 +115,7 @@ h4 {
/* line 45, ../sass/screen.sass */
p {
line-height: 1.4em;
margin-bottom: 1em;
margin-bottom: 1.4em;
}

/* line 49, ../sass/screen.sass */
@@ -420,21 +420,13 @@ body {
color: #00bfa8;
}

/* -- Sharing -- */
/* line 226, ../sass/screen.sass */
.sharing {
position: fixed;
top: 20px;
right: 0;
}

/* -- Donate -- */
/* line 233, ../sass/screen.sass */
/* line 226, ../sass/screen.sass */
.donate-button-form {
text-align: center;
}

/* line 235, ../sass/screen.sass */
/* line 228, ../sass/screen.sass */
.donate-button {
border: 4px solid rgba(0, 0, 0, 0);
-webkit-border-radius: 4px;
@@ -447,41 +439,55 @@ body {
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
/* line 239, ../sass/screen.sass */
/* line 232, ../sass/screen.sass */
.donate-button:hover {
background-color: #444444;
border-color: #00bfa8;
}

/* -- Credits -- */
/* line 238, ../sass/screen.sass */
.credits-section {
text-align: center;
}

/* -- Sharing -- */
/* line 243, ../sass/screen.sass */
.sharing-section {
position: fixed;
top: 20px;
right: 0;
}

/* -- Responsive design -------------------------------------------------------------- */
@media only screen and (max-width: 640px) {
/* line 247, ../sass/screen.sass */
/* line 252, ../sass/screen.sass */
body {
margin: 80px 10px 40px 10px;
font-size: 14px;
}

/* line 250, ../sass/screen.sass */
/* line 255, ../sass/screen.sass */
h1 {
font-size: 48px;
}

/* line 252, ../sass/screen.sass */
/* line 257, ../sass/screen.sass */
h2 {
font-size: 26px;
}

/* line 254, ../sass/screen.sass */
/* line 259, ../sass/screen.sass */
h3 {
font-size: 16px;
}

/* line 256, ../sass/screen.sass */
/* line 261, ../sass/screen.sass */
ol {
list-style-position: inside;
}

/* line 258, ../sass/screen.sass */
/* line 263, ../sass/screen.sass */
code,
kbd,
pre,
@@ -489,33 +495,33 @@ body {
font-size: 11px;
}

/* line 263, ../sass/screen.sass */
/* line 268, ../sass/screen.sass */
.sub-point {
font-size: 12px;
}
/* line 265, ../sass/screen.sass */
/* line 270, ../sass/screen.sass */
.sub-point code {
font-size: 9px;
}

/* line 267, ../sass/screen.sass */
/* line 272, ../sass/screen.sass */
.lead {
font-size: 16px;
}

/* line 269, ../sass/screen.sass */
/* line 274, ../sass/screen.sass */
.section {
padding-bottom: 20px;
margin-bottom: 20px;
}

/* line 272, ../sass/screen.sass */
/* line 277, ../sass/screen.sass */
.author {
margin-top: -5px;
padding-left: 30px;
}

/* line 275, ../sass/screen.sass */
/* line 280, ../sass/screen.sass */
.author-links {
font-size: 12px;
}


+ 11
- 3
index.html View File

@@ -27,7 +27,7 @@
<p class="author">
by Lokesh Dhakar<br />
<span class="author-links">
<a href="https://twitter.com/intent/user?screen_name=lokesh">Follow me on Twitter</a>
<a href="http://lokeshdhakar.com">Blog</a> - <a href="http://twitter.com/lokesh">Twitter</a> - <a href="http://github.com/lokesh">Github</a>
</span>
</p>
<p class="lead">
@@ -129,9 +129,12 @@
<li><a href="http://stackoverflow.com/">Search Stackoverflow</a>.</li>
<li class="last-list-item"><a href="http://stackoverflow.com/questions/ask">Create a new question on Stackoverflow</a>.</li>
</ol>
<h3>Older versions</h3>
<p>See a change log and access older versions on the <a href="https://github.com/lokesh/lightbox2/releases">Github releases page</a>.</p>

</section>

<section id="doante" class="section donate-section last">
<section id="doante" class="section donate-section">
<header>
<h2 class="section-header">Donate</h2>
</header>
@@ -152,7 +155,12 @@
</form>
</section>

<section id="sharing" class="sharing">
<section id="credits" class="credits-section last">
<p>Lightbox2 created by Lokesh Dhakar<br />
<a href="http://lokeshdhakar.com">Blog</a> - <a href="http://twitter.com/lokesh">Twitter</a> - <a href="http://github.com/lokesh">Github</a></p>
</section>

<section id="sharing" class="sharing-section">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="lokesh" data-size="large">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</section>


+ 13
- 8
sass/screen.sass View File

@@ -44,7 +44,7 @@ h4

p
line-height: 1.4em
margin-bottom: 1em
margin-bottom: 1.4em

ol
list-style-type: decimal
@@ -221,13 +221,6 @@ body
font-size: 24px
color: $linkColor

/* -- Sharing -- */

.sharing
position: fixed
top: 20px
right: 0

/* -- Donate -- */

.donate-button-form
@@ -240,6 +233,18 @@ body
background-color: #444
border-color: $linkColor

/* -- Credits -- */

.credits-section
text-align: center

/* -- Sharing -- */

.sharing-section
position: fixed
top: 20px
right: 0


/* -- Responsive design -------------------------------------------------------------- */



Loading…
Cancel
Save