Skip to content

Instantly share code, notes, and snippets.

View HarryAdney's full-sized avatar

Dev HarryAdney

0 followers · 17 following
View GitHub Profile
@HarryAdney
HarryAdney / grid-tips
Last active August 22, 2025 13:43
Use This Simple Line Of CSS Grid To Make Your Layout Responsive
grid-template-columns: repeat(auto-fit, minmax(min(100%,[base-width]), 1fr));
https://codepen.io/optimisticweb/full/pvjzdjg
HTML
<h1>Responsive Layout</h1>
<h2>Without Using Media Query</h2>
<section class="content-boxes">
<div class="content-box">1</div>
<div class="content-box">2</div>
@HarryAdney
HarryAdney / masonry.html
Last active January 26, 2025 09:55
masonry layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Masonry Layout</title>
<link rel="stylesheet" href="./styles.css">
</head>
@HarryAdney
HarryAdney / cs-contact-490.md
Last active June 22, 2024 19:14
codestitch contact
Contact Us Contact Information
@HarryAdney
HarryAdney / cs-contact-486.html
Last active June 22, 2024 19:12
CodeStitch
/* CSS */
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#cs-contact-486 {
padding: var(--sectionPadding);
position: relative;
z-index: 1;
}
#cs-contact-486 .cs-container {
@HarryAdney
HarryAdney / service worker boilerplate
Last active January 6, 2022 11:38
serviceworker-boilerplate
// Core assets
let coreAssets = [];
// On install, cache core assets
self.addEventListener('install', function (event) {
// Cache core assets
event.waitUntil(caches.open(coreID).then(function (cache) {
for (let asset of coreAssets) {
cache.add(new Request(asset));
@HarryAdney
HarryAdney / font-sizing.md
Created December 18, 2021 13:07
font sizing

:root { --size-300: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem); --size-400: clamp(0.88rem, 0.83rem + 0.24vw, 1rem); --size-500: clamp(1.09rem, 1rem + 0.47vw, 1.33rem); --size-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem); --size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem); --size-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem); --size-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem); --size-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem); };

@HarryAdney
HarryAdney / htaccess.md
Last active December 13, 2021 15:56
htaccess

RewriteEngine On RewriteCond %{HTTPS} off [OR] RewriteCond %{HTTP_HOST} ^www. [NC] RewriteCond %{HTTP_HOST} ^(?:www.)?(.+)$ [NC] RewriteRule ^ https://%1%{REQUEST_URI} [L,NE,R=301]

@HarryAdney
HarryAdney / flexbox-nav.html
Last active April 7, 2021 17:39
Accessible navigation using Flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox nav</title>
<style>
* {
box-sizing: border-box;
@HarryAdney
HarryAdney / index.html
Last active April 6, 2021 19:43
accessible navigation example
<!-- examples.anysurfer.be/dropdown/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accessible Dropdown Menu with Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@HarryAdney
HarryAdney / gulpfile.js
Last active October 2, 2020 17:57
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const clean = require('gulp-rm');
// Use gulp-terser instead of gulp-uglifies
const uglify = require('gulp-terser');
const minify = require('gulp-clean-css');