From 4465c12602cd78224f0999028d36e9662c106deb Mon Sep 17 00:00:00 2001 From: Sarah Conway Date: Thu, 18 Oct 2018 06:58:41 -0700 Subject: [PATCH] initial nuke of base template & adding in new css styles --- media/pgdu/css/backup.css | 218 ++++++++++++++++++++ media/pgdu/css/style.css | 410 +++++++++++++++++++++++--------------- template/base.html | 114 ++++++----- 3 files changed, 522 insertions(+), 220 deletions(-) create mode 100644 media/pgdu/css/backup.css diff --git a/media/pgdu/css/backup.css b/media/pgdu/css/backup.css new file mode 100644 index 0000000..34d3e66 --- /dev/null +++ b/media/pgdu/css/backup.css @@ -0,0 +1,218 @@ +body { + margin: 0; /*turning margin off as default*/ + min-height: 100vh; + font-size: 1em; + display: flex; + flex-direction: column; /*default flex direction is row*/ + font-family: 'Verdana', sans-serif; +} + +header img { + width: 120px; + height: 120px; +} + +header { + display: flex; + justify-content: space-between; + align-items: center; /*vertical centering*/ + padding: 10px 40px; + background: linear-gradient(to bottom, #ccc, white); +} + +header ul { + display: flex; + margin: 0; /*taking the margin and padding ul default size off*/ + padding: 0; + list-style-type: none; +} + +header li { + padding: 2.5em; +} + +header li a { + color: #333; + text-decoration: none; +} + +main { + padding: 2em; + line-height: 1.1; + display: flex; + justify-content: space-between; + align-items: stretch; /*vertical centering*/ + flex-grow: 1; +} + +h2 { + font-size: 1em; + text-align: center; +} + +main section { + flex-grow: 1; + flex-basis: 33%; + padding: 20px; + border-right: solid 1px #b9b9b9; + text-align: justify; +} + +main section:last-child { + border-right: 0; +} + +main section ul li { + list-style: square; +} + +main section ul li a { + color: #333; +} + +@keyframes bounce { + 0%, + 20%, + 40%, + 60%, + 80%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } +} + +.button { + animation-name: bounce; + animation-duration: 2s; + animation-iteration-count: infinite; + position:absolute; + right: 20px; + bottom: 20px; + background-color: #666; + border-radius: 5px; + padding: 10px 65px 15px 65px; + cursor: pointer; +} + +.member-button { + text-decoration: none; + color: #fff; + font-size: 16px; + font-weight: 500; +} + +.hidden-menu { + display: none; + position: absolute; + right: 20px; + bottom: 100px; + background-color: #666; + border-radius: 5px; + padding: 25px; +} + +.hidden-menu-buttons { + display: flex; + flex-direction: column; + text-align: left; +} + +.hidden-menu-buttons a { + cursor: pointer; +} + +footer { + background: linear-gradient(to bottom, white, #ccc); + min-height: 15vh; + color: #666; +} + +footer ul { + margin: 0; /*taking the margin and padding ul default size off */ + padding: 0; + list-style-type: none; + display: flex; + justify-content: center; +} + +footer li { + margin: 5px 10px; +} + +h3 { + font-size: 0.8em; + text-align: center; +} + +footer p { + font-size: 0.6em; + text-align: center; +} + +@media screen and (min-width: 1024px) { + body { + font-size: 1.25em; + } + +a:hover { + text-shadow: 2px 2px #aaa; +} + +.title { + margin-top: 20px; +} + +.team-section{ + min-height: 400px; + text-align: center; + overflow: hidden; + background:#34495e; + padding:60px; + display:flex; +} + + +.our-team{ + margin-top: 100px; +} + +.our-team .pic{ + display: inline-block; + width: 85%; + height: 85%; + padding: 5px; + margin-bottom: 1px; + transition: all 0.5s ease 0s; + } +.our-team:hover .pic{ + background: #17bebb; + border-radius: 70%; + } + + .pic img{ + width: 100%; + height: auto; + border-radius: 50%; + } + + .our-team .title{ + display: block; + font-size: 15px; + font-weight: 600; + color: white; + margin: 0 0 7px 0; + } + .our-team .post{ + display: block; + font-size: 15px; + color: #17bebb; + text-transform: capitalize; + margin-bottom: 15px; + } + + @media only screen and (max-width: 990px){ + .our-team{ margin-bottom: 30px; } + } diff --git a/media/pgdu/css/style.css b/media/pgdu/css/style.css index 34d3e66..9bcffa2 100644 --- a/media/pgdu/css/style.css +++ b/media/pgdu/css/style.css @@ -1,218 +1,296 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans'); + body { - margin: 0; /*turning margin off as default*/ - min-height: 100vh; - font-size: 1em; - display: flex; - flex-direction: column; /*default flex direction is row*/ - font-family: 'Verdana', sans-serif; + font-weight: 400; + line-height: 1.65em; + font-size: 1.5rem; + font-family: 'Open Sans', sans-serif; } -header img { - width: 120px; - height: 120px; +h1, h2, h3, h4, .heading { + color: #333; + font-weight: 600; + text-align: center; } -header { - display: flex; - justify-content: space-between; - align-items: center; /*vertical centering*/ - padding: 10px 40px; - background: linear-gradient(to bottom, #ccc, white); +h1 { + margin-bottom: 4rem; } -header ul { - display: flex; - margin: 0; /*taking the margin and padding ul default size off*/ - padding: 0; - list-style-type: none; +h2 { + font-size: 2rem; } -header li { - padding: 2.5em; +h3 { + font-size: 1.5rem; } -header li a { - color: #333; - text-decoration: none; +#main h2, #side h2 { + text-align: left; + margin: 2rem 0; } -main { - padding: 2em; - line-height: 1.1; - display: flex; - justify-content: space-between; - align-items: stretch; /*vertical centering*/ - flex-grow: 1; +.heading { + margin: 0; + display: inline-block; + font-size: 1.25em; + font-weight: 600; } -h2 { - font-size: 1em; - text-align: center; +a { + font-weight: 600; } -main section { - flex-grow: 1; - flex-basis: 33%; - padding: 20px; - border-right: solid 1px #b9b9b9; - text-align: justify; +/* FOOTER */ + +footer { + background-color: #F5F5F5; + padding: 5rem; + text-align: center; } -main section:last-child { - border-right: 0; +footer#side { + margin-top: 4rem; } -main section ul li { - list-style: square; +/* TABLES */ + +table { + width: 100%; + margin: 0 0 2rem 0; } -main section ul li a { - color: #333; +table th { + color: #0E1210; + font-size: 0.9em; + font-weight: 700; + padding: 0 0.75em 0.75em 0.75em; + text-align: left; } -@keyframes bounce { - 0%, - 20%, - 40%, - 60%, - 80%, - 100% { - transform: translateY(0); - } - 50% { - transform: translateY(-10px); - } +table td { + padding: 0.75em 0.75em; } -.button { - animation-name: bounce; - animation-duration: 2s; - animation-iteration-count: infinite; - position:absolute; - right: 20px; - bottom: 20px; - background-color: #666; - border-radius: 5px; - padding: 10px 65px 15px 65px; - cursor: pointer; +table tbody tr { + border: solid 1px rgba(144, 144, 144, 0.25); + border-left: 0; + border-right: 0; } -.member-button { - text-decoration: none; - color: #fff; - font-size: 16px; - font-weight: 500; +input[type="text"], input[type="password"], input[type="email"], select { + height: 2.75em; + margin-bottom: .5em; } -.hidden-menu { - display: none; - position: absolute; - right: 20px; - bottom: 100px; - background-color: #666; - border-radius: 5px; - padding: 25px; +input[type="text"], input[type="password"], input[type="email"], select, textarea { + -moz-appearance: none; + -webkit-appearance: none; + -o-appearance: none; + -ms-appearance: none; + appearance: none; + background: rgba(144, 144, 144, 0.075); + border-color: #0E1210; + border-radius: 4px; + border: none; + box-shadow: 0 0 0 1px #0E1210; + color: inherit; + display: block; + outline: 0; + padding: 0 1em; + text-decoration: none; + width: 100%; } -.hidden-menu-buttons { - display: flex; - flex-direction: column; - text-align: left; +table tbody tr:nth-child(2n + 1) { + background-color: rgba(144, 144, 144, 0.075); } -.hidden-menu-buttons a { - cursor: pointer; +label { + color: #0E1210; + display: block; + font-size: 1em; + font-weight: 700; + margin: 1em 0 0 0; } -footer { - background: linear-gradient(to bottom, white, #ccc); - min-height: 15vh; - color: #666; +textarea { + padding: 0.75em 1em; } -footer ul { - margin: 0; /*taking the margin and padding ul default size off */ - padding: 0; - list-style-type: none; - display: flex; - justify-content: center; +input[type="submit"], input[type="reset"], input[type="button"], .button { + -moz-appearance: none; + -webkit-appearance: none; + -o-appearance: none; + -ms-appearance: none; + appearance: none; + -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + background-color: #337ab7; + border-radius: 15px; + color: #fff; + border: 0; + cursor: pointer; + display: inline-block; + font-weight: 600; + height: 2.85em; + line-height: 2.95em; + padding: 0 2em; + text-align: center; + text-decoration: none; + white-space: nowrap; } -footer li { - margin: 5px 10px; +input[type="submit"]:hover, input[type="button"]:hover { + background-color: #34495e; } -h3 { - font-size: 0.8em; - text-align: center; +/* OUR TEAM */ + +.title { + margin-top: 20px; + color: #fff; } -footer p { - font-size: 0.6em; - text-align: center; +.team-section{ + min-height: 400px; + text-align: center; + overflow: hidden; + background:#34495e; + padding:60px; } -@media screen and (min-width: 1024px) { - body { - font-size: 1.25em; - } +.team-section .pic{ + display: inline-block; + width: 85%; + height: 85%; + padding: 5px; + margin-bottom: 1px; + transition: all 0.5s ease 0s; +} -a:hover { - text-shadow: 2px 2px #aaa; +.team-section .pic img { + width: 15rem; + height: 15rem; + border-radius: 50%; } -.title { - margin-top: 20px; +.team-section .post{ + display: block; + font-size: 15px; + color: #fff; + text-transform: capitalize; + margin-bottom: 15px; } -.team-section{ - min-height: 400px; - text-align: center; - overflow: hidden; - background:#34495e; - padding:60px; - display:flex; -} - - -.our-team{ - margin-top: 100px; -} - -.our-team .pic{ - display: inline-block; - width: 85%; - height: 85%; - padding: 5px; - margin-bottom: 1px; - transition: all 0.5s ease 0s; - } -.our-team:hover .pic{ - background: #17bebb; - border-radius: 70%; - } - - .pic img{ - width: 100%; - height: auto; - border-radius: 50%; - } - - .our-team .title{ - display: block; - font-size: 15px; - font-weight: 600; - color: white; - margin: 0 0 7px 0; - } - .our-team .post{ - display: block; - font-size: 15px; - color: #17bebb; - text-transform: capitalize; - margin-bottom: 15px; - } - - @media only screen and (max-width: 990px){ - .our-team{ margin-bottom: 30px; } - } +/* PAGE */ + +section#main { + padding-top: 7rem; + padding-bottom: 4rem; +} + +div#main { + padding-top: 3rem; +} + +div#side { + padding-top: 7rem; +} + +#banner { + background-image: url(../images/conference.jpg); + background-position: bottom; + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + color: #ffffff; + padding: 14em 0; + -webkit-transform: translate3d(0,0,0); +} + +.jumbotron { + padding-top: 0; + padding-bottom: 0; + margin-top: 4rem; + margin-bottom: 0; +} + +.jumbotron h2 { + color: #fff; + margin-bottom: 5rem; +} + +/* NAVIGATION */ + +.navbar-fixed-top { + top: 0; + border-width: 0; + background-color: #fff; + box-shadow: 0 0 5px rgba(0,0,0,.8); +} + +.navbar-brand { + float: left; + font-size: initial; + max-height: 40px; + padding: 5px; +} + +.navbar-brand > img { + max-height: 40px; +} + +img#logo { + display: inline-block; +} + +.navbar-nav>li>a { + color: #333; + font-weight: 600; +} + +.navbar-default .navbar-toggle { + border: none; + color: #121212; +} + +.nav .open>a, .nav .open>a:focus, .nav .open>a:hover { + background-color: rgba(0,0,0,0); +} + +.fixedtheme .navbar-nav > li.active, +.fixedtheme .navbar-nav > li > a:focus, +.fixedtheme .navbar-nav > li > a:hover, +.navbar-nav > li.active > a, +.navbar-nav > li > a:hover, +.navbar-nav > li > a:focus, +.navbar-nav > li.open { + color: #0E1210; + background-color: transparent; +} + +.navbar-default .navbar-nav > li > a { + color: #121212; + font-weight: 600; + transition: all 0.4s ease; + -moz-transition: all 0.4s ease; /* Firefox 4 */ + -webkit-transition: all 0.4s ease; /* Safari and Chrome */ + -o-transition: all 0.4s ease; /* Opera */ +} + +.fixedtheme .navbar-nav > li > a { + transition: all 0.4s ease; + -moz-transition: all 0.4s ease; /* Firefox 4 */ + -webkit-transition: all 0.4s ease; /* Safari and Chrome */ + -o-transition: all 0.4s ease; /* Opera */ +} + +/* MEDIA QUERIES */ + +@media only screen and (max-width: 990px){ + .our-team{ margin-bottom: 30px; } +} diff --git a/template/base.html b/template/base.html index 96d824e..b2b9b0d 100644 --- a/template/base.html +++ b/template/base.html @@ -1,64 +1,70 @@ + + + + + + - - - PgDU - {%block title%}{%endblock%} - - - {%block extrahead%}{%endblock%} - + PgDU - {%block title%}{%endblock%} + + + + + + - -
- elephant + {%block extrahead%}{%endblock%} + + - -
+ + -
- {%block maincontent%}{%endblock%} -
+
-
-

PostgreSQL Down Under Inc.

- -

- © 2018 PostgreSQL Down Under Inc. -

-
+
+
+ {%block content%}{%endblock%} +
+
+ +
- + + + -- 2.39.5