remove czmj stuff, strip it down to a basic splash page
This commit is contained in:
czmj
parent
e1b07e7f15
commit
c0fe44e453
|
|
@ -1,98 +0,0 @@
|
|||
.header {
|
||||
position: relative;
|
||||
margin-bottom: gutter(6);
|
||||
background: $brand-color-a;
|
||||
color: $brand-white;
|
||||
z-index: $z-mid;
|
||||
|
||||
@include breakpoint($sm) {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header__inner {
|
||||
padding: 40px 0;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
@include breakpoint($md) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 80px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header__content {
|
||||
width: 100%;
|
||||
|
||||
@include breakpoint($md) {
|
||||
@include span(8);
|
||||
@include last();
|
||||
}
|
||||
}
|
||||
|
||||
.header__title {
|
||||
@extend .h1;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.header__subtitle {
|
||||
@extend .h2;
|
||||
color: mix($brand-color-a, $brand-color-f);
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.header__promo {
|
||||
@include hex__outer;
|
||||
display: none;
|
||||
|
||||
@include breakpoint($md) {
|
||||
display: block;
|
||||
@include span(4);
|
||||
margin-bottom: gutter(8);
|
||||
}
|
||||
}
|
||||
.header__promo__inner {
|
||||
@include hex__middle;
|
||||
}
|
||||
.header__promo__media {
|
||||
@include hex__inner;
|
||||
}
|
||||
|
||||
.header__social {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: stretch;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.header__social__item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header__social__link {
|
||||
font-size: 150%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
padding: 10px;
|
||||
background: tint($brand-color-a, 50%);
|
||||
color: mix($brand-color-a, $brand-color-f, 80%);
|
||||
|
||||
.header__social__item:nth-child(5n) & {
|
||||
background: tint($brand-color-a, 30%);
|
||||
}
|
||||
.header__social__item:nth-child(even) & {
|
||||
background: tint($brand-color-a, 40%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: tint($brand-color-a, 25%);
|
||||
|
||||
.header__social__item:nth-child(even) &,
|
||||
.header__social__item:nth-child(5n) & {
|
||||
background: tint($brand-color-a, 25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
.navigation {
|
||||
display: none;
|
||||
|
||||
@include breakpoint($sm) {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: $brand-color-f;
|
||||
color: $brand-white;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.4;
|
||||
z-index: $z-mid;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 25px 45px 0 45px;
|
||||
border-color: $brand-color-f transparent transparent transparent;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation--fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: $z-high;
|
||||
}
|
||||
|
||||
.navigation__level-0 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navigation__item {
|
||||
margin: 0;
|
||||
flex-basis: 15%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navigation__item--left {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.navigation__item--right {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.navigation__link {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $brand-color-a;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
.promo {
|
||||
@include hex__outer;
|
||||
color: $brand-white;
|
||||
margin-bottom: 25%;
|
||||
|
||||
@include breakpoint($sm) {
|
||||
width: 33.333%;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:nth-of-type(5n-4) {
|
||||
margin-left: 16.666%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.hex-grid--offset & {
|
||||
|
||||
@include breakpoint($md) {
|
||||
&:first-of-type {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
&:nth-of-type(5n-4) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(7n-3) {
|
||||
margin-left: 16.66667%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.promo__inner {
|
||||
@include hex__middle;
|
||||
}
|
||||
.promo__content {
|
||||
@include hex__inner;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
.promo--closed & {
|
||||
.promo__title,
|
||||
.promo__body {
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
}
|
||||
.promo__title,
|
||||
.promo__body {
|
||||
width: 100%;
|
||||
padding: 5%;
|
||||
box-sizing: border-box;
|
||||
background-color: fade-out($brand-color-e, 0.1);
|
||||
font-weight: 300;
|
||||
transition: transform .2s ease-in-out, opacity .3s ease-in-out;
|
||||
}
|
||||
.promo__title {
|
||||
margin-bottom: 0;
|
||||
bottom: 55%;
|
||||
padding-top: 50%;
|
||||
|
||||
@include breakpoint($sm) {
|
||||
transform: translate3d(0,-100%,0);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 45%;
|
||||
width: 10%;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
}
|
||||
.promo__body {
|
||||
top: 45%;
|
||||
padding-bottom: 50%;
|
||||
|
||||
@include breakpoint($sm) {
|
||||
transform: translate3d(0,100%,0);
|
||||
}
|
||||
}
|
||||
|
||||
.promo__media {
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
@each $index, $color in $brand-colors {
|
||||
.promo--theme-#{$index} {
|
||||
.promo__content {
|
||||
background-color: fade-out($color, 0.7);
|
||||
}
|
||||
|
||||
.promo__title,
|
||||
.promo__body {
|
||||
background-color: fade-out(shade($color, 15%), 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
.section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section__title {
|
||||
@extend .h3;
|
||||
}
|
||||
|
||||
.section--style-a {
|
||||
float: left;
|
||||
margin-top: 50px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.section__block--a {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
@include breakpoint($md) {
|
||||
width: 100%;
|
||||
margin-bottom: 5%;
|
||||
|
||||
+ .section--style-a {
|
||||
margin-top: -11.5%
|
||||
}
|
||||
|
||||
.section__block--a {
|
||||
@include span(3);
|
||||
padding-top: 7vw;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section__block--b {
|
||||
@include span(9);
|
||||
@include last()
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint($xl) {
|
||||
.section__block--a {
|
||||
padding-top: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,10 +9,4 @@
|
|||
@import 'utilities/icons';
|
||||
@import 'utilities/layout_utilities';
|
||||
@import 'utilities/color_utilities';
|
||||
@import 'utilities/monitor_mq';
|
||||
@import 'utilities/hex';
|
||||
|
||||
@import 'components/header';
|
||||
@import 'components/navigation';
|
||||
@import 'components/promo';
|
||||
@import 'components/section';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@function dynamic-color($color, $lightness: 50, $dark-color: $text-color, $light-color: $brand-white) {
|
||||
@function dynamic-color($color, $lightness: 50, $dark-color: $brand-black, $light-color: $brand-white) {
|
||||
@if (lightness($color) > $lightness){
|
||||
@return $dark-color; // Lighter background, return dark color
|
||||
}
|
||||
|
|
@ -6,21 +6,6 @@
|
|||
@return $light-color; // Darker background, return light color
|
||||
}
|
||||
}
|
||||
@function paired-color($brand-color) {
|
||||
$return-color: dynamic-color($brand-color) !default;
|
||||
|
||||
@if ($brand-color == $brand-color-d){
|
||||
$return-color: $brand-color-a;
|
||||
}
|
||||
@if ($brand-color == $brand-color-e){
|
||||
$return-color: $brand-color-b;
|
||||
}
|
||||
@if ($brand-color == $brand-color-f){
|
||||
$return-color: $brand-color-c;
|
||||
}
|
||||
|
||||
@return $return-color;
|
||||
}
|
||||
|
||||
@function tint($color, $percentage) {
|
||||
@return mix(#fff, $color, $percentage);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
@font-face {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: 'Larsseit';
|
||||
src:url('#{$directory-fonts}/Larsseit/Larsseit.eot?-gfwsty');
|
||||
src:url('#{$directory-fonts}/Larsseit/Larsseit.eot?#iefix-gfwsty') format('embedded-opentype'),
|
||||
url('#{$directory-fonts}/Larsseit/Larsseit.ttf?-gfwsty') format('truetype'),
|
||||
url('#{$directory-fonts}/Larsseit/Larsseit.woff?-gfwsty') format('woff'),
|
||||
url('#{$directory-fonts}/Larsseit/Larsseit.svg?-gfwsty#Larsseit') format('svg');
|
||||
}
|
||||
|
|
@ -12,8 +12,6 @@ html {
|
|||
|
||||
background: $background-color;
|
||||
|
||||
overflow-x: hidden;
|
||||
|
||||
font-size: 100%;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -26,14 +24,6 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
.rtl {
|
||||
text-align: right;
|
||||
|
||||
svg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
color: $text-color;
|
||||
|
|
@ -44,16 +34,26 @@ body {
|
|||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.container {
|
||||
@include container;
|
||||
width: $max-width;
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,61 +0,0 @@
|
|||
.hex-grid {
|
||||
@include breakpoint($sm) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
padding-bottom: 6.6%
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hex__outer {
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
outline: 1px solid transparent;
|
||||
|
||||
&::after {
|
||||
content:'';
|
||||
display: block;
|
||||
padding-bottom: 86.602%; // = 100 / tan(60) * 1.5
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hex__middle {
|
||||
position: absolute;
|
||||
width: 92%;
|
||||
padding-bottom: 106.232%; // width / sin(60)
|
||||
margin: 0 1%;
|
||||
overflow: hidden;
|
||||
outline: 1px solid transparent;
|
||||
transform: rotate3d(0,0,1,-60deg) skewY(30deg);
|
||||
|
||||
> * {
|
||||
position: absolute;
|
||||
visibility: visible;
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
@mixin hex__inner {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
transform: skewY(-30deg) rotate3d(0,0,1,60deg);
|
||||
|
||||
img {
|
||||
left: -100%;
|
||||
right: -100%;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
max-width: 200%;
|
||||
margin: 0 auto;
|
||||
transform: rotate3d(0,0,0,0deg);
|
||||
}
|
||||
|
||||
> * {
|
||||
position: absolute;
|
||||
visibility: visible;
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +1,18 @@
|
|||
.visually-hidden {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@mixin hidden-xs {
|
||||
@include breakpoint(max-width $breakpoint-sm-width) {
|
||||
@include breakpoint(max-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hidden-sm {
|
||||
@include breakpoint($breakpoint-sm-width $breakpoint-sm-width-max) {
|
||||
@include breakpoint($breakpoint-sm-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin hidden-md {
|
||||
@include breakpoint($breakpoint-md-width $breakpoint-md-width-max) {
|
||||
@include breakpoint($breakpoint-md-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -34,20 +23,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin with-rtl($padding-end: null) {
|
||||
@content;
|
||||
@mixin visually-hidden {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@if $padding-end != null {
|
||||
padding-right: $padding-end;
|
||||
}
|
||||
|
||||
.rtl & {
|
||||
@include with-layout(rtl) {
|
||||
@content;
|
||||
|
||||
@if $padding-end != null {
|
||||
padding-left: $padding-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
.visually-hidden {
|
||||
@include visually-hidden();
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
// for monitor-mq.js
|
||||
.monitor-mq {
|
||||
display: block;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: -9999em;
|
||||
left: -9999em;
|
||||
// smallest
|
||||
width: $sm;
|
||||
|
||||
@include breakpoint($md) {
|
||||
width: $md;
|
||||
}
|
||||
|
||||
@include breakpoint($lg) {
|
||||
width: $lg;
|
||||
}
|
||||
|
||||
@include breakpoint($xl) {
|
||||
width: $xl;
|
||||
}
|
||||
|
||||
@include breakpoint($xxl) {
|
||||
width: $xxl;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,78 +1,64 @@
|
|||
p {
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
margin-bottom: $vr*3;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
&[href^=tel] {
|
||||
direction: ltr;
|
||||
unicode-bidi: embed;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: $vr*2;
|
||||
}
|
||||
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5 {
|
||||
.h5,
|
||||
.h6 {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-weight: $font-weight-regular;
|
||||
font-family: $font-family-heading;
|
||||
line-height: 1.2;
|
||||
margin-bottom: $vr*3;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 30px;
|
||||
font-size: calc(20px + 2vw);
|
||||
|
||||
font-size: $vr*6;
|
||||
font-size: calc(#{$vr*5} + 3.5vw);
|
||||
|
||||
@include breakpoint($xl) {
|
||||
font-size: 48px;
|
||||
font-size: $vr*15;
|
||||
}
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 22px;
|
||||
font-size: calc(18px + 0.7vw);
|
||||
font-size: $vr*5;
|
||||
font-size: calc(#{$vr*4} + 2.5vw);
|
||||
|
||||
@include breakpoint($xl) {
|
||||
font-size: 28px;
|
||||
font-size: $vr*11;
|
||||
}
|
||||
}
|
||||
.h3 {
|
||||
font-size: 18px;
|
||||
font-size: calc(16px + 0.6vw);
|
||||
font-size: $vr*4;
|
||||
font-size: calc(#{$vr*3} + 1.9vw);
|
||||
|
||||
@include breakpoint($xl) {
|
||||
font-size: 24px;
|
||||
font-size: $vr*8;
|
||||
}
|
||||
}
|
||||
.h4 {
|
||||
font-size: 16px;
|
||||
font-size: calc(16px + 0.5vw);
|
||||
font-size: $vr*3.5;
|
||||
font-size: calc(#{$vr*2} + 1.5vw);
|
||||
|
||||
@include breakpoint($lg) {
|
||||
font-size: 22px;
|
||||
@include breakpoint($xl) {
|
||||
font-size: $vr*6;
|
||||
}
|
||||
}
|
||||
|
||||
.h5 {
|
||||
font-size: 15px;
|
||||
font-size: calc(15px + 0.25vw);
|
||||
font-size: $vr*3;
|
||||
font-size: calc(#{$vr*2} + 0.75vw);
|
||||
|
||||
@include breakpoint($lg) {
|
||||
font-size: 18px;
|
||||
@include breakpoint($xl) {
|
||||
font-size: $vr*4;
|
||||
}
|
||||
}
|
||||
.h6 {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
|
@ -35,28 +35,19 @@ $retina-query: (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi);
|
|||
$max-width: $xl;
|
||||
|
||||
// Colors
|
||||
$brand-color-a: #0da8ad;
|
||||
$brand-color-b: #FFC56C;
|
||||
$brand-color-c: #003A6F;
|
||||
$brand-color-d: #FF5959;
|
||||
$brand-color-e: #814374;
|
||||
$brand-color-f: #323232;
|
||||
$brand-color-g: #777777;
|
||||
|
||||
$brand-colors: (
|
||||
a: $brand-color-a,
|
||||
b: $brand-color-b,
|
||||
c: $brand-color-c,
|
||||
d: $brand-color-d,
|
||||
e: $brand-color-e,
|
||||
f: $brand-color-f
|
||||
);
|
||||
$brand-color-a: #222222;
|
||||
$brand-color-b: #fefefe;
|
||||
|
||||
$brand-white: #FFF;
|
||||
$brand-black: #000;
|
||||
|
||||
$text-color: #333 !default;
|
||||
$background-color: #f9f9f9;
|
||||
$text-color: $brand-color-a !default;
|
||||
$background-color: $brand-color-b;
|
||||
|
||||
// Dimensions
|
||||
$vertical-rhythm: 5px;
|
||||
$vr: $vertical-rhythm;
|
||||
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: 'Didact Gothic', Helvetica, Arial, sans-serif;
|
||||
|
|
|
|||
137
src/data/en.json
137
src/data/en.json
|
|
@ -1,139 +1,2 @@
|
|||
{
|
||||
"index": {
|
||||
"promo_blocks": {
|
||||
"web-dev": {
|
||||
"nav_title": "Web Development",
|
||||
"title": "Web Development Work",
|
||||
"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum consequat faucibus eleifend. Donec sagittis ultrices euismod. Donec rutrum turpis ut rutrum tristique.",
|
||||
"promos": [
|
||||
{
|
||||
"class": "promo--theme-e",
|
||||
"img": "/img/trib3.jpg",
|
||||
"title": "TRIB3",
|
||||
"body": "Ruby on Rails site for a gym franchise",
|
||||
"url": "//trib3.co.uk/"
|
||||
},
|
||||
{
|
||||
"class": "promo--theme-c",
|
||||
"img": "/img/bep.png",
|
||||
"title": "Black Eye Project",
|
||||
"body": "Some sample text about the article this hexagon leads to",
|
||||
"url": "http://theblackeyeproject.co.uk/"
|
||||
},
|
||||
{
|
||||
"class": "promo--theme-b",
|
||||
"img": "/img/universal.jpg",
|
||||
"title": "Universal Square",
|
||||
"body": "Some sample text about the article this hexagon leads to",
|
||||
"url": "http://www.universalsquare.co.uk/"
|
||||
},
|
||||
{
|
||||
"class": "promo--theme-d",
|
||||
"img": "http://shamal2017.dev.theblackeyeproject.co.uk/img/pages/projects.jpg",
|
||||
"title": "Shamal Group",
|
||||
"body": "Some sample text about the article this hexagon leads to",
|
||||
"url": "//shamal2017.dev.theblackeyeproject.co.uk/"
|
||||
},
|
||||
{
|
||||
"class": "promo--theme-a",
|
||||
"img": "/img/shelborn2.jpg",
|
||||
"title": "Shelborn Asset Management",
|
||||
"body": "Some sample text about the article this hexagon leads to",
|
||||
"url": "http://shelborn.com/"
|
||||
}
|
||||
]
|
||||
},
|
||||
"open-source": {
|
||||
"nav_title": "Open Source",
|
||||
"title": "Open Source",
|
||||
"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum consequat faucibus eleifend. Donec sagittis ultrices euismod. Donec rutrum turpis ut rutrum tristique.",
|
||||
"promos": [
|
||||
{
|
||||
"class": "promo--theme-c",
|
||||
"img": "/img/sheffugees.png",
|
||||
"title": "Asylum Journey",
|
||||
"body": "Angular app to match asylum seekers in Sheffield with help services. Part of Sheffugees.",
|
||||
"url": "http://asylumjourney.sheffugees.org/"
|
||||
},
|
||||
{
|
||||
"class": "promo--theme-e",
|
||||
"img": "",
|
||||
"title": "This is a title",
|
||||
"body": "Some sample text about the article this hexagon leads to",
|
||||
"url": "#"
|
||||
},
|
||||
{
|
||||
"class": "promo--theme-b",
|
||||
"img": "/img/cyclespoons.png",
|
||||
"title": "Cyclespoons",
|
||||
"body": "Map of Weatherspoons locations for long-distance cyclists",
|
||||
"url": "https://cyclespoons.herokuapp.com/"
|
||||
},
|
||||
{
|
||||
"class": "promo--theme-a",
|
||||
"img": "",
|
||||
"title": "This is a title",
|
||||
"body": "Some sample text about the article this hexagon leads to",
|
||||
"url": "#"
|
||||
},
|
||||
{
|
||||
"class": "promo--theme-d",
|
||||
"img": "",
|
||||
"title": "This is a title",
|
||||
"body": "Some sample text about the article this hexagon leads to",
|
||||
"url": "#"
|
||||
}
|
||||
]
|
||||
},
|
||||
"uni": {
|
||||
"nav_title": "Open University",
|
||||
"title": "Open University Projects",
|
||||
"promos": [
|
||||
{
|
||||
"class": "promo--theme-e",
|
||||
"img": "",
|
||||
"title": "This is a title",
|
||||
"body": "Some sample text about the article this hexagon leads to",
|
||||
"url": "#"
|
||||
},
|
||||
{
|
||||
"class": "promo--theme-c",
|
||||
"img": "",
|
||||
"title": "This is a title",
|
||||
"body": "Some sample text about the article this hexagon leads to",
|
||||
"url": "#"
|
||||
}
|
||||
]
|
||||
},
|
||||
"music": {
|
||||
"nav_title": "Music",
|
||||
"title": "Music",
|
||||
"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum consequat faucibus eleifend. Donec sagittis ultrices euismod. Donec rutrum turpis ut rutrum tristique.",
|
||||
"offset": true,
|
||||
"promos": [
|
||||
{
|
||||
"class": "promo--theme-a",
|
||||
"img": "http://deeprootsmag.org/wp-content/uploads/2012/11/foghorn-stringband1.jpg",
|
||||
"title": "This is a title",
|
||||
"body": "Some sample text about the article this hexagon leads to",
|
||||
"url": "#"
|
||||
},
|
||||
{
|
||||
"class": "promo--theme-d",
|
||||
"img": "",
|
||||
"title": "This is a title",
|
||||
"body": "Some sample text about the article this hexagon leads to",
|
||||
"url": "#"
|
||||
},
|
||||
{
|
||||
"class": "promo--theme-b",
|
||||
"img": "",
|
||||
"title": "This is a title",
|
||||
"body": "Some sample text about the article this hexagon leads to",
|
||||
"url": "#"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,30 +2,26 @@
|
|||
|
||||
{% block content %}
|
||||
<main>
|
||||
<div class="container">
|
||||
{% for key, b in index.promo_blocks %}
|
||||
<section id="{{key}}" class="section section--style-a">
|
||||
<div class="section__block--a">
|
||||
<h2 class="section__title">{{b.title}}</h2>
|
||||
<p class="section__body">{{b.body}}</p>
|
||||
</div>
|
||||
<div class="hex-grid{% if b.offset %} hex-grid--offset{% endif %} section__block--b">
|
||||
{% for p in b.promos %}
|
||||
<article class="promo {{p.class}}{% if not p.img %} promo--closed{% endif %}">
|
||||
<div class="promo__inner">
|
||||
<a class="promo__content" href="{{p.url}}">
|
||||
{% if p.img %}
|
||||
<img src="{{p.img}}" alt="" class="promo__media"/>
|
||||
{% endif %}
|
||||
<div class="promo__title"><h3 class="h5">{{p.title}}</h3></div>
|
||||
<div class="promo__body"><p>{{p.body}}</p></div>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endfor %}
|
||||
<div class="container flex-container">
|
||||
<header class="visually-hidden">
|
||||
<h1>Autonomic Co-operative</h1>
|
||||
</header>
|
||||
<br>
|
||||
|
||||
<div class="logo">
|
||||
<img src="/img/logo.png" alt="Logo"/>
|
||||
</div>
|
||||
|
||||
<p class="h2">
|
||||
Sustainability, Transparency, Privacy
|
||||
</p>
|
||||
|
||||
<p class="h4">
|
||||
<a href="mailto:autonomic@posteo.net">
|
||||
<i class="icon icon--envelope" aria-hidden="true"></i>
|
||||
autonomic@posteo.net
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
{% endblock %}
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 350 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 420 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 154 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="no-js {{settings.htmlClass}}" dir="{{settings.dir}}" lang="{{settings.lang}}">
|
||||
<html class="no-js">
|
||||
<head>
|
||||
{% include "partials/head/head-meta.nunjucks" %}
|
||||
{% include "partials/head/head-css.nunjucks" %}
|
||||
|
|
@ -7,13 +7,11 @@
|
|||
{% include "partials/head/head-scripts.nunjucks" %}
|
||||
</head>
|
||||
<body>
|
||||
{% include "partials/header/header.nunjucks" %}
|
||||
|
||||
<div class="content">
|
||||
{% block content %} {% endblock %}
|
||||
</div>
|
||||
|
||||
{% include "partials/footer/footer.nunjucks" %}
|
||||
{% include "partials/foot/foot-scripts.nunjucks" %}
|
||||
{% block foot_scripts %} {% endblock %}
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
<nav class="navigation">
|
||||
<h2 class="visually-hidden">Site navigation</h2>
|
||||
<div class="container">
|
||||
<ul class="navigation__level-0">
|
||||
{% for key, b in index.promo_blocks %}
|
||||
<li class="navigation__item{% if loop.index > loop.revindex %} navigation__item--right{% elseif loop.index < loop.revindex %} navigation__item--left{% endif %}">
|
||||
<a href="#{{key}}" class="navigation__link" data-scroll-to-id>
|
||||
{% if b.nav_title %}
|
||||
{{b.nav_title}}
|
||||
{% else %}
|
||||
{{b.title}}
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="header__inner">
|
||||
<div class="header__promo">
|
||||
<div class="header__promo__inner">
|
||||
<img src="/img/docwatson2.jpg" alt="" class="header__promo__media"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__content">
|
||||
<h1 class="header__title">Clara Jordan</h1>
|
||||
<p class="header__subtitle">Web Developer, Student and Musician</p>
|
||||
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
|
||||
|
||||
<ul class="header__social">
|
||||
<li class="header__social__item">
|
||||
<a href="mailto:clarazmjordan+czmjgithubio@gmail.com" class="header__social__link">
|
||||
<i class="icon icon--envelope-o"></i>
|
||||
<span class="visually-hidden">Email me</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="header__social__item">
|
||||
<a href="https://twitter.com/clarazmj" class="header__social__link">
|
||||
<i class="icon icon--twitter"></i>
|
||||
<span class="visually-hidden">Twitter</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="header__social__item">
|
||||
<a href="https://github.com/czmj/" class="header__social__link">
|
||||
<i class="icon icon--github"></i>
|
||||
<span class="visually-hidden">GitHub</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="header__social__item">
|
||||
<a href="https://www.linkedin.com/in/clarajordan1" class="header__social__link">
|
||||
<i class="icon icon--linkedin"></i>
|
||||
<span class="visually-hidden">LinkedIn</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="header__social__item">
|
||||
<a href="http://www.last.fm/user/CZMJ" class="header__social__link">
|
||||
<i class="icon icon--lastfm"></i>
|
||||
<span class="visually-hidden">last.fm</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="header__social__item">
|
||||
<a href="https://www.flickr.com/photos/czmj/albums" class="header__social__link">
|
||||
<i class="icon icon--flickr"></i>
|
||||
<span class="visually-hidden">Flickr</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="header__social__item">
|
||||
<a href="/ClaraJordanCV.pdf" class="header__social__link">
|
||||
<i class="icon icon--file-pdf-o"></i>
|
||||
<span class="visually-hidden">Download my CV</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "partials/header/header-nav.nunjucks" %}
|
||||
</header>
|
||||
Reference in New Issue