Skip to content
GitLab
Commit ebc736d6 authored by Kristijan Gelmanovski's avatar Kristijan Gelmanovski
Browse files

challengeadded

parent 24d7f4e5
challenge04
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 514 additions and 0 deletions
+514 -0
04-Challenge-Flex _Sass-20231119T215651Z-001/04-Challenge-Flex _Sass/starter-files/css/abstracts/_mixins.scss 0 → 100644
+ 68
- 0
View file @ ebc736d6
@use "./variables" as var;
@use "sass:math";
// RESPONSIVE LAPTOP FIRST DESIGN MIXINS
@mixin four-k-styles {
@media (max-width: 2560px) {
@content;
}
}
@mixin laptop-l-styles {
@media (max-width: 1440px) {
@content;
}
}
@mixin laptop-m-styles {
@media (max-width: 1024px) {
@content;
}
}
@mixin tablet-styles {
@media (max-width: 768px) {
@content;
}
}
@mixin mobile-l-styles {
@media (max-width: 425px) {
@content;
}
}
@mixin mobile-m-styles {
@media (max-width: 375px) {
@content;
}
}
@mixin mobile-s-styles {
@media (max-width: 320px) {
@content;
}
}
%section {
padding-top: (var.$gutter-base * 2);
padding-bottom: (var.$gutter-base * 2);
@include tablet-styles {
padding-top: (var.$gutter-base);
padding-bottom: (var.$gutter-base);
}
}
%wrap {
width: 80%;
margin-left: auto;
margin-right: auto;
@include tablet-styles {
width: 100%;
padding-left: math.div(var.$gutter-base, 2);
padding-right: math.div(var.$gutter-base, 2);
}
}
\ No newline at end of file
04-Challenge-Flex _Sass-20231119T215651Z-001/04-Challenge-Flex _Sass/starter-files/css/abstracts/_variables.scss 0 → 100644
+ 24
- 0
View file @ ebc736d6
@use 'sass:math';
@function rem-calc($size) {
@return (math.div($size, 16)) * 1rem;
}
// Font settings
$font-family-base: 'Open Sans', sans-serif;
$line-height-base: 1.5;
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-size-small: 12px;
// Size settings
$gutter-base: rem-calc(30);
// Color settings
$text-color-base: #000;
$text-color-primary: #fff;
$background-color-base: #FFF;
04-Challenge-Flex _Sass-20231119T215651Z-001/04-Challenge-Flex _Sass/starter-files/css/components/_content.scss 0 → 100644
+ 68
- 0
View file @ ebc736d6
@use "../abstracts/variables" as var;
@use "../abstracts/mixins" as mix;
@use "sass:math";
.main-content {
width: 80%;
margin-left: auto;
margin-right: 0;
@include mix.tablet-styles {
width: 100%;
}
.content-inner {
width: 100%;
display: flex;
flex-wrap: wrap;
.container {
flex-basis: 33.333%;
aspect-ratio: 1;
position: relative;
@include mix.tablet-styles {
flex-basis: 50%;
}
@include mix.mobile-l-styles {
flex-basis: 100%;
}
img {
width: 100%;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: var.$text-color-primary;
}
&:hover .overlay {
opacity: 1;
cursor: pointer;
}
.text {
color: var.$text-color-base;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
border-bottom: 1px solid var.$text-color-base;
border-top: 1px solid var.$text-color-base;
padding: math.div(var.$gutter-base, 2);
}
}
}
}
04-Challenge-Flex _Sass-20231119T215651Z-001/04-Challenge-Flex _Sass/starter-files/css/components/_index.scss 0 → 100644
+ 2
- 0
View file @ ebc736d6
@forward "./menu";
@forward "./content";
\ No newline at end of file
04-Challenge-Flex _Sass-20231119T215651Z-001/04-Challenge-Flex _Sass/starter-files/css/components/_menu.scss 0 → 100644
+ 103
- 0
View file @ ebc736d6
@use "../abstracts/variables" as var;
@use "../abstracts/mixins" as mix;
@use "sass:math";
.navbar {
@extend %section;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 20%;
@include mix.tablet-styles {
position: static;
width: 100%;
}
.navbar-inner {
@extend %wrap;
@include mix.tablet-styles {
display: flex;
justify-content: space-between;
width: 100%;
}
.hamburger {
display: none;
}
@include mix.tablet-styles {
.hamburger {
display: block;
cursor: pointer;
border: 1px solid var.$text-color-base;
padding: math.div(var.$gutter-base, 5);
.line {
width: var.$gutter-base;
height: math.div(var.$gutter-base, 10);
background: var.$text-color-base;
margin: 6px 0;
}
}
}
.logo {
display: block;
margin-bottom: var.$gutter-base * 2;
@include mix.tablet-styles {
margin: 0;
align-self: center;
}
}
ul {
list-style-type: none;
padding-left: 0;
@include mix.tablet-styles {
display: none;
}
li {
&:not(:last-child) {
margin-bottom: var.$gutter-base;
}
}
a {
text-decoration: none;
color: var.$text-color-base;
&:hover {
text-decoration: underline;
}
}
}
.text-bottom {
margin-top: var.$gutter-base * 8;
font-size: var.$font-size-small;
@include mix.tablet-styles {
display: none;
}
p {
margin: 0;
}
.bold {
font-weight: var.$font-weight-bold;
a {
text-decoration: none;
color: var.$text-color-base;
}
}
}
}
}
04-Challenge-Flex _Sass-20231119T215651Z-001/04-Challenge-Flex _Sass/starter-files/css/core/_common-elements.scss 0 → 100644
+ 17
- 0
View file @ ebc736d6
@use "../abstracts/variables" as var;
@use "sass:math";
body {
font-family: var.$font-family-base;
font-weight: var.$font-weight-normal;
line-height: var.$line-height-base;
color: var.$text-color-base;
box-sizing: border-box;
}
h1,
h2,
h3 {
margin-bottom: math.div(var.$gutter-base, 2);
font-weight: var.$font-weight-bold;
}
\ No newline at end of file
04-Challenge-Flex _Sass-20231119T215651Z-001/04-Challenge-Flex _Sass/starter-files/css/core/_custom-font.scss 0 → 100644
+ 1
- 0
View file @ ebc736d6
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
\ No newline at end of file
04-Challenge-Flex _Sass-20231119T215651Z-001/04-Challenge-Flex _Sass/starter-files/css/core/_index.scss 0 → 100644
+ 3
- 0
View file @ ebc736d6
@forward "./reboot";
@forward "./common-elements";
@forward "./custom-font";
\ No newline at end of file
04-Challenge-Flex _Sass-20231119T215651Z-001/04-Challenge-Flex _Sass/starter-files/css/core/_reboot.scss 0 → 100644
+ 14
- 0
View file @ ebc736d6
* { box-sizing: border-box; }
body { margin: 0; }
h1,
h2,
h3,
p,
ul { margin-top: 0; }
img {
display: block;
max-width: 100%;
}
\ No newline at end of file
04-Challenge-Flex _Sass-20231119T215651Z-001/04-Challenge-Flex _Sass/starter-files/css/main.css 0 → 100644
+ 208
- 0
View file @ ebc736d6
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");
* {
box-sizing: border-box;
}
body {
margin: 0;
}
h1,
h2,
h3,
p,
ul {
margin-top: 0;
}
img {
display: block;
max-width: 100%;
}
body {
font-family: "Open Sans", sans-serif;
font-weight: 400;
line-height: 1.5;
color: #000;
box-sizing: border-box;
}
h1,
h2,
h3 {
margin-bottom: 0.9375rem;
font-weight: 700;
}
.navbar {
padding-top: 3.75rem;
padding-bottom: 3.75rem;
}
@media (max-width: 768px) {
.navbar {
padding-top: 1.875rem;
padding-bottom: 1.875rem;
}
}
.navbar .navbar-inner {
width: 80%;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 768px) {
.navbar .navbar-inner {
width: 100%;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
}
.navbar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 20%;
}
@media (max-width: 768px) {
.navbar {
position: static;
width: 100%;
}
}
@media (max-width: 768px) {
.navbar .navbar-inner {
display: flex;
justify-content: space-between;
width: 100%;
}
}
.navbar .navbar-inner .hamburger {
display: none;
}
@media (max-width: 768px) {
.navbar .navbar-inner .hamburger {
display: block;
cursor: pointer;
border: 1px solid #000;
padding: 0.375rem;
}
.navbar .navbar-inner .hamburger .line {
width: 1.875rem;
height: 0.1875rem;
background: #000;
margin: 6px 0;
}
}
.navbar .navbar-inner .logo {
display: block;
margin-bottom: 3.75rem;
}
@media (max-width: 768px) {
.navbar .navbar-inner .logo {
margin: 0;
align-self: center;
}
}
.navbar .navbar-inner ul {
list-style-type: none;
padding-left: 0;
}
@media (max-width: 768px) {
.navbar .navbar-inner ul {
display: none;
}
}
.navbar .navbar-inner ul li:not(:last-child) {
margin-bottom: 1.875rem;
}
.navbar .navbar-inner ul a {
text-decoration: none;
color: #000;
}
.navbar .navbar-inner ul a:hover {
text-decoration: underline;
}
.navbar .navbar-inner .text-bottom {
margin-top: 15rem;
font-size: 12px;
}
@media (max-width: 768px) {
.navbar .navbar-inner .text-bottom {
display: none;
}
}
.navbar .navbar-inner .text-bottom p {
margin: 0;
}
.navbar .navbar-inner .text-bottom .bold {
font-weight: 700;
}
.navbar .navbar-inner .text-bottom .bold a {
text-decoration: none;
color: #000;
}
.main-content {
width: 80%;
margin-left: auto;
margin-right: 0;
}
@media (max-width: 768px) {
.main-content {
width: 100%;
}
}
.main-content .content-inner {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.main-content .content-inner .container {
flex-basis: 33.333%;
aspect-ratio: 1;
position: relative;
}
@media (max-width: 768px) {
.main-content .content-inner .container {
flex-basis: 50%;
}
}
@media (max-width: 425px) {
.main-content .content-inner .container {
flex-basis: 100%;
}
}
.main-content .content-inner .container img {
width: 100%;
}
.main-content .content-inner .container .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #fff;
}
.main-content .content-inner .container:hover .overlay {
opacity: 1;
cursor: pointer;
}
.main-content .content-inner .container .text {
color: #000;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding: 0.9375rem;
}/*# sourceMappingURL=main.css.map */
\ No newline at end of file
04-Challenge-Flex _Sass-20231119T215651Z-001/04-Challenge-Flex _Sass/starter-files/css/main.css.map 0 → 100644
+ 1
- 0
View file @ ebc736d6
{"version":3,"sources":["core/_custom-font.scss","core/_reboot.scss","main.css","core/_common-elements.scss","abstracts/_variables.scss","abstracts/_mixins.scss","components/_menu.scss","components/_content.scss"],"names":[],"mappings":"AAAQ,2FAAA;ACAR;EAAI,sBAAA;ACGJ;;ADDA;EAAO,SAAA;ACKP;;ADHA;;;;;EAIK,aAAA;ACOL;;ADLA;EACE,cAAA;EACA,eAAA;ACQF;;ACjBA;EACE,oCCG2B;EDF3B,gBCM2B;EDL3B,gBCG2B;EDF3B,WCa2B;EDZ3B,sBAAA;ADoBF;;ACjBA;;;EAGE,wBAAA;EACA,gBCH2B;AFuB7B;;AGWA;EACE,oBAAA;EACA,uBAAA;AHRF;AGjBE;EAuBF;IAKI,qBAAA;IACA,wBAAA;EHPF;AACF;;AGWA;EACE,UAAA;EACA,iBAAA;EACA,kBAAA;AHRF;AG7BE;EAkCF;IAMI,WAAA;IACA,uBAAA;IACA,wBAAA;EHPF;AACF;;AIvDA;EAEE,eAAA;EACA,MAAA;EACA,OAAA;EACA,YAAA;EACA,UAAA;AJyDF;AG5CE;ECnBF;IASI,gBAAA;IACA,WAAA;EJ0DF;AACF;AGlDE;ECNA;IAII,aAAA;IACA,8BAAA;IACA,WAAA;EJwDJ;AACF;AItDI;EACE,aAAA;AJwDN;AG5DE;ECQI;IACE,cAAA;IACA,eAAA;IACA,sBAAA;IACA,iBAAA;EJuDN;EIrDM;IACE,eFrBmB;IEsBnB,iBAAA;IACA,gBFpBmB;IEqBnB,aAAA;EJuDR;AACF;AInDI;EACE,cAAA;EACA,sBAAA;AJqDN;AG9EE;ECuBE;IAKI,SAAA;IACA,kBAAA;EJsDN;AACF;AInDI;EACE,qBAAA;EACA,eAAA;AJqDN;AGxFE;ECiCE;IAKI,aAAA;EJsDN;AACF;AInDQ;EACE,uBFjDmB;AFsG7B;AIjDM;EACE,qBAAA;EACA,WFpDqB;AFuG7B;AIjDQ;EACE,0BAAA;AJmDV;AI9CI;EACE,iBAAA;EACA,eFpEuB;AFoH7B;AG3GE;ECyDE;IAKI,aAAA;EJiDN;AACF;AI/CM;EACE,SAAA;AJiDR;AI9CM;EACE,gBFjFqB;AFiI7B;AI9CQ;EACE,qBAAA;EACA,WF7EmB;AF6H7B;;AK7IA;EACE,UAAA;EACA,iBAAA;EACA,eAAA;ALgJF;AGhIE;EEnBF;IAMI,WAAA;ELiJF;AACF;AK/IE;EACE,WAAA;EACA,aAAA;EACA,eAAA;ALiJJ;AK/II;EACE,mBAAA;EACA,eAAA;EACA,kBAAA;ALiJN;AG/IE;EELE;IAMI,eAAA;ELkJN;AACF;AG9IE;EEXE;IAUI,gBAAA;ELmJN;AACF;AKjJM;EACE,WAAA;ALmJR;AKhJM;EACE,kBAAA;EACA,MAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,YAAA;EACA,WAAA;EACA,UAAA;EACA,qBAAA;EACA,sBHxBqB;AF0K7B;AK/IM;EACE,UAAA;EACA,eAAA;ALiJR;AK9IM;EACE,WHlCqB;EGmCrB,eAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,kBAAA;EACA,6BAAA;EACA,0BAAA;EACA,kBAAA;ALgJR","file":"main.css"}
\ No newline at end of file
04-Challenge-Flex _Sass-20231119T215651Z-001/04-Challenge-Flex _Sass/starter-files/css/main.scss 0 → 100644
+ 5
- 0
View file @ ebc736d6
// global styles
@use 'core';
// components styles
@use 'components';
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment