diff options
| -rw-r--r-- | css/base.css | 234 |
1 files changed, 234 insertions, 0 deletions
diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..bf33e96 --- /dev/null +++ b/css/base.css @@ -0,0 +1,234 @@ +@charset "UTF-8"; /* Just in case. No harm done. */ + +/* === UNIVERSAL PAGE GEOMETRY === */ +body{ + background-color: #f9fafa; /* color name: SNOW */ + font-family: "Lato", Helvetica, Arial, sans-serif; /* web safe fonts */ +} + +#container{ + max-width: 950px; + width: 90%; + margin: 5px auto; +} + +.clear{ + clear: both; + /* NOTE: + * should add the clear-fix recommended by the book + * */ +} + +pre{ + display: block; +} +/* === HEAD NAV === */ + +nav li{ + float: left; + padding: 0 5px; +} + +/* hamburger default */ +/* banner */ +#hamnav { + width: 100%; + background: #000; +} + +/* Hide Hamburger */ +#hamnav label, #hamburger { + display: none; +} + +/* Horizontal Menu Items */ +#hamitems { display: flex; } +#hamitems a { + width: 25%; /* 100% / 5 tabs = 20% */ + padding: 10px; +} + +/* === MAIN CONTENT === */ + + +/* === MANEAGE BANNER === */ + +.banner{ + width: 100%; + margin: 0px auto; + text-align: center; +} + +.banner div{ + display: inline-block; + vertical-align: middle; +} + +.banner h1{ + font-size: 300%; + vertical-align: middle; + color: #030504; /* color name: RICH BLACK (FOGRA39) */ +} + +.banner h2{ + font-size: 100%; +} + +.banner img{ + min-width: 170px; + min-height: 170px; + max-width: 220px; + max-height: 220px; + width: 100%; +} + +/* === NAVIGATION STYLE - LINKS === */ + +nav{ + background-color: #030504; /* color name: RICH BLACK (FOGRA39) */ + /* background-color: #140e2a; */ + text-align: center; /* keep the links in the center of the screen */ +} + + +.button a{ + text-decoration: none; + color: #dcdfde; /* color name: GAINSBORO */ + display: inline-block; /* keep the browser from wrapping text from spaces between words in a single anchor */ + padding: 15px 32px; + transition-duration: 0.2s; /* fade back to normal */ +} + +.button a:hover{ + color: #ff216e; /* color name: AWESOME */ + background-color: #121413; /* color name: LICORICE */ + /* background-color: #3d326a; */ + transition-duration: 0.5s; /* give the modern minimal animation */ + text-shadow: 0px 0px 1px #030504; /* color name: RICH BLACK (FOGRA39) */ +} + +/* === PAGE FOOTER === */ + +footer[role=contentinfo] { + text-align: center; + width: 100%; + /* background-color: #140e2a; */ + background-color: #030504; /* color name: RICH BLACK (FOGRA39) */ +} + +footer[role=contentinfo] ul{ + padding-left: 0; + list-style: none; +} + +footer[role=contentinfo] div{ + /* this part should change in different @media screen sizes! */ + /* check for each size and set corresponding width percentage */ + width: 30%; + display: inline-block; +} + +footer[role=contentinfo] h3{ + color: #dcdfde; + font-weight: normal; +} + +.foot-col-mid{ + border-left: 1px solid #dcdfde; + border-right: 1px solid #dcdfde; +} + + + +/* === DECORATION CLASSES === */ + +.text-shadow{ + text-shadow: 2px 2px 1px rgba(255,255,255,1), 4px 4px 1px rgba(50,50,50,0.25); +} + +.box-shadow{ + box-shadow: 2px 2px 1px rgba(255,255,255,1), 4px 4px 1px rgba(50,50,50,0.25); +} + +.circle{ + -moz-border-radius: 100%; + -webkit-border-radius: 100%; + border-radius: 100%; +} + +/* Ensure backward compatibility of HTML5 elements in this website + * **************************************************************** */ + +article, aside, figcaption, figure, footer, header, hgroup, menu, nav, +section, { + display: block; +} + +/* === MEDIA SPECIFIC STYLES === */ + +/* 320px and up + * ************************************ */ +@media only screen and (min-width: 320px){ +} + +/* 480px and below + * ************************************ */ +@media only screen and (max-width: 480px){ + + /* === hamburger navigation === */ + /* Show Hamburger Icon */ + #hamnav label { + display: inline-block; + background-color: #ff216e; /* color name: AWESOME */ + color: #121413; /* color name: LICORICE */ + font-style: normal; + font-size: 1.2em; + padding: 10px; + transition-duration: .2s; + } + + #hamnav label:hover{ + color: #ff216e; + background-color: white; + transition-duration: .2s; + } + + /* Break down menu items into vertical */ + #hamitems a { + box-sizing: border-box; + display: block; + width: 100%; + border-top: 1px solid #333; + } + + /* Toggle Show/Hide Menu */ + #hamitems { display: none; } + #hamnav input:checked ~ #hamitems { + display: block; + } + + + /* === footer === */ + footer[role=contentinfo] div{ + /* this part should change in different @media screen sizes! */ + /* check for each size and set corresponding width percentage */ + width: 70%; + } + + .foot-col-mid{ + border-top: 1px solid #dcdfde; + border-bottom: 1px solid #dcdfde; + border-left: none; + border-right: none; + } +} + +/* 600px and up + * ************************************ */ +@media only screen and (min-width: 600px){ +} + +/* 768px and up + * ************************************ */ +@media only screen and (min-width: 768px){ +} |