mirror of
https://github.com/gohugoio/hugo.git
synced 2026-08-24 15:28:54 +00:00
Mark D. Blackwell
88ec7d88d1
Organize CSS and Javascript files into directories, separating vendor
source code from home-grown.
Separate new properties and selectors in Bootstrap CSS (already edited
for Hugo) from:
1. Original property values; and
2. Changed property values.
For the home page:
1. Clarify the English text;
2. Add some element names to classes in CSS selectors (to speed loading);
3. Document the Owl Carousel and Highlight.js versions;
4. Add Owl Carousel's license;
5. Restore HTML comments to browser source views;
6. Make the beginning GitHub button transparent on focus (like the others);
7. For the final, colored Twitter and Github buttons:
a. Remove the dotted box on focus; and
b. Color them green on active.
8. To increase (layout/) source readability:
a. Place `class` attributes before `href` attributes;
b. In `class` attributes, place more-specific class names before
less-specific; and
c. Comment the beginnings and ends of Bootstrap rows.
9. To increase understandability during development:
a. Document the meaning of CSS file, `HPstyles` by renaming it to
`home-page-style`;
b. Move inline styling to CSS stylesheets;
c. Separate @media queries to a file;
d. Separate the inline Owl Carousel custom Javascript to a file;
e. Use regular Owl Carousel CSS files instead of minified ones; and
f. Rename the wide, landscape desk background image filename from
`desk-long` to `desk-wide`.
45 lines
1.2 KiB
CSS
45 lines
1.2 KiB
CSS
/* full page image header area */
|
|
|
|
@media (min-width: 1024.1px) {
|
|
.header {
|
|
background-image: url('../img/desk.jpg');
|
|
}
|
|
}
|
|
@media (max-width: 319.9px) {
|
|
.header {
|
|
background-image: url('../img/desk-sm.jpg');
|
|
}
|
|
}
|
|
@media (max-width: 319.9px), (min-width: 1024.1px) {
|
|
.header {
|
|
background-position: center center;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
}
|
|
}
|
|
@media (min-width: 320px) and (max-width: 1024px) {
|
|
.header {
|
|
background-position: 0% 0%;
|
|
-webkit-background-size: 100% 100%;
|
|
-moz-background-size: 100% 100%;
|
|
-o-background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
background-attachment: scroll;
|
|
background-clip: border-box;
|
|
background-origin: padding-box;
|
|
}
|
|
}
|
|
@media (min-width: 320px) and (max-width: 1024px) and (orientation: portrait) {
|
|
.header {
|
|
background-image: url('../img/desk-mini.jpg');
|
|
}
|
|
}
|
|
@media (min-width: 320px) and (max-width: 1024px) and (orientation: landscape) {
|
|
.header {
|
|
background-image: url('../img/desk-wide.jpg');
|
|
}
|
|
}
|