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 {
color: #000;
background-color: #FFF;
margin: 50px;
font-family: 'Ubuntu', sans-serif;
}
h1, h2 {
font-family: Arial, sans-serif;
}
a, :visited {
a, a:visited {
color: #A70;
background-color: #FFF;
}
img {
border: 0;
}
p {
text-align: justify;
font-size: 1.2em;
header {
display: grid;
grid-template-columns: 25vw auto;
grid-template-rows: auto auto auto auto; */
margin-left: 5vw;
margin-right: 5vw;
}
header>h1 {
grid-area: 1 / 2 / 2 / 3;
font-size: 3.5vw;
color: #000;
text-shadow: 0.1em 0.1em 0.2em #960;
}
blockquote {
margin-top: 40px;
padding: .5em 1em;
border-left: 5px solid #FCE27C;
border-radius: 40px;
background-color: #FAF0D1;
font-size: .8em;
header>img {
grid-area: 1 / 1 / 3 / 2;
display: block;
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;
}
blockquote p {
font-style: italic;
header>nav {
grid-area: 4 / 1 / 5 / 3;
font-size: 1.7vw;
font-weight: bold;
margin-left: 2vw;
}
blockquote p:first-letter {
float: left;
font-size: 2em;
color: #960;
a, a:visited {
text-decoration: none;
}
div.split {
clear: both;
width: 100%;
main {
font-family: 'Ubuntu Condensed', sans-serif;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
margin-top: 1vw;
}
div.left, div.right {
display: table-cell;
width: 50%;
position: relative;
section {
margin-left: 4vw;
}
div.left {
float: left;
section>h2 {
font-size: 1.6vw;
margin-bottom: 0;
}
.author {
font-weight: bold;
font-style: normal;
text-align: right;
margin-top: -5px;
margin-right: 50px;
color: #630;
section>ul>li {
font-size: 1.1vw;
}
header {
height: 170px;
width: 100%;
font-family: Arial, sans-serif;
}
header h1 {
font-size: 2.5em;
color: #000;
margin-top: 50px;
text-shadow: 0.1em 0.1em 0.2em #960;
}
header div#logo {
float: right;
margin-left: 50px;
section#papers {
grid-column: span 2;
}
footer {
margin-top: 50px;
font-size: .6em;
margin-top: 5vw;
text-align: center;
}
footer p {
footer>p {
text-align: center;
}
footer a {
footer>a {
display: inline;
margin-right: 10px;
width: 50px;
padding: 1px;
font-size: 9px;
width: 5vw;
padding: 0.08vw;
font-size: 0.8vw;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
text-align: center;
@ -92,18 +98,46 @@ footer a {
white-space: nowrap;
cursor: pointer;
}
footer a strong {
footer>a>strong {
font-weight: bold;
color: #FFF;
background-color: #960;
padding-left: 2px;
margin-right: 5px;
padding-left: 0.2vw;
margin-right: 0.5vw;
}
footer a:hover {
footer>a:hover {
color: #FFF;
background-color: #960;
}
footer a:hover strong {
footer a:hover>strong {
color: #960;
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">
<head>
<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>
<style>
@import url(css/elknernet.css);
@ -10,27 +13,23 @@
<body>
<header>
<div id="logo">
<img src="static/images/debian_gnu_linux.png" alt="Debian GNU/Linux">
</div>
<h1>Welcome to elkner.net!</h1>
<p>
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.
Check them out!
</p>
<p class="author" style="text-align: right; padding-right: 360px;">
-- Jeff Elkner</p>
</header>
<h2>
<div id="author">-- Jeff Elkner</div>
<nav>
<a href="http://weblog.elkner.net">Weblog</a> |
<a href="contact.html">Contact Information</a> |
<a href="static/resume.html">Resume</a>
</h2>
</nav>
</header>
<div class="split">
<div class="left">
<main>
<section>
<h2>Current Activities/Projects:</h2>
<ul>
<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://ict.gctaa.net">CS /Web Development Program @ ACC</a></li>
</ul>
</div>
</section>
<div class="right">
<section>
<h2>NOVA Web Development:</h2>
<ul>
<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>
(using <a href="https://github.com/hakimel/reveal.js">reveal.js</a>)</li>
</ul>
</div>
</div>
</section>
<div class="split">
<div class="left">
<section>
<h2>Papers for University of the People MBA Program:</h2>
<ul>
<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">
Tyco Corruption Case Study: Targeting the Wrong Victim</a> (2019-10-23)</li>
</ul>
</div>
</section>
<div class="right">
<section>
<h2>Personal Things:</h2>
<ul>
<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
<a href="static/Illustrious_American_and_Other_Verses_Lewis_A_Young.txt">
here</a>)</li>
<li><a href="static/photos/march21_2010_march.jpg">Immigration Rights March</a>
</li>
<li><a href="static/venezuela/index.html">Photographs from Venezuela</a></li>
</ul>
</div>
</div>
</section>
<div class="split">
<div class="left">
<section>
<h2>Books:</h2>
<ul>
<li><a href="http://openbookproject.net/thinkcs/python/english2e">How to
Think Like a Computer Scientist: Learning with Python</a> 2nd Ed.</li>
</ul>
</div>
</section>
<div class="right">
<section>
<h2>Exits:</h2>
<ul>
<li><a href="http://ibiblio.org/">ibiblio</a></li>
<li><a href="http://launchpad.net/">Launchpad</a></li>
</ul>
</div>
</div>
</section>
<section id="papers">
<h2>Papers/Articles/Presentations/Letters:</h2>
<ul>
<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">
LTSP: Moving into the Mainstream</a></li>
</ul>
</section>
</main>
<footer>
<blockquote>
<p><!-- insert quote here --></p>
<p class="author">-- <!-- insert author here --></p>
<p id="author2">-- <!-- insert author here --></p>
</blockquote>
<footer>
<p>copyright © 2023 Jeffrey Elkner</p>
<p>Copyright © 2023 Jeffrey Elkner CC BY-ND 4.0</p>
<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">
<strong> CSS </strong> Valid! </a>
<strong> CSS </strong> Valid! </a>
</footer>
</body>

Write Preview
Loading…
Cancel
Save