From 54787e2c29d51dfddf31efd2b6ef13b2089bd57a Mon Sep 17 00:00:00 2001 From: Minteck Date: Thu, 16 Jun 2022 14:34:06 +0200 Subject: Update thingy --- assets/common/css/common.css | 175 ++++++++++++++++++++++++++++++++++++++++ assets/common/css/container.css | 52 ++++++++++++ assets/common/css/fonts.css | 85 +++++++++++++++++++ 3 files changed, 312 insertions(+) create mode 100644 assets/common/css/common.css create mode 100644 assets/common/css/container.css create mode 100644 assets/common/css/fonts.css (limited to 'assets/common/css') diff --git a/assets/common/css/common.css b/assets/common/css/common.css new file mode 100644 index 0000000..a8b1e11 --- /dev/null +++ b/assets/common/css/common.css @@ -0,0 +1,175 @@ +html, body { + background-color: #222; + color: white; +} + +#intro-avatar { + width: 128px; + height: 128px; +} + +#intro-title { + margin: 0; +} + +#intro { + text-align: center; +} + +#social { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-column-gap: 10px; + padding: 25px 40px; +} + +.social-item { + padding: 10px; + border-radius: 10px; + background-color: #333; + text-align: center; + display: block; + text-decoration: none !important; + box-shadow: 0 0 20px rgba(0, 0, 0, .3); + transform: scale(1); + transition: transform 200ms; +} + +.social-item-icon { + margin-top: 5px; + filter: invert(1); + vertical-align: middle; + width: 48px; + height: 48px; +} + +.social-item-text { + font-size: 20px; + margin-top: 5px; + color: white; + text-decoration: none !important; +} + +.social-item:hover { + transform: scale(1.2); + z-index: 9; +} + +@media (max-width: 992px) { + #social { + grid-template-columns: repeat(3, 1fr) !important; + grid-row-gap: 10px; + } +} + +@media (max-width: 617px) { + #social { + display: none; + } + + #social-mobile-outer { + display: block; + } +} + +@media (min-width: 617px) { + #social { + display: grid; + } + + #social-mobile-outer { + display: none; + } +} + +.social-mobile-item { + padding: 10px; + border-radius: 10px; + background-color: #333; + display: block; + text-decoration: none !important; + box-shadow: 0 0 20px rgba(0, 0, 0, .3); + transition: background-color 200ms; + margin-bottom: 10px; +} + +.social-mobile-item:hover { + background-color: #444; +} + +.social-mobile-item-icon { + filter: invert(1); + width: 24px; + height: 24px; + vertical-align: middle; +} + +.social-mobile-item-text { + display: inline-block; + color: white; + text-decoration: none !important; + vertical-align: middle; + margin-left: 5px; +} + +#social-mobile-outer { + margin-top: 30px; +} + +#intro-ref { + margin: 0; +} + +#intro-ref-link { + color: white; + text-decoration: none; +} + +#intro-ref-link:hover { + text-decoration: underline; +} + +#footer { + text-align: center; +} + +#footer-hover-text { + display: none; +} + +#footer-hover-zone:hover #footer-hover-text { + display: inline; +} + +#footer-version, #footer-version-build, #footer-version-projects { + color: white; + text-decoration: none; +} + +#footer-version:hover, #footer-version-build:hover, #footer-version-projects:hover { + text-decoration: underline; +} + +#debug { + position: fixed; +} + +.link-icon { + vertical-align: middle; + width: 48px; + filter: invert(1); +} + +.link-text { + display: inline-block; + vertical-align: middle; + margin-left: 5px; + font-size: 20px; +} + +hr { + border-top: none; + border-left: none; + border-right: none; + border-bottom: 1px solid rgba(255, 255, 255, .25); +} \ No newline at end of file diff --git a/assets/common/css/container.css b/assets/common/css/container.css new file mode 100644 index 0000000..d447ad8 --- /dev/null +++ b/assets/common/css/container.css @@ -0,0 +1,52 @@ +.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { + padding-right: .75rem; + padding-left: .75rem; + margin-left: 0; + margin-right: 0; + width: calc(100% - 1.5rem); +} + +@media (min-width: 576px) { + .container, .container-sm { + max-width: 540px; + margin-right: auto; + margin-left: auto; + width: 100%; + } +} + +@media (min-width: 768px) { + .container, .container-md, .container-sm { + max-width: 720px; + margin-right: auto; + margin-left: auto; + width: 100%; + } +} + +@media (min-width: 992px) { + .container, .container-lg, .container-md, .container-sm { + max-width: 960px; + margin-right: auto; + margin-left: auto; + width: 100%; + } +} + +@media (min-width: 1200px) { + .container, .container-lg, .container-md, .container-sm, .container-xl { + max-width: 1140px; + margin-right: auto; + margin-left: auto; + width: 100%; + } +} + +@media (min-width: 1400px) { + .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { + max-width: 1320px; + margin-right: auto; + margin-left: auto; + width: 100%; + } +} \ No newline at end of file diff --git a/assets/common/css/fonts.css b/assets/common/css/fonts.css new file mode 100644 index 0000000..02dac67 --- /dev/null +++ b/assets/common/css/fonts.css @@ -0,0 +1,85 @@ +@font-face { + src: url("/assets/common/fonts/TitilliumWeb-Black.ttf"); + font-family: "Titillium Web"; + font-style: normal; + font-weight: 900; +} + +@font-face { + src: url("/assets/common/fonts/TitilliumWeb-Bold.ttf"); + font-family: "Titillium Web"; + font-style: normal; + font-weight: 700; +} + +@font-face { + src: url("/assets/common/fonts/TitilliumWeb-BoldItalic.ttf"); + font-family: "Titillium Web"; + font-style: italic; + font-weight: 700; +} + +@font-face { + src: url("/assets/common/fonts/TitilliumWeb-ExtraLight.ttf"); + font-family: "Titillium Web"; + font-style: normal; + font-weight: 200; +} + +@font-face { + src: url("/assets/common/fonts/TitilliumWeb-ExtraLightItalic.ttf"); + font-family: "Titillium Web"; + font-style: italic; + font-weight: 200; +} + +@font-face { + src: url("/assets/common/fonts/TitilliumWeb-Light.ttf"); + font-family: "Titillium Web"; + font-style: normal; + font-weight: 300; +} + +@font-face { + src: url("/assets/common/fonts/TitilliumWeb-LightItalic.ttf"); + font-family: "Titillium Web"; + font-style: italic; + font-weight: 300; +} + +@font-face { + src: url("/assets/common/fonts/TitilliumWeb-Regular.ttf"); + font-family: "Titillium Web"; + font-style: normal; + font-weight: 400; +} + +@font-face { + src: url("/assets/common/fonts/TitilliumWeb-Italic.ttf"); + font-family: "Titillium Web"; + font-style: italic; + font-weight: 400; +} + +@font-face { + src: url("/assets/common/fonts/TitilliumWeb-SemiBold.ttf"); + font-family: "Titillium Web"; + font-style: normal; + font-weight: 600; +} + +@font-face { + src: url("/assets/common/fonts/TitilliumWeb-SemiBold.ttf"); + font-family: "Titillium Web"; + font-style: italic; + font-weight: 600; +} + +html, body { + margin: 0; + font-family: "Titillium Web", sans-serif; +} + +* { + overflow-x: hidden; +} \ No newline at end of file -- cgit