brainhell

'use client'
import { createGlobalStyle } from 'styled-components'
import tw, { theme, css, GlobalStyles as BaseStyles } from 'twin.macro'

const CustomStyles = createGlobalStyle`
@font-face {
  font-family: 'Lobster';
  src: url('fonts/Lobster.woff2') format('woff2');
  /* https://styled-components.com/docs/faqs#how-do-i-fix-flickering-text-after-server-side-rendering */
  font-display: fallback;

brainhell

//NextJS-Twin.Macro Navbar

"use client";
/* import { useRouter } from "next/router"; */
import { usePathname } from "next/navigation";
import tw, { styled, css } from "twin.macro";
import Link from "next/link";
import LogoCapres from "/public/images/capres.jpg";
import Image from "next/image";
import { Button } from "@/components/atoms/StyledButton";

brainhell

Libraries

• 960 Grid System - An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
• Compass - Open source CSS Authoring Framework.
• Bootstrap - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
• Font Awesome - The iconic font designed for Bootstrap.
• Zurb Foundation - Framework for writing responsive web sites.
• SASS - CSS extension language which allows variables, mixins and rules nesting.
• Skeleton - Boilerplate for responsive, mobile-friendly development.

Guides

brainhell

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console