seth
/
sethmorabito
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reactive CSS

This commit is contained in:
Seth Morabito 2021-03-11 18:45:09 -08:00
parent fa4d4d4735
commit 2a98423ab6
2 changed files with 68 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
content/css/style.css
View File

@ -1,53 +1,48 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
body {
font-size: 1.2em;
font-size: 12pt;
font-weight: 300;
font-family: "Roboto", sans-serif;
line-height: 1.7;
background: #f7f8fc;
}
#container {
margin: 5rem 8rem;
min-width: 45rem;
}
#footer {
border-top: 1px solid #c7c8cc;
font-size: 0.9rem;
font-style: italic;
text-align: right;
text-align: center;
padding-top: 0.5rem;
margin-top: 3rem;
color: #333;
}
#splash {
max-width: 100%;
padding: 12px;
border-radius: 50%;
border: 1px solid #c7c8cc;
padding: 5%;
margin: 0 1rem 0 0;
}
#sidebar {
float: left;
width: 10rem;
display: inline-block;
padding: 0;
margin: 0;
}
#content {
margin-left: 14rem;
text-align: justify;
hyphens: auto;
}
#contacts {
margin-top: 3rem;
text-align: left;
}
h1 {
text-align: center;
}
ul {
list-style: square;
list-style-position: inside;
list-style-position: outside;
margin-left: 1rem;
padding-left: 1rem;
}
@ -62,4 +57,54 @@ a:hover {
.bl {
font-style: italic;
}
}
@media screen and (min-width: 880px) {
#splash {
width: 120px;
}
#container {
margin: 5rem 8rem;
}
#sidebar {
float: left;
width: 10rem;
display: inline-block;
padding: 0;
}
#content {
margin-left: 14rem;
}
h1 {
font-size: 210%;
}
}
@media screen and (max-width: 880px) {
#splash {
width: 25%;
}
#container {
margin: 3rem;
}
#sidebar {
width: 100%;
display: block;
padding: 0;
text-align: center;
}
#content {
margin: 0;
}
h1 {
font-size: 240%;
}
}

5
content/index.html
View File

@ -1,9 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Seth J. Morabito</title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body id="home">
<div id="container">
@ -32,7 +33,7 @@
have a small home bindery.</p>
<ul id="contacts">
<li><a href="https://loomcom.com/">My portfolio and weblog, <span class="bl">Loom
<li><a href="https://loomcom.com/">My portfolio and weblog, <span class="bl">Loom
Communications</span></a></li>
<li><a href="https://www.linkedin.com/in/sethmorabito">My
LinkedIn profile</a></li>