Skip to content

Instantly share code, notes, and snippets.

@alexmustin
Created January 13, 2024 22:35
Show Gist options
  • Save alexmustin/289c8ea02826c3014ef4ee0f0ea12fc7 to your computer and use it in GitHub Desktop.
Save alexmustin/289c8ea02826c3014ef4ee0f0ea12fc7 to your computer and use it in GitHub Desktop.
Sample SASS files
body.custom-single {
.site-container {
.site-inner {
padding: 0;
.entry-header {
.featured-image {
display: flex;
align-items: center;
max-width: 100vw;
max-height: 320px;
overflow: hidden;
margin-left: calc(-100vw / 2 + 100% / 2);
margin-right: calc(-100vw / 2 + 100% / 2);
@include media-breakpoint-up(md) {
max-height: 50vh;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.entry-title {
display: block !important;
text-align: center;
font-weight: 700;
margin-bottom: 1rem;
padding-left: $global-padding-mobile;
padding-right: $global-padding-mobile;
@include media-breakpoint-up(md) {
margin-bottom: 1.5rem;
padding-left: $global-padding-desktop-extra;
padding-right: $global-padding-desktop-extra;
}
}
.entry-meta {
margin-bottom: 3rem;
line-height: 1;
text-align: center;
time {
color: $fortinetDarkGrey;
font-size: var(--wp--preset--font-size--headline-h-4);
line-height: clamp(1.05875rem, 0.6514rem + 0.8486vw, 1.5rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
@include media-breakpoint-up(md) {
letter-spacing: 3px;
}
}
}
}
}
}
}
@import "partials/variables";
/* # Typography
---------------------------------------------------------------------------------------------------- */
html,
body {
font-family: $font-body;
font-weight: normal;
font-size: 1rem;
font-style: normal;
line-height: 1.25;
letter-spacing: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1,
h2 {
font-family: $font-headings !important;
}
h3,
h4,
h5,
h6 {
font-family: $font-headings-alt !important;
}
/* Items with Bottom Margin */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
cite,
blockquote,
table {
margin-bottom: 1rem;
}
// Font sizes generated by the Fluid Typography settings in theme.json
// Line height generated with this tool: https://clamp.font-size.app/
// settings: Min Viewport: 768px | Max Viewport: 1600px
h1 {
font-size: var(--wp--preset--font-size--headline-h-1);
line-height: clamp(2.625rem, 1.875rem + 1.5625vw, 3.4375rem);
}
h2 {
font-size: var(--wp--preset--font-size--headline-h-2);
line-height: clamp(2.375rem, 1.3942rem + 2.0433vw, 3.4375rem);
}
h3 {
font-size: var(--wp--preset--font-size--headline-h-3);
line-height: clamp(1.375rem, 0.7981rem + 1.2019vw, 2rem);
}
h4 {
font-size: var(--wp--preset--font-size--headline-h-4);
line-height: clamp(1.05875rem, 0.6514rem + 0.8486vw, 1.5rem);
}
h5 {
font-size: var(--wp--preset--font-size--headline-h-5);
line-height: clamp(0.9075rem, 0.8798rem + 0.0577vw, 0.9375rem);
}
h3,
h4,
h5 {
letter-spacing: 2px;
@include media-breakpoint-up(md) {
letter-spacing: 3px;
}
}
body, p {
font-size: var(--wp--preset--font-size--normal);
line-height: clamp(1.375rem, 0.6827rem + 1.4423vw, 2.125rem);
}
// FontAwesome 6 icons.
.fa::before {
/* removed font- based rules */
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.login::before {
/* using style CSS custom property */
font: var(--fa-font-solid);
content: "\f007";
}
$fortinetRed: #c9362c;
$color-black: #000;
$fortinetDarkGrey: #646464;
$fortinetMedGrey: #afafaf;
$fortinetGrey: #f5f5f5;
// $fortinetGreenBlue: #c3E0ddd1;
$fortinetDarkMint: #cee6e3;
$fortinetLightMint: #f0f7f6;
$fortinetGreenBlue: $fortinetDarkMint;
$fortinetTitleDarkGrey: $fortinetDarkGrey;
$fortinetLightGrey: #fbfbfb;
$color-white: #fff;
$mobile-nav-button: #d9d9d9;
$font-body: 'Inter', sans-serif;
$font-headings: 'Yrsa', serif;
$font-headings-alt: 'Inter', sans-serif;
$font-primarynav: $font-body;
$font-buttons: $font-body;
$global-padding-mobile: 2rem;
$global-padding-desktop: 3rem;
$global-padding-mobile-extra: 2rem;
$global-padding-tablet: 4rem;
$global-padding-desktop-extra: 5rem;
// Responsive breakpoints.
$grid-breakpoints: (
xs: 0,
sm: 600px,
md: 1023px,
hdr: 1100px, // header
lg: 1200px,
xl: 1600px,
xxl: 2000px,
xxxl: 2800px
);
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
@return if($min != 0, $min, null);
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment