added media queries

waagsociety · Mar 1, 2016 · 8c15bc3 · 8c15bc3
1 parent a5615ab
commit 8c15bc3
Show file tree

Hide file tree

Showing 20 changed files with 130 additions and 53 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
diff --git a/content/1-i-want-to-make/about.txt b/content/1-i-want-to-make/about.txt
@@ -45,4 +45,8 @@ Layout: two-col
 
 ----
 
-Videolink: 
+Videolink: 
+
+----
+
+Thumb: 1
diff --git a/content/2-how-to-document/default.txt b/content/2-how-to-document/default.txt
@@ -44,4 +44,8 @@ Well-documented work may get featured on our website, reaching thousands of visi
 
 ----
 
-Layout: two-col
+Layout: two-col
+
+----
+
+Thumb: 1
diff --git a/content/3-open-day/default.txt b/content/3-open-day/default.txt
@@ -2,11 +2,11 @@ Heroimage: pme_1.jpg
 
 ----
 
-Textcolor: #000000
+Textcolor: #333333
 
 ----
 
-Pagecolor: #f5d418
+Pagecolor: #faf0ad
 
 ----
 

diff --git a/content/4-fab-academy/default.txt b/content/4-fab-academy/default.txt
@@ -1,8 +1,8 @@
-Textcolor: #ffffff
+Textcolor: #333333
 
 ----
 
-Pagecolor: #7c9efc
+Pagecolor: #c4d3ff
 
 ----
 

diff --git a/content/5-projects/openthings.txt b/content/5-projects/openthings.txt
@@ -42,8 +42,12 @@ Border:
 
 ----
 
-Textcolor: #ffffff
+Textcolor: #333333
 
 ----
 
-Pagecolor: #59a356
+Pagecolor: #a8e0a6
+
+----
+
+Thumb: 0
diff --git a/content/5-projects/pme_5.jpg b/content/5-projects/pme_5.jpg
diff --git a/content/6-faq/default.txt b/content/6-faq/default.txt
@@ -2,11 +2,11 @@ Heroimage: questions.jpg
 
 ----
 
-Textcolor: #ffffff
+Textcolor: #333333
 
 ----
 
-Pagecolor: #242323
+Pagecolor: #f0f0f0
 
 ----
 

diff --git a/site/accounts/martin.php b/site/accounts/martin.php
@@ -7,8 +7,8 @@
 language: en
 role: admin
 history:
-  - home
-  - machines/embroidery-machine
   - projects
+  - how-to-document
+  - i-want-to-make
   - faq
-  - fab-academy
+  - open-day
diff --git a/site/blueprints/default.php b/site/blueprints/default.php
@@ -16,6 +16,10 @@
   pagecolor:
     label: Section color for the homepage
     type:  color
+  thumb:
+    label: Thumb
+    type: checkbox
+    text: Do you want to display the thumb image?
   title:
     label: Title
     type:  text
@@ -41,4 +45,4 @@
       three-col: Three column
       three-col-two: Three column 2x
       four-col: Four column
-      four-col-three: Four column 3x
+      four-col-three: Four column 3x
diff --git a/site/blueprints/machine.php b/site/blueprints/machine.php
@@ -26,6 +26,10 @@
   pagecolor:
     label: Section color for the homepage
     type:  color
+  thumb:
+    label: Thumb
+    type: checkbox
+    text: Do you want to display the thumb image?
   title:
     label: Title
     type:  text

diff --git a/site/blueprints/machines.php b/site/blueprints/machines.php
@@ -17,6 +17,10 @@
   pagecolor:
     label: Section color for the homepage
     type:  color
+  thumb:
+    label: Thumb
+    type: checkbox
+    text: Do you want to display the thumb image?
 
   videolink:
     label: Link to video

diff --git a/site/blueprints/openthings.php b/site/blueprints/openthings.php
@@ -22,6 +22,10 @@
   pagecolor:
     label: Section color for the homepage
     type:  color
+  thumb:
+    label: Thumb
+    type: checkbox
+    text: Do you want to display the thumb image?
   api:
     label: Link to the API
     type:  text

diff --git a/site/snippets/footer.php b/site/snippets/footer.php
@@ -25,9 +25,7 @@
     <p class="right">
       Made with &hearts; by <a href="http://www.waag.org">Waag Society</a> - Check out the code on <a href="https://github.com/waagsociety/fablab-website">github</a>
     </p>
