jelkner
/
elknernet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor to use semantic elements and improve CSS

Browse Source
main
Jeff Elkner 2 years ago
parent 0de6cf25ab
commit b93c4df7e6
2 changed files with 125 additions and 97 deletions
Show Stats Download Patch File Download Diff File

160
css/elknernet.css
Unescape Escape View File

@ -1,87 +1,93 @@
body { body {
color: #000; color: #000;
background-color: #FFF; background-color: #FFF;
margin: 50px; font-family: 'Ubuntu', sans-serif;
} }
h1, h2 { a, a:visited {
font-family: Arial, sans-serif;
}
a, :visited {
color: #A70; color: #A70;
background-color: #FFF; background-color: #FFF;
} }
img { img {
border: 0; border: 0;
} }
p { header {
text-align: justify; display: grid;
font-size: 1.2em; grid-template-columns: 25vw auto;
} grid-template-rows: auto auto auto auto; */
blockquote { margin-left: 5vw;
margin-top: 40px; margin-right: 5vw;
padding: .5em 1em; }
border-left: 5px solid #FCE27C; header>h1 {
border-radius: 40px; grid-area: 1 / 2 / 2 / 3;
background-color: #FAF0D1; font-size: 3.5vw;
font-size: .8em; color: #000;
} text-shadow: 0.1em 0.1em 0.2em #960;
blockquote p {
font-style: italic;
} }
blockquote p:first-letter { header>img {
float: left; grid-area: 1 / 1 / 3 / 2;
font-size: 2em; display: block;
color: #960; width: 20vw;
padding-right: 2vw;
}
header>p {
grid-area: 2 / 2 / 3 / 3;
margin-top: -3vw;
margin-left: 3vw;
margin-right: 3vw;
font-size: 1.4vw;
}
header>div#author {
grid-area: 3 / 2 / 4 / 3;
text-align: right;
margin-right: 9vw;
margin-top: -4vw;
font-weight: bold;
font-style: normal;
font-size: 1.3vw;
color: #630;
} }
div.split { header>nav {
clear: both; grid-area: 4 / 1 / 5 / 3;
width: 100%; font-size: 1.7vw;
font-weight: bold;
margin-left: 2vw;
} }
div.left, div.right { a, a:visited {
display: table-cell; text-decoration: none;
width: 50%;
position: relative;
} }
div.left { main {
float: left; font-family: 'Ubuntu Condensed', sans-serif;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
margin-top: 1vw;
} }
.author { section {
font-weight: bold; margin-left: 4vw;
font-style: normal;
text-align: right;
margin-top: -5px;
margin-right: 50px;
color: #630;
} }
header { section>h2 {
height: 170px; font-size: 1.6vw;
width: 100%; margin-bottom: 0;
font-family: Arial, sans-serif;
} }
header h1 { section>ul>li {
font-size: 2.5em; font-size: 1.1vw;
color: #000;
margin-top: 50px;
text-shadow: 0.1em 0.1em 0.2em #960;
} }
header div#logo { section#papers {
float: right; grid-column: span 2;
margin-left: 50px;
} }
footer { footer {
margin-top: 50px; margin-top: 5vw;
font-size: .6em;
text-align: center; text-align: center;
} }
footer p { footer>p {
text-align: center; text-align: center;
} }
footer a { footer>a {
display: inline; display: inline;
margin-right: 10px; margin-right: 10px;
width: 50px; width: 5vw;
padding: 1px; padding: 0.08vw;
font-size: 9px; font-size: 0.8vw;
font-family: Verdana, Geneva, sans-serif; font-family: Verdana, Geneva, sans-serif;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
@ -92,18 +98,46 @@ footer a {
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
footer a strong { footer>a>strong {
font-weight: bold; font-weight: bold;
color: #FFF; color: #FFF;
background-color: #960; background-color: #960;
padding-left: 2px; padding-left: 0.2vw;
margin-right: 5px; margin-right: 0.5vw;
} }
footer a:hover { footer>a:hover {
color: #FFF; color: #FFF;
background-color: #960; background-color: #960;
} }
footer a:hover strong { footer a:hover>strong {
color: #960; color: #960;
background-color: #DDD; background-color: #DDD;
} }
p {
text-align: justify;
font-size: 1.2em;
}
blockquote {
margin-top: 40px;
padding: .5em 1em;
border-left: 5px solid #FCE27C;
border-radius: 40px;
background-color: #FAF0D1;
font-size: .8em;
}
blockquote p {
font-style: italic;
}
blockquote p:first-letter {
float: left;
font-size: 2em;
color: #960;
}
.author {
font-weight: bold;
font-style: normal;
text-align: right;
margin-top: -5px;
margin-right: 50px;
color: #630;
}

62
index.html
Unescape Escape View File

@ -2,6 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Ubuntu Condensed'
rel='stylesheet'>
<title>Welcome to elkner.net!</title> <title>Welcome to elkner.net!</title>
<style> <style>
@import url(css/elknernet.css); @import url(css/elknernet.css);
@ -10,27 +13,23 @@
<body> <body>
<header> <header>
<div id="logo">
<img src="static/images/debian_gnu_linux.png" alt="Debian GNU/Linux"> <img src="static/images/debian_gnu_linux.png" alt="Debian GNU/Linux">
</div>
<h1>Welcome to elkner.net!</h1> <h1>Welcome to elkner.net!</h1>
<p> <p>
I'm *WAY* too busy with all the exciting projects I'm working on to do much I'm *WAY* too busy with all the exciting projects I'm working on to do much
with this page, so let me just include contact information and some links. with this page, so let me just include contact information and some links.
Check them out! Check them out!
</p> </p>
<p class="author" style="text-align: right; padding-right: 360px;"> <div id="author">-- Jeff Elkner</div>
-- Jeff Elkner</p> <nav>
</header>
<h2>
<a href="http://weblog.elkner.net">Weblog</a> | <a href="http://weblog.elkner.net">Weblog</a> |
<a href="contact.html">Contact Information</a> | <a href="contact.html">Contact Information</a> |
<a href="static/resume.html">Resume</a> <a href="static/resume.html">Resume</a>
</h2> </nav>
</header>
<div class="split"> <main>
<div class="left"> <section>
<h2>Current Activities/Projects:</h2> <h2>Current Activities/Projects:</h2>
<ul> <ul>
<li><a href="https://novawebdevelopment.org/">NOVA Web Development</a></li> <li><a href="https://novawebdevelopment.org/">NOVA Web Development</a></li>
@ -39,9 +38,9 @@ Check them out!
<li><a href="http://openbookproject.net/">The Open Book Project</a></li> <li><a href="http://openbookproject.net/">The Open Book Project</a></li>
<li><a href="http://ict.gctaa.net">CS /Web Development Program @ ACC</a></li> <li><a href="http://ict.gctaa.net">CS /Web Development Program @ ACC</a></li>
</ul> </ul>
</div> </section>
<div class="right"> <section>
<h2>NOVA Web Development:</h2> <h2>NOVA Web Development:</h2>
<ul> <ul>
<li><a href="static/NOVAWebLimitedLiabilityCompanyOperatingAgreement.pdf"> <li><a href="static/NOVAWebLimitedLiabilityCompanyOperatingAgreement.pdf">
@ -53,11 +52,9 @@ Operating Agreement</a></li>
<li><a href="static/DJ4Enotes/index.html">First DJ4E Study Session Notes</a> <li><a href="static/DJ4Enotes/index.html">First DJ4E Study Session Notes</a>
(using <a href="https://github.com/hakimel/reveal.js">reveal.js</a>)</li> (using <a href="https://github.com/hakimel/reveal.js">reveal.js</a>)</li>
</ul> </ul>
</div> </section>
</div>
<div class="split"> <section>
<div class="left">
<h2>Papers for University of the People MBA Program:</h2> <h2>Papers for University of the People MBA Program:</h2>
<ul> <ul>
<li><a href="static/UoPeople/EthicsAndTheFallOfAmericanGrowth.pdf">Ethics <li><a href="static/UoPeople/EthicsAndTheFallOfAmericanGrowth.pdf">Ethics
@ -164,9 +161,9 @@ Qualitative Factors and the World We Want to Live In</a> (2020-02-26)</li>
<li><a href="static/UoPeople/TycoCorruptionCaseStudy.pdf"> <li><a href="static/UoPeople/TycoCorruptionCaseStudy.pdf">
Tyco Corruption Case Study: Targeting the Wrong Victim</a> (2019-10-23)</li> Tyco Corruption Case Study: Targeting the Wrong Victim</a> (2019-10-23)</li>
</ul> </ul>
</div> </section>
<div class="right"> <section>
<h2>Personal Things:</h2> <h2>Personal Things:</h2>
<ul> <ul>
<li><a href="heleneyoung">Helene Young</a></li> <li><a href="heleneyoung">Helene Young</a></li>
@ -176,33 +173,29 @@ Illustrious American and Other Verses by Lewis A. Young</a>
(plain text version (plain text version
<a href="static/Illustrious_American_and_Other_Verses_Lewis_A_Young.txt"> <a href="static/Illustrious_American_and_Other_Verses_Lewis_A_Young.txt">
here</a>)</li> here</a>)</li>
<li><a href="static/photos/march21_2010_march.jpg">Immigration Rights March</a> <li><a href="static/photos/march21_2010_march.jpg">Immigration Rights March</a>
</li> </li>
<li><a href="static/venezuela/index.html">Photographs from Venezuela</a></li> <li><a href="static/venezuela/index.html">Photographs from Venezuela</a></li>
</ul> </ul>
</div> </section>
</div>
<div class="split"> <section>
<div class="left">
<h2>Books:</h2> <h2>Books:</h2>
<ul> <ul>
<li><a href="http://openbookproject.net/thinkcs/python/english2e">How to <li><a href="http://openbookproject.net/thinkcs/python/english2e">How to
Think Like a Computer Scientist: Learning with Python</a> 2nd Ed.</li> Think Like a Computer Scientist: Learning with Python</a> 2nd Ed.</li>
</ul> </ul>
</div> </section>
<div class="right"> <section>
<h2>Exits:</h2> <h2>Exits:</h2>
<ul> <ul>
<li><a href="http://ibiblio.org/">ibiblio</a></li> <li><a href="http://ibiblio.org/">ibiblio</a></li>
<li><a href="http://launchpad.net/">Launchpad</a></li> <li><a href="http://launchpad.net/">Launchpad</a></li>
</ul> </ul>
</div> </section>
</div>
<section id="papers">
<h2>Papers/Articles/Presentations/Letters:</h2> <h2>Papers/Articles/Presentations/Letters:</h2>
<ul> <ul>
<li><a href="https://jelkner.github.io/markdownslides/#/overview">Assorted <li><a href="https://jelkner.github.io/markdownslides/#/overview">Assorted
@ -257,18 +250,19 @@ A Copyleft Case Study</a></li>
<li><a href="static/articles/mainstream.html"> <li><a href="static/articles/mainstream.html">
LTSP: Moving into the Mainstream</a></li> LTSP: Moving into the Mainstream</a></li>
</ul> </ul>
</section>
</main>
<footer>
<blockquote> <blockquote>
<p><!-- insert quote here --></p> <p><!-- insert quote here --></p>
<p class="author">-- <!-- insert author here --></p> <p id="author2">-- <!-- insert author here --></p>
</blockquote> </blockquote>
<p>Copyright © 2023 Jeffrey Elkner CC BY-ND 4.0</p>
<footer>
<p>copyright © 2023 Jeffrey Elkner</p>
<a href="http://validator.w3.org/check?uri=https://elkner.net/"> <a href="http://validator.w3.org/check?uri=https://elkner.net/">
<strong> HTML </strong> Valid! </a> <strong> HTML </strong> Valid! </a>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=https://elkner.net/?profile=css3"> <a href="http://jigsaw.w3.org/css-validator/validator?uri=https://elkner.net/?profile=css3">
<strong> CSS </strong> Valid! </a> <strong> CSS </strong> Valid! </a>
</footer> </footer>
</body> </body>

Write Preview
Loading…
Cancel
Save