Update Header Style

This commit is contained in:
Glenwing 2018-03-15 16:18:27 -07:00
parent 06048fa701
commit e8d49d374b
3 changed files with 83 additions and 22 deletions

View File

@ -11,13 +11,14 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Display Info Utility</title> <title>Display Info Utility</title>
<link rel="stylesheet" type="text/css" href="./style.css" /> <link rel="stylesheet" type="text/css" href="./style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<div class="main"> <div class="main">
<div class="header number"> <div class="header number">
<a href="https://glenwing.github.io"><span><span class="arrow">&#11025;</span>&nbsp;&nbsp;Display Info Utility</span></a> <a href="https://glenwing.github.io"><i class="material-icons back_arrow">subdirectory_arrow_left</i>&nbsp;Video Bandwidth Calculator</a>
<hr /> <hr />
</div> </div>
<div style="width:512px; margin-left:auto; margin-right:auto;"> <div style="width:512px; margin-left:auto; margin-right:auto;">

View File

@ -54,7 +54,9 @@ div.footer a {
div.header { div.header {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
padding: 16px; padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
padding-bottom: 0px; padding-bottom: 0px;
min-width: 480px; min-width: 480px;
} }
@ -63,12 +65,11 @@ div.header a {
text-decoration: none; text-decoration: none;
color: #000000; color: #000000;
} }
div.header span.arrow { div.header i.back_arrow {
font-size: 20px; transform:rotate(90deg) scale(0.75);
line-height: 0; line-height:0;
top: 0.1em; position:relative;
vertical-align: baseline; bottom:-0.2em;
position: relative;
} }
div.title { div.title {
@ -163,4 +164,11 @@ span.res_x {
position: relative; position: relative;
top: -0.1em; top: -0.1em;
line-height: 0; line-height: 0;
}
hr {
height: 1px;
border-width: 0;
color: #888888;
background-color: #888888;
} }

View File

@ -14,6 +14,13 @@
font-family: "Consolas", "Inconsolata", "Lucida Console", Monospace; font-family: "Consolas", "Inconsolata", "Lucida Console", Monospace;
font-size:15px; font-size:15px;
min-height:100%; min-height:100%;
line-height: 120%;
overflow-y: scroll;
}
.number {
font-family: "Consolas", "Inconsolata", "Lucida Console", Monospace;
font-size: 15px;
} }
div.wrapper { div.wrapper {
@ -22,20 +29,53 @@
} }
div.main { div.main {
border:0px solid transparent; border: 0px solid transparent;
font-size:15px; font-size: 15px;
padding:16px; padding-bottom: 48px;
padding-bottom:48px; margin-left: auto;
margin-right: auto;
} }
div.footer { div.footer {
width:100%; width: 100%;
position:absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
vertical-align:middle; vertical-align: middle;
background-color:#DDDDDD; background-color: #DDDDDD;
cursor:pointer; cursor: pointer;
min-width: 512px;
padding-top: 10px;
padding-bottom: 10px;
font-family: "Consolas", "Inconsolata", "Lucida Console", Monospace;
font-size: 15px;
}
div.footer a {
color: #888888;
text-decoration: none;
vertical-align: middle;
padding: 10px;
}
div.header {
font-weight: bold;
font-size: 16px;
padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
padding-bottom: 0px;
min-width: 480px;
}
div.header a {
cursor: pointer;
text-decoration: none;
color: #000000;
}
div.header i.back_arrow {
transform:rotate(90deg) scale(0.75);
line-height:0;
position:relative;
bottom:-0.2em;
} }
span.title { span.title {
@ -63,6 +103,13 @@
color:#000000; color:#000000;
text-decoration:underline; text-decoration:underline;
} }
hr {
height: 1px;
border-width: 0;
color: #888888;
background-color: #888888;
}
</style> </style>
@ -70,12 +117,16 @@
<head> <head>
<title>Display Industry Standards and Specifications</title> <title>Display Industry Standards and Specifications</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<div class="main"> <div class="main">
<div style="font-weight:bold; font-size:16px;"><a href="https://glenwing.github.io" style="text-decoration:none; color:#000000">Display Industry Standards Archive</a><br /><hr /></div> <div class="header number">
<a href="https://glenwing.github.io"><i class="material-icons back_arrow">subdirectory_arrow_left</i>&nbsp;Display Industry Standards Archive</a>
<hr />
</div>
<table> <table>
<tr><td><span class="title">DisplayPort Standard</span> <tr><td><span class="title">DisplayPort Standard</span>
<ul> <ul>
@ -188,12 +239,13 @@
<ul> <ul>
<li><a target="_blank" href="https://glenwing.github.io/docs/VESA-EDDC-1.2.pdf">E-DDC Version 1.2</a> (2007&nbsp;December&nbsp;26)</li> <li><a target="_blank" href="https://glenwing.github.io/docs/VESA-EDDC-1.2.pdf">E-DDC Version 1.2</a> (2007&nbsp;December&nbsp;26)</li>
<li><a target="_blank" href="https://glenwing.github.io/docs/VESA-DDCCI-1.1.pdf">DDC/CI Version 1.1</a> (2004&nbsp;October&nbsp;29)</li> <li><a target="_blank" href="https://glenwing.github.io/docs/VESA-DDCCI-1.1.pdf">DDC/CI Version 1.1</a> (2004&nbsp;October&nbsp;29)</li>
</ul>
</td></tr> </td></tr>
</table> </table>
</div> </div>
<div class="footer" onclick="document.getElementById('profile_link').click();" style="padding-top:10px; padding-bottom:10px;"> <div class="footer" onclick="document.getElementById('profile_link').click();">
<a id="profile_link" target="_blank" href="https://linustechtips.com/main/profile/2466-glenwing/" style="color:#888888; text-decoration:none; vertical-align:middle; padding:10px;">Glenwing</a> <a id="profile_link" target="_blank" href="https://linustechtips.com/main/profile/2466-glenwing/">Glenwing</a>
</div> </div>
</div> </div>
</body> </body>