summaryrefslogtreecommitdiff
path: root/assets/css/main.css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/main.css')
-rw-r--r--assets/css/main.css780
1 files changed, 780 insertions, 0 deletions
diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..e9d3953
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,780 @@
+:root {
+ --main-color: rgba(240, 134, 62);
+ --secondary-color: rgba(24, 26, 27);
+ --link-color: rgba(39, 130, 248);
+ --bg-color: rgba(39, 42, 44, 0.5);
+ --gradient: linear-gradient(to bottom right, var(--main-color), var(--secondary-color));
+
+ --title-font-size: 4rem;
+ --body-font-size: 2rem;
+ --code-font-size: 1.3rem;
+ --shortdescription-font-size: 1.3rem;
+
+ --button-width: 280px;
+ --button-height: 100px;
+ --button-border-radius: 20px 20px 20px;
+}
+
+::-webkit-scrollbar {
+ width: 5px;
+}
+::-webkit-scrollbar-thumb {
+ background-color: var(--main-color);
+ border-radius: 10px;
+}
+::-webkit-scrollbar-track {
+ background-color: var(--secondary-color);
+}
+::selection {
+ background: var(--main-color);
+}
+html {
+ scroll-behavior: smooth;
+}
+body {
+ background-color: var(--secondary-color);
+ min-height: 100vh;
+ color: white;
+}
+a {
+ color: var(--link-color);
+}
+p {
+ font-size: 1.3rem;
+}
+body {
+ margin: 0;
+ padding: 0;
+}
+
+#header {
+ top: 0;
+ left: 0;
+ position: fixed;
+ width: 100%;
+ height: 100vh;
+ z-index: 9999;
+ pointer-events: none;
+}
+#header .menuIcon {
+ margin-top: 145%;
+ margin-left: 80%;
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ gap: 1rem;
+ width: 120px;
+ height: 120px;
+ background-color: var(--main-color);
+ box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.63);
+ border-radius: 10rem;
+ transition: width 0.5s, height 0.5s, margin-top 0.5s, margin-left 0.5s, gap 0.5s, opacity 0.5s;
+ z-index: 99999;
+ pointer-events: all;
+}
+#header .menuIcon:active {
+ margin-top: calc(145% - 15px);
+ margin-left: calc(80% - 15px);
+ width: 150px;
+ height: 150px;
+ gap: 1.5rem;
+}
+#header .menuIcon div {
+ margin-top: auto;
+ margin-bottom: auto;
+ height: 1.3rem;
+ width: 1.3rem;
+ border-radius: 20rem;
+ background-color: var(--secondary-color);
+}
+#header .menulist {
+ text-align: center;
+ background-color: var(--secondary-color);
+ /* * Display none here */
+ display: none;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ justify-content: center;
+ gap: 4rem;
+ opacity: 0;
+ transition: opacity 0.5s;
+ pointer-events: all;
+}
+#header .menulist img {
+ width: 80%;
+ height: auto;
+ margin-left: auto;
+ margin-right: auto;
+}
+#header .menulist a {
+ margin-left: auto;
+ margin-right: auto;
+ color: white;
+ width: 90%;
+ font-size: 3rem;
+ font-weight: bold;
+ border: none;
+ border-bottom: 2px solid var(--main-color);
+ text-decoration: none;
+ transition: width 0.5s, border 0.5s;
+}
+#header .menulist a:hover {
+ width: 100%;
+ border-bottom: 5px solid var(--main-color);
+}
+#header .menulist .close {
+ margin-left: auto;
+ margin-right: auto;
+ width: 120px;
+ height: 120px;
+ border-radius: 12rem;
+ text-align: center;
+}
+#header .menulist .close p {
+ font-size: 10rem;
+ font-family: Arial, Halvetica, sans-serif;
+ color: var(--main-color);
+ transition: font-size 0.5s;
+}
+
+/* Mobile */
+@media screen and (max-width: 1000px) {
+ /* Main */
+ :root {
+ --index-section-height: 80vh;
+ }
+
+ .code-toolbar {
+ font-size: 2rem;
+ }
+ h1 img {
+ width: 100px;
+ height: auto;
+ }
+ th {
+ font-size: 2rem;
+ }
+ td {
+ font-size: 2rem;
+ }
+ pre code {
+ font-size: 2rem;
+ }
+ p code {
+ font-size: 1rem;
+ padding: 3px;
+ background-color: var(--bg-color);
+ border-radius: 5px 5px 5px;
+ }
+ p a img {
+ width: 225px;
+ height: auto;
+ }
+ section {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+ table {}
+ th {
+ border: 1px solid lightgray;
+ }
+ td {
+ border: 1px solid lightgray;
+ }
+
+ #index {
+ margin: 0px;
+ padding: 0px;
+ width: 100%;
+ height: var(--index-section-height);
+ background-image: var(--gradient);
+ }
+ #index * {
+ text-align: center;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ #index .index {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 80%;
+ }
+ #index .index h1 {
+ margin-top: 20vh;
+ font-size: var(--title-font-size);
+ }
+ #index .index p {
+ text-align: center;
+ font-size: var(--body-font-size);
+ }
+ #index .index div {
+ display: flex;
+ flex-direction: row;
+ }
+ #index .index div button {
+ width: var(--button-width);
+ height: var(--button-height);
+ margin-top: 20px;
+ margin-left: 10px;
+ margin-right: 10px;
+ font-size: var(--body-font-size);
+ background-color: var(--main-color);
+ border: none;
+ border-radius: var(--button-border-radius);
+ color: white;
+ }
+
+ :root {
+ --workitem-border-radius: 25px 25px 25px;
+ }
+ #work {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+ #work * {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ #work h1 {
+ font-size: var(--title-font-size);
+ }
+ #work .workitems {
+ margin-bottom: 40px;
+ width: 100%;
+ font-size: var(--body-font-size);
+ display: flex;
+ flex-direction: column;
+ }
+ #work .workitems div {
+ width: 90%;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ background-color: var(--bg-color);
+ border-radius: var(--workitem-border-radius);
+ }
+ #work .workitems div * {
+ text-align: center;
+ }
+ #work .workitems div h3 {
+ font-size: calc(var(--title-font-size) - 1rem);
+ }
+ #work .workitems div ul {
+
+ }
+ #work .workitems div ul li {
+ font-size: var(--body-font-size);
+ margin: 0;
+ }
+
+ :root {}
+ #index-blog {
+ width: 100%;
+ background-image: var(--gradient);
+ }
+ #index-blog * {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ #index-blog h1 {
+ padding-top: 40px;
+ text-align: center;
+ font-size: calc(var(--title-font-size));
+ }
+ #index-blog button {
+ width: var(--button-width);
+ height: var(--button-height);
+ margin-bottom: 40px;
+ border: none;
+ color: white;
+ background-color: var(--main-color);
+ border-radius: var(--button-border-radius);
+ font-size: var(--body-font-size);
+ }
+ #index-blog .index-blog {
+ display: flex;
+ flex-direction: column;
+ }
+ #index-blog .index-blog * {
+ text-align: center;
+ }
+ #index-blog .index-blog div {
+ width: 90%;
+ margin-bottom: 40px;
+ background-color: var(--bg-color);
+ border-radius: var(--workitem-border-radius);
+ }
+ #index-blog .index-blog div h3 {
+ text-align: center;
+ font-size: var(--body-font-size);
+ }
+ #index-blog .index-blog div p {
+ margin: 40px;
+ font-size: var(--shortdescription-font-size);
+ }
+
+ #mywebsites {}
+ #mywebsites * {
+ text-align: center;
+ }
+ #mywebsites h1 {
+ font-size: var(--title-font-size);
+ text-align: center;
+ }
+ #mywebsites p {
+ font-size: calc(var(--shortdescription-font-size) + 0.5rem);
+ }
+ #mywebsites .websites {
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 40px;
+ padding-top: 40px;
+ width: 90%;
+ background-color: var(--bg-color);
+ border-radius: var(--workitem-border-radius);
+ display: flex;
+ flex-direction: column;
+ }
+ #mywebsites .websites * {
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 40px;
+ }
+ #mywebsites .websites img {
+ width: 90%;
+ }
+
+ :root{
+ --input-width: 40rem;
+ --input-height: 50px;
+ --textarea-height: 100px;
+ }
+ #contact {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ }
+ #contact h1 {
+ font-size: var(--title-font-size);
+ }
+ #contact .form {
+ display: flex;
+ flex-direction: column;
+ }
+ #contact .form * {
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 20px;
+ font-size: var(--body-font-size);
+ color: white;
+ }
+ #contact .form input {
+ height: var(--input-height);
+ width: var(--input-width);
+ color: white;
+ margin-bottom: 20px;
+ border: none;
+ border-bottom: 2px solid var(--main-color);
+ background-color: var(--secondary-color);
+ transition: width 0.5s;
+ }
+ #contact .form textarea {
+ height: var(--textarea-height);
+ width: var(--input-width);
+ border: none;
+ border-bottom: 2px solid var(--main-color);
+ background-color: var(--secondary-color);
+ transition: height 0.5s;
+ }
+ #contact .form button {
+ width: var(--button-width);
+ height: var(--button-height);
+ border: none;
+ color: white;
+ background-color: var(--main-color);
+ border-radius: var(--button-border-radius);
+ }
+ #contact .form input:focus {
+ width: calc(var(--input-width) + 10rem);
+ }
+ #contact .form textarea:focus {
+ height: calc(var(--textarea-height) * 3);
+ }
+
+ /* About */
+ :root {
+ --image-size: 200px;
+ }
+
+ #about {}
+ #about div {
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ }
+ #about div * {}
+ #about div h1 {
+ font-size: var(--title-font-size);
+ }
+ #about div img {
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 20px;
+ width: var(--image-size);
+ height: var(--image-size);
+ border-radius: 50%;
+ }
+ #about div p {
+ font-size: var(--shortdescription-font-size);
+ }
+
+ /* Blog */
+ :root {
+ --bloglistitem-width: 85%;
+ --blogtitle-font-size: 2.5rem;
+ }
+ #blog {
+ width: 100%;
+ }
+ #blog h1 {
+ font-size: var(--title-font-size);
+ margin-left: calc((100% - var(--bloglistitem-width)) / 2);
+ }
+ #blog div {
+ display: flex;
+ flex-direction: column;
+ }
+ #blog div .bloglistitem {
+ height: auto;
+ width: var(--bloglistitem-width);
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ padding: 20px;
+ cursor: pointer;
+ background-color: var(--bg-color);
+ border-radius: 10px 10px 10px;
+ }
+ #blog div .bloglistitem h2 {
+ font-size: var(--blogtitle-font-size);
+ margin-top: 10px;
+ margin-left: 10px;
+ }
+ #blog div .bloglistitem p {
+ font-size: var(--shortdescription-font-size);
+ margin-left: 10px;
+ }
+ #blog div .bloglistitem button {
+ width: var(--button-width);
+ height: var(--button-height);
+ border: none;
+ font-size: var(--blogtitle-font-size);
+ color: white;
+ background-color: var(--main-color);
+ border-radius: var(--button-border-radius);
+ }
+ #blogitem div {
+ margin: 25px;
+ }
+}
+
+/* Desktop */
+@media screen and (min-width: 1000px) {
+ body button {
+ cursor: pointer;
+ }
+ :root {
+ --button-size-offset: 20px;
+ }
+ #index {
+ margin: 0px;
+ padding: 0px;
+ width: 100%;
+ height: 80vh;
+ background-image: var(--gradient);
+ }
+ #index * {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ #index .index {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 80%;
+ }
+ #index .index h1 {
+ font-size: calc(var(--title-font-size) - 0.5rem);
+ }
+ #index .index p {
+ font-size: calc(var(--body-font-size) - 0.5rem);
+ }
+ #index .index div {
+ display: flex;
+ flex-direction: row;
+ }
+ #index .index div button {
+ width: calc(var(--button-width) - var(--button-size-offset));
+ height: calc(var(--button-height) - var(--button-size-offset));
+ margin-top: 20px;
+ margin-left: 10px;
+ margin-right: 10px;
+ font-size: var(--body-font-size);
+ background-color: var(--main-color);
+ border: none;
+ border-radius: var(--button-border-radius);
+ color: white;
+ }
+
+ /* Work */
+ :root {
+ --workitem-border-radius: 25px 25px 25px;
+ }
+ #work {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+ #work * {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ #work h1 {
+ font-size: var(--title-font-size);
+ }
+ #work .workitems {
+ margin-bottom: 40px;
+ width: 100%;
+ font-size: var(--body-font-size);
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ }
+ #work .workitems div {
+ width: 45%;
+ margin-left: 20px;
+ margin-right: 20px;
+ background-color: var(--bg-color);
+ border-radius: var(--workitem-border-radius);
+ }
+ #work .workitems div * {
+ text-align: center;
+ }
+ #work .workitems div h3 {
+ font-size: var(--body-font-size);
+ }
+ #work .workitems div ul {}
+ #work .workitems div ul li {
+ font-size: var(--shortdescription-font-size);
+ margin: 0;
+ }
+
+ /* Index Blog */
+ #index-blog {
+ width: 100%;
+ background-image: var(--gradient);
+ }
+ #index-blog * {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ #index-blog h1 {
+ padding-top: 40px;
+ text-align: center;
+ font-size: calc(var(--title-font-size));
+ }
+ #index-blog button {
+ width: calc(var(--button-width) - var(--button-size-offset));
+ height: calc(var(--button-height) - var(--button-size-offset));
+ margin-bottom: 40px;
+ border: none;
+ color: white;
+ background-color: var(--main-color);
+ border-radius: var(--button-border-radius);
+ font-size: var(--body-font-size);
+ }
+ #index-blog .index-blog {
+ display: flex;
+ flex-direction: row;
+ }
+ #index-blog .index-blog * {
+ text-align: center;
+ }
+ #index-blog .index-blog div {
+ width: 45%;
+ margin-bottom: 40px;
+ background-color: var(--bg-color);
+ border-radius: var(--workitem-border-radius);
+ }
+ #index-blog .index-blog div h3 {
+ text-align: center;
+ font-size: var(--body-font-size);
+ }
+ #index-blog .index-blog div p {
+ margin: 40px;
+ font-size: var(--shortdescription-font-size);
+ }
+
+ /* Mywebsites */
+ #mywebsites {
+ text-align: center;
+ }
+ #mywebsites h1 {
+ font-size: var(--title-font-size);
+ }
+ #mywebsites p {
+ font-size: var(--shortdescription-font-size);
+ }
+ #mywebsites .websites {
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ }
+ #mywebsites .websites img {
+ width: 40%;
+ margin-left: 20px;
+ margin-right: 20px;
+ cursor: pointer;
+ }
+
+ /* Contact*/
+ :root {
+ --input-width: 40rem;
+ --input-height: 50px;
+ --textarea-height: 100px;
+ }
+ #contact {}
+ #contact {
+ text-align: center;
+ }
+ #contact h1 {
+ font-size: var(--title-font-size);
+ }
+ #contact .form {}
+ #contact .form * {
+ font-size: var(--shortdescription-font-size);
+ }
+ #contact .form input {
+ height: var(--input-height);
+ width: var(--input-width);
+ color: white;
+ margin-bottom: 20px;
+ border: none;
+ border-bottom: 2px solid var(--main-color);
+ background-color: var(--secondary-color);
+ transition: width 0.5s;
+ }
+ #contact .form textarea {
+ height: var(--textarea-height);
+ width: var(--input-width);
+ border: none;
+ border-bottom: 2px solid var(--main-color);
+ background-color: var(--secondary-color);
+ transition: height 0.5s;
+ }
+ #contact .form button {
+ width: calc(var(--button-width) - var(--button-size-offset));
+ height: calc(var(--button-height) - var(--button-size-offset));
+ font-size: var(--body-font-size);
+ margin-top: 40px;
+ border: none;
+ color: white;
+ background-color: var(--main-color);
+ border-radius: var(--button-border-radius);
+ }
+ #contact .form input:focus {
+ width: calc(var(--input-width) + 10rem);
+ }
+ #contact .form textarea:focus {
+ height: calc(var(--textarea-height) * 3);
+ }
+
+ /* About */
+ :root {
+ --image-size: 200px;
+ }
+ #about {}
+ #about div {
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ }
+ #about div h1 {
+ font-size: var(--title-font-size);
+ }
+ #about div img {
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 20px;
+ width: var(--image-size);
+ height: var(--image-size);
+ }
+ #about div p {
+ font-size: var(--shortdescription-font-size);
+ }
+
+ :root {
+ --bloglistitem-width: calc(85%);
+ --blogtitle-font-size: 2.5rem;
+ }
+ #blog {
+ width: 100%;
+ }
+ #blog h1 {
+ font-size: var(--title-font-size);
+ margin-left: calc((100% - var(--bloglistitem-width)) / 2);
+ }
+ #blog div {
+ display: flex;
+ flex-direction: column;
+ }
+ #blog div .bloglistitem {
+ height: auto;
+ width: var(--bloglistitem-width);
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ padding: 20px;
+ cursor: pointer;
+ background-color: var(--bg-color);
+ border-radius: 10px 10px 10px;
+ }
+ #blog div .bloglistitem h2 {
+ font-size: var(--blogtitle-font-size);
+ margin-top: 10px;
+ margin-left: 10px;
+ }
+ #blog div .bloglistitem p {
+ font-size: var(--shortdescription-font-size);
+ margin-left: 10px;
+ }
+ #blog div .bloglistitem button {
+ width: calc(var(--button-width) - var(--button-size-offset));
+ height: calc(var(--button-height) - var(--button-size-offset));
+ border: none;
+ font-size: var(--body-font-size);
+ color: white;
+ background-color: var(--main-color);
+ border-radius: var(--button-border-radius);
+ }
+ #blogitem div {
+ margin: 25px;
+ }
+}
+
generated by cgit v1.2.3-70-g09d2 (git 2.52.0) at 2026-01-11 23:20:14 +0000