mirror of
https://github.com/Stone-Red-Code/dvc.git
synced 2026-11-10 23:10:42 +01:00
!U: Added beautification to product documentation
- applied styling to make the product documentation (doc.html) to resemble https://dataversioncontrol.com/ by its look and feel
This commit is contained in:
George Vyshnya
+210
-100
@@ -10,25 +10,19 @@ body {
|
||||
line-height: 2;
|
||||
color: #444;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
img, iframe {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
iframe {
|
||||
max-height: 100%;
|
||||
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 15px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
img {
|
||||
height:auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@@ -174,96 +168,219 @@ code {
|
||||
}
|
||||
|
||||
/* Header and Footer Styles */
|
||||
header {
|
||||
padding: 2em 0 2em 0;
|
||||
text-align: center;
|
||||
background: #26abe2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 1.5em 0;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 0;
|
||||
color: #999;
|
||||
}
|
||||
.header {
|
||||
background-image: url('../images/header-bg.jpeg');
|
||||
background-position: 50% 50% !important;
|
||||
background-size: cover;
|
||||
min-height: 173px;
|
||||
position: relative;
|
||||
overflow: hidden; }
|
||||
.header .overlay {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.175);
|
||||
height: 100vh; }
|
||||
.header .logo {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 40px 20px 0px 20px;
|
||||
position: relative; }
|
||||
.header .logo img {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.header .inner {
|
||||
max-width: 1040px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
z-index: 100; }
|
||||
.header .promo {
|
||||
height: 140px;
|
||||
padding-top: 36px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px; }
|
||||
@media (max-width: 480px) {
|
||||
.header .promo {
|
||||
height: auto;
|
||||
padding-bottom: 10px; } }
|
||||
.header .promo .title {
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
text-decoration: none;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
line-height: 1.2;
|
||||
--x-height-multiplier: 0.363;
|
||||
--baseline-multiplier: 0.157;
|
||||
letter-spacing: -.02em;
|
||||
font-weight: 700;
|
||||
font-style: normal; }
|
||||
.header .promo .subtitle {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
--x-height-multiplier: 0.363 !important;
|
||||
--baseline-multiplier: 0.157 !important;
|
||||
letter-spacing: -.02em !important;
|
||||
font-weight: 400;
|
||||
font-style: normal; }
|
||||
@media (max-width: 480px) {
|
||||
.header .promo .subtitle {
|
||||
clear: both;
|
||||
padding-top: 20px;
|
||||
font-size: 24px; } }
|
||||
|
||||
.footer {
|
||||
height: 86px;
|
||||
font-size: 14px; }
|
||||
.footer:before, .footer:after {
|
||||
content: " ";
|
||||
display: table; }
|
||||
.footer:after {
|
||||
clear: both; }
|
||||
.footer .inner {
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
margin-top: 10px;
|
||||
padding-bottom: 30px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: 1040px;
|
||||
min-height: 35px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.15); }
|
||||
.footer .inner:before, .footer .inner:after {
|
||||
content: " ";
|
||||
display: table; }
|
||||
.footer .inner:after {
|
||||
clear: both; }
|
||||
.footer .inner ul {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 30px;
|
||||
margin-top: 10px;
|
||||
list-style: none;
|
||||
float: right; }
|
||||
.footer .inner ul li {
|
||||
float: left;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
color: rgba(0, 0, 0, 0.44);
|
||||
white-space: normal;
|
||||
text-align: left; }
|
||||
.footer .inner ul li a, .footer .inner ul li span {
|
||||
color: inherit;
|
||||
font-size: 16px;
|
||||
text-decoration: none; }
|
||||
.footer .inner ul li :after {
|
||||
display: block;
|
||||
float: right;
|
||||
content: '\2013';
|
||||
border-color: #B5E4A7;
|
||||
color: #B5E4A7;
|
||||
padding-right: .45em;
|
||||
padding-left: .45em; }
|
||||
.footer .inner ul li.last :after {
|
||||
display: none; }
|
||||
.footer .inner .twitter {
|
||||
color: #000; }
|
||||
.footer .inner .twitter .ico {
|
||||
vertical-align: -3px; }
|
||||
|
||||
|
||||
/* Navigation Styles */
|
||||
nav {
|
||||
background: #135571;
|
||||
padding: 10px 0;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
nav ul, nav li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.navigation-container {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 10px; }
|
||||
.navigation-container .inner {
|
||||
max-width: 1040px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
height: 45px; }
|
||||
.navigation-container .inner:before, .navigation-container .inner:after {
|
||||
content: " ";
|
||||
display: table; }
|
||||
.navigation-container .inner:after {
|
||||
clear: both; }
|
||||
.navigation-container .inner:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 1px;
|
||||
bottom: 0px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.15); }
|
||||
@media (max-width: 480px) {
|
||||
.navigation-container .inner {
|
||||
height: 90px; } }
|
||||
.navigation-container .navigation {
|
||||
float: left;
|
||||
width: 80%;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
}
|
||||
padding-bottom: 5px; }
|
||||
@media (max-width: 480px) {
|
||||
.navigation-container .navigation {
|
||||
width: 200px;
|
||||
float: left; } }
|
||||
.navigation-container .navigation .item {
|
||||
float: left;
|
||||
display: block;
|
||||
line-height: 40px; }
|
||||
.navigation-container .navigation .item a {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 22px;
|
||||
letter-spacing: .042em;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(0, 0, 0, 0.44);
|
||||
text-decoration: none; }
|
||||
.navigation-container .navigation .divider {
|
||||
float: left;
|
||||
display: block;
|
||||
border-left: 1px solid;
|
||||
border-color: #000;
|
||||
padding-left: 22px;
|
||||
margin-top: 9px;
|
||||
height: 20px; }
|
||||
.navigation-container .navigation .divider.last {
|
||||
border-left: 0px solid; }
|
||||
|
||||
nav a {
|
||||
padding: 0 1em;
|
||||
color: #EEE;
|
||||
font-size: .9em;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
display: block;
|
||||
}
|
||||
.nav-button {
|
||||
display: inline-block;
|
||||
padding-right: 10px;
|
||||
opacity: 0.5; }
|
||||
.nav-button:hover {
|
||||
opacity: 1; }
|
||||
|
||||
nav h1 a {
|
||||
padding: 7px 1em;
|
||||
height: 46px;
|
||||
line-height: 0;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
}
|
||||
.twitter-button, .search-slider, .nav-button-share {
|
||||
margin-top: 7px;
|
||||
margin-left: 10px; }
|
||||
@media (max-width: 480px) {
|
||||
.twitter-button, .search-slider, .nav-button-share {
|
||||
margin-left: 0px; } }
|
||||
|
||||
nav a:hover {
|
||||
background: #195974;
|
||||
text-decoration: none;
|
||||
}
|
||||
.linkedin-button {
|
||||
border-color: red; }
|
||||
|
||||
nav a:active {
|
||||
background: #27637e;
|
||||
}
|
||||
.facebook-button {
|
||||
border-color: green; }
|
||||
|
||||
|
||||
nav a:active {
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
|
||||
nav ul.toplinks {
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
|
||||
nav #menu {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
clear: right;
|
||||
}
|
||||
|
||||
|
||||
nav #menu-toggle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 1.5em;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
nav #logo {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.twitter-button {
|
||||
border-color: blue; }
|
||||
|
||||
@media only screen and (min-width: 680px) {
|
||||
nav, nav #menu {
|
||||
@@ -297,13 +414,6 @@ nav #logo {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Content Styles */
|
||||
section { padding: 1em 0 3em; text-align: center; }
|
||||
.vibrant { background: #222; color: #fff; }
|
||||
|
||||
+10
-3
@@ -1,5 +1,12 @@
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p> © 2017 dataversioncontrol.com </p>
|
||||
<footer>
|
||||
<div class="footer">
|
||||
<div class="inner">
|
||||
<ul>
|
||||
<li><span>© 2017 dataversioncontrol.com</span></li>
|
||||
<li><a href="https://blog.dataversioncontrol.com/">Blog</a></li>
|
||||
<li class="last"><a href="https://twitter.com/FullStackML" class="twitter">
|
||||
<span class="ico"><svg width="16" height="16" viewBox="0 0 25 25"><path d="M21.725 5.338c-.744.47-1.605.804-2.513 1.006a3.978 3.978 0 0 0-2.942-1.293c-2.22 0-4.02 1.81-4.02 4.02 0 .32.034.63.07.94-3.31-.18-6.27-1.78-8.255-4.23a4.544 4.544 0 0 0-.574 2.01c.04 1.43.74 2.66 1.8 3.38-.63-.01-1.25-.19-1.79-.5v.08c0 1.93 1.38 3.56 3.23 3.95-.34.07-.7.12-1.07.14-.25-.02-.5-.04-.72-.07.49 1.58 1.97 2.74 3.74 2.8a8.49 8.49 0 0 1-5.02 1.72c-.3-.03-.62-.04-.93-.07A11.447 11.447 0 0 0 8.88 21c7.386 0 11.43-6.13 11.414-11.414.015-.21.01-.38 0-.578a7.604 7.604 0 0 0 2.01-2.08 7.27 7.27 0 0 1-2.297.645 3.856 3.856 0 0 0 1.72-2.23"></path></svg></span>@FullStackML</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 269 KiB |
+16
-13
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user