arbejdsfaellesskab.dk/hugo_site/themes/tranetheme/assets/static/style.scss

784 lines
11 KiB
SCSS
Raw Normal View History

2019-04-30 14:39:24 +00:00
$navy-blue: #000;
$purple: #000;
$teal: #29a19c;
$bright-blue: #49beb7;
$orange: #F17430;
$peach: #F9B99E;
$coral: #e61c5d;
$beige: #C9C3B0;
$gray-light: #E7E7E7;
$primary-font: monospace;
$tablet: 48rem;
$desktop: 60rem;
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body,
html {
width: 100%;
color: $navy-blue;
}
body {
font-family: $primary-font;
font-size: 16px;
}
h1 {
color: $bright-blue;
text-align: center;
margin-bottom: 1rem;
font-size: 2rem;
margin-top: 3rem;
}
h2 {
color: $teal;
text-align: center;
margin-bottom: 1rem;
margin-top: 3rem;
}
h3 {
color: $purple;
text-transform: uppercase;
text-align: center;
margin-bottom: 1rem;
}
input[type="email"],
input[type="number"],
input[type="password"],
select,
input[type="text"] {
border: 0;
background-color: $gray-light;
padding: 1rem;
line-height: 1;
font-size: 16px;
font-family: $primary-font;
}
label {
display: block;
}
form {
margin: 0 auto;
}
p,
ul {
margin-bottom: 1rem;
line-height: 150%;
}
ul {
margin-left: 40px;
}
a {
color: $bright-blue;
}
a.button,
button,
input[type="submit"] {
padding: 1rem 1.25rem;
background: $bright-blue;
border: 0;
color: white;
text-decoration: none;
text-transform: uppercase;
font-weight: 700;
font-size: 16px;
font-family: $primary-font;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
transition: transform 0.2s ease-out;
&.button-red {
background: $coral;
}
&.button-orange {
background: $orange;
}
&:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
}
code {
background-color: rgb(249, 242, 244);
border: 1px solid #aaa;
border-radius: 4px;
color: $coral;
font-family: monospace;
padding: 2px 4px;
}
img {
max-width: 100%;
}
.container {
max-width: 42rem;
margin: 0 auto;
}
//
// Header
.header-logo {
2019-05-12 22:55:58 +00:00
width: 400px;
2019-04-30 14:39:24 +00:00
display: block;
2019-05-12 22:55:58 +00:00
margin: auto 1rem;
2019-04-30 14:39:24 +00:00
margin-bottom: 1rem;
@media (min-width: $desktop) {
margin-bottom: 0;
}
}
//
// Navigation
.header {
2019-05-12 22:55:58 +00:00
width: 100%;
2019-04-30 14:39:24 +00:00
padding: 1rem 0;
z-index: 5;
background-color: $navy-blue;
justify-content: space-between;
background-position: center;
background-size: 400px;
//background-image: url('/static/img/fin_13.png');
align-items: center;
2019-05-12 22:55:58 +00:00
// @media (min-width: $desktop) {
@media (min-width: 0) {
2019-04-30 14:39:24 +00:00
display: flex;
padding: 1rem;
}
nav ul {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: center;
margin: 0;
@media (min-width: $tablet) {
flex-flow: row;
}
}
nav li {
list-style-type: none;
&.active a {
color: $coral;
}
}
2019-05-12 22:55:58 +00:00
nav ul a {
2019-04-30 14:39:24 +00:00
font-weight: 700;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 0.75rem;
letter-spacing: 1px;
line-height: 1.15;
color: white;
display: inline-block;
font-size: 14px;
@media (min-width: $desktop) {
padding: 0.85rem;
font-size: 16px;
}
&:hover {
background-color: white;
cursor: pointer;
color: $coral;
}
}
}
.header-submenu {
background: $coral;
margin: 0 0 0 0;
padding: 0;
justify-content: center;
display: flex;
flex-wrap: wrap;
li {
list-style-type: none;
&.active,
&.active:hover {
background: darken($coral, 10%);
}
&:hover {
background: darken($coral, 5%);
}
}
a {
font-weight: 700;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 1rem;
letter-spacing: 1px;
line-height: 1.15;
color: white;
display: inline-block;
font-size: 14px;
@media (min-width: $desktop) {
font-size: 16px;
}
}
}
.header-submenu-back {
padding: 1rem 1.25rem;
letter-spacing: 1px;
line-height: 1.15;
font-size: 14px;
display: block;
color: $coral;
border-bottom: 1px solid $beige;
font-weight: 700;
text-align: center;
text-decoration: none;
text-transform: uppercase;
@media (min-width: $desktop) {
font-size: 16px;
}
}
//
// Hero
.header-hero {
color: white;
text-align: center;
margin-bottom: 3rem;
padding: 1rem 1rem 4rem 1rem;
background-image: url('/static/img/Djangocon_eu19_live_web_BPawlik-62.jpg');
background-position: top;
background-repeat: no-repeat;
background-size: cover;
position: relative;
@media (min-width: $tablet) {
padding: 1rem 1rem 2rem 1rem;
}
@media (min-width: $desktop) {
padding: 1rem 2rem 4rem 2rem;
background-position: center;
}
.container {
position: relative;
z-index: 5;
}
&:before {
background: $navy-blue;
content: "";
position: absolute;
opacity: 0.85;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
h1 {
color: white;
padding: 2rem 0 4rem 0;
margin: 0;
line-height: 1.25;
font-size: 2rem;
@media (min-width: $tablet) {
font-size: 2.5rem;
}
}
small {
display: block;
font-weight: 500;
margin-top: 1.5rem;
color: $bright-blue;
font-size: 1.25rem;
@media (min-width: $tablet) {
font-size: 1.75rem;
}
}
p {
font-size: 1.35rem;
}
.header {
background-image: none;
background-color: transparent;
width: 100%;
position: relative;
z-index: 5;
}
.header-logo {
width: 200px;
@media (min-width: $tablet) {
width: 160px;
}
@media (min-width: $desktop) {
width: 180px;
}
}
}
//
// Markdown Content
main {
margin-top: 2rem;
margin-bottom: 4rem;
padding: 0 1rem;
a:not(.button) {
text-decoration: none;
color: $teal;
border-bottom: 1px solid $bright-blue;
&:hover {
color: $purple;
border-bottom: 1px solid $coral;
}
}
h2 {
margin-top: 2rem;
}
ul li {
margin-bottom: 0.3rem;
}
b,
strong {
color: $navy-blue;
}
table {
width: 100%;
margin-bottom: 1rem;
}
table th {
text-align: left;
}
table td {
border-bottom: 1px dotted $beige;
padding: 5px 0;
}
}
footer {
color: white;
padding: 1rem;
margin-top: 1rem;
background: $purple;
background-position: center;
//background-image: url('/static/img/fin_092.png');
background-size: 700px;
font-size: 0.85rem;
section {
display: flex;
justify-content: space-between;
flex-flow: column;
p {
margin: 1rem;
&.even {
flex: 1;
}
&.pull-up {
@media (max-width: $tablet) {
margin-top: -1rem;
br:first-child {
display: none;
}
}
}
}
@media (min-width: $tablet) {
flex-flow: row;
}
&.center {
text-align: center;
}
&.middle {
align-items: center;
}
}
}
.form-subscribe {
text-align: center;
margin: 0rem auto 3rem auto;
width: 100%;
p {
margin-bottom: 1.5rem;
}
.form-wrapper {
display: flex;
justify-content: center;
}
input {
width: 50%;
max-width: 380px;
}
}
//
// Page specific styles
//
.page-index {
margin-bottom: 2rem;
.logo {
width: 70%;
display: block;
margin: 0 auto;
}
h1 {
line-height: 1.25;
}
}
$month-offset: 9rem;
.schedule {
margin-bottom: 4rem;
margin-left: 0;
li {
list-style-type: none;
margin-bottom: 1rem;
align-items: center;
@media (min-width: $tablet) {
display: flex;
}
}
li p {
margin: 0;
width: 100%;
}
.month {
padding-right: 1rem;
text-transform: uppercase;
font-weight: 700;
color: $coral;
font-size: 0.9rem;
letter-spacing: 1px;
display: block;
@media (min-width: $tablet) {
display: inline-block;
flex-basis: $month-offset;
width: $month-offset;
margin-left: -$month-offset;
text-align: right;
}
}
li.strike {
text-decoration: line-through;
opacity: 0.6;
.month {
color: $navy-blue;
}
}
}
//
// Alerts
.alert {
background: $purple;
color: white;
padding: 1rem;
text-align: center;
margin-bottom: 2rem;
a {
color: $coral !important;
text-transform: uppercase;
margin-bottom: 1rem;
display: inline-block;
font-weight: bold;
}
}
//
// Sponsors
.sponsors {
display: flex;
max-width: 60rem;
padding: 0 1.5rem;
flex-wrap: wrap;
margin: 1rem auto;
justify-content: space-around;
align-items: center;
text-align: center;
}
.sponsor-item {
flex-basis: 100%;
margin: 1rem auto;
img {
width: 90%;
max-width: 200px;
margin: 0 auto;
}
}
.sponsors-community {
.sponsor-item {
flex-basis: 100%;
min-width: 180px;
}
}
@media (min-width: $tablet) {
.sponsor-item {
display: flex;
flex-basis: 26%;
min-height: 125px;
justify-content: center;
align-items: center;
img {
width: 100%;
max-width: 300px;
min-width: auto;
}
}
.sponsors-community {
width: 60%;
&:hover .sponsor-item {
filter: grayscale(0);
}
}
.sponsors-community .sponsor-item {
flex-basis: 30%;
transition: all .25s ease-out;
filter: grayscale(1);
}
}
//
// Talks
.talk {
padding: 2rem 0;
border-bottom: 1px solid $gray-light;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.talk-image {
border-radius: 50%;
margin-right: 1.5rem;
max-width: 80px;
}
.talk-content {
flex: 1;
}
.talk-title {
font-size: 1.15rem;
margin: 0;
margin-bottom: 1rem;
}
.talk-speaker {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.05rem;
font-size: 0.85rem;
color: $coral;
}
.talk-abstract {
width: 100%;
margin-top: 1rem;
}
//
// News
.post-list {
margin: 0;
padding: 0;
}
.post-date {
text-align: center;
opacity: 0.75;
font-size: 0.95rem;
margin: 1rem 0;
}
.post-summaries {
article {
margin-bottom: 4rem;
}
}
//
// Jobs
.job-list {
padding-bottom: 80px;
margin-top: 80px;
border-top: 1px solid #e7e7e7;
}
.job {
padding: 2rem 0;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
.head {
display: block;
width: 100%;
padding-bottom: 1em;
.logo {
height: 140px;
max-width: 230px;
margin: auto;
display: block;
img {
max-height: 100px;
}
a {
text-decoration: none !important;
border: 0 none;
}
}
h2 {
text-align: left;
margin-top: 0;
padding-bottom: 20px;
}
.bullets {
margin: auto;
padding-bottom: 20px;
}
}
.more-info {
margin-top: 2em;
margin-bottom: 2em;
width: 100%;
}
.apply-button {
text-align: center;
margin: auto;
margin-top: 2em;
}
h1 {
text-align: left;
}
ol {
padding-left: 20px;
}
&.item {
img {
max-width: 120px;
padding-right: 10px;
}
.description {
width: 100%;
margin-top: 1rem;
padding-bottom: 1em;
border-bottom: 1px solid #e7e7e7;
a {
text-decoration: none;
border: none;
}
}
}
}
//
// Video Embed
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}