mirror of
https://gitea.com/gitea/theme.git
synced 2024-06-02 01:41:23 +05:30
201dd9a140
Fix navbar overlapping content The navbar previously switched inconsistently to mobile layout which meant between 1024 and 1087 screen width, it would overlap most of the page making links unclickable. Co-authored-by: silverwind <me@silverwind.io> Reviewed-on: https://gitea.com/gitea/theme/pulls/92 Reviewed-by: techknowlogick <techknowlogick@gitea.io> Reviewed-by: 6543 <6543@obermui.de> Co-Authored-By: silverwind <silverwind@noreply.gitea.io> Co-Committed-By: silverwind <silverwind@noreply.gitea.io>
177 lines
2.6 KiB
SCSS
177 lines
2.6 KiB
SCSS
*, *:hover, *:active, *:focus{
|
|
outline: none;
|
|
}
|
|
|
|
@import '../node_modules/bulmaswatch/flatly/variables';
|
|
@import "../node_modules/bulma/bulma";
|
|
@import '../node_modules/bulmaswatch/flatly/overrides';
|
|
|
|
.homepage-hero{
|
|
height: 100vh;
|
|
min-height: 700px;
|
|
overflow: hidden;
|
|
|
|
.hero-body .container{
|
|
padding: 3em 0 1em;
|
|
|
|
.button:first-child{
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
|
|
.hero-foot img {
|
|
max-width: 100vw;
|
|
width: 1000px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.feature-shoutout {
|
|
font-size: 1.2em;
|
|
|
|
svg{
|
|
height: 36px;
|
|
vertical-align: middle;
|
|
padding-right: 5px;
|
|
fill: #fff;
|
|
}
|
|
|
|
a{
|
|
color: darken($turquoise, 20%) !important;
|
|
}
|
|
}
|
|
|
|
.page .card{
|
|
margin-bottom: 2em;
|
|
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 3px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1);
|
|
color: #4a4a4a;
|
|
max-width: 100%;
|
|
position: relative;
|
|
border: none;
|
|
border-radius: 0.2em;
|
|
|
|
.media-content a{
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// Mobile Styles
|
|
|
|
.navbar-background{
|
|
-webkit-transition: opacity ease 300ms;
|
|
transition: opacity ease 300ms;
|
|
|
|
opacity: 0;
|
|
}
|
|
|
|
.navbar-menu{
|
|
-webkit-transition: all ease 300ms;
|
|
transition: all ease 300ms;
|
|
}
|
|
|
|
@media screen and (max-width:1023px){
|
|
.navbar-menu{
|
|
position: fixed;
|
|
bottom: 0;
|
|
top: 0;
|
|
left: -160px;
|
|
z-index: 2;
|
|
opacity: 1;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.navbar-menu .logo{
|
|
display: none;
|
|
}
|
|
|
|
.navbar-menu.is-active{
|
|
-webkit-transition: all ease 300ms;
|
|
transition: all ease 300ms;
|
|
left: 0;
|
|
|
|
.navbar-item{
|
|
padding: 0.5em 2em 0.5em 1.5em;
|
|
}
|
|
|
|
.logo{
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.navbar-burger.burger{
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.navbar-background.is-active{
|
|
background: rgba(0,0,0,0.5);
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
opacity: 1;
|
|
}
|
|
|
|
.toc {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.menu {
|
|
font-size: 1rem;
|
|
}
|
|
.menu.is-small {
|
|
font-size: 0.85em;
|
|
}
|
|
.menu.is-medium {
|
|
font-size: 1.25rem;
|
|
}
|
|
.menu.is-large {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.menu-list {
|
|
line-height: 1;
|
|
font-size: 0.9em;
|
|
}
|
|
.menu-list a {
|
|
border-radius: 3px;
|
|
color: #34495e;
|
|
display: block;
|
|
padding: 0.5em 0.75em;
|
|
}
|
|
.menu-list a:hover {
|
|
background-color: #ecf0f1;
|
|
color: #2b3c4e;
|
|
}
|
|
.menu-list a.is-active {
|
|
background-color: #1abc9c;
|
|
color: #fff;
|
|
}
|
|
.menu-list li ul {
|
|
border-left: 1px solid #dee2e5;
|
|
margin: 0.75em;
|
|
padding-left: 0.75em;
|
|
}
|
|
|
|
.menu-label {
|
|
color: #1abc9c;
|
|
font-size: 0.8em;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
.menu-label:not(:first-child) {
|
|
margin-top: 1em;
|
|
}
|
|
.menu-label:not(:last-child) {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|