-    <a href="http://www.waag.org">
-
-      <ul class="logo_bar">
+      <ul class="logo_bar left">
         <li>
           <a href="https://openthings.wiki/tag/47" class="openthings_header_logo">
             <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

diff --git a/site/snippets/machines.php b/site/snippets/machines.php
@@ -1,4 +1,4 @@
-<ul class="machine-grid changecolorblack">
+<ul class="machine-grid">
   <?php foreach($pages->find('machines')->children()->visible() as $p): ?>
     <a href="<?php echo $p->url() ?>" class="left machineThumb" style="background-color: <?php echo html($p->pagecolor()) ?>;">
     <li >

diff --git a/site/templates/home.php b/site/templates/home.php
@@ -1,12 +1,16 @@
 <?php snippet('header') ?>
 
-  <main class="main" role="main">
+  <main class="main home" role="main">
   	<?php foreach($pages->visible() as $section): ?>
     <a class="<?php echo html($section->layout()) ?> left item" href="<?php echo $section->url() ?>" style="color: <?php echo html($section->textcolor()) ?>; background-color: <?php echo html($section->pagecolor()) ?>;">
+      <?php if($section->thumb() == '1'): ?>
+        <header class="thumbheader" style="background-image: url(<?php echo url(); ?>/content/<?php echo $section->diruri() ?>/<?php echo html($section->heroimage()) ?>); background-color: <?php echo html($section->pagecolor()) ?>;">
+        </header>
+      <?php endif ?>
       <section>
         <h1 class="beta"><?php echo html($section->title()) ?></h1>
         <p><?php echo html($section->intro()) ?></p>
-    </section>
+      </section>
     </a>
    <?php endforeach ?>
   </main>

diff --git a/site/templates/machines.php b/site/templates/machines.php
@@ -5,7 +5,7 @@
 
 <?php snippet('header') ?>
 
-  <main class="main defaultPage changecolorblack" role="main">
+  <main class="main defaultPage" role="main">
     <?php if($page->text()->isNotEmpty()): ?>
       <div class="text">
         <?php echo $page->text()->kirbytext() ?>

diff --git a/src/stylus/partials/development.styl b/src/stylus/partials/development.styl
@@ -53,6 +53,10 @@
 		// 	transform translateY(-5px)
 		// 	box-shadow 0 10px 10px rgba(50,55,55,.5)
 		// 	z-index 2
+		&:nth-of-type(1)
+			min-height 50vh
+.main.home
+	padding 2% 2% 0 2%
 .text
 	width 100%
 	padding 80px 0
@@ -116,10 +120,11 @@
 	.machine-grid
 		display flex
 		flex-wrap wrap
-		align-content flex-start
+		align-content flex-end
 		a
 			width 30.66%
 			margin 0 0 2% 2%
+			flex-grow 1
 		li
 			display inline-block
 
@@ -131,6 +136,9 @@
 	height 100%
 	width 100%
 	padding-top 2%
+	display flex
+	flex-wrap wrap
+	align-content flex-end
 	a
 		transition .25s ease-in-out
 		width 30.66%
@@ -188,11 +196,11 @@ footer
 		font-size 1em
 	svg
 		stroke none
-	p
-		position absolute
-		right 150px
-		top 50%;
-		transform translateY(-50%);
+	// p
+	// 	position absolute
+	// 	right 150px
+	// 	top 50%;
+	// 	transform translateY(-50%);
 	svg
 		max-width 150px
 		float left
@@ -262,7 +270,7 @@ footer
 .page_footer
 	background projectColor
 	width 100%
-	padding 50px 150px
+	padding 50px
 	text-align center
 
 .booking_reservering
@@ -338,6 +346,34 @@ header
 	path
 		fill white
 
+.thumbheader
+	background-size cover
+	position absolute
+	background-repeat no-repeat
+	background-position center center
+	height 100%
+	width 100%
+	left 0
+	top 0
+	transition .6s ease-in-out
+	&:before
+		position absolute
+		width 100%
+		height 100%
+		content ""
+		background-color inherit;
+		opacity .9
+		transition .6s ease-in-out
+
+.item
+	overflow hidden
+	&:hover
+		.thumbheader
+			transform scale(1.5)
+			&:before
+					background-color inherit;
+					opacity .4
+
 ::-webkit-input-placeholder
 	color: white
 ::-moz-placeholder