southwestradio-site/assets/css/style.scss

266 lines
4.0 KiB
SCSS
Raw Normal View History

html {
height: 100%;
}
2022-10-29 03:08:38 +00:00
body {
2022-11-10 23:41:26 +00:00
font: 14px/1.5 monospace;
2022-10-29 03:08:38 +00:00
background-color: #24202b;
color: white;
font-size: 14pt;
padding: 0;
margin: 0;
2022-11-24 13:47:26 +00:00
background-attachment: fixed;
2024-06-16 23:16:04 +00:00
background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)), url('../background.jpg');
2022-11-24 13:47:26 +00:00
backdrop-filter: blur(5px);
2022-11-29 10:40:53 +00:00
height: 100%;
}
#container {
2022-10-29 03:08:38 +00:00
display: flex;
flex-direction: column;
align-items: center;
}
#wrapper {
display: flex;
2022-10-29 21:11:56 +00:00
padding: 16px;
justify-content: space-evenly;
2024-06-16 23:16:04 +00:00
gap: 1em;
2022-10-29 03:08:38 +00:00
}
aside {
padding-top: 0 !important;
padding-bottom: 0 !important;
2022-10-29 03:08:38 +00:00
min-width: 5em;
2024-06-16 23:16:04 +00:00
align-self: start;
2022-10-29 03:08:38 +00:00
}
#player {
2022-10-29 21:11:56 +00:00
display: flex;
justify-content: center;
align-items: center;
2022-11-10 23:49:56 +00:00
align-self: start;
2024-06-16 23:16:04 +00:00
height: 6.5em;
2022-10-29 03:08:38 +00:00
}
.block {
border: 1px solid #ffffff;
border-radius: 5mm;
2022-10-29 21:11:56 +00:00
padding: 16px;
}
#content {
2022-11-24 13:47:26 +00:00
padding-top: 0;
padding-bottom: 0;
2024-06-16 23:16:04 +00:00
width: 50vw;
2024-07-25 13:40:39 +00:00
height: 100%;
}
#nav {
display: block;
list-style-type: none;
padding: 0;
margin: 0;
}
2022-12-03 22:19:47 +00:00
#nav-wrapper {
display: flex;
align-items: center;
flex-direction: column;
2024-06-30 22:41:46 +00:00
gap: 1em;
2022-12-03 22:19:47 +00:00
}
.menu-item {
margin-block-start: 1em;
margin-block-end: 1em;
2022-10-29 03:08:38 +00:00
}
a {
color: #cc61be;
2022-11-24 13:47:26 +00:00
text-decoration: none;
transition: 0.3s;
2022-11-24 13:47:26 +00:00
}
a:hover {
filter: brightness(150%);
2022-10-29 03:08:38 +00:00
}
#calendar {
display: flex;
2022-11-24 21:12:41 +00:00
justify-content: center;
2024-06-16 23:16:04 +00:00
padding-top: 1em;
padding-bottom: 1em;
}
2022-11-10 23:41:26 +00:00
h1 {
line-height: 1.2;
}
p {
display: block;
margin-inline-start: 0px;
margin-inline-end: 0px;
margin-block-start: 1em;
margin-block-end: 1em;
}
article {
padding-bottom: 24px;
}
.social-link {
fill: #cc61be;
transition: 0.3s;
}
.social-link:hover {
filter: brightness(150%);
}
#main-header {
text-shadow: 0px 0px 11px white;
transition: 0.3s;
}
#header-link {
color: white;
transition: unset;
}
#main-header:hover {
// color: red;
text-shadow: 0px 0px 18px white;
}
2022-12-03 22:19:47 +00:00
#social-mobile {
display: none;
visibility: hidden;
}
2024-06-30 22:41:46 +00:00
#right-side {
display: flex;
flex-direction: column;
gap: 1em;
}
#our-friends {
padding-top: 0;
padding-bottom: 0;
}
2024-07-25 13:40:39 +00:00
#chat {
padding-top: 0;
padding-bottom: 0;
}
2024-06-30 22:41:46 +00:00
#our-friends-mobile {
display: none;
visibility: hidden;
}
2024-07-25 13:40:39 +00:00
#chat-mobile {
display: none;
visibility: hidden;
}
@media only screen and (max-width: 768px) {
#wrapper {
flex-direction: column;
align-items: center;
2022-11-24 21:12:41 +00:00
width: 85vw;
2022-12-03 22:19:47 +00:00
padding-bottom: 0;
2024-06-16 23:16:04 +00:00
gap: 1.2em;
}
2024-06-16 23:16:04 +00:00
aside {
width: 100%;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
2022-11-11 11:03:52 +00:00
align-self: unset;
}
2022-12-03 22:19:47 +00:00
#nav-wrapper {
margin: 0;
width: 100%;
2024-06-16 23:16:04 +00:00
order: 1;
2022-12-03 22:19:47 +00:00
}
2024-06-16 23:16:04 +00:00
#content {
// max-width: 100%;
width: 100%;
2022-11-11 11:03:52 +00:00
max-width: unset;
2022-11-24 13:47:26 +00:00
min-width: unset;
2024-06-16 23:16:04 +00:00
order: 3;
}
#player {
2024-06-16 23:16:04 +00:00
order: 2;
width: 100%;
margin: 0;
2022-10-29 21:11:56 +00:00
padding: 16px;
2022-11-11 11:03:52 +00:00
align-self: unset;
2024-06-16 23:16:04 +00:00
height: 15vh;
}
body {
padding: 10px;
}
#container {
2022-11-24 21:12:41 +00:00
min-width: 100%;
justify-content: center;
}
.menu-item {
display: flex;
justify-content: center;
}
2022-12-03 22:19:47 +00:00
#social-widescreen {
display: none;
visibility: hidden;
}
#social-mobile {
display: block;
visibility: visible;
2024-07-25 13:40:39 +00:00
order: 6;
2022-12-03 22:19:47 +00:00
// margin-bottom: 7px;
}
2024-06-30 22:41:46 +00:00
2024-07-25 13:40:39 +00:00
#chat {
display: none;
visibility: hidden;
}
2024-06-30 22:41:46 +00:00
#our-friends {
display: none;
visibility: hidden;
}
#our-friends-mobile {
display: block;
visibility: visible;
width: 100%;
order: 4;
padding-top: 0;
padding-bottom: 0;
}
2024-07-25 13:40:39 +00:00
#chat-mobile {
display: block;
visibility: visible;
width: 100%;
order: 5;
padding-top: 0;
padding-bottom: 0;
}
2024-06-30 22:41:46 +00:00
#right-side {
display: flex;
align-items: center;
width: 100%;
}
}