Use built in html tags

This commit is contained in:
theblobscp
2021-09-04 15:03:21 -04:00
parent 48edba50f1
commit e1ccff6ca6
2 changed files with 145 additions and 67 deletions
+4 -4
View File
@@ -20,13 +20,13 @@
</head>
<body>
<div id="header">
<header>
<nav>
<li class="fork"><a href="https://github.com/lukesampson/scoop">View On GitHub</a></li>
</nav>
</div><!-- end header -->
</header>
<div class="wrapper">
<main>
<section>
<div id="title">
@@ -46,7 +46,7 @@
<span class="credits left">Project maintained by <a href="https://github.com/lukesampson">lukesampson</a></span>
<span class="credits right">Hosted on GitHub Pages &mdash; Theme by <a href="https://twitter.com/michigangraham">mattgraham</a></span>
</div>
</div>
</main>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
+141 -63
View File
@@ -1,68 +1,103 @@
@font-face {
font-family: 'OpenSansLight';
font-family: "OpenSansLight";
src: url("../fonts/OpenSans-Light-webfont.eot");
src: url("../fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Light-webfont.woff") format("woff"), url("../fonts/OpenSans-Light-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Light-webfont.svg#OpenSansLight") format("svg");
src: url("../fonts/OpenSans-Light-webfont.eot?#iefix")
format("embedded-opentype"),
url("../fonts/OpenSans-Light-webfont.woff") format("woff"),
url("../fonts/OpenSans-Light-webfont.ttf") format("truetype"),
url("../fonts/OpenSans-Light-webfont.svg#OpenSansLight") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansLightItalic';
font-family: "OpenSansLightItalic";
src: url("../fonts/OpenSans-LightItalic-webfont.eot");
src: url("../fonts/OpenSans-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-LightItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-LightItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic") format("svg");
src: url("../fonts/OpenSans-LightItalic-webfont.eot?#iefix")
format("embedded-opentype"),
url("../fonts/OpenSans-LightItalic-webfont.woff") format("woff"),
url("../fonts/OpenSans-LightItalic-webfont.ttf") format("truetype"),
url("../fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic")
format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansRegular';
font-family: "OpenSansRegular";
src: url("../fonts/OpenSans-Regular-webfont.eot");
src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg");
src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix")
format("embedded-opentype"),
url("../fonts/OpenSans-Regular-webfont.woff") format("woff"),
url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"),
url("../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg");
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
}
@font-face {
font-family: 'OpenSansItalic';
font-family: "OpenSansItalic";
src: url("../fonts/OpenSans-Italic-webfont.eot");
src: url("../fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Italic-webfont.woff") format("woff"), url("../fonts/OpenSans-Italic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Italic-webfont.svg#OpenSansItalic") format("svg");
src: url("../fonts/OpenSans-Italic-webfont.eot?#iefix")
format("embedded-opentype"),
url("../fonts/OpenSans-Italic-webfont.woff") format("woff"),
url("../fonts/OpenSans-Italic-webfont.ttf") format("truetype"),
url("../fonts/OpenSans-Italic-webfont.svg#OpenSansItalic") format("svg");
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
}
@font-face {
font-family: 'OpenSansSemibold';
font-family: "OpenSansSemibold";
src: url("../fonts/OpenSans-Semibold-webfont.eot");
src: url("../fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Semibold-webfont.woff") format("woff"), url("../fonts/OpenSans-Semibold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold") format("svg");
src: url("../fonts/OpenSans-Semibold-webfont.eot?#iefix")
format("embedded-opentype"),
url("../fonts/OpenSans-Semibold-webfont.woff") format("woff"),
url("../fonts/OpenSans-Semibold-webfont.ttf") format("truetype"),
url("../fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold") format("svg");
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
}
@font-face {
font-family: 'OpenSansSemiboldItalic';
font-family: "OpenSansSemiboldItalic";
src: url("../fonts/OpenSans-SemiboldItalic-webfont.eot");
src: url("../fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-SemiboldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-SemiboldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic") format("svg");
src: url("../fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix")
format("embedded-opentype"),
url("../fonts/OpenSans-SemiboldItalic-webfont.woff") format("woff"),
url("../fonts/OpenSans-SemiboldItalic-webfont.ttf") format("truetype"),
url("../fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic")
format("svg");
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
}
@font-face {
font-family: 'OpenSansBold';
font-family: "OpenSansBold";
src: url("../fonts/OpenSans-Bold-webfont.eot");
src: url("../fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold-webfont.woff") format("woff"), url("../fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Bold-webfont.svg#OpenSansBold") format("svg");
src: url("../fonts/OpenSans-Bold-webfont.eot?#iefix")
format("embedded-opentype"),
url("../fonts/OpenSans-Bold-webfont.woff") format("woff"),
url("../fonts/OpenSans-Bold-webfont.ttf") format("truetype"),
url("../fonts/OpenSans-Bold-webfont.svg#OpenSansBold") format("svg");
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
}
@font-face {
font-family: 'OpenSansBoldItalic';
font-family: "OpenSansBoldItalic";
src: url("../fonts/OpenSans-BoldItalic-webfont.eot");
src: url("../fonts/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-BoldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-BoldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic") format("svg");
src: url("../fonts/OpenSans-BoldItalic-webfont.eot?#iefix")
format("embedded-opentype"),
url("../fonts/OpenSans-BoldItalic-webfont.woff") format("woff"),
url("../fonts/OpenSans-BoldItalic-webfont.ttf") format("truetype"),
url("../fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic")
format("svg");
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
@@ -258,7 +293,7 @@ code,
kbd,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
_font-family: "courier new", monospace;
font-size: 1em;
}
@@ -274,7 +309,7 @@ q {
/* 2 */
q:before,
q:after {
content: '';
content: "";
content: none;
}
@@ -531,12 +566,19 @@ table {
body {
padding: 0px 0 20px 0px;
margin: 0px;
font: 14px/1.5 "OpenSansRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
font: 14px/1.5 "OpenSansRegular", "Helvetica Neue", Helvetica, Arial,
sans-serif;
color: #f0e7d5;
font-weight: normal;
background: #252525;
background-attachment: fixed !important;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2a2a29), color-stop(100%, #1c1c1c));
background: -webkit-gradient(
linear,
50% 0%,
50% 100%,
color-stop(0%, #2a2a29),
color-stop(100%, #1c1c1c)
);
background: -webkit-linear-gradient(#2a2a29, #1c1c1c);
background: -moz-linear-gradient(#2a2a29, #1c1c1c);
background: -o-linear-gradient(#2a2a29, #1c1c1c);
@@ -544,18 +586,30 @@ body {
background: linear-gradient(#2a2a29, #1c1c1c);
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
color: #e8e8e8;
margin: 0 0 10px;
font-family: 'OpenSansRegular', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "OpenSansRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
}
p, ul, ol, table, pre, dl {
p,
ul,
ol,
table,
pre,
dl {
margin: 0 0 20px;
}
h1, h2, h3 {
h1,
h2,
h3 {
line-height: 1.1;
}
@@ -567,14 +621,16 @@ h2 {
font-size: 24px;
}
h4, h5, h6 {
h4,
h5,
h6 {
color: #e8e8e8;
}
h3 {
font-size: 18px;
line-height: 24px;
font-family: 'OpenSansRegular', "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-family: "OpenSansRegular", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: normal;
color: #b6b6b6;
}
@@ -600,11 +656,11 @@ ul {
}
strong {
font-family: 'OpenSansBold', "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-family: "OpenSansBold", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: normal;
}
.wrapper {
main {
max-width: 874px;
margin: 0 auto;
position: relative;
@@ -612,17 +668,17 @@ strong {
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section img {
@@ -637,7 +693,8 @@ blockquote {
}
code {
font-family: "Lucida Sans", Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
font-family: "Lucida Sans", Monaco, Bitstream Vera Sans Mono, Lucida Console,
Terminal;
color: #efefef;
font-size: 13px;
margin: 0 4px;
@@ -684,7 +741,8 @@ th {
padding: 5px 10px;
border-bottom: 1px solid #434343;
color: #b6b6b6;
font-family: 'OpenSansSemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-family: "OpenSansSemibold", "Helvetica Neue", Helvetica, Arial,
sans-serif !important;
font-weight: normal;
}
@@ -703,12 +761,13 @@ hr {
}
dt {
color: #F0E7D5;
font-family: 'OpenSansSemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important;
color: #f0e7d5;
font-family: "OpenSansSemibold", "Helvetica Neue", Helvetica, Arial,
sans-serif !important;
font-weight: normal;
}
#header {
header {
z-index: 100;
left: 0;
top: 0px;
@@ -722,15 +781,15 @@ dt {
-o-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
}
#header nav {
header nav {
max-width: 854px;
margin: 0 auto;
padding: 0 10px;
background: blue;
margin: 6px auto;
}
#header nav li {
font-family: 'OpenSansLight', "Helvetica Neue", Helvetica, Arial, sans-serif;
header nav li {
font-family: "OpenSansLight", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
list-style: none;
display: inline;
@@ -739,10 +798,16 @@ dt {
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
font-size: 14px;
}
#header nav li a {
header nav li a {
color: white;
border: 1px solid #5d910b;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #93bd20), color-stop(100%, #659e10));
background: -webkit-gradient(
linear,
50% 0%,
50% 100%,
color-stop(0%, #93bd20),
color-stop(100%, #659e10)
);
background: -webkit-linear-gradient(#93bd20, #659e10);
background: -moz-linear-gradient(#93bd20, #659e10);
background: -o-linear-gradient(#93bd20, #659e10);
@@ -754,10 +819,14 @@ dt {
-ms-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 3px 7px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 3px 7px rgba(0, 0, 0, 0.7);
-o-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 3px 7px rgba(0, 0, 0, 0.7);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 3px 7px rgba(0, 0, 0, 0.7);
-moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3),
0px 3px 7px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3),
0px 3px 7px rgba(0, 0, 0, 0.7);
-o-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3),
0px 3px 7px rgba(0, 0, 0, 0.7);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3),
0px 3px 7px rgba(0, 0, 0, 0.7);
background-color: #93bd20;
padding: 10px 12px;
margin-top: 6px;
@@ -766,8 +835,14 @@ dt {
display: inline-block;
text-align: center;
}
#header nav li a:hover {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #749619), color-stop(100%, #527f0e));
header nav li a:hover {
background: -webkit-gradient(
linear,
50% 0%,
50% 100%,
color-stop(0%, #749619),
color-stop(100%, #527f0e)
);
background: -webkit-linear-gradient(#749619, #527f0e);
background: -moz-linear-gradient(#749619, #527f0e);
background: -o-linear-gradient(#749619, #527f0e);
@@ -775,20 +850,23 @@ dt {
background: linear-gradient(#749619, #527f0e);
background-color: #659e10;
border: 1px solid #527f0e;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(0, 0, 0, 0);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(0, 0, 0, 0);
-o-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(0, 0, 0, 0);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2),
0px 1px 0px rgba(0, 0, 0, 0);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2),
0px 1px 0px rgba(0, 0, 0, 0);
-o-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2),
0px 1px 0px rgba(0, 0, 0, 0);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(0, 0, 0, 0);
}
#header nav li.fork {
header nav li.fork {
float: left;
margin-left: 0px;
}
#header nav li.downloads {
header nav li.downloads {
float: right;
margin-left: 6px;
}
#header nav li.title {
header nav li.title {
float: right;
margin-right: 10px;
font-size: 11px;
@@ -807,7 +885,7 @@ section #title {
padding: 0 0 5px 0;
}
section #title h1 {
font-family: 'OpenSansLight', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "OpenSansLight", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 40px;
text-align: center;
@@ -815,14 +893,14 @@ section #title h1 {
}
section #title p {
color: #d7cfbe;
font-family: 'OpenSansLight', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "OpenSansLight", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 18px;
text-align: center;
}
.credits {
font-size: 11px;
font-family: 'OpenSansRegular', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "OpenSansRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #696969;
margin-top: -10px;
@@ -851,7 +929,7 @@ section #title p {
}
}
@media print, screen and (max-width: 480px) {
#header {
header {
margin-top: -20px;
}