X-Git-Url: https://vcs.fsf.org/?p=fsf-giving-guide.git;a=blobdiff_plain;f=stylesheet.css;h=1590ccc7bf561ea5cf5b79740b0d5132fcf87a54;hp=e69de29bb2d1d6434b8b29ae775ad8c2e48c5391;hb=505e39702b013929ad643d0766dc56bfa4c8abb5;hpb=d5121665219f811c162cf873d603a1517b3501f4 diff --git a/stylesheet.css b/stylesheet.css old mode 100644 new mode 100755 index e69de29..1590ccc --- a/stylesheet.css +++ b/stylesheet.css @@ -0,0 +1,382 @@ +/*Typography*/ + +@font-face { + font-family: 'Signika Regular'; + src: local('Signika Regular'), url('fonts/Signika-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'Signika Light'; + src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype'); +} + +@font-face { + font-family: 'Signika Bold'; + src: local('Signika Bold'), url('fonts/Signika-Bold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Open Sans'; + src: local('Open Sans'), url('fonts/OpenSans-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'Open Sans Bold'; + src: local('Open Sans Bold'), url('fonts/OpenSans-Bold.ttf') format('truetype'); +} + +/*Style common HTML tags*/ + +html { + font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif; + font-size: 14px; + line-height: 1.4; + color: #363636; + background-color: #fff; + width: 100%; +} + +/* Type something: */ + +a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none; } + +p { line-height: 1.4; margin-bottom: 1.5em; font-size: 1em; } + +i { font-style: italic; } +b { font-style: oblique; } + +li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4; } +/* ul {margin: 1em 2em 0em 4em;} */ + +br {margin-bottom: 0.5em; margin-top: 0.5em;} + +h1 { font-size: 2.20em; font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 1em; } +h2 { font-size: 1.75em; font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; } +h3 { font-size: 1.625em; font-family: 'Signika Bold'; color: #484848; margin-bottom: 0.5em; margin-top: 2em; } +h4 { font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; } +h5 { font-size: 1.25em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; } +h6 { font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; } + +/*Site-specific*/ + + /* Header */ + +.header { +} + +/* Navbar */ + +.header_wrapper { + background-color: #2CAF8F; + height: 486px; +} + +.header a { + border-bottom: 0; +} + +.navbar_wrapper { + max-width: 1300px; + min-width: 1110px; + margin: auto; + text-align: center; +} + +.logo_wrapper { + padding: 1.3em; + float: left; +} + +.join_wrapper { + padding: 1.2em; + float: right; + display: inline-block; +} + +.logo, .join { + max-width: 200px; + min-width: 200px; +} + +.share_wrapper { +} + +.share { + position: relative; + bottom: 0.8em; + text-align: center; +} + +.share a{ + background-color: #FDD53A; + border-bottom: 0; + padding: .6em 2em; + font-family: 'Signika Bold'; + font-size: 1.4em; + color: #2CAF8F; + border-radius: 50em; +} + +.share a:hover { + background-color: #FDDE56; +} + +.navbar { + width: 537px; + padding: 1em; + height: 2.55556em; + display: inline-block; +/* float: left; */ +} + +.navbar li { + font-family: 'Signika Regular'; + font-size: 1em; + background-color: white; + list-style-type: none; + border-right: 1px #9BD2BF solid; + padding: 0 30px 0 30px; + line-height: 2.6; + float: left; +} + +.navbar li:first-child { + border-radius: 100px 0 0 100px; +} + +.navbar li:last-child { + border-right: 0; + border-radius: 0 100px 100px 0; +} + +.navbar li:hover { + background-color: #FFDD55; +} + +.navbar li a { + display: block; + text-decoration: none; +} + +.navbar li a:hover { + color: #4B423B; +} + +.intro, +.share { + max-width: 1300px; + min-width: 1170px; + margin: auto; +} + +.intro_wrapper, +.intro_img { + max-width: 500px; + min-width: 00px; +} + +.intro_wrapper { + float: right; + color: white; + padding-right: 4em; +} + +.intro_img{ + float: left; + padding-left: 4em; +} + +.intro_wrapper h2 { + color: #FFDD55; +} + +.intro_wrapper a { + border-bottom: 1px solid #FDD53A; + color: #FDD53A; +} + +.intro_img img{ + padding-top: 1.7em; + width: 100%; +} + +/* Comparisons */ + +.wrapper, +.section_wrapper, +.buy_avoid, +.recommended, +.licenses { + max-width: 750px; + min-width: 750px; + margin: auto; +} + +.main_title { + width: 100%; + text-align: left; + border-bottom: 1px solid lightgray; + margin-top: 3em; + margin-bottom: 2em; + display: inline-block; +} + +.buy a { + border-bottom: none; +} + +.product_img { + margin: auto; + max-width: 168px; + max-height: 168px; + position: relative; +} + +.product { + text-align: center; + position: relative; + margin: auto; + display: block; + height: 168px; + width: 168px; + /* margin-bottom: 8em; */ +/* max-height: 168px; */ +} +/* + .proprietary .product_img:after { + content: ""; + background-image: url("images/bad.png"); + background-size: 25px; + background-repeat: no-repeat; + width: 25px; + height: 25px; + position: absolute; +} + + .free h4:after { + content: ""; + background-image: url("images/good.png"); + background-size: 25px; + background-repeat: no-repeat; + width: 25px; + height: 25px; + position: absolute; +} + */ + + +.good, +.bad { + z-index: 999; + width: 65px; + top: 8em; + left: 9em; + position: absolute; + +} + + +.free, .proprietary { + text-align: center; +} + +.free li, +.proprietary li { + text-align: left; +} + +.buy img, +.avoid img { + max-width: 151px; + height: 42px; +} + +.buy_avoid_wrapper { + margin-top: 2em; + min-width: 100%; + max-width: 100%; + display: inline-block; +} + +.buy { + text-align: center; + margin: auto; + width: 45.555555%; + float: left; + +} + +.avoid { + text-align: center; + margin: auto; + width: 45.555555%; + float: right; +} + +.free { + float: left; + width: 45.555555%; +} + +.proprietary { + float: right; + width: 45.555555%; +} + +/* Recommended Section */ + +.topic_title { + border-bottom: 1px solid #2CAF8F; + width: 100%; + text-align: left; + margin-top: 3em; + display: inline-block; +} + +.recommend_wrapper { + padding-top: 1em; + margin: auto; + width: 750px; +} + +.recommended_product { + text-align: center; + width: 29%; + margin: 1em; + display: inline-block +} + +.recommended_product_img { + width: 120px; +} + +.recommend_wrapper .buy { + float: none; + text-align: center; + width: 100%; +} + +.remark { + margin-top: 3em; + font-weight: bold; +} + +/* Licenses */ + +.licenses h1 { + margin-top: 0.6em; +} + +/* Footer */ + +footer { + display: block; + background-color: #1a1a1a; +} + +.footer_wrapper { + width: 750px; + margin: auto; + padding: 2em; + color: white; +}