Working on cs
This commit is contained in:
Max Fowler
parent
9c3b1d949e
commit
69e40fc773
|
|
@ -0,0 +1,23 @@
|
|||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
import Helmet from "react-helmet";
|
||||
var classNames = require('classnames')
|
||||
|
||||
const CSHelmet = (props) => {
|
||||
return (
|
||||
<Helmet
|
||||
title="canalswans.info"
|
||||
meta={[
|
||||
{name: 'description', content: 'Canal Swans'},
|
||||
{name: 'keywords', content: 'freelance, art'},
|
||||
]}
|
||||
bodyAttributes={{
|
||||
class: props.mood
|
||||
}}>
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"/>
|
||||
<link rel="icon" href="/img/favico.ico" type="image/x-icon"/>
|
||||
</Helmet>
|
||||
)
|
||||
}
|
||||
|
||||
export default CSHelmet
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
import React from 'react'
|
||||
import Slider from 'react-slick'
|
||||
import Link from 'gatsby-link'
|
||||
|
||||
class Carousel extends React.Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.handleBeforeChange = this.handleBeforeChange.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
handleBeforeChange(oldIndex, newIndex) {
|
||||
this.refs.carouselFocus.slickGoTo(newIndex);
|
||||
}
|
||||
|
||||
render = () => {
|
||||
var imagesString = this.props.imagesString;
|
||||
var images = [];
|
||||
if (imagesString) {
|
||||
images = imagesString.split(',')
|
||||
}
|
||||
else {
|
||||
images = this.props.images;
|
||||
}
|
||||
var focusSettings = {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
arrows: false,
|
||||
fade: true,
|
||||
className: `carousel-focus ${this.props.carouselName}-focus`,
|
||||
}
|
||||
var thumbnailSettings = {
|
||||
slidesToShow: images.length,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
focusOnSelect: true,
|
||||
arrows: false,
|
||||
adaptiveHeight: true,
|
||||
beforeChange: this.handleBeforeChange,
|
||||
variableWidth: true,
|
||||
asNavFor: this.refs.carouselFocus,
|
||||
className: `carousel-thumbnails ${this.props.carouselName}-thumbnails`
|
||||
}
|
||||
return (
|
||||
<div className="carousel-inner-wrapper">
|
||||
<Slider {...focusSettings} ref="carouselFocus">
|
||||
{images.map(function (imgLink, i) {
|
||||
return (
|
||||
<div className="img-container">
|
||||
<img className="carousel-thumbnail" src={imgLink}/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Slider>
|
||||
<Slider {...thumbnailSettings} ref="carouselThumbnails">
|
||||
{images.map(function (imgLink, i) {
|
||||
return (
|
||||
<div className="img-container">
|
||||
<img className="carousel-thumbnail" src={imgLink}/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Slider>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Carousel
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
var classNames = require('classnames')
|
||||
|
||||
const Filler = () => {
|
||||
return (
|
||||
<div className="filler">
|
||||
<div>
|
||||
<p> test 100 </p>
|
||||
<p>Welcome to your new Gatsby site.</p>
|
||||
<p>Now go build something great.</p>
|
||||
<p>
|
||||
<Link to="/page-2/">Go to page 2</Link>
|
||||
</p>
|
||||
<p>
|
||||
<Link to="/page-2/">Go to page 2</Link>
|
||||
</p>
|
||||
<p>Now go build something great.</p>
|
||||
<p>Welcome to your new Gatsby site.</p>
|
||||
<p> test 100 </p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Filler
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
import Filler from './Filler.js'
|
||||
import SLink from "./SLink";
|
||||
var classNames = require('classnames')
|
||||
|
||||
const Footer = ({reversed}) => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,44 +1,39 @@
|
|||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
import Filler from './Filler.js'
|
||||
import SLink from "./SLink";
|
||||
var classNames = require('classnames')
|
||||
|
||||
const Header = ({reversed}) => {
|
||||
const MoodButton = ({mood, currentMood, handleMoodClick}) => {
|
||||
var classes = classNames({
|
||||
'navbar': true,
|
||||
'overlaid': true,
|
||||
'reversed': reversed
|
||||
'mood-button': true,
|
||||
'clicked': mood === currentMood
|
||||
});
|
||||
return (
|
||||
<div className={classes}>
|
||||
<div className="myname">
|
||||
<Link to="/">MAX FOWLER </Link>
|
||||
<a className={classes} onClick={handleMoodClick.bind(this, mood)}>{mood}</a>
|
||||
)
|
||||
}
|
||||
|
||||
const Header = (props) => {
|
||||
return (
|
||||
<header>
|
||||
<div className="header-left">
|
||||
<div className="click-your-mood"> click your mood:</div>
|
||||
<MoodButton mood="standard" currentMood={props.mood} handleMoodClick={props.handleMoodClick} />
|
||||
<MoodButton mood="asmr" currentMood={props.mood} handleMoodClick={props.handleMoodClick} />
|
||||
<MoodButton mood="sponsored" currentMood={props.mood} handleMoodClick={props.handleMoodClick} />
|
||||
<MoodButton mood="test" currentMood={props.mood} handleMoodClick={props.handleMoodClick} />
|
||||
</div>
|
||||
<div className="navlinks">
|
||||
<div className="navlink">
|
||||
<Link to="/about">about</Link>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<Link to="/">work </Link>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<a href="http://twitter.com/notplants">twitter </a>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<a href="http://github.com/mhfowler">github </a>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<Link to="/notes">notes </Link>
|
||||
</div>
|
||||
<div className="navlink last-navlink">
|
||||
<Link to="/contact">contact </Link>
|
||||
<div className="header-center">
|
||||
Canal Swans
|
||||
</div>
|
||||
<div className="header-right">
|
||||
<div>
|
||||
<SLink className="hlink" to='/about'>about</SLink>
|
||||
<SLink className="hlink" to='/essays'>essays</SLink>
|
||||
<SLink className="hlink" to='/zines'>zines</SLink>
|
||||
</div>
|
||||
</div>
|
||||
<div className="filler-wrapper">
|
||||
<Filler/>
|
||||
<Filler/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,69 +0,0 @@
|
|||
import React from 'react'
|
||||
import SLink from './SLink.js'
|
||||
|
||||
|
||||
class SubscribePage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
emailValue: '',
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.emailInput.focus();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<form action="https://mfowler.us17.list-manage.com/subscribe/post" method="POST" target="blank" noValidate>
|
||||
<input type="hidden" name="u" value="6c6d8e78103fbc8ddebf845a3"/>
|
||||
<input type="hidden" name="id" value="b1b22a6281"/>
|
||||
<label htmlFor='MERGE0'>
|
||||
Enter your email:
|
||||
<input
|
||||
ref={(input) => { this.emailInput = input; }}
|
||||
type="email"
|
||||
className="email-input"
|
||||
name="EMAIL"
|
||||
id="MERGE0"
|
||||
value={this.state.emailValue}
|
||||
onChange={ (e)=>{this.setState({emailValue: e.target.value});} }
|
||||
autoCapitalize="off"
|
||||
autoCorrect="off"
|
||||
/>
|
||||
</label>
|
||||
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" className="button"/>
|
||||
<div style={{position: 'absolute', left: '-5000px'}} aria-hidden='true' aria-label="Please leave the following three fields empty">
|
||||
<label htmlFor="b_name">Name: </label>
|
||||
<input type="text" name="b_name" tabIndex="-1" value="" placeholder="Freddie" id="b_name"/>
|
||||
|
||||
<label htmlFor="b_email">Email: </label>
|
||||
<input type="email" name="b_email" tabIndex="-1" value="" placeholder="youremail@gmail.com" id="b_email"/>
|
||||
|
||||
<label htmlFor="b_comment">Comment: </label>
|
||||
<textarea name="b_comment" tabIndex="-1" placeholder="Please comment" id="b_comment"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const Newsletter = () => {
|
||||
return (
|
||||
<div className="newsletter">
|
||||
<img src="/mfowler/img/peaceful.jpg" className="no-mobile" style={{width: "300px", "float": "left", "margin-right": "80px"}} />
|
||||
<div className="form-holder">
|
||||
<p style={{"margin-bottom": "15px"}}>
|
||||
A mailing list of <a href="http://twitter.com/notplants">@notplants</a>.
|
||||
</p>
|
||||
<div className="mc-field-group">
|
||||
<SubscribePage/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Newsletter
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import React from 'react'
|
||||
import SLink from './SLink.js'
|
||||
import Img from "gatsby-image"
|
||||
var classNames = require('classnames')
|
||||
|
||||
|
||||
|
||||
const Project = ({project_link, project_image, project_title, project_tags, project_snippet}) => {
|
||||
return (
|
||||
<div className="project-wrapper overlaid">
|
||||
<SLink to={project_link} className="project-image-wrapper">
|
||||
<img className="project-image" src={project_image}/>
|
||||
</SLink>
|
||||
<div className="project-description">
|
||||
<SLink className="project-title" to={project_link}>
|
||||
{project_title}
|
||||
</SLink>
|
||||
<div className="project-tags">
|
||||
{project_tags}
|
||||
</div>
|
||||
<div className="project-snippet">
|
||||
{project_snippet}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Project
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
import Project from './Project'
|
||||
import SimpleSite from './SimpleSite.js'
|
||||
|
||||
var classNames = require('classnames')
|
||||
|
||||
|
||||
const Projects = () => {
|
||||
return (
|
||||
<div>
|
||||
<SimpleSite/>
|
||||
<div className="projects-wrapper">
|
||||
<Project
|
||||
project_title="What's On Your Mind?"
|
||||
project_image="/mfowler/img/thumbnails/woym-notebook.png"
|
||||
project_snippet="facebook statuses from the week after November 9th, 2016"
|
||||
project_tags="website, zine, reading"
|
||||
project_link="/work/whats-on-your-mind"
|
||||
/>
|
||||
|
||||
|
||||
<Project
|
||||
project_title="Open Source Feeds"
|
||||
project_image="/mfowler/img/thumbnails/4-graphs.png"
|
||||
project_snippet="a workshop to create your own feed algorithm"
|
||||
project_tags="workshop, mac application"
|
||||
project_linktest="https://pioneerworks.org/classes/open-source-feeds/"
|
||||
project_link="https://pioneerworks.org/classes/open-source-feeds/"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="Infinite Wishing"
|
||||
project_image="/mfowler/img/thumbnails/iw-above.png"
|
||||
project_snippet='a wishing well'
|
||||
project_tags="installation, receipt printer"
|
||||
project_link="/work/infinite-wishing"
|
||||
|
||||
/>
|
||||
|
||||
|
||||
<Project
|
||||
project_title="Looking Glass"
|
||||
project_image="/mfowler/img/thumbnails/lg-test.png"
|
||||
project_snippet="a broken mirror"
|
||||
project_tags="installation, projection mapping"
|
||||
project_link="/work/looking-glass"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="Abridged Maps"
|
||||
project_image="/mfowler/img/thumbnails/abridged1.png"
|
||||
project_snippet="a twitter bot that strips Google Maps of all natural imagery"
|
||||
project_tags="website, twitter bot"
|
||||
project_link="http://mfowler.info/abridgedmaps/index.html"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="2 Pots"
|
||||
project_image="/mfowler/img/thumbnails/2pots1.png"
|
||||
project_snippet="a series of generative line drawings"
|
||||
project_tags="installation, open frameworks, arduino"
|
||||
project_link="/work/2pots"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="Oasis"
|
||||
project_image="/mfowler/img/thumbnails/oasis.png"
|
||||
project_snippet="a virtual reality commune only accessible by SSH"
|
||||
project_tags="installation, website, raspberry pi"
|
||||
project_link="/work/oasis"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="Memory Prosthetics"
|
||||
project_image="/mfowler/img/floppy_disk.jpg"
|
||||
project_snippet="what systems and thought-processes do you use to store & organize files/links/media?"
|
||||
project_tags="website"
|
||||
project_link="http://memoryprosthetics.net"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="HowDoISpeak"
|
||||
project_snippet="a website which shows you insights about the way you text by analyzing your word usage in your text messages"
|
||||
project_tags="website"
|
||||
project_image="/mfowler/img/thumbnails/hdis.png"
|
||||
project_link="http://howdoispeak.com"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="TrueSpeak"
|
||||
project_snippet="an app that allows you to upload your text message history to a publicly viewable page on the internet"
|
||||
project_tags="website"
|
||||
project_image="/mfowler/img/thumbnails/truespeak.png"
|
||||
project_link="http://brocascoconut.com/truespeak/"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="The Capitalist T-Shirt"
|
||||
project_snippet="an e-commerce store which sells t-shirts, framed prints and booty shorts"
|
||||
project_tags="website"
|
||||
project_image="/mfowler/img/thumbnails/capitalist.png"
|
||||
project_link="http://brocascoconut.com/the_capitalist_tshirt/"
|
||||
|
||||
/>
|
||||
|
||||
<Project
|
||||
project_title="CSS Sketchbook"
|
||||
project_snippet="experiments in css"
|
||||
project_tags="website"
|
||||
project_image="/mfowler/img/thumbnails/post-content.png"
|
||||
project_link="http://mhfowler.github.io"
|
||||
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Projects
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
import React from 'react'
|
||||
import SLink from './SLink.js'
|
||||
|
||||
|
||||
const SimpleSite = () => {
|
||||
return (
|
||||
<div className="simple-site">
|
||||
<div className="about-line" style={{"marginTop": "20px"}}>
|
||||
Max Fowler is an artist, programmer and organizer living in Berlin
|
||||
who makes websites and interactive installations.
|
||||
View his <SLink to="/about">cv</SLink>, sign up for his <SLink to="/mail">newsletter</SLink>, or <a href="mailto:maxhfowler@gmail.com">send him an email</a>.
|
||||
</div>
|
||||
|
||||
<div className="simple-list">
|
||||
|
||||
<div className="list-of-projects">
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="/work/whats-on-your-mind">What's On Your Mind?</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a collection of facebook statuses from the week after November 9th, 2016
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="/work/open-source-feeds">Open Source Feeds</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a workshop to make your own feed algorithm
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="/work/infinite-wishing">Infinite Wishing</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a hopeful receipt printer
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="/work/looking-glass">Looking Glass</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a projection onto a broken mirror
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="/work/oasis">Oasis</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a virtual reality commune only acessible by SSH
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="/work/2pots">2 pots</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a series of generative lines drawings exploring controlled noise
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="http://abridgedmaps.com/">Abridged Maps</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a website that strips Google Maps of all natural imagery to reveal concrete poems about the structure of contemporary space
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="http://brocascoconut.com/truespeak/">Truespeak</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
an app that allows you to upload your text message history to a publicly viewable page on the internet
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="http://howdoispeak.com">HowDoISpeak</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
a website which shows you insights about the way you text by analyzing your word usage in your text messages
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="http://brocascoconut.com/the_capitalist_tshirt/">The Capitalist T-Shirt</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
an e-commerce store which sells t-shirts, framed prints and booty shorts
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="http://brocascoconut.com">Brocas's Coconut</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
the landing page for a pseudo-anonymous mailing list
|
||||
</div>
|
||||
</div>
|
||||
<div className="simple-wrapper">
|
||||
<div className="simple-title">
|
||||
<SLink to="http://mhfowler.github.io">CSS Sketchbook</SLink>
|
||||
</div>
|
||||
<div className="simple-description">
|
||||
experiments in css
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SimpleSite
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
|
||||
const Header = () => (
|
||||
<div className="navbar overlaid">
|
||||
<div className="myname">
|
||||
<a href="/">MAX FOWLER</a>
|
||||
</div>
|
||||
<div className="navlinks">
|
||||
<div className="navlink">
|
||||
<a href="/about.html">about</a>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<a href="/">work</a>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<a href="http://twitter.com/notplants">twitter</a>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<a href="http://github.com/mhfowler">github</a>
|
||||
</div>
|
||||
<div className="navlink">
|
||||
<a href="/notes.html">notes</a>
|
||||
</div>
|
||||
<div className="navlink last-navlink">
|
||||
<a href="/contact.html">contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Header
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
.blog {
|
||||
.blog-post-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.blog-post-meta {
|
||||
text-align: center;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
header {
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
//padding-left: 50px;
|
||||
//padding-right: 50px;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,73 @@
|
|||
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
padding-bottom: 30px;
|
||||
@include clearfix();
|
||||
|
||||
.page-wrapper {
|
||||
background-size: contain;
|
||||
margin: auto;
|
||||
max-width: 750px;
|
||||
padding-top: 75px;
|
||||
width: 90%;
|
||||
padding-bottom: 70px;
|
||||
min-height: 100vh;
|
||||
@include clearfix();
|
||||
@media screen and (max-width: 575px) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
header {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
padding-top: 17px;
|
||||
padding-left: 23px;
|
||||
padding-right: 21px;
|
||||
.header-left {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.header-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.header-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
.mood-button {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.clicked {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.click-your-mood {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
a.hlink {
|
||||
//display: block;
|
||||
//text-align: right;
|
||||
|
|
@ -5,8 +75,8 @@ a.hlink {
|
|||
//margin-top: 10px;
|
||||
color: gray;
|
||||
float:left;
|
||||
margin-top: 5px;
|
||||
margin-right: 15px;
|
||||
text-decoration: none;
|
||||
}
|
||||
body.standard a.hlink {
|
||||
color: gray;
|
||||
|
|
|
|||
|
|
@ -1,101 +0,0 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Helmet from 'react-helmet'
|
||||
import Header from '../components/Header.js'
|
||||
import Footer from '../components/Footer.js'
|
||||
import SLink from '../components/SLink.js'
|
||||
import "./index.scss"
|
||||
import "./blog.scss"
|
||||
import "./markdown.scss"
|
||||
import "./canalswans.scss"
|
||||
|
||||
var classNames = require('classnames')
|
||||
|
||||
|
||||
const MoodButton = ({mood, currentMood, handleMoodClick}) => {
|
||||
var classes = classNames({
|
||||
'mood-button': true,
|
||||
'clicked': mood === currentMood
|
||||
});
|
||||
return (
|
||||
<a className={classes} onClick={handleMoodClick.bind(this, mood)}>{mood}</a>
|
||||
)
|
||||
}
|
||||
|
||||
class Layout extends React.Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.handleMoodClick = this.handleMoodClick.bind(this);
|
||||
this.state = {
|
||||
mood: 'standard'
|
||||
}
|
||||
this.handleMoodClick = this.handleMoodClick.bind(this)
|
||||
}
|
||||
|
||||
handleMoodClick(mood) {
|
||||
this.setState({mood: mood})
|
||||
}
|
||||
|
||||
render() {
|
||||
var wrapperClasses = `base-body ${this.state.mood} ${this.props.pageType}`
|
||||
return (
|
||||
<div className={wrapperClasses}>
|
||||
<Helmet
|
||||
title="mfowler.info"
|
||||
meta={[
|
||||
{name: 'description', content: 'Max Fowler | Freelancer'},
|
||||
{name: 'keywords', content: 'freelance, art'},
|
||||
]}
|
||||
bodyAttributes={{
|
||||
class: this.state.mood
|
||||
}}
|
||||
/>
|
||||
<link rel="stylesheet" type="text/css" charset="UTF-8"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"/>
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/>
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"/>
|
||||
<link rel="icon" href="/mfowler/img/favico.ico" type="image/x-icon"/>
|
||||
<div className="page-wrapper">
|
||||
<div className="main-wrapper">
|
||||
{this.props.children}
|
||||
</div>
|
||||
{ !this.props.noMoodSelector &&
|
||||
<div>
|
||||
<div className="right-filler">
|
||||
{/*<div>*/}
|
||||
{/* welcome to the website*/}
|
||||
{/*</div>*/}
|
||||
<div>
|
||||
<SLink className="hlink" to='/about'>about</SLink>
|
||||
{/*<SLink className="hlink" to='/rss'>rss</SLink>*/}
|
||||
{/*<SLink className="hlink" to='tinyletter.com/newsletter'>newsletter</SLink>*/}
|
||||
<SLink className="hlink" to='/essays'>essays</SLink>
|
||||
<SLink className="hlink" to='/zines'>zines</SLink>
|
||||
</div>
|
||||
{/*<div>*/}
|
||||
{/* <SLink className="hlink" to='/essays'>rss</SLink>*/}
|
||||
{/* <SLink className="hlink" to='/zines'>newsletter</SLink>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
<div className="center-title">
|
||||
Canal Swans
|
||||
</div>
|
||||
<div className="right-filler top-left">
|
||||
<div className="click-your-mood"> click your mood:</div>
|
||||
<MoodButton mood="standard" currentMood={this.state.mood} handleMoodClick={this.handleMoodClick} />
|
||||
<MoodButton mood="asmr" currentMood={this.state.mood} handleMoodClick={this.handleMoodClick} />
|
||||
<MoodButton mood="sponsored" currentMood={this.state.mood} handleMoodClick={this.handleMoodClick} />
|
||||
<MoodButton mood="test" currentMood={this.state.mood} handleMoodClick={this.handleMoodClick} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Layout
|
||||
|
|
@ -1,955 +0,0 @@
|
|||
body {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
#sketch-holder {
|
||||
position:absolute;
|
||||
z-index: 1;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#preloadedImages
|
||||
{
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.no-css {
|
||||
.filler-wrapper {
|
||||
display: block;
|
||||
}
|
||||
.main-wrapper {
|
||||
float: left;
|
||||
width: 100%;
|
||||
max-width: 736px;
|
||||
padding-top: 38px;
|
||||
padding-bottom: 200px;
|
||||
margin-left: 20px;
|
||||
@media screen and (max-width: 1150px) {
|
||||
max-width: 497px;
|
||||
}
|
||||
@media screen and (max-width: 850px) {
|
||||
max-width: 736px;
|
||||
}
|
||||
}
|
||||
.navbar {
|
||||
float:left;
|
||||
}
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.doc-wrapper {
|
||||
h2 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-filler {
|
||||
float: right;
|
||||
padding-right: 5px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 2%;
|
||||
width: 163px;
|
||||
@media screen and (max-width: 850px) {
|
||||
display:none;
|
||||
}
|
||||
&.top-right {
|
||||
right: 2%;
|
||||
}
|
||||
&.top-left {
|
||||
left: 20px;
|
||||
top: 2%;
|
||||
width: 100%;
|
||||
}
|
||||
&.bottom-left {
|
||||
left: 2%;
|
||||
bottom: 2%;
|
||||
display: none;
|
||||
}
|
||||
&.bottom-right {
|
||||
right: 2%;
|
||||
bottom: 2%;
|
||||
display: none;
|
||||
}
|
||||
.mood-button {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.clicked {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.click-your-mood {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
padding-bottom: 30px;
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
body.asmr {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 12px;
|
||||
background-color: #c2c2de;
|
||||
.projects-wrapper {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
body.times-new-roman {
|
||||
background-color: white;
|
||||
.simple-site {
|
||||
display:none;
|
||||
}
|
||||
a {
|
||||
color: rgb(255, 0, 174);
|
||||
}
|
||||
}
|
||||
body.standard {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 12px;
|
||||
.simple-site {
|
||||
display:none;
|
||||
}
|
||||
a {
|
||||
//color: rgb(255, 0, 174);
|
||||
color: #8900ff;
|
||||
}
|
||||
}
|
||||
body.sponsored {
|
||||
background-image: url('/mfowler/img/inverted-bp.png');
|
||||
background-repeat: repeat;
|
||||
background-size: cover;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 12px;
|
||||
color:white;
|
||||
.navlink a {
|
||||
color: white;
|
||||
}
|
||||
.simple-title a {
|
||||
color: white;
|
||||
}
|
||||
.myname a {
|
||||
color: white;
|
||||
}
|
||||
.projects-wrapper {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
body.test {
|
||||
background-image: url('/mfowler/img/triangles.png');
|
||||
background-repeat: repeat;
|
||||
background-size: cover;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
color: red;
|
||||
font-size: 28px;
|
||||
.navlink a {
|
||||
color: blue;
|
||||
}
|
||||
.simple-title a {
|
||||
color: blue;
|
||||
}
|
||||
.myname a {
|
||||
color: red;
|
||||
}
|
||||
.p5-sketch {
|
||||
display: block;
|
||||
}
|
||||
.projects-wrapper {
|
||||
display:none;
|
||||
}
|
||||
.page-wrapper {
|
||||
padding-top: 100px;
|
||||
}
|
||||
}
|
||||
.p5-sketch {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: -2;
|
||||
}
|
||||
.slider-wrapper {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
font-size: 16px;
|
||||
left: 20px;
|
||||
width: 169px;
|
||||
input {
|
||||
width: 40px;
|
||||
}
|
||||
.ui-slider {
|
||||
margin:auto;
|
||||
}
|
||||
.ui-slider-handle {
|
||||
outline: 0;
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
//display: none;
|
||||
//font-family: "resistanceregular";
|
||||
font-family: 'Times New Roman';
|
||||
//font-family: 'Roboto Mono', monospace;
|
||||
//background-color: #d9e2d4;
|
||||
//background-color: #efefef;
|
||||
// #d9e2d4 light green
|
||||
// #8cccb1 turqoise
|
||||
// #efefef gray
|
||||
//font-size: 12px;
|
||||
// font-size: 12px;
|
||||
font-size: 16px;
|
||||
//background-color: mediumpurple;
|
||||
//background: linear-gradient(white, black);
|
||||
//background-image: url('/mfowler/img/grid.png');
|
||||
//background-size: 200px 200px;
|
||||
//background-color: lightgray;
|
||||
//background-image: url('https://78.media.tumblr.com/37816081fb4c15e85596ed7931c6d2e0/tumblr_n6awg7ky2K1tw598eo1_500.jpg');
|
||||
//background-image: url('/mfowler/img/diamond.gif');
|
||||
//background-image: url('/mfowler/img/triangles.png');
|
||||
//background-image: url('/mfowler/img/plant.jpg');
|
||||
//background-image: url('/mfowler/img/bp.png');
|
||||
//background-image: url('/mfowler/img/bptest.png');
|
||||
//background-image: url('/mfowler/img/inverted-bp.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
.control-panel {
|
||||
//display: none;
|
||||
position: absolute;
|
||||
padding: 20px;
|
||||
top: 0px;
|
||||
padding-bottom: 30px;
|
||||
//border: 1px solid gray;
|
||||
width: 100%;
|
||||
.click-your-mood {
|
||||
float: left;
|
||||
@media screen and (max-width: 600px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.mood-button {
|
||||
display: block;
|
||||
margin-left: 23px;
|
||||
margin-bottom:5px;
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.clicked {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
margin-right: 23px;
|
||||
margin-left: 0px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overlaid {
|
||||
//background-color: white;
|
||||
//padding-left: 20px;
|
||||
//padding-right: 20px;
|
||||
//padding-top: 20px;
|
||||
//padding-bottom: 20px;
|
||||
//border: px solid black;
|
||||
//border-top: 10px solid black;
|
||||
}
|
||||
|
||||
.simple-title {
|
||||
line-height: 22px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.carousel-focus {
|
||||
margin-bottom: 10px;
|
||||
.img-container {
|
||||
width: 100%;
|
||||
height: 434px;
|
||||
text-align: center;
|
||||
background: #e0dfdf;
|
||||
}
|
||||
img.carousel-thumbnail {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.carousel-thumbnails {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
|
||||
.img-container.slick-current {
|
||||
img.carousel-thumbnail {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
img.carousel-thumbnail {
|
||||
opacity: 0.5;
|
||||
//max-height:100%;
|
||||
height: 80px;
|
||||
vertical-align: middle;
|
||||
padding-right: 1px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
//opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.whats-carousel {
|
||||
.carousel-focus {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
.img-container {
|
||||
width: 100%;
|
||||
height: 434px;
|
||||
}
|
||||
}
|
||||
.carousel-thumbnails {
|
||||
max-width: 670px;
|
||||
}
|
||||
}
|
||||
.iw-focus {
|
||||
.img-container {
|
||||
height: 502px;
|
||||
}
|
||||
}
|
||||
.iw-carousel {
|
||||
.carousel-thumbnails {
|
||||
max-width: 268px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
outline: none
|
||||
}
|
||||
|
||||
a.timeline-row {
|
||||
display: block;
|
||||
color: black;
|
||||
&:visited {
|
||||
color: black;
|
||||
}
|
||||
&:hover {
|
||||
color: darkgray;
|
||||
}
|
||||
}
|
||||
|
||||
.dropline {
|
||||
background-size: 332px 150px;
|
||||
background-position: 44px;
|
||||
background-repeat: no-repeat;
|
||||
width: 400px;
|
||||
//height: 50px;
|
||||
height: 90px;
|
||||
//height: s50px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
//margin-top: 3em;
|
||||
&.reversed {
|
||||
-webkit-transform:rotateY(180deg);
|
||||
-moz-transform:rotateY(180deg);
|
||||
-o-transform:rotateY(180deg);
|
||||
-ms-transform:rotateY(180deg);
|
||||
float: right;
|
||||
}
|
||||
|
||||
@include clearfix;
|
||||
.navlinks {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
body.new-blog-body {
|
||||
.blog-post-title {
|
||||
color: #6801c1;
|
||||
}
|
||||
.doc-wrapper {
|
||||
max-width: 550px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
transition: background 0.4s;
|
||||
padding-bottom: 0px;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
|
||||
.blog-back-button {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.blog-sidebar {
|
||||
//font-family: 'PT Sans', sans-serif;
|
||||
margin-right: 45px;
|
||||
padding-top: 25px;
|
||||
margin-left: 30px;
|
||||
float: left;
|
||||
@media screen and (max-width: 1000px) {
|
||||
margin-left: 15px;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
//border: 1px solid blue;
|
||||
//background-image: url('https://78.media.tumblr.com/37816081fb4c15e85596ed7931c6d2e0/tumblr_n6awg7ky2K1tw598eo1_500.jpg');
|
||||
background-size: contain;
|
||||
//padding: 20px;
|
||||
//background-color: white;
|
||||
margin: auto;
|
||||
//max-width: 1000px;
|
||||
max-width: 750px;
|
||||
padding-top: 75px;
|
||||
//max-width: 100%;
|
||||
width: 90%;
|
||||
padding-bottom: 70px;
|
||||
min-height: 100vh;
|
||||
@include clearfix();
|
||||
@media screen and (max-width: 575px) {
|
||||
//margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.navlinks {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.navlinks:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
a {
|
||||
/*color:black;*/
|
||||
//color: #6801c1;
|
||||
color: #1724e4;
|
||||
text-decoration: none;
|
||||
/*padding:5px;*/
|
||||
/*border: 1px solid black;*/
|
||||
/*text-decoration: line-through;*/
|
||||
}
|
||||
.navlink {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
&.last-navlink {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.navlink a {
|
||||
color: black;
|
||||
&:hover {
|
||||
color: pink;
|
||||
}
|
||||
}
|
||||
.myname a {
|
||||
color: black;
|
||||
&:hover {
|
||||
color: pink;
|
||||
}
|
||||
//float: left;
|
||||
//font-size: 28px;
|
||||
//font-size: 16px;
|
||||
}
|
||||
.right-header {
|
||||
float: right;
|
||||
a {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
/*border:10px solid black;*/
|
||||
/*position:relative;*/
|
||||
/*left: -10px;*/
|
||||
/*top: -10px;*/
|
||||
/*background-color:black;*/
|
||||
/*background-color: #00ffc6;*/
|
||||
/*border-color:red;*/
|
||||
/*border-color: cadetblue;*/
|
||||
/*color:white;*/
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
max-width: 100%;
|
||||
margin-bottom: 0px;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
a.source-link {
|
||||
color: gray;
|
||||
margin-top: 150px;
|
||||
}
|
||||
.sources {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
img.img {
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
body {
|
||||
padding-bottom: 75px;
|
||||
}
|
||||
|
||||
.post {
|
||||
margin-bottom: 100px;
|
||||
/*border-bottom: 1px solid gray;*/
|
||||
/*border-right: 1px solid gray;*/
|
||||
padding-right: 100px;
|
||||
padding-bottom: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a.postlink {
|
||||
/*text-decoration:underline;*/
|
||||
}
|
||||
|
||||
.bio-pic {
|
||||
width: 200px;
|
||||
float: left;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.bio-writeup {
|
||||
float: left;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.projects-list {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.about-line {
|
||||
margin-top: 40px;
|
||||
//max-width: 700px;
|
||||
max-width: 645px;
|
||||
}
|
||||
|
||||
.project-wrapper {
|
||||
float: left;
|
||||
//margin-right: 120px;
|
||||
margin-right: 45px;
|
||||
width: 200px;
|
||||
//height: 302px;
|
||||
//height: 350px;
|
||||
margin-bottom: 0px;
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
//padding-bottom:15px;
|
||||
}
|
||||
}
|
||||
|
||||
.project-image-wrapper {
|
||||
|
||||
overflow: hidden;
|
||||
/*padding: 5px;*/
|
||||
/*background-color: lightgray;*/
|
||||
margin-bottom: 5px;
|
||||
/*box-shadow: 5px;*/
|
||||
}
|
||||
.project-image {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-size: cover;
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.8;
|
||||
@media screen and (max-width: 575px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
.portfolio-image-wrapper {
|
||||
/*padding: 5px;*/
|
||||
/*background-color: lightgray;*/
|
||||
margin-bottom: 5px;
|
||||
float: left;
|
||||
/*box-shadow: 5px;*/
|
||||
}
|
||||
.portfolio-image {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
height: 100%;
|
||||
max-height: 333px;
|
||||
background-size: cover;
|
||||
}
|
||||
.portfolio-description {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
float: left;
|
||||
padding-left: 20px;
|
||||
@media screen and (max-width: 1100px) {
|
||||
padding-left: 5px;
|
||||
}
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
color: black;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.portfolio-title {
|
||||
color: black;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.project-snippet {
|
||||
margin-top: 10px;
|
||||
display: none;
|
||||
}
|
||||
.project-tags {
|
||||
color: gray;
|
||||
display: none;
|
||||
display: none;
|
||||
|
||||
//margin-top: 10px;
|
||||
}
|
||||
|
||||
.note {
|
||||
width: 400px;
|
||||
}
|
||||
.note-wrapper {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.about-wrapper {
|
||||
//margin-top: 60px;
|
||||
//margin-top: 20px;
|
||||
max-width: 650px;
|
||||
float: left;
|
||||
//margin-top: 20px;
|
||||
}
|
||||
.about-writeup {
|
||||
float: left;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.portfolio-item {
|
||||
@include clearfix;
|
||||
border: 1px solid black;
|
||||
padding: 20px;
|
||||
margin-top: 40px;
|
||||
max-width: 950px;
|
||||
width: 100%;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
@media screen and (max-width: 1100px) {
|
||||
max-width: 85%;
|
||||
width: 550px;
|
||||
}
|
||||
}
|
||||
.portfolio-tags {
|
||||
color: gray;
|
||||
margin-top: 5px;
|
||||
display: none;
|
||||
}
|
||||
.author {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
//display:none;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 35px;
|
||||
//display: none;
|
||||
}
|
||||
|
||||
.projects-wrapper {
|
||||
@include clearfix;
|
||||
width: 100%;
|
||||
@media screen and (max-width: 575px) {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
.left-col {
|
||||
width: 518px;
|
||||
float: left;
|
||||
padding-bottom: 35px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.right-col {
|
||||
width: 300px;
|
||||
float: left;
|
||||
}
|
||||
.doc-wrapper {
|
||||
@include clearfix;
|
||||
//max-width: 95%;
|
||||
//max-width: 650px;
|
||||
//margin:auto;
|
||||
}
|
||||
|
||||
.documentation-wrapper {
|
||||
width: 100%;
|
||||
max-width: 650px;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
padding: 25px;
|
||||
//font-family: 'PT Sans', sans-serif;
|
||||
@media screen and (max-width: 800px) {
|
||||
max-width: 85%;
|
||||
padding-left: 15px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
.documentation-wrapper.blog-wrapper {
|
||||
font-family: "Times New Roman";
|
||||
}
|
||||
|
||||
.doc-image {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.doc-image.first-image {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.cover-image {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.doc-image.small-doc-image {
|
||||
max-width: 300px;
|
||||
display: block;
|
||||
}
|
||||
.doc-image.md-doc-image {
|
||||
max-width: 450px;
|
||||
display: block;
|
||||
}
|
||||
.writeup-wrapper {
|
||||
}
|
||||
.doc-tags {
|
||||
//color: gray;
|
||||
color: #696969;
|
||||
}
|
||||
.doc-title {
|
||||
margin-bottom: 30px;
|
||||
font-decoration: italic;
|
||||
}
|
||||
|
||||
.documentation-footer {
|
||||
border-top: 1px solid gray;
|
||||
width: 100%;
|
||||
padding-top: 30px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.simple-title a {
|
||||
color: black;
|
||||
text-decoration: underline;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.simple-wrapper {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.simple-description {
|
||||
padding-left: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.simple-list {
|
||||
//margin-top: 20px;
|
||||
max-width: 600px;
|
||||
}
|
||||
.here-are {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.looking-glass {
|
||||
.doc-image {
|
||||
max-width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
.filler-wrapper {
|
||||
@media screen and (max-width: 850px) {
|
||||
display: none;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
.doc-wrapper {
|
||||
max-width: 750px;
|
||||
width: 100%;
|
||||
@media screen and (max-width: 850px) {
|
||||
width: 100%;
|
||||
}
|
||||
float: left;
|
||||
}
|
||||
|
||||
.about-wrapper {
|
||||
ul {
|
||||
//padding-left: 0px;
|
||||
}
|
||||
.year {
|
||||
float: left;
|
||||
//margin-right: 15px;
|
||||
}
|
||||
.year-events {
|
||||
float: left;
|
||||
}
|
||||
.year-wrapper {
|
||||
@include clearfix();
|
||||
}
|
||||
li {
|
||||
//list-style: none;
|
||||
text-indent: -37px;
|
||||
padding-left: 37px;
|
||||
//margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
.upper-about {
|
||||
@include clearfix();
|
||||
}
|
||||
.right-about {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
div.mini-cv {
|
||||
//a {
|
||||
// color: black;
|
||||
//}
|
||||
}
|
||||
|
||||
.left-col-cv {
|
||||
padding-left: 30px;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.right-col-cv {
|
||||
float: left;
|
||||
max-width: 70%;
|
||||
}
|
||||
.year-wrapper {
|
||||
@include clearfix();
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
.button {
|
||||
margin-top: 15px;
|
||||
border-radius: 0px;
|
||||
font-family: "Helvetica";
|
||||
color: black;
|
||||
border-color: black;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 1px solid black;
|
||||
background-color: white;
|
||||
-webkit-appearance: none;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.email-input {
|
||||
width: 97%;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#mc_embed_signup .button:hover {
|
||||
border-radius: 0px;
|
||||
font-family: "Helvetica";
|
||||
color: black;
|
||||
border-color: black;
|
||||
border: 1px solid black;
|
||||
background-color: white;
|
||||
}
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*opacity: 0.5;*/
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.form-holder {
|
||||
//width: 400px;
|
||||
margin:auto; margin-top: 0px; float:left;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.only-mobile {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 700px) {
|
||||
.no-mobile {
|
||||
display: none;
|
||||
}
|
||||
.only-mobile {
|
||||
display: block;
|
||||
}
|
||||
.form-holder {
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.page-wrapper {
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
/*height: 0px;*/
|
||||
/*float: left;*/
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Header from '../components/Header.js'
|
||||
import CSHelmet from '../components/CSHelmet.js'
|
||||
import Footer from '../components/Footer.js'
|
||||
import SLink from '../components/SLink.js'
|
||||
import "./moods.scss"
|
||||
import "./markdown.scss"
|
||||
import "./canalswans.scss"
|
||||
|
||||
var classNames = require('classnames')
|
||||
|
||||
class Layout extends React.Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.handleMoodClick = this.handleMoodClick.bind(this);
|
||||
this.state = {
|
||||
mood: 'standard'
|
||||
}
|
||||
this.handleMoodClick = this.handleMoodClick.bind(this)
|
||||
}
|
||||
|
||||
handleMoodClick(mood) {
|
||||
this.setState({mood: mood})
|
||||
}
|
||||
|
||||
render() {
|
||||
var wrapperClasses = `base-body ${this.state.mood} ${this.props.pageType}`
|
||||
return (
|
||||
<div className={wrapperClasses}>
|
||||
<CSHelmet mood={this.state.mood}/>
|
||||
<Header mood={this.state.mood} handleMoodClick={this.handleMoodClick}/>
|
||||
<div className="page-wrapper">
|
||||
<div className="main-wrapper">
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Layout
|
||||
|
|
@ -1,14 +1,10 @@
|
|||
.markdownWrapper {
|
||||
header {
|
||||
//h1 {
|
||||
// text-align: center;
|
||||
//}
|
||||
|
||||
.articleHeader {
|
||||
p {
|
||||
color: gray;
|
||||
// text-align: center;
|
||||
// margin-bottom: 45px;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gatsby-resp-image-wrapper {
|
||||
|
|
@ -19,4 +15,5 @@
|
|||
.footnotes {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
|
||||
|
||||
body.asmr {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 12px;
|
||||
background-color: #c2c2de;
|
||||
.projects-wrapper {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
body.times-new-roman {
|
||||
background-color: white;
|
||||
.simple-site {
|
||||
display:none;
|
||||
}
|
||||
a {
|
||||
color: rgb(255, 0, 174);
|
||||
}
|
||||
}
|
||||
|
||||
body.standard {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 12px;
|
||||
.simple-site {
|
||||
display:none;
|
||||
}
|
||||
a {
|
||||
color: #8900ff;
|
||||
}
|
||||
}
|
||||
|
||||
body.sponsored {
|
||||
background-image: url('/img/inverted-bp.png');
|
||||
background-repeat: repeat;
|
||||
background-size: cover;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 12px;
|
||||
color:white;
|
||||
.navlink a {
|
||||
color: white;
|
||||
}
|
||||
.simple-title a {
|
||||
color: white;
|
||||
}
|
||||
.myname a {
|
||||
color: white;
|
||||
}
|
||||
.projects-wrapper {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
body.test {
|
||||
background-image: url('/img/triangles.png');
|
||||
background-repeat: repeat;
|
||||
background-size: cover;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
color: red;
|
||||
font-size: 28px;
|
||||
.navlink a {
|
||||
color: blue;
|
||||
}
|
||||
.simple-title a {
|
||||
color: blue;
|
||||
}
|
||||
.myname a {
|
||||
color: red;
|
||||
}
|
||||
.p5-sketch {
|
||||
display: block;
|
||||
}
|
||||
.projects-wrapper {
|
||||
display:none;
|
||||
}
|
||||
.page-wrapper {
|
||||
padding-top: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
//display: none;
|
||||
position: absolute;
|
||||
padding: 20px;
|
||||
top: 0px;
|
||||
padding-bottom: 30px;
|
||||
//border: 1px solid gray;
|
||||
width: 100%;
|
||||
.click-your-mood {
|
||||
float: left;
|
||||
@media screen and (max-width: 600px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.mood-button {
|
||||
display: block;
|
||||
margin-left: 23px;
|
||||
margin-bottom:5px;
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.clicked {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
margin-right: 23px;
|
||||
margin-left: 0px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import Layout from "../layouts/index.js"
|
||||
import Layout from "../layouts/layout.js"
|
||||
|
||||
const NotFoundPage = () => (
|
||||
<Layout>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
import Projects from '../components/Projects'
|
||||
import Layout from "../layouts/index.js"
|
||||
import Layout from "../layouts/layout.js"
|
||||
|
||||
const IndexPage = () => (
|
||||
<Layout>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
// src/components/layout.js
|
||||
import React from "react"
|
||||
import Carousel from "../components/Carousel.js"
|
||||
import SLink from "../components/SLink.js"
|
||||
import { MDXRenderer } from "gatsby-plugin-mdx"
|
||||
import { MDXProvider } from '@mdx-js/react'
|
||||
import Layout from "../layouts";
|
||||
import Layout from "../layouts/layout.js";
|
||||
import {Link} from "gatsby";
|
||||
|
||||
const shortcodes = { Carousel, SLink }
|
||||
|
||||
// simple template for testing
|
||||
// export default function PageTemplate({ data: { mdx } }) {
|
||||
// return (
|
||||
|
|
@ -39,7 +36,7 @@ export default function MdxTemplate({ data: { mdx }}) {
|
|||
return (
|
||||
<Layout noHeader={noHeader} pageType={pageType}>
|
||||
<article className={"markdownWrapper"}>
|
||||
<header style={{'margin-bottom': '20px', 'width': '100%', 'float':'left'}}>
|
||||
<div className="articleHeader" style={{'margin-bottom': '20px', 'width': '100%', 'float':'left'}}>
|
||||
<h2
|
||||
style={{
|
||||
marginBottom: 0,
|
||||
|
|
@ -65,11 +62,10 @@ export default function MdxTemplate({ data: { mdx }}) {
|
|||
>
|
||||
</p>
|
||||
: null}
|
||||
</header>
|
||||
</div>
|
||||
<section className="mdxWrapper">
|
||||
<MDXProvider components={{
|
||||
"SLink": SLink,
|
||||
"Carousel": Carousel,
|
||||
}}>
|
||||
<MDXRenderer >{mdx.body}</MDXRenderer>
|
||||
</MDXProvider>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ This is a reflection into my ongoing experiments into accessing this well,
|
|||
as a potential form of direct action against the oppressive structures that frequently mediate our world.
|
||||
What are the pathways immediately around us that lead to information being transmitted into our eyes?
|
||||
What effects do these structures have on us?
|
||||
What agency do we have in how we relate to them? What actions can we take today?
|
||||
What agency do we have in how we relate to them?
|
||||
|
||||
|
||||
|
||||
|
|
@ -53,10 +53,12 @@ like imagining a UI based on blank screen
|
|||
the only ideas that surface are the ideas that originate from you
|
||||
```
|
||||
|
||||
In the past year, I experienced a variety of ups and downs, and its hard to say what can really be attributed to using a flip-phone,
|
||||
but I still believe in the potential of more mindfully using (and not using) technology as a healing practice.
|
||||
In the past year, I experienced a variety of ups and downs, and its hard to say what can really be attributed to using a flip-phone.
|
||||
|
||||
A recurring theme was that if I was feeling bad I tended to blame it on the flip-phone and be frustrated by the project,
|
||||
I am now using my iPhone again but I still believe in the potential of more mindfully using (and not using) technology as a healing practice
|
||||
as described in this zine I created with Catherine Schmidt.
|
||||
|
||||
A recurring theme of the year was that if I was feeling bad I tended to blame it on the flip-phone and be frustrated by the project,
|
||||
and if I was feeling good then I felt like the flip-phone was a great idea.
|
||||
|
||||
This was my note from May 7th:
|
||||
|
|
@ -73,8 +75,10 @@ petja says “i have friends, i am doing ok”
|
|||
Unfortunately, only the Auslanderbehorde (the German Foreigner’s office which grants Visas) is institutionally verified to really say if I’m doing OK or not.
|
||||
|
||||
In the absence of their official opinion, I will leave that for the wind to debate,
|
||||
and instead will share my journal entries from the first 10 days after I decided to use a flip-phone:
|
||||
as for me using a flip-phone was more intended as a ritual in tribute to mindfulness
|
||||
than as something with a single result.
|
||||
|
||||
Here are my journal entries from the first 10 days after I decided to use a flip-phone:
|
||||
```
|
||||
day 1 (sunday)
|
||||
picked up rpi from kleinanzeigen and hung out with mylene
|
||||
|
|
@ -146,7 +150,7 @@ I am currently using my smart phone again and I may stop again in the future.
|
|||
|
||||
—
|
||||
|
||||
In tribute to the power of direct of experience,
|
||||
Disconnecting and connecting,
|
||||
M
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 MiB |
Loading…
Reference in New Issue