Skip to content

Instantly share code, notes, and snippets.

@maban
maban / html-css.html
Created June 10, 2024 15:55
2-col vertical scroll layout with header and footer, using CSS grid
<html>
<head>
<style>
body {
background-color: red;
margin:0;
}
nav {
display: flex;
# Your init script
#
# Atom will evaluate this file each time a new window is opened. It is run
# after packages are loaded/activated and after the previous editor state
# has been restored.
#
# An example hack to log to the console when each text editor is saved.
#
# atom.workspace.observeTextEditors (editor) ->
# editor.onDidSave ->

Things to do before launching a website

Not a definitive list, just things that regularly get forgotten. Fork this for your own site.

  • Favicon for web
  • Favicons for devices
  • Print stylsheet
  • Add landmark Aria roles
  • Resize and optimise images
  • Minify CSS and JS
Brad Frost:
TBC
Alicia Sedlock:
TBC
Richard Rutter:
http://webtypography.net/talks/upfront2015/
Soledad Penadés:
@maban
maban / Event Notes.md
Last active March 9, 2020 19:28
Event Notes

Event Notes

  • Event Name:
  • Location:
  • Date:
  • Conference format: (number of days, tracks, and speakers)

Talk

@maban
maban / Rounded edge line CSS
Last active December 27, 2023 07:16
Line with rounded edges
h1:after {
content: " ";
display: block;
border-top: 2px solid skyblue;
border-bottom: 2px solid skyblue;
border-radius: 2px;
}
@maban
maban / CSS
Last active August 29, 2015 14:05
Code refactoring for America
/* (Just a few examples) */
/* old */ .profile-small,
/* new */ .profile-grid > li {
background-image: none;
border-radius: 2px;
border: 1px solid #e0dede;
margin: 60px 0 16px 0;
padding: 60px 0 0 0;
position: relative;
@maban
maban / README.md
Last active August 29, 2015 14:03
Turns the text red if the date given in the datetime attribute is in the past

Thanks and @alfraser86 @gestchild for help with this.

@maban
maban / Maban Website Contract.md
Last active May 18, 2024 02:21
My boilerplate contract

Website Contract [month] [year]

Description of this Contract

This contract is not meant to trick or deceive you; the intention is purely to protect both parties. I have tried to keep the wording as plain as possible, but if anything is unclear, please let me know and I will be more than happy to clarify it with you. Also, until you sign it, please feel free to request to change bits of it to suit your requirements.

In short, [client name] is contracting me, [my name], to [description of my role] between [start date and finish date].

By signing this, you are confirming that you have the power and ability to enter into this contract on behalf of [client's company].