anhgelus/now
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

build(sass): remove imports of vars

Browse source 
imports are deprecated
This commit is contained in:
Anhgelus Morhtuuzh 2024-11-13 10:23:50 +01:00
parent 42edbe2732
commit dd8495d596
No known key found for this signature in database
GPG key ID: CAD341EFA92DDDE5
2 changed files with 21 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

31
scss/main.scss
View file

@ -1,6 +1,6 @@
@use "../node_modules/reset-css/reset.css"; @use "../node_modules/reset-css/reset.css";
@use "tag"; @use "tag";
@import "vars"; @use "vars";
:root { :root {
--text-color: #000; --text-color: #000;
@ -18,7 +18,7 @@ body {
background: var(--background-image) center fixed no-repeat; background: var(--background-image) center fixed no-repeat;
background-size: cover; background-size: cover;
color: var(--text-color); color: var(--text-color);
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: vars.$bp-little) {
background: #000; background: #000;
} }
} }
@ -29,7 +29,7 @@ body {
justify-content: center; justify-content: center;
height: 95vh; height: 95vh;
width: 100%; width: 100%;
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: vars.$bp-little) {
min-height: 100vh; min-height: 100vh;
height: auto; height: auto;
} }
@ -44,7 +44,7 @@ a {
gap: 1rem; gap: 1rem;
font-size: 16px; font-size: 16px;
margin-left: 1rem; margin-left: 1rem;
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: vars.$bp-little) {
gap: 0; gap: 0;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
@ -57,7 +57,7 @@ a {
color: var(--text-color); color: var(--text-color);
} }
& p { & p {
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: vars.$bp-little) {
text-align: center; text-align: center;
} }
} }
@ -74,10 +74,10 @@ main {
& h1, h2, h3 { & h1, h2, h3 {
margin: 0; margin: 0;
} }
@media only screen and (max-width: $bp-mid) { @media only screen and (max-width: vars.$bp-mid) {
width: 80%; width: 80%;
} }
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: vars.$bp-little) {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
@ -102,7 +102,7 @@ h1 {
h2 { h2 {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: vars.$bp-little) {
font-size: 1.75rem; font-size: 1.75rem;
} }
} }
@ -122,7 +122,7 @@ h4 {
gap: 2rem; gap: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
color: var(--text-color); color: var(--text-color);
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: vars.$bp-little) {
flex-direction: column; flex-direction: column;
} }
@ -134,7 +134,7 @@ h4 {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.5rem;
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: vars.$bp-little) {
margin-right: 0; margin-right: 0;
} }
& p { & p {
@ -143,7 +143,7 @@ h4 {
} }
& figure { & figure {
display: inline; display: inline;
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: vars.$bp-little) {
margin-top: 2rem; margin-top: 2rem;
} }
& img { & img {
@ -166,7 +166,7 @@ h4 {
margin-top: 2rem; margin-top: 2rem;
width: 100%; width: 100%;
gap: 1rem; gap: 1rem;
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: vars.$bp-little) {
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
align-items: center; align-items: center;
@ -176,12 +176,13 @@ h4 {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 33%; width: 33%;
@media only screen and (max-width: $bp-little) { box-shadow: 0 0 50px -20px rgba(0,0,0,0.75);
width: 100%;
}
border-radius: 16px; border-radius: 16px;
background: var(--background); background: var(--background);
transition: .2s; transition: .2s;
@media only screen and (max-width: vars.$bp-little) {
width: 100%;
}
&:hover { &:hover {
background: var(--background-hover); background: var(--background-hover);
transition: .2s; transition: .2s;

10
scss/tag.scss
View file

@ -1,4 +1,4 @@
@import "vars"; @use "vars";
.tags { .tags {
display: grid; display: grid;
@ -6,18 +6,18 @@
margin-top: 1rem; margin-top: 1rem;
column-gap: 2rem; column-gap: 2rem;
row-gap: 1rem; row-gap: 1rem;
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: vars.$bp-little) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
row-gap: 2rem; row-gap: 2rem;
} }
& h4 { & h4 {
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: vars.$bp-little) {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
} }
& p { & p {
display: none; display: none;
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: vars.$bp-little) {
display: block; display: block;
} }
} }
@ -25,7 +25,7 @@
.tag { .tag {
cursor: pointer; cursor: pointer;
@media only screen and (max-width: $bp-little) { @media only screen and (max-width: vars.$bp-little) {
cursor: auto; cursor: auto;
} }
& h4:hover { & h4:hover {