diff options
| -rw-r--r-- | css/base.css | 108 |
1 files changed, 62 insertions, 46 deletions
diff --git a/css/base.css b/css/base.css index bf33e96..f63afb1 100644 --- a/css/base.css +++ b/css/base.css @@ -2,21 +2,21 @@ /* === UNIVERSAL PAGE GEOMETRY === */ body{ - background-color: #f9fafa; /* color name: SNOW */ - font-family: "Lato", Helvetica, Arial, sans-serif; /* web safe fonts */ + background-color: #f9fafa; /* SNOW */ + font-family: "Lato", Helvetica, Arial, sans-serif; /* web safe fonts */ } #container{ - max-width: 950px; - width: 90%; - margin: 5px auto; + max-width: 950px; + width: 90%; + margin: 5px auto; } .clear{ - clear: both; - /* NOTE: - * should add the clear-fix recommended by the book - * */ + clear: both; + /* NOTE: + * should add the clear-fix recommended by the book + * */ } pre{ @@ -25,15 +25,15 @@ pre{ /* === HEAD NAV === */ nav li{ - float: left; - padding: 0 5px; + float: left; + padding: 0 5px; } /* hamburger default */ /* banner */ #hamnav { - width: 100%; - background: #000; + width: 100%; + background: #000; } /* Hide Hamburger */ @@ -67,7 +67,7 @@ nav li{ .banner h1{ font-size: 300%; vertical-align: middle; - color: #030504; /* color name: RICH BLACK (FOGRA39) */ + color: #030504; /* RICH BLACK (FOGRA39) */ } .banner h2{ @@ -75,17 +75,17 @@ nav li{ } .banner img{ - min-width: 170px; - min-height: 170px; - max-width: 220px; - max-height: 220px; - width: 100%; + 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: #030504; /* RICH BLACK (FOGRA39) */ /* background-color: #140e2a; */ text-align: center; /* keep the links in the center of the screen */ } @@ -93,18 +93,34 @@ nav{ .button a{ text-decoration: none; - color: #dcdfde; /* color name: GAINSBORO */ + color: #dcdfde; /* 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 */ + color: #ff216e; /* AWESOME */ + background-color: #121413; /* LICORICE */ /* background-color: #3d326a; */ transition-duration: 0.5s; /* give the modern minimal animation */ - text-shadow: 0px 0px 1px #030504; /* color name: RICH BLACK (FOGRA39) */ + text-shadow: 0px 0px 1px #030504; /* RICH BLACK (FOGRA39) */ +} + +p a, li a{ + text-decoration: none; + color: #ff216e; /* AWESOME */ + transition-duration: 0.2s; /* fade back to normal */ +} + +p a:hover, li a:hover{ + color: #ff216e; /* AWESOME */ + transition-duration: 0.5s; /* give the modern minimal animation */ + text-shadow: 0px 0px 1px #FF4D92; /* */ +} + +p a:visited, li a:visited{ + color: #980D2C; /* ROSEWOOD */ } /* === PAGE FOOTER === */ @@ -113,7 +129,7 @@ footer[role=contentinfo] { text-align: center; width: 100%; /* background-color: #140e2a; */ - background-color: #030504; /* color name: RICH BLACK (FOGRA39) */ + background-color: #030504; /* RICH BLACK (FOGRA39) */ } footer[role=contentinfo] ul{ @@ -143,17 +159,17 @@ footer[role=contentinfo] h3{ /* === DECORATION CLASSES === */ .text-shadow{ - text-shadow: 2px 2px 1px rgba(255,255,255,1), 4px 4px 1px rgba(50,50,50,0.25); + 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); + 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%; + -moz-border-radius: 100%; + -webkit-border-radius: 100%; + border-radius: 100%; } /* Ensure backward compatibility of HTML5 elements in this website @@ -161,7 +177,7 @@ footer[role=contentinfo] h3{ article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section, { - display: block; + display: block; } /* === MEDIA SPECIFIC STYLES === */ @@ -178,9 +194,9 @@ section, { /* === hamburger navigation === */ /* Show Hamburger Icon */ #hamnav label { - display: inline-block; - background-color: #ff216e; /* color name: AWESOME */ - color: #121413; /* color name: LICORICE */ + display: inline-block; + background-color: #ff216e; /* AWESOME */ + color: #121413; /* LICORICE */ font-style: normal; font-size: 1.2em; padding: 10px; @@ -195,31 +211,31 @@ section, { /* Break down menu items into vertical */ #hamitems a { - box-sizing: border-box; - display: block; - width: 100%; - border-top: 1px solid #333; + 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; + 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%; + /* 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-top: 1px solid #dcdfde; border-bottom: 1px solid #dcdfde; - border-left: none; - border-right: none; + border-left: none; + border-right: none; } } |