Skip to content

Instantly share code, notes, and snippets.

View dorinvancea's full-sized avatar
🎯
Focusing

Dorin Vancea dorinvancea

🎯
Focusing
4 followers · 12 following
View GitHub Profile
@dorinvancea
dorinvancea / Basic Burger Menu
Last active July 17, 2020 10:12
Includes HTML, SCSS, JS
<nav class="nav-links">
<button class="menu-btn" type="button" aria-label="Menu" aria-controls="navigation" >
<span class="menu-btn__block">
<span class="menu-btn__inner"></span>
</span>
</button>
<ul>
<li><a href="#">Menu item #1</a></li>
<li><a href="#">Menu item #2</a></li>
<li><a href="#">Menu item #3</a></li>
@dorinvancea
dorinvancea / Utility: Spacing
Last active August 19, 2023 07:35
Utility: SASS spacing generator
// ==============================================
// Utility - Spacing
// ==============================================
:root {
--sizeBase: 1rem;
// Sizing
--size0: 0;
--size2: calc(var(--sizeBase) - 0.8rem);
@dorinvancea
dorinvancea / Utility: Typography
Last active April 24, 2022 08:55
Utility: Typography
<!-- Usage -->
<div class="type-s-24 type-w-500">
I'm a 24px text
</div>
@dorinvancea
dorinvancea / css
Last active April 8, 2025 13:22
Ruby on Rails Stimulus: Simple carousel flow
.onboarding-step {
display: none;
}
.onboarding-step.active {
display: block;
}
@dorinvancea
dorinvancea / index.html
Created September 24, 2024 08:41
HTML boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unique page title - My Site</title>
<link rel="stylesheet" href="/assets/css/styles.css">
@dorinvancea
dorinvancea / Picture.astro
Created December 16, 2024 10:32
Astro custom Picture element
---
interface Props {
lightBasePath: string;
darkBasePath: string;
alt: string;
width: string;
height: string;
}
const { lightBasePath, darkBasePath, alt, width, height } = Astro.props;
@dorinvancea
dorinvancea / size-clamp.css
Last active January 22, 2025 08:42
CSS clamp common sizes
/*
Base Sizes:
https://chrisburnell.com/clamp-calculator/?font-size-root=10&size-min=14&size-max=16&viewport-min=516&viewport-max=960&viewport-units=vi
*/
:root {
--size-2: 0.2rem;
--size-4: 0.4rem;
--size-6: clamp(0.4rem, 0.168rem + 0.45vi, 0.6rem);
--size-8: clamp(0.6rem, 0.368rem + 0.45vi, 0.8rem);
--size-10: clamp(0.8rem, 0.568rem + 0.45vi, 1rem);