From 6bd4ffef6c2f6abe29b3bc44e90f2e2a633297f7 Mon Sep 17 00:00:00 2001
From: Pedram Ashofteh Ardakani <pedramardakani@pm.me>
Date: Sun, 3 May 2020 21:21:41 +0430
Subject: Fix CSS link coloring and nav header
* Fix responsive header width
* Round corners in footer and nav head
* Stick navigation bar to the top
* Add comments to make it dev-friendly, More to come in future commits
* Darken the link colors to ease the reader's experience and keep the
links from jumping out the text
---
css/base.css | 90 +++++++++++++++++++++++++-----------------------------------
1 file changed, 38 insertions(+), 52 deletions(-)
diff --git a/css/base.css b/css/base.css
index f397785..240a2a7 100644
--- a/css/base.css
+++ b/css/base.css
@@ -1,4 +1,4 @@
-@charset "UTF-8"; /* Just in case. No harm done. */
+@charset "UTF-8";
/* === FONTS === */
body{
@@ -17,6 +17,8 @@ code{
}
/* === PAGE COLORS === */
+/* Currently, colors are defined seperately. But this may not be a good
+ * idea. So, duplicate selectors will be reunited in future commits. */
body{
background-color: #FBFCFC; /* BABY POWDER */
}
@@ -36,16 +38,13 @@ nav{
color: #ff216e; /* AWESOME */
background-color: #121413; /* LICORICE */
}
-a{
+a, p a, li a, a:visited{
text-decoration: none;
- color: #D8004F;
+ color: #64030B;
}
a:hover{
text-shadow: 0px 0px 1px #FBADCE;
}
-a:visited{
- color: #A1002F;
-}
pre{
background-color: #FFF;
border-color: #CABECF; /* LANGUID LAVENDER */
@@ -61,10 +60,8 @@ p code, li > code{
color: #1C1E1D; /* EERIE BLACK */
}
footer[role=contentinfo]{
- background-color: #030504; /* RICH BLACK */
-}
-footer[role=contentinfo] h3{
- color: #dcdfde;
+ background-color: #F2F3F3;
+ color: #1C1E1D; /* EERIE BLACK */
}
/* === DECORATION CLASSES === */
@@ -83,6 +80,11 @@ footer[role=contentinfo] h3{
}
/* === BLOCKS === */
+h1, h2, h3{
+ /* Set line-height for headers to prevent overlap when browser is
+ * forced to wrap the words. */
+ line-height: 1em;
+}
pre{
/* set code block properties */
display: block;
@@ -103,16 +105,23 @@ p code, li > code{
margin-right: 5px;
border-radius: 5px;
}
-#container{
+/* To keep the content focused in middle of the screen. These ID's have
+ * almost the same style, here is the shared part. The container should
+ * always have a margin-top enough to prevent the navigation bar from
+ * overlapping. */
+#hamnav, #container{
max-width: 950px;
width: 90%;
- margin: 5px auto;
+ margin: 0 auto;
+}
+#container{
+ margin-top: 3em;
}
.clear{
clear: both;
/* NOTE:
* should add the clear-fix recommended by the book
- * */
+ * ********************************************* */
}
/* === HEAD NAV === */
@@ -123,7 +132,8 @@ nav li{
/* hamburger default */
/* banner */
#hamnav {
- width: 100%;
+ position: fixed;
+ top: 0;
}
/* Hide Hamburger */
#hamnav label, #hamburger {
@@ -172,6 +182,7 @@ nav li{
/* === NAVIGATION STYLE - LINKS === */
nav{
text-align: center; /* keep the links in the center of the screen */
+ border-radius: 5px;
}
.button a{
text-decoration: none;
@@ -193,30 +204,15 @@ p a:hover, li a:hover{
/* === PAGE FOOTER === */
footer[role=contentinfo] {
- text-align: center;
- width: 100%;
-}
-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{
- font-weight: normal;
-}
-.foot-col-mid{
- border-left: 1px solid #dcdfde;
- border-right: 1px solid #dcdfde;
+ text-align: left;
+ padding: 15px;
+ border-radius: 5px;
+ margin-left: auto;
+ margin-right: auto;
}
-
/* Ensure backward compatibility of HTML5 elements in this website
- * **************************************************************** */
+ * ************************************************************* */
article, aside, figcaption, figure, footer, header, hgroup, menu, nav,
section, {
@@ -236,7 +232,7 @@ section, {
/* === hamburger navigation === */
/* Show Hamburger Icon */
- #hamnav label {
+ #hamnav label{
display: inline-block;
background-color: #ff216e; /* AWESOME */
color: #121413; /* LICORICE */
@@ -265,21 +261,6 @@ section, {
#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
@@ -289,5 +270,10 @@ section, {
/* 768px and up
* ************************************ */
-@media only screen and (min-width: 768px){
+@media only screen and (max-width: 830px){
+ .banner div{
+ /* Center the text as soon as browser width is too small for
+ * all the content to fit */
+ text-align: center;
+ }
}
--
cgit v1.2.1