mapleshrine-links/css/style.css

271 lines
5.7 KiB
CSS

/* From the :root element you can easily change the colors of the design, its size and so on. */
:root {
/* You can change the font family in the whole design here. (You need to add the font family to the codes.) */
--font_family: 'Inter', sans-serif;
/* You can change the font size here, is proportional to all texts. */
--font_size: 16px;
/* You can change the background color by typing the color code. (If you do not enter a background-image image, the background-color will be active.) */
--background_color: #303030;
--background_image: url("../img/wallpaper.png");
/* You can change the frame thickness and color of the picture by typing the number of pixels and the color code. */
--image_border_color: #1f232e;
--image_border_px: 3px;
/* You can change the width and size of the picture by typing the number of pixels. */
--image_width: 140px;
--image_height: 140px;
/* You can change the colors of the title and description section by typing the color codes. */
--title_color: #fff;
--description_color: #fff;
/* You can change the colors of social media icons by changing the color code. */
--svg_color: #fff;
/* You can change the background, text color and active color of the menu by changing the color codes. */
--menu_background_color: #1d1e24;
--menu_text_color: #fff;
--menu_active_text_color: #e07d4f;
/* You can change the button's background, text color and active color by changing the color codes. */
--button_background_color: #1d1e24;
--button_text_color: #fff;
--button_text_hover_color: #e07d4f;
/* You can change the background, text color and active color of the text field by changing the color codes. */
--textarea_background_color: #1d1e24;
--textarea_text_color: #fff;
--textarea_link_text_color: #e07d4f;
/* You can change the background, text color and active color of the footer area by changing the color codes. */
--footer_background_color: #1d1e24;
--footer_text_color: #fff;
--footer_link_text_color: #e07d4f;
}
/* Basic Codes */
body {
font: var(--font_size) var(--font_family);
font-weight: 400;
line-height: 1.5;
background: var(--background_color) no-repeat center;
min-height: 100vh;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.flex_column_center {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.flex_row_center {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.flex_no_wrap_row_center {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
/* Logo, Title and Description Codes */
.header_img {
padding-top: 1em;
}
.header_img img {
height: var(--image_height);
width: var(--image_width);
border: var(--image_border_px) solid var(--image_border_color);
border-radius: 50%;
margin-bottom: 0.5em;
}
.header_text h1 {
color: var(--title_color);
font-size: 2em;
}
.header_text h2 {
color: var(--description_color);
font-size: 1.5em;
}
/* Social Media Icons Codes */
.header_svg_list {
padding-top: 1em;
}
.header_svg_item {
width: 2.1em;
height: 2.1em;
cursor: pointer;
}
.header_svg_item + .header_svg_item {
margin-left: 1em;
}
.header_svg_item svg {
fill: var(--svg_color);
}
/* Menu Codes */
#header_nav_menu_item_1 {
color: var(--menu_active_text_color);
}
#header_nav_menu_item_2,
#header_nav_menu_item_3 {
color: var(--menu_text_color);
}
.header_nav_menu_list {
padding-top: 1em;
margin-left: 1em;
margin-right: 1em;
}
.header_nav_menu_item {
color: var(--menu_text_color);
background-color: var(--menu_background_color);
text-align: center;
list-style-type: none;
cursor: pointer;
padding: 0.5em;
border-radius: 0.3em;
cursor: pointer;
transition: 0.10s ease;
font-size: 1.1em;
}
.header_nav_menu_item + .header_nav_menu_item {
margin-left: 0.4em;
}
/* Menu Container Codes */
main {
margin-bottom: auto;
}
#main_section_container_2, #main_section_container_3, #main_section_container_4 {
display: none;
}
.main_a_item {
margin-top: 1em;
text-decoration: none;
}
.main_text_item {
display: flex;
align-items: center;
justify-content: center;
color: var(--button_text_color);
background-color: var(--button_background_color);
width: 41em;
margin-top: 1em;
padding: 0.8em;
border-radius: 0.3em;
min-height: 3.7em;
text-align: center;
}
.main_button_item {
color: var(--button_text_color);
background-color: var(--button_background_color);
width: 16em;
border-radius: 1em;
min-height: 3.7em;
text-align: center;
cursor: pointer;
}
.main_small_button_list {
display: flex;
flex-direction: row;
}
.main_small_a_item {
margin-top: 1em;
text-decoration: none;
}
.main_small_a_item + .main_small_a_item {
margin-left: 10px;
}
.main_small_button_item:hover,
.main_button_item:hover {
color: var(--button_text_hover_color);
transform: scale(1.02);
transition: 0.10s ease;
}
.main_small_button_item {
color: var(--button_text_color);
background-color: var(--button_background_color);
width: calc(41em / 2 - 5px);
border-radius: 1em;
min-height: 3.7em;
text-align: center;
cursor: pointer;
}
/* Footer Codes */
.footer_div_item {
color: var(--footer_text_color);
background: var(--footer_background_color);
padding: 1em;
margin-top: 1.5em;
}
.footer_a_item {
color: var(--footer_link_text_color);
text-decoration: none;
}
/* Responsive Codes */
@media (max-width: 768px) {
.main_text_item {
width: 92vw;
}
.main_small_button_item {
width: calc(92vw / 2 - 5px);;
}
.main_button_item {
width: 92vw;
}
.header_h_item {
width: 92vw;
text-align: center;
}
}