From d26ecb989f5e5b9e06b34c106a3d391fd2910524 Mon Sep 17 00:00:00 2001 From: Vidhu Kant Sharma Date: Tue, 20 Sep 2022 22:35:52 +0530 Subject: First commit --- static/scss/index.scss | 150 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 static/scss/index.scss (limited to 'static/scss/index.scss') diff --git a/static/scss/index.scss b/static/scss/index.scss new file mode 100644 index 0000000..d40b68b --- /dev/null +++ b/static/scss/index.scss @@ -0,0 +1,150 @@ +@import "footer"; +@import "roboto"; + +* { + // font-family: 'Source Code Pro', monospace; + font-family: 'Roboto', sans-serif; +} + +@mixin selection { + color: #ffffff; + background: #955ee6; +} +::selection {@include selection;} +::-moz-selection {@include selection;} + +body { + line-height: 1.5; + margin: 0; + padding: 0; + background-color: #232627; + color: #ffffff; +} + +.section { + width: 100vw; + height: auto; + p { + line-height: 2; + } +} + +#section-1 { + background-color: #56355D; + + // Indian flag theme + // color: #232627; + // background: linear-gradient(118deg, rgba(255,147,0,1) 0%, rgba(255,255,255,1) 50%, rgba(10,199,40,1) 100%); +} + +.img-l, .img-r { + max-width: 300px; + img { + max-width: 100%; + } + margin: auto; + text-align: center; +} + +a { + color: #00ff8c; +} + +.section-child { + box-sizing: border-box; + max-width: 1920px; + padding: 20px 25px 20px 25px; + width: 100%; + height: 100%; + margin: auto; +} + +img { + display: block; +} + +#image-and-links { + $width: 18rem; + width: $width; + margin: auto; + + img { + border-radius: 50%; + max-width: $width; + } + + #my-links { + list-style: none; + padding: 0; + display: flex; + // justify-content: space-between; + justify-content: center; + flex-wrap: wrap; + width: $width; + li { + margin: 5px; // only for justify-content: center; + font-size: 1.2rem; + } + a { + color: white; + // color: #232627; // Indian flag theme + } + } +} + +nav { + ul { + list-style: none; + padding: 0; + display: flex; + justify-content: center; + a { + margin: 0 0.3rem; + text-decoration: none; + padding: 2px 4px; + } + a.selected { + background-color: #00ff8c; + color: #232627; + } + } +} + +@media only screen and (min-width: 1300px) { + .section { + min-height: 100vh; + .section-child { + width: 95%; + min-height: 100vh; + display: flex; + align-items: center; + flex-direction: row-reverse; + justify-content: space-between; + } + } + $img-margin: 6rem; + .img-l { + margin-right: $img-margin; + margin-left: 0; + } + .img-r { + margin-left: $img-margin; + margin-right: 0; + } + #image-and-links { + margin-left: 4rem; + $width: 24rem; + width: $width; + + img { + max-width: $width; + } + + #my-links { + width: $width; + } + a { + font-size: 1.5rem; + } + } +} -- cgit v1.2.3