aboutsummaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/base.css108
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;
}
}
generated by cgit v1.2.1 (git 2.18.0) at 2024-12-26 06:56:36 +0000