Created
February 4, 2021 01:57
-
-
Save kccnma/0905a6c097c609bfedf43bf1577931cd to your computer and use it in GitHub Desktop.
John Doe's Student Site ART 128 Sub Pages CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* GLOBAL RESET */ | |
* { box-sizing: border-box; } | |
body { margin: 0; } | |
/* GLOBAL COLORS */ | |
body { color: rgba(0, 0, 0, 0.8); } | |
a { color: rgba(0, 102, 204, 1); } | |
a:hover { color: rgba(0, 51, 153, 1); } | |
/* GLOBAL TYPOGRAPHY */ | |
body { | |
font-family: Helvetica, Arial, sans-serif; | |
font-size: 88.75%; /* 14px */ | |
line-height: 1.4; | |
} | |
/* SITE STRUCTURE */ | |
header { | |
background-color: rgba(0, 102, 204, 1); | |
color: rgba(0, 0, 0, 0.8); | |
padding: 1em; | |
display: grid; | |
grid-template-columns: 1fr 1fr; | |
align-items: center; | |
} | |
header a { | |
color: rgba(255, 255, 255, 0.8); | |
text-decoration: none; | |
} | |
header a:hover { | |
color: rgba(255, 255, 255, 1); | |
} | |
/* SITE ID */ | |
.site-id h1 { | |
margin: 0; | |
} | |
/* SITE NAV */ | |
.site-nav ul { | |
display: flex; | |
justify-content: flex-end; | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
.site-nav a { | |
display: block; | |
padding: 1em; | |
} | |
/* MAIN */ | |
main { | |
background: rgba(0,0,0,.05); | |
} | |
/* HERO SECTION */ | |
.hero { | |
background-color: rgba(0, 102, 204, 1); | |
text-align: center; | |
color: white; | |
padding: 6em 1em; | |
} | |
.hero h2 { | |
font-size: 6em; | |
line-height: 1; | |
text-transform: uppercase; | |
margin: 0 auto; | |
} | |
.hero p { | |
max-width: 30em; | |
margin: 1em auto; | |
} | |
/* COURSES SECTION */ | |
.courses { | |
padding: 6em 1em; | |
display: grid; | |
justify-content: center; | |
} | |
.courses ul { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
.courses h3{ | |
text-align: center; | |
} | |
/* FOOTER */ | |
footer { | |
border-top: 1px solid rgba(0,0,0,.05); | |
padding: 1em; | |
} | |
/* SOCIAL NAV */ | |
.social-nav ul { | |
margin: 0; | |
padding: 0; | |
display: flex; | |
justify-content: center; | |
list-style: none; | |
} | |
.social-nav a { | |
display: block; | |
padding: 1em; | |
} | |
/* LAYOUT */ | |
.container { | |
max-width: 1000px; | |
margin: 0 auto; | |
} | |
section { | |
padding: 3em 1em; | |
} | |
/* SIDEBAR/ASIDE */ | |
aside { | |
padding: 2em 0; | |
} | |
@media (min-width: 768px) { | |
.two-col-sidebar { | |
display: grid; | |
grid-template-columns: 20em auto; | |
} | |
.two-col-sidebar aside { | |
border-right: 1px solid rgba(0, 0, 0, 0.1); | |
margin: 0 3em 2em 0; | |
padding: .3em 2em 0 0; | |
} | |
} | |
/* SUB PAGES */ | |
.page-sub .hero { | |
background-color:rgba(0, 0, 0, 0.1); | |
color: rgba(0, 0, 0, 0.8); | |
} | |
/* COURSE PAGES WITH MULTIPLE PROJECT LISTS */ | |
.coursework { | |
padding: 3em 1em; | |
display: flex; | |
justify-content: center; | |
flex-wrap: wrap; | |
} | |
.project { | |
margin: 2em; | |
} | |
/* CODE BLOCKS */ | |
pre code { | |
width: 100%; | |
display: block; | |
border: 1px solid #ddd; | |
background-color: #fff; | |
padding: 1em 3em; | |
margin-bottom: 1em; | |
line-height: 1.5; | |
} | |
.markup-box { | |
border: 1px solid #ddd; | |
border-radius: 5px; | |
background-color: #fff; | |
padding: 1em 3em; | |
margin-bottom: 1em; | |
} | |
/* DEFINITION LISTS */ | |
dt { | |
font-weight: bold; | |
margin-top: 1em; | |
} | |
dd { | |
margin: 0; | |
} | |
/* FOR DEV PURPOSES */ | |
/* body * { | |
background-color: rgba(0,0,0,.05) !important; | |
border: 1px solid rgba(0,0,0,.1) !important; | |
color: rgba(0,0,0,.5) !important; | |
} */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment