Browse Source

Valid html and css cleanup

master
Lokesh Dhakar 6 years ago
parent
commit
2bbcd554f6
4 changed files with 17 additions and 16 deletions
  1. +1
    -1
      css/lightbox.css
  2. +1
    -1
      css/screen.css
  3. +7
    -10
      index.html
  4. +8
    -4
      sass/screen.sass

+ 1
- 1
css/lightbox.css View File

@@ -67,7 +67,7 @@ body:after {
.lb-loader {
position: absolute;
top: 43%;
left: 0%;
left: 0;
height: 25%;
width: 100%;
text-align: center;


+ 1
- 1
css/screen.css View File

@@ -1 +1 @@
body,input,textarea{color:#ccc;font-size:18px;font-family:"Karla","lucida grande",sans-serif}h1,h2,h3,h4,h5,h6{line-height:1.2em;color:#ff8000;font-family:"Montserrat","Helvetica",sans-serif;font-weight:normal}h1{font-size:72px;line-height:1em}h2{font-size:36px;line-height:1.2em;margin-bottom:0.3em;text-transform:uppercase}h3{margin-bottom:0.5em;color:#ff8000;font-size:18px;letter-spacing:0.1em;text-align:center;text-transform:uppercase}h4{font-size:18px}p{line-height:1.7em;margin-bottom:1.7em}ol{list-style-type:decimal}ul,ol{margin:0 0 1.25em 0}li{margin-bottom:2em;line-height:1.5em}li.last-list-item{border-bottom:none}dt{font-weight:bold}dd{margin-bottom:1.625em}strong{font-weight:bold}i{font-style:italic}em{font-style:normal}pre{padding:10px;margin-top:5px;margin-bottom:10px;background-color:#151515;font-family:"Karla","lucida grande",sans-serif;line-height:1.5em;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;overflow-x:auto}code,kbd{padding:2px 4px;color:#ac8053;background-color:#151515;font-family:"Karla","lucida grande",sans-serif;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px}code{position:relative;top:-1px}pre code{top:0;padding:0;background:transparent}a{color:#4ae;text-decoration:none}a:hover{color:#d0eafb}::-moz-selection,::selection{background:#ff8000;color:#fff}.sub-point{display:block;font-size:14px}.sub-point code{font-size:12px;padding:2px}body{margin:0;padding:0;background:#222}.section{padding:0 0 40px 0;*zoom:1}.section:after{content:"";display:table;clear:both}.section.last{border-bottom:none}.section-header{position:relative;z-index:1;margin-top:0;margin-bottom:80px;color:#414141;text-align:center;font-size:72px}.section-header:before{border-top:2px solid #414141;content:"";margin:0 auto;position:absolute;top:50%;left:0;right:0;bottom:0;z-index:-1}.section-header .line-cover{background:#222;padding:0 15px}.section-content{margin:0 auto;padding-bottom:40px;max-width:800px}.row{*zoom:1}.row:after{content:"";display:table;clear:both}.intro-section{text-align:center}.logo{color:#fff;margin-bottom:0.07em}.logo .version{color:#ff8000}.author{margin-top:-9px;padding-left:23px;line-height:1.2em}.author-links{font-size:16px}.lead{font-size:22px}.examples-section{text-align:center}.image-row{*zoom:1;margin-bottom:20px}.image-row:after{content:"";display:table;clear:both}.example-image-link{display:inline-block;margin:0 10px 20px 10px;line-height:0;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;border:4px solid transparent;-webkit-transition:all 0.1s ease-out;-moz-transition:all 0.1s ease-out;-o-transition:all 0.1s ease-out;transition:all 0.1s ease-out}.example-image-link:hover{border:4px solid #4ae}.example-image{-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px}.download-section{text-align:center}.download-button{display:block;max-width:300px;margin:0 auto 20px auto;padding-top:20px;padding-bottom:10px;background-color:#090909;border:4px solid #222;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;-webkit-transition:all 0.1s ease-out;-moz-transition:all 0.1s ease-out;-o-transition:all 0.1s ease-out;transition:all 0.1s ease-out;*zoom:1}.download-button:after{content:"";display:table;clear:both}.download-button:hover{border-color:#4ae;background-color:#444}.download-button .file{font-size:36px;color:#fff;line-height:1em}.download-button .version{font-size:24px;color:#4ae}fieldset{border:none}.donate-button-form{text-align:center}.donate-button{border:4px solid rgba(0,0,0,0);-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;-webkit-transition:all 0.1s ease-out;-moz-transition:all 0.1s ease-out;-o-transition:all 0.1s ease-out;transition:all 0.1s ease-out}.donate-button:hover{background-color:#444;border-color:#4ae}.credits-section{text-align:center}.sharing-section{position:fixed;top:20px;right:0}@media only screen and (max-width: 640px){body{font-size:14px}h1{font-size:48px}h2{font-size:26px}h3{font-size:16px}ol{list-style-position:inside}code,kbd,pre,pre code{font-size:11px}.sub-point{font-size:12px}.sub-point code{font-size:9px}.lead{font-size:16px}.section{padding-bottom:20px;margin-bottom:20px}.author{margin-top:-5px;padding-left:30px}.author-links{font-size:12px}}
body,input,textarea{color:#ccc;font-size:18px;font-family:"Karla","lucida grande",sans-serif}h1,h2,h3,h4,h5,h6{line-height:1.2em;color:#ff8000;font-family:"Montserrat","Helvetica",sans-serif;font-weight:normal}h1{font-size:72px;line-height:1em}h2{font-size:36px;line-height:1.2em;margin-bottom:0.3em;text-transform:uppercase}h3{color:#ff8000;margin-bottom:0.5em;font-size:24px;letter-spacing:1px;text-align:center;text-transform:uppercase}h4{font-size:18px}p{line-height:1.7em;margin-bottom:1.7em}ol{list-style-type:decimal}ul,ol{margin:0 0 1.25em 0}li{margin-bottom:2em;line-height:1.5em}li.last-list-item{border-bottom:none}dt{font-weight:bold}dd{margin-bottom:1.625em}strong{font-weight:bold}i{font-style:italic}em{font-style:normal}pre{padding:10px;margin-top:5px;margin-bottom:10px;background-color:#151515;font-family:"Karla","lucida grande",sans-serif;line-height:1.5em;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;overflow-x:auto}code,kbd{padding:2px 4px;color:#ac8053;background-color:#151515;font-family:"Karla","lucida grande",sans-serif;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px}code{position:relative;top:-1px}pre code{top:0;padding:0;background:transparent}a{color:#4ae;text-decoration:none}a:hover{color:#d0eafb}::-moz-selection,::selection{background:#ff8000;color:#fff}.sub-point{display:block;font-size:14px}.sub-point code{font-size:12px;padding:2px}body{margin:0;padding:0;background:#222}.section{padding:0 0 40px 0;*zoom:1}.section:after{content:"";display:table;clear:both}.section.last{border-bottom:none}.section-header{position:relative;z-index:5;margin-top:0;margin-bottom:80px;color:#414141;text-align:center;font-size:72px}.section-header:before{border-top:2px solid #414141;content:"";margin:0 auto;position:absolute;top:50%;left:0;right:0;bottom:0;z-index:-1}.section-header .line-cover{background:#222;padding:0 15px}.section-content{margin:0 auto;padding-bottom:40px;max-width:800px}.row{*zoom:1}.row:after{content:"";display:table;clear:both}.intro-section{text-align:center}.logo{color:#fff;margin-bottom:0.07em}.logo .version{color:#ff8000}.author{margin-top:-9px;padding-left:23px;line-height:1.2em}.author-links{font-size:16px}.lead{font-size:22px}.examples-section{text-align:center}.image-row{*zoom:1;margin-bottom:20px}.image-row:after{content:"";display:table;clear:both}.example-image-link{display:inline-block;margin:0 10px 20px 10px;line-height:0;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;border:4px solid transparent;-webkit-transition:all 0.1s ease-out;-moz-transition:all 0.1s ease-out;-o-transition:all 0.1s ease-out;transition:all 0.1s ease-out}.example-image-link:hover{border:4px solid #4ae}.example-image{-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px}.download-section{text-align:center}.download-button{display:block;max-width:300px;margin:0 auto 20px auto;padding-top:20px;padding-bottom:10px;background-color:#090909;border:4px solid #222;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;-webkit-transition:all 0.1s ease-out;-moz-transition:all 0.1s ease-out;-o-transition:all 0.1s ease-out;transition:all 0.1s ease-out;*zoom:1}.download-button:after{content:"";display:table;clear:both}.download-button:hover{border-color:#4ae;background-color:#444}.download-button .file{font-size:36px;color:#fff;line-height:1em}.download-button .version{font-size:24px;color:#4ae}fieldset{border:none}.donate-button-form{text-align:center}.donate-button{border:4px solid rgba(0,0,0,0);-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;-webkit-transition:all 0.1s ease-out;-moz-transition:all 0.1s ease-out;-o-transition:all 0.1s ease-out;transition:all 0.1s ease-out}.donate-button:hover{background-color:#444;border-color:#4ae}.credits-section{text-align:center}.sharing-section{position:fixed;z-index:10;top:20px;right:0}@media only screen and (max-width: 640px){body{font-size:14px}h1{font-size:48px}h2{font-size:26px}h3{font-size:16px}ol{list-style-position:inside}code,kbd,pre,pre code{font-size:11px}.sub-point{font-size:12px}.sub-point code{font-size:9px}.lead{font-size:16px}.section{padding-bottom:20px;margin-bottom:20px}.author{margin-top:-5px;padding-left:30px}.author-links{font-size:12px}}

+ 7
- 10
index.html View File

@@ -10,9 +10,9 @@
<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="shortcut icon" href="img/demopage/favicon.ico">
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Karla|Montserrat'>
<link rel="stylesheet" href="css/screen.css" media="screen">
<link rel="stylesheet" href="css/lightbox.css" media="screen">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat">
<link rel="stylesheet" href="css/screen.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<body>

@@ -24,7 +24,7 @@
<p class="author">
by Lokesh Dhakar<br />
<span class="author-links">
<a href="http://lokeshdhakar.com">Blog</a> - <a href="http://twitter.com/lokesh">Twitter</a> - <a href="http://github.com/lokesh">Github</a>
<a href="http://lokeshdhakar.com">Blog</a> - <a href="https://twitter.com/lokesh">Twitter</a> - <a href="https://github.com/lokesh">Github</a>
</span>
</p>
<p class="lead">
@@ -124,11 +124,8 @@
<p>If you want a feature added, please create an <a href="https://github.com/lokesh/lightbox2/issues">issue on Github</a>. Someone else or I might be able to help out. No guarantees.</p>

<h3>Support questions</h3>
<p>If you have a question that is not a bug or a feature request, your best chance of getting an answer is by following these steps:</p>
<ol class="simple-list">
<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>
<p>If you have a question that is not a bug or a feature request, your best chance of getting an answer is by posting it on <a href="http://stackoverflow.com/">Stackoverflow</a>.</p>

<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>
</div>
@@ -160,7 +157,7 @@
<section id="credits" class="credits-section last">
<div class="section-content">
<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>
<a href="http://lokeshdhakar.com">Blog</a> - <a href="https://twitter.com/lokesh">Twitter</a> - <a href="http://github.com/lokesh">Github</a></p>
</div>
</section>



+ 8
- 4
sass/screen.sass View File

@@ -32,6 +32,9 @@ $gutter: 40px
$base-line-height: 1.7em
$max-column-width: 800px

$section-header-z-index: 5
$sharing-section-z-index: 10


// UI COMPONENTS --------------------------------------------------------

@@ -71,10 +74,10 @@ h2
text-transform: uppercase

h3
margin-bottom: 0.5em
color: $heading-color
font-size: $font-size
letter-spacing: 0.1em
margin-bottom: 0.5em
font-size: 24px
letter-spacing: 1px
text-align: center
text-transform: uppercase

@@ -172,7 +175,7 @@ body

.section-header
position: relative
z-index: 1
z-index: $section-header-z-index
margin-top: 0
margin-bottom: $gutter * 2
color: lighten($bg-color, 12%)
@@ -298,6 +301,7 @@ fieldset

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



Loading…
Cancel
Save