diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss index d65d850..865a8c5 100644 --- a/assets/css/_core/_base.scss +++ b/assets/css/_core/_base.scss @@ -1,14 +1,20 @@ -html { - font-family: $global-font-family; - overflow: hidden; - position: relative; - scroll-behavior: smooth; +* { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } body { - background-color: white; - height: 100vh; - margin: 0; - overflow: hidden; - line-height: 1.5; -} \ No newline at end of file + user-select: none; + background: white; +} + +html, +body { + overscroll-behavior-y: none; +} + +a, +button { + cursor: pointer; +} + diff --git a/assets/css/_core/_font.scss b/assets/css/_core/_font.scss new file mode 100644 index 0000000..397038e --- /dev/null +++ b/assets/css/_core/_font.scss @@ -0,0 +1,6 @@ +@font-face { + font-family: HelveticaNow; + src: url('/fonts/HelveticaNowText-Regular.woff') format('woff'); + font-weight: 400; + font-style: normal; +} diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss deleted file mode 100644 index e69de29..0000000 diff --git a/assets/css/_core/_mixins.scss b/assets/css/_core/_mixins.scss new file mode 100644 index 0000000..d818128 --- /dev/null +++ b/assets/css/_core/_mixins.scss @@ -0,0 +1,28 @@ +$breakpoints: ( + 'mobile': 375px, + 'tablet': 768px, + 'laptop': 1024px, + 'desktop': 1440px +) !default; + +// Breakpoints + +@mixin min-width($breakpoint) { + @if map-has-key($breakpoints, $breakpoint) { + @media (min-width: map-get($breakpoints, $breakpoint)) { + @content; + } + } @else { + @error "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Available breakpoints are: #{map-keys($breakpoints)}."; + } +} + +@mixin max-width($breakpoint) { + @if map-has-key($breakpoints, $breakpoint) { + @media (max-width: (map-get($breakpoints, $breakpoint) - 1px)) { + @content; + } + } @else { + @error "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Available breakpoints are: #{map-keys($breakpoints)}."; + } +} diff --git a/assets/css/_core/_reset.scss b/assets/css/_core/_reset.scss new file mode 100644 index 0000000..0de3854 --- /dev/null +++ b/assets/css/_core/_reset.scss @@ -0,0 +1,103 @@ +/*** + The new CSS reset - version 1.8.4 (last updated 14.2.2023) + GitHub page: https://github.com/elad2412/the-new-css-reset +***/ + +/* + Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property + - The "symbol *" part is to solve Firefox SVG sprite bug + */ +*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { + all: unset; + display: revert; +} + +/* Preferred box-sizing value */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Reapply the pointer cursor for anchor tags */ +a, +button { + cursor: revert; +} + +/* Remove list styles (bullets/numbers) */ +ol, +ul, +menu { + list-style: none; +} + +/* For images to not be able to exceed their container */ +img { + max-inline-size: 100%; + max-block-size: 100%; +} + +/* removes spacing between cells in tables */ +table { + border-collapse: collapse; +} + +/* Safari - solving issue when using user-select:none on the text input doesn't working */ +input, +textarea { + -webkit-user-select: auto; +} + +/* revert the 'white-space' property for textarea elements on Safari */ +textarea { + white-space: revert; +} + +/* minimum style to allow to style meter element */ +meter { + -webkit-appearance: revert; + appearance: revert; +} + +/* preformatted text - use only for this feature */ +:where(pre) { + all: revert; +} + +/* reset default text opacity of input placeholder */ +::placeholder { + color: unset; +} + +/* remove default dot (•) sign */ +::marker { + content: initial; +} + +/* fix the feature of 'hidden' attribute. + display:revert; revert to element instead of attribute */ +:where([hidden]) { + display: none; +} + +/* revert for bug in Chromium browsers + - fix for the content editable attribute will work properly. + - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ +:where([contenteditable]:not([contenteditable='false'])) { + -moz-user-modify: read-write; + -webkit-user-modify: read-write; + overflow-wrap: break-word; + -webkit-line-break: after-white-space; + -webkit-user-select: auto; +} + +/* apply back the draggable feature - exist only in Chromium and Safari */ +:where([draggable='true']) { + -webkit-user-drag: element; +} + +/* Revert Modal native behavior */ +:where(dialog:modal) { + all: revert; +} diff --git a/assets/css/_core/_typography.scss b/assets/css/_core/_typography.scss new file mode 100644 index 0000000..00d5d55 --- /dev/null +++ b/assets/css/_core/_typography.scss @@ -0,0 +1,14 @@ +@import 'mixins'; + +body { + line-height: 1.2; + font-size: 16px; + font-family: HelveticaNow, helvetica, arial, sans-serif; + + @include min-width('tablet') { + font-size: 18px; + } + @include min-width('laptop') { + font-size: 19px; + } +}