FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Separate official website page

Browse Source
This commit is contained in:
Fat Snake
2023-12-28 17:50:26 +08:00
parent 81d6f0ac29
commit 0b8df09336
33 changed files with 125 additions and 980 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
src/assets/css/pages/home-framework.scss
View File

@@ -1,217 +0,0 @@
@use "@/assets/css/mixins" as mixins;
@use "@/assets/css/constants" as constants;
[data-component=home-framework] {
.nav {
display: flex;
position: fixed;
align-items: center;
z-index: 1;
width: 100%;
height: 70px;
background-color: constants.$origin-color;
border: {
bottom: {
width: 1px;
style: solid;
color: constants.$border-color;
}
}
animation: .5s ease both;
@include mixins.unique-keyframes {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
.logo {
padding: 0 40px;
.title {
font-size: 2.8em;
font-family: century gothic, texgyreadventor, stheiti, sans-serif;
}
}
nav {
display: flex;
justify-content: end;
flex: 1;
transition: {
property: all;
duration: .5s;
};
.menu {
padding: 0 30px;
.item {
display: inline-block;
position: relative;
font-size: 1.5em;
transition: {
property: all;
duration: .3s;
};
a {
padding: 5px 20px;
color: constants.$url-color;
}
}
.active {
border: {
bottom: {
width: 2px;
style: solid;
color: constants.$url-active-color;
};
};
}
.item:hover {
transform: translateY(-5px);
}
.item:hover .submenu {
display: block;
border: {
width: 1px;
color: constants.$border-color;
style: solid;
};
animation: 0.3s;
@include mixins.unique-keyframes {
0% {
transform: translateY(-10px);
opacity: 0;
}
}
}
.submenu {
display: none;
position: absolute;
width: 100%;
text-align: center;
background-color: constants.$origin-color;
overflow: hidden;
.item {
display: block;
font-size: 0.8em;
transition: all 0s;
a {
display: block;
padding: 8px 0;
}
}
.item:hover {
transform: none;
a {
background-color: constants.$focus-color !important;
}
}
.active {
font-weight: bold;
border: none;
}
}
}
.dropdown-menu-button {
display: none;
margin: 0 20px;
width: 45px;
height: 45px;
justify-content: center;
align-items: center;
border-radius: 6px;
}
.dropdown-menu-button.active {
background-color: transparentize(constants.$focus-color, 0.8);
border: {
width: 1px;
color: constants.$focus-color;
style: solid;
};
}
@media screen and (max-width: 900px) {
.menu {
display: none;
}
.dropdown-menu-button {
display: flex;
}
}
}
}
.dropdown-menu-content {
display: none;
@media screen and (max-width: 900px) {
display: none;
position: fixed;
width: 100%;
top: 70px;
border: {
width: 1px;
color: constants.$border-color;
style: solid;
};
background-color: constants.$origin-color;
z-index: 1;
ul {
li {
font-size: 1.2em;
text-align: center;
a {
display: block;
width: 100%;
height: 100%;
padding: 10px;
}
:hover {
background-color: constants.$focus-color;
}
}
}
}
}
@media screen and (max-width: 900px) {
.dropdown-menu-content.show {
display: block;
}
}
.nav.hide {
animation: .5s ease both;
@include mixins.unique-keyframes {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
}
}