vagabond/the-internet-vagabond-dot-com
1
0
Fork 0
Code Issues 3 Pull requests Projects 2 Activity Actions

Update Corrupt styles

Browse source 
Update the Corrupt styles for a bit better readability and consistancy.

- Modify the headers to be better organized. Add some comments to
explain what each is used for.
- Apply H5 to all footer/menu section headers and links.
- Expand the main section to fill the space a bit better.
- Modify the grid to remove empty columns around the body.
This commit is contained in:
Bill Niblock 2019-01-21 14:19:14 -05:00
parent e85563d099
commit 0707d18701
2 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/styles/corrupt_layout.css
View file

@ -39,6 +39,7 @@ footer #social {
} }
main { main {
margin: 0 2em;
} }
main #details { main #details {
@ -75,7 +76,7 @@ main #desc {
grid-template-rows: 50px max-content; grid-template-rows: 50px max-content;
grid-template-areas: grid-template-areas:
"head head head head head head head" "head head head head head head head"
". body body body body body ." "body body body body body body body"
"foot foot foot foot foot foot foot"; "foot foot foot foot foot foot foot";
} }
@ -98,7 +99,7 @@ main #desc {
grid-template-rows: 50px max-content; grid-template-rows: 50px max-content;
grid-template-areas: grid-template-areas:
"head head head head head head head foot foot" "head head head head head head head foot foot"
". body body body body body . foot foot"; "body body body body body body body foot foot";
} }
header { header {
@ -121,6 +122,10 @@ main #desc {
padding: 50px 0px; padding: 50px 0px;
} }
main {
margin: 0 5em;
}
main #date { main #date {
width: 50%; width: 50%;
text-align: left; text-align: left;

15
src/styles/corrupt_typog.css
View file

@ -39,10 +39,11 @@ nav {
padding: 0em 1em; padding: 0em 1em;
} }
/* Article Titles */
h1 { h1 {
padding: 10px; padding: 10px;
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: darkgrey; letter-spacing: 0.5em; color: darkgrey; letter-spacing: 0.25em;
} }
h1::first-letter { h1::first-letter {
@ -50,6 +51,7 @@ h1::first-letter {
color: white; color: white;
} }
/* Article section Header, left-aligned */
h2 { h2 {
text-align: left; text-align: left;
padding: 10px; padding: 10px;
@ -57,6 +59,7 @@ h2 {
color: darkgrey; letter-spacing: 0.6em; color: darkgrey; letter-spacing: 0.6em;
} }
/* Article section Header, right-aligned */
h3 { h3 {
text-align: right; text-align: right;
padding: 10px; padding: 10px;
@ -64,6 +67,7 @@ h3 {
color: darkgrey; letter-spacing: 0.6em; color: darkgrey; letter-spacing: 0.6em;
} }
/* Article footer and tags */
h4 { h4 {
text-align: center; text-align: center;
padding: 10px; padding: 10px;
@ -72,12 +76,17 @@ h4 {
color: darkgrey; letter-spacing: 0.4em; color: darkgrey; letter-spacing: 0.4em;
} }
/* Footer links and section titles */
h5 { h5 {
text-align: right;
padding: 10px; padding: 10px;
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: darkgrey; letter-spacing: 0.5em; text-align: center; color: darkgrey; letter-spacing: 0.6em;
margin-top: 0; margin-bottom: 0;
} }
/* Category button */
/* TODO: Change this to a different tag */
h6 { h6 {
padding: 10px; padding: 10px;
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;