Возможно, это не лучшее место для этого, но я также спрошу - есть ли в Интернете подобное место, как переполнение стека, в более специфичной для форума настройке, к которой я должен присоединиться?
В любом случае, это первый проект, который я начал с нуля, за исключением проектов в некоторых бесплатных онлайн-буткемпах.
Я надеялся получить некоторые критические замечания о том, что я мог бы сделать лучше для достиженияте же результаты, если есть какая-то плохая практика и т. д.… это пока что действительно базовый материал.
Является ли использование слишком большого количества медиа-запросов плохой практикой?
Одной из проблем, с которыми я сталкиваюсь, является адаптивный дизайн.Я не думаю, что когда это будет сделано, меню будет выглядеть так, как сейчас на маленьких экранах (придется научиться делать меню для гамбургеров), но я все равно поиграл с этим, и у меня возникают проблемы с контролем, когда именнообертывание гибких элементов.Он настроен прямо сейчас, поэтому выпадающие ссылки перемещаются вниз при уменьшении экрана, но на самом деле это не работает, если экран не достаточно мал для того, чтобы элементы полностью «обернулись».
Кроме того, кажется, что использование "flex base" и "flex grow" имеет очень похожий эффект.Я прокомментировал этот раздел кода с моим старым кодом, чтобы показать, что я имею в виду.Основная идея заключается в том, что не все пункты меню имеют одинаковую ширину и т. Д.
Любой совет будет принят.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: hsl(9, 41%, 19%);
margin: 0;
font-family: 'Bowlby One SC';
}
header {
background-color: darkgoldenrod;
color: hsl(9, 41%, 19%);
margin: 0;
padding-bottom: 0.5em;
border-bottom: 3px solid rgb(112, 98, 98);
}
.top {
display: flex;
background-color: hsl(9, 41%, 19%);
color: darkgoldenrod;
padding: 0.2em;
justify-content: start;
}
.top h1 {
flex-basis: 85%;
margin-left: 0.2em;
}
.social {
font-size: 1.5em;
padding: 0.5em;
}
input {
width: 10%;
min-width: 10%;
transition: width 0.4s ease-in-out;
background-color: darkgoldenrod;
color: hsl(9, 41%, 19%);
border: 2px solid rgb(112, 98, 98);
border-radius: 1.3em;
padding: 0.3em;
font-family: "FontAwesome";
font-weight: 800;
font-size: 1em;
margin: 0.2em;
}
input:focus {
width: 25%;
font-family: 'Bowlby One SC';
padding-left: 1em;
}
nav {
border-top: 3px solid rgb(112, 98, 98);
}
.container {
width: 75%;
margin: auto;
display: flex;
flex-wrap: wrap;
}
nav ul li {
position: relative;
list-style: none;
margin-bottom: -0.5em;
}
logo {
font-size: 2em;
flex: 1 0 20%;
/* flex-basis: 20%;*/
}
.wide {
flex: 1 0 12.5%;
align-self: end;
/* flex-basis: 12.5%;*/
}
.main {
flex: 1 0 7.5%
/*flex-basis: 7.5%;*/
}
/*logo {
flex: 3 0;
font-size: 2em;
padding-left: 0.5em;
}
.wide {
flex: 2 1;
}
.main {
flex: 1 1;
}*/
nav ul li a {
display: block;
text-align: center;
font-size: 0.9em;
text-decoration: none;
color: hsl(9, 41%, 19%);
padding: 1.2em;
margin: 0;
}
nav ul li>a:hover {
background: hsl(9, 41%, 19%);
color: darkgoldenrod;
opacity: 0;
animation-name: dropanimate;
animation-duration: 300ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes dropanimate {
from {
opacity: 0;
transform: scale(1.2);
}
to {
opacity: 1;
transform: scale(1);
}
}
.sub-menu {
background-color: rgba(112, 98, 98, 0.8);
display: none;
position: absolute;
width: 100%;
color: hsl(9, 41%, 19%);
padding-bottom: 0.5em;
text-align: center;
border: 3px solid rgb(112, 98, 98);
}
.sub-menu a {
display: block;
padding: 0.5em;
}
.sub:hover>.sub-menu {
display: block;
}
/*display block vs flex creates cool difference here */
@media screen and (max-width:768px) {
nav {
font-size: 0.8em;
}
logo {
order: 1;
}
.wide {
order: 4;
}
nav ul li {
margin-bottom: -0.6em;
}
.main {
order: 3;
}
.container {
width: 100%;
}
.user-action {
order: 2;
}
.social {
font-size: 0.9em;
align-self: center;
}
.top h1 {
font-size: 1.2em;
align-self: center;
}
input {
width: 55%;
}
input:focus {
width: 55%;
font-family: 'Bowlby One SC';
padding-left: 1em;
font-size: 0.5em;
}
}
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<title>Deadbeat Music</title>
<meta charset="UTF-8">
</head>
<body>
<header>
<div class="top">
<h1>Deadbeat</h1>
<input type="text" id="search" class="fas fa-search" placeholder="" onfocus="this.placeholder=''" onblur="this.placeholder=''" />
<i class="social fab fa-facebook-f"></i>
<i class="social fas fa-envelope"></i>
<i class="social fas fa-comments"></i>
</div>
<nav>
<ul class="container">
<!-- <li id="logo">Deadbeat</li>-->
<li class="sub wide" id="mission"><a href="">Our Mission </a>
<ul class="sub-menu">
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Partner Up</a></li>
</ul>
</li>
<li class="sub wide"><a href="">Profiles</a>
<ul class="sub-menu" id="profiles">
<li class="profile-types"><a href="">Bands</a></li>
<li class="profile-types"><a href="">Labels</a></li>
<li class="profile-types"><a href="">Promoters</a></li>
<li class="profile-types"><a href="">Bloggers</a></li>
</ul>
</li>
<li id="show" class="wide"><a href="">Book a Show</a></li>
<li class="sub wide" id="record"><a href="">Make a Record</a>
<ul class="sub-menu">
<li><a href="">For Bands</a></li>
<li><a href="">For Labels</a></li>
</ul>
</li>
<li class="main"><a href="">Press</a></li>
<li class="main"><a href="">Forum</a></li>
<li class="main user-action"><a href="">Login</a></li>
<li class="main user-action" id="sign-up"><a href="">Sign Up!</a></li>
</ul>
</nav>
</header>
</body>
</html>