--- /dev/null
+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; }
+ }
+@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; }
+}
<!DOCTYPE html>
<html lang="en" dir="ltr">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="PGDU 2018" />
+ <meta name="keywords" content="PostgreSQL" />
+ <meta name="author" content="PostgreSQL Down Under, Inc." />
-<head>
- <meta charset="utf-8">
- <title>PgDU - {%block title%}{%endblock%}</title>
- <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
- <link rel="stylesheet" href="/media/pgdu/css/style.css">
- {%block extrahead%}{%endblock%}
-</head>
+ <title>PgDU - {%block title%}{%endblock%}</title>
+ <script
+ src="https://code.jquery.com/jquery-3.3.1.min.js"
+ integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+ crossorigin="anonymous"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+ <script src="{{media("js/main.js")}}"></script>
+ <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+ <link rel="stylesheet" href="{{media("css/style.css")}}">
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
-<body>
- <header>
- <img src="/media/pgdu/images/mstile-310x310.png" alt="elephant">
+ {%block extrahead%}{%endblock%}
+ </head>
+ <body class="{{page}}">
- <nav>
- <ul>
- <li>
- <a href="#">About</a>
- </li>
- <li>
- <a href="https://docs.google.com/forms/d/1ZSmUMgLcZSdyAyr_qkoUQM7FBEyHQVuV8uUJ_dywJZ8/edit">Become a member</a>
- </li>
- <li>
- <a href="mailto:pgdu-committee@lists.pgdu.org">Contact Us</a>
- </li>
- <li>
- <a href="https://test2018.pgdu.org/">PGDay 2018</a>
- </li>
- {%if user.is_authenticated %}
- <li>
- <a href="/logout">Log Out</a>
- </li>
- {%endif%}
- </ul>
- </nav>
- </header>
+ <!-- Navigation -->
+ <nav id="header" class="navbar navbar-fixed-top">
+ <div id="header-container" class="container-fluid navbar-container">
+ <!-- Brand and toggle get grouped for better mobile display -->
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
+ <i class="fa fa-bars"></i>
+ </button>
+ <a class="navbar-brand" href="{{link("")}}">
+ <img id="logo" src="{{media("images/mstile-310x310.png")}}" alt="PgDU Logo">
+ <h1 class="heading">PgDU</h1>
+ </a>
+ </div>
+ <!-- Collect the nav links, forms, and other content for toggling -->
+ <div id="navbar" class="collapse navbar-collapse">
+ <ul class="nav navbar-nav navbar-right">
+ <li><a href="/">Home</a></li>
+ <li><a href="https://docs.google.com/forms/d/1ZSmUMgLcZSdyAyr_qkoUQM7FBEyHQVuV8uUJ_dywJZ8/edit">Become a member</a></li>
+ <li><a href="https://test2018.pgdu.org/">PGDay 2018</a></li>
+ {%if user.is_authenticated %}
+ <li><a href="/logout">Log Out</a></li>
+ {%endif%}
+ </ul>
+ </div><!-- /.navbar-collapse -->
+ </div><!-- /.container-fluid -->
+ </nav>
- <div id="pgContentWrap">
- {%block maincontent%}{%endblock%}
- </div>
+ <div class="container" id="side">
- <footer>
- <h3>PostgreSQL Down Under Inc.</h3>
- <ul>
- <li>
- <a href="#">
- <img src="/media/pgdu/images/twitter.png" alt="Twitter logo">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="/media/pgdu/images/facebook.png" alt="Facebook logo">
- </a>
- </li>
- </ul>
- <p>
- © 2018 PostgreSQL Down Under Inc.
- </p>
- </footer>
+ <div class="row">
+ <div class="col">
+ {%block content%}{%endblock%}
+ </div>
+ </div>
+
+ </div>
-</body>
+ <!-- Footer -->
+ <footer id="side">
+ <p>
+ <a href="{{link("code-of-conduct")}}">Code of Conduct</a> | @PGDayAU | <a href="mailto:pgdu-committee@lists.pgdu.org">pgdu-committee@lists.pgdu.org</a> | © 2018 PostgreSQL Down Under Inc.
+ </p>
+ </footer>
+ </body>
</html>
projects / pgdutmpl.git / commitdiff