-
Notifications
You must be signed in to change notification settings - Fork 99
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor data.json and add data2023.json (#247)
This commit refactors the data.json file by removing some entries and adds a new data2023.json file with additional entries. This ensures that the data for the Hacktoberfest 2023 train is properly separated from the other years' data. The changes also include updating the Home.vue file to include a link for the Hacktoberfest 2023 train. Additionally, the _mixins.scss file has been modified to improve the fluid font size, line height, and bottom mixins.
- Loading branch information
1 parent
11e8d5e
commit a7f5c6d
Showing
5 changed files
with
471 additions
and
326 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,62 +1,40 @@ | ||
| @use "sass:math"; | ||
| @use 'sass:math'; | ||
|
|
||
| $vp-small: 560px; | ||
| $vp-large: 1920px; | ||
|
|
||
| @mixin fluid-font-size( | ||
| $minFontSize: 16px, | ||
| $maxFontSize: 20px, | ||
| $minViewport: 600px, | ||
| $maxViewport: 1200px | ||
| ) { | ||
| $slope: math.div($minFontSize - $maxFontSize, $minViewport - $maxViewport); | ||
| $base: $maxFontSize - $slope * $maxViewport; | ||
| @mixin fluid-font-size($minFontSize, $maxFontSize, $minViewport, $maxViewport) { | ||
| $slope: math.div($maxFontSize - $minFontSize, $maxViewport - $minViewport); | ||
| $intercept: $minFontSize - $slope * $minViewport; | ||
|
|
||
| font-size: $minFontSize; | ||
| font-size: clamp( | ||
| #{$minFontSize}, | ||
| calc(#{$intercept} + #{$slope} * 100vw), | ||
| #{$maxFontSize} | ||
| ); | ||
| } | ||
|
|
||
| @media (min-width: $minViewport) { | ||
| font-size: calc(#{$base} + 100vw * #{$slope}); | ||
| } | ||
| // Mixin for fluid line-height using CSS clamp and math.div | ||
| @mixin fluid-line-height($minLineHeight, $maxLineHeight, $minViewport, $maxViewport) { | ||
| $slope: math.div($maxLineHeight - $minLineHeight, $maxViewport - $minViewport); | ||
| $intercept: $minLineHeight - $slope * $minViewport; | ||
|
|
||
| @media (min-width: $maxViewport) { | ||
| font-size: $maxFontSize; | ||
| } | ||
| } | ||
| @mixin fluid-bottom( | ||
| $minBottom: 16px, | ||
| $maxBottom: 20px, | ||
| $minViewport: 600px, | ||
| $maxViewport: 1200px | ||
| ) { | ||
| $slope: math.div(($minBottom - $maxBottom), ($minViewport - $maxViewport)); | ||
| $base: $maxBottom - $slope * $maxViewport; | ||
|
|
||
| bottom: $minBottom; | ||
|
|
||
| @media (min-width: $minViewport) { | ||
| bottom: calc(#{$base} + 100vw * #{$slope}); | ||
| } | ||
|
|
||
| @media (min-width: $maxViewport) { | ||
| bottom: $maxBottom; | ||
| } | ||
| line-height: clamp( | ||
| #{$minLineHeight}, | ||
| calc(#{$intercept} + #{$slope} * 100vw), | ||
| #{$maxLineHeight} | ||
| ); | ||
| } | ||
| @mixin fluid-line-height( | ||
| $minLineHeight: 16px, | ||
| $maxLineHeight: 20px, | ||
| $minViewport: 600px, | ||
| $maxViewport: 1200px | ||
| ) { | ||
| $slope: math.div(($minLineHeight - $maxLineHeight), ($minViewport - $maxViewport)); | ||
| $base: $maxLineHeight - $slope * $maxViewport; | ||
|
|
||
| line-height: $minLineHeight; | ||
|
|
||
| @media (min-width: $minViewport) { | ||
| line-height: calc(#{$base} + 100vw * #{$slope}); | ||
| } | ||
|
|
||
| @media (min-width: $maxViewport) { | ||
| line-height: $maxLineHeight; | ||
| } | ||
|
|
||
| // Mixin for fluid bottom using CSS clamp and math.div | ||
| @mixin fluid-bottom($minBottom, $maxBottom, $minViewport, $maxViewport) { | ||
| $slope: math.div($maxBottom - $minBottom, $maxViewport - $minViewport); | ||
| $intercept: $minBottom - $slope * $minViewport; | ||
|
|
||
| bottom: clamp( | ||
| #{$minBottom}, | ||
| calc(#{$intercept} + #{$slope} * 100vw), | ||
| #{$maxBottom} | ||
| ); | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| [ | ||
| { | ||
| "name": "YasiOnFire", | ||
| "text": "Yasio says Hi!", | ||
| "cart": 0 | ||
| }, | ||
| { | ||
| "name": "DustyDogCodex", | ||
| "text": "I like ChooChoo Train!", | ||
| "cart": 5 | ||
| }, | ||
| { | ||
| "name": "elo", | ||
| "text": "test", | ||
| "cart": 5 | ||
| }, | ||
| { | ||
| "name": "kryzysiek", | ||
| "text": "Hello Maciuś !", | ||
| "cart": 4 | ||
| }, | ||
| { | ||
| "name": "rajabilal555", | ||
| "text": "The One piece is real!", | ||
| "cart": 6 | ||
| }, | ||
| { | ||
| "name": "installemployee", | ||
| "text": "Happy Hacking", | ||
| "cart": 4 | ||
| }, | ||
| { | ||
| "name": "aitikirala", | ||
| "text": "Hey guys!", | ||
| "cart": 0 | ||
| } | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.