-
-
-
-
+
+
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/public/images/gradient-palette-icon.png b/public/images/gradient-palette-icon.png
deleted file mode 100644
index 64dbe08..0000000
Binary files a/public/images/gradient-palette-icon.png and /dev/null differ
diff --git a/public/images/logo.png b/public/images/logo.png
index 07f8b2c..7c1b76c 100644
Binary files a/public/images/logo.png and b/public/images/logo.png differ
diff --git a/public/images/logo2.png b/public/images/logo2.png
deleted file mode 100644
index 21e164c..0000000
Binary files a/public/images/logo2.png and /dev/null differ
diff --git a/public/images/title_logo.png b/public/images/title_logo.png
new file mode 100644
index 0000000..8f2e72c
Binary files /dev/null and b/public/images/title_logo.png differ
diff --git a/public/style/style.css b/public/style/style.css
index 9b961c1..52fdb30 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -1,240 +1,45 @@
-@import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");
* {
- margin: 0;
- padding: 0;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-html {
- font-size: 12px;
- scroll-behavior: smooth;
-}
-
-@media (min-width: 700px) {
- html {
- font-size: calc(10px + 0.5vw);
- }
-}
-
-/* width */
-::-webkit-scrollbar {
- width: 1px;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
- background: #000;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
- background: white;
-}
-
-/* Up and Down Button*/
-::-webkit-scrollbar-button {
- background-color: #000;
+ padding: 0%;
+ margin: 0%;
}
body {
- background-color: #000000;
- font-family: 'Lora', serif;
+ background-color: #ffffff;
}
header {
- display: -webkit-box;
- display: -ms-flexbox;
+ border-bottom: 1px solid rgb(238, 238, 238);
+ height: 85px;
display: flex;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 1% 1%;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 15px;
}
-
-header img {
- width: 10vw;
- height: auto;
+header #logo img {
+ height: 70px;
}
-
-header h2 {
+header #social_btn {
+ display: flex;
+ gap: 15px;
+}
+header #social_btn .insta_btn {
+ font-size: 12px;
+ padding: 10px 20px;
color: #ffffff;
- padding-right: 1%;
- font-weight: 100;
+ background-color: rgb(3, 3, 3);
}
-
-#navigator {
- background-color: rgba(255, 255, 255, 0.088);
- position: fixed;
- height: 50%;
- right: 3vw;
- width: 10px;
- bottom: 17%;
- border-radius: 50px;
- padding: 2px 2px 2px 2px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- z-index: 9000;
+header #social_btn .insta_btn span {
+ margin-left: 5px;
}
-
-#navigator a .nav_btn {
- margin: 10px 0;
- width: 30px;
- height: 10vh;
+header #social_btn .github_btn {
+ font-size: 32px;
+ background-color: transparent;
+}
+header #social_btn button {
border-radius: 50px;
border: none;
outline: none;
- cursor: pointer;
-}
-
-#navigator a .nav_btn:hover {
- color: white;
-}
-
-#navigator a .upward {
- background: -webkit-gradient(linear, left top, left bottom, from(#CD521D), to(#ff986c));
- background: linear-gradient(to bottom, #CD521D, #ff986c);
}
-
-#navigator a .downward {
- background: -webkit-gradient(linear, left top, left bottom, from(#ff986c), to(#CD521D));
- background: linear-gradient(to bottom, #ff986c, #CD521D);
-}
-
-.copy_div {
- width: 100vw;
- height: 100vh;
- z-index: 9999;
- position: fixed;
- display: none;
-}
-
-.copy_div .copy_msg {
- position: fixed;
- bottom: -50vh;
- z-index: 9999;
- background-color: #6aef50;
- padding: 5vh 5vw 5vh 5vw;
- width: 100%;
- height: auto;
- font-size: 1.5rem;
- color: white;
- text-align: center;
- line-height: 3rem;
- border-radius: 30px 30px 0px 0px;
-}
-
-.container {
- width: 85vw;
- height: 100%;
- margin-top: 2%;
- margin-left: 3vw;
-}
-
-.container .palettes {
- margin-bottom: 10%;
- width: 100%;
- height: 70vh;
- display: -ms-grid;
- display: grid;
- -ms-grid-columns: (1fr)[4];
- grid-template-columns: repeat(4, 1fr);
- grid-gap: 2vw;
-}
-
-.container .palettes .box {
- border-radius: 50px;
- font-size: 0px;
- -webkit-transition: 350ms;
- transition: 350ms;
+header #social_btn button:hover {
cursor: pointer;
-}
-
-.container .palettes .box:hover {
- -webkit-transform: scaleY(1.1);
- transform: scaleY(1.1);
-}
-
-.container .palettes .horizontal1, .container .palettes .horizontal2 {
- -ms-grid-column: 1;
- -ms-grid-column-span: 2;
- grid-column: 1/ span 2;
-}
-
-.container .palettes .vertical1 {
- -ms-grid-column: 3;
- grid-column: 3;
- -ms-grid-row: 1;
- -ms-grid-row-span: 2;
- grid-row: 1/ span 2;
-}
-
-.container .palettes .vertical2 {
- -ms-grid-column: 4;
- grid-column: 4;
- -ms-grid-row: 1;
- -ms-grid-row-span: 2;
- grid-row: 1/ span 2;
-}
-
-@media all and (max-width: 850px) {
- header img {
- width: 15vw;
- height: auto;
- }
-}
-
-@media all and (max-width: 600px) {
- #navigator {
- right: 5vw;
- }
- .container .palettes {
- display: -ms-grid;
- display: grid;
- -ms-grid-columns: (1fr)[1];
- grid-template-columns: repeat(1, 1fr);
- }
- .container .palettes .vertical1 {
- -ms-grid-column: 1;
- grid-column: 1;
- -ms-grid-row: 1;
- grid-row: 1;
- }
- .container .palettes .vertical2 {
- -ms-grid-column: 1;
- grid-column: 1;
- -ms-grid-row: 2;
- grid-row: 2;
- }
-}
-
-@media all and (max-width: 450px) {
- header {
- padding: 3% 3%;
- }
- header img {
- width: 17vw;
- height: auto;
- }
- #navigator {
- right: 3vw;
- }
- #navigator a .nav_btn {
- width: 20px;
- }
-}
-/*# sourceMappingURL=style.css.map */
\ No newline at end of file
+}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/public/style/style.css.map b/public/style/style.css.map
index 6b26843..078116c 100644
--- a/public/style/style.css.map
+++ b/public/style/style.css.map
@@ -1,9 +1 @@
-{
- "version": 3,
- "mappings": "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",
- "sources": [
- "style.scss"
- ],
- "names": [],
- "file": "style.css"
-}
\ No newline at end of file
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,UAAA;ACCJ;;ADEA;EACI,yBAAA;ACCJ;;ADEA;EACI,2CAAA;EACA,YAAA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,eAAA;ACCJ;ADCQ;EACI,YAAA;ACCZ;ADEI;EACI,aAAA;EACA,SAAA;ACAR;ADCQ;EACI,eAAA;EACA,kBAAA;EACA,cAAA;EACA,8BAAA;ACCZ;ADAY;EACI,gBAAA;ACEhB;ADCQ;EACI,eAAA;EACA,6BAAA;ACCZ;ADCQ;EACI,mBAAA;EACA,YAAA;EACA,aAAA;ACCZ;ADAY;EACI,eAAA;ACEhB","file":"style.css"}
\ No newline at end of file
diff --git a/public/style/style.scss b/public/style/style.scss
index 55bca2f..49b327d 100644
--- a/public/style/style.scss
+++ b/public/style/style.scss
@@ -1,210 +1,47 @@
-@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
-
-@mixin flex($jus: center, $alg: center){
- display: flex;
- justify-content: $jus;
- align-items: $alg;
-}
-
-@mixin grid($item){
- display: grid;
- grid-template-columns: repeat($item, 1fr);
-}
-
-@mixin dimension($ln, $hg){
- width: $ln;
- height: $hg;
-}
-
-
*{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-html {
- font-size: 12px;
- @media (min-width: 700px) {
- font-size: calc(10px + 0.5vw);
- }
- scroll-behavior: smooth;
+ padding: 0%;
+ margin: 0%;
}
-/* width */
-::-webkit-scrollbar {
- width: 1px;
- }
-
- /* Track */
- ::-webkit-scrollbar-track {
- background: #000;
- }
-
-/* Handle */
-::-webkit-scrollbar-thumb {
- background: white;
-}
-
-
-/* Up and Down Button*/
-::-webkit-scrollbar-button{
- background-color: #000;
-}
-
-
body{
- background-color: #000000;
- font-family: 'Lora', serif;
+ background-color: #ffffff;
}
header{
- @include flex(space-between, center);
- img{
- @include dimension(10vw, auto)
- }
- h2{
- color: #ffffff;
- padding-right:1%;
- font-weight: 100;
- }
- // border: 1px solid green;
- padding: 1% 1%;
-}
-
-
-#navigator{
- background-color: rgba(255, 255, 255, 0.088);
- position: fixed;
- height: 50%;
- right: 3vw;
- width: 10px;
- bottom: 17%;
- border-radius:50px;
- padding:2px 2px 2px 2px;
- @include flex();
- flex-direction:column;
- z-index: 9000;
- a{
- .nav_btn{
- margin: 10px 0;
- width:30px;
- height: 10vh;
- border-radius: 50px;
- border: none;
- outline: none;
- cursor: pointer;
- &:hover{
- color: white;
- }
+ border-bottom: 1px solid rgb(238, 238, 238);
+ height: 85px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 15px;
+ #logo{
+ img{
+ height: 70px;
+ }
+ }
+ #social_btn{
+ display: flex;
+ gap: 15px;
+ .insta_btn{
+ font-size: 12px;
+ padding: 10px 20px;
+ color: #ffffff;
+ background-color: rgb(3, 3, 3);
+ span{
+ margin-left: 5px;
}
- .upward{
- background:linear-gradient(to bottom, #CD521D, #ff986c);
}
- .downward{
- background:linear-gradient(to bottom, #ff986c, #CD521D);
+ .github_btn{
+ font-size: 32px;
+ background-color: transparent;
}
-
- }
-}
-
-.copy_div{
- @include dimension(100vw, 100vh);
- z-index:9999;
- position: fixed;
- display: none;
- .copy_msg{
- position: fixed;
- bottom: -50vh;
- z-index: 9999;
- background-color: rgb(106, 239, 80);
- padding:5vh 5vw 5vh 5vw;
- @include dimension(100%, auto);
- font-size:1.5rem;
- color: white;
- text-align: center;
- line-height: 3rem;
- border-radius:30px 30px 0px 0px;
-
- }
-}
-
-
-.container{
- @include dimension(85vw, 100%);
- margin-top: 2%;
- margin-left: 3vw;
- .palettes{
- margin-bottom: 10%;
- @include dimension(100%, 70vh);
- @include grid(4);
- grid-gap: 2vw;
- // background-color: #fff;
- .box{
- // border: 1px solid blue;
+ button{
border-radius: 50px;
- font-size: 0px;
- transition: 350ms;
- cursor: pointer;
+ border: none;
+ outline: none;
&:hover{
- transform: scaleY(1.1);
+ cursor: pointer;
}
- }
- .horizontal1, .horizontal2{
- grid-column: 1/ span 2;
- }
- .vertical1{
- grid-column: 3;
- grid-row: 1/ span 2;
- }
- .vertical2{
- grid-column: 4;
- grid-row: 1/ span 2;
- }
- }
-}
-
-
-@media all and (max-width:850px){
- header{
- img{
- @include dimension(15vw, auto)
- }
- }
-}
-
-@media all and (max-width:600px){
- #navigator{
- right: 5vw;
- }
- .container{
- .palettes{
- @include grid(1);
- .vertical1{
- grid-column: 1;
- grid-row:1;
- }
- .vertical2{
- grid-column: 1;
- grid-row: 2;
- }
- }
- }
-}
-
-@media all and (max-width:450px){
- header{
- img{
- @include dimension(17vw, auto)
- }
- padding: 3% 3%;
- }
- #navigator{
- right: 3vw;
- a{
- .nav_btn{
- width:20px;
- }
- }
+ }
}
}
\ No newline at end of file
-