.wrapper{
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.fixed{
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.fixed-content{
width: 100%;
max-width: 1200px;
margin: 0 auto;
}.services{
overflow: hidden;
}
.services .services_img {
position: relative;
float: left;
height: 100px;
margin-right: 50px;
}
.services .services_img:last-child{
margin-right:0;
}.services {
position: relative;
height: 100px;
dispaly:flex;
flex-flow: row wrap;
/* следующие два свойства как раз настраивают нужное вам отображение по горизонтали и вертикали соответственно */
justify-content: space-between;
align-items: flex-start;
}
export default {
data() {
return {
actualColor: 'light'
};
},
methods: {
changeColorLight: function(event){
if(event){
if(this.actualColor === 'monokai') {
this.actualColor = "light";
this.changeColorClass();
};
};
},
changeColorMonokai: function(event){
if(event){
if(this.actualColor === 'light') {
this.actualColor = "monokai";
this.changeColorClass();
};
};
},
changeColorClass: function() {
let html = document.documentElement;
html.className = this.actualColor;
}
}/******************************************************************************
Colorscheme variables
******************************************************************************/
html.light{
--background:#ffffff;
--background_nav:#f3f3f3;
--foreground:#800000;
--foreground_script:#000000;
--foreground_brackets:#800000;
--foreground_script-brackets:#000000;
--foreground_cursor:#000000;
--selection:#add6ff;
--counter:#237893;
}
html.monokai{
--background:#272822;
--background_nav:#1e1f1c;
--foreground:#f92672;
--foreground_script:#a6e22e;
--foreground_brackets:#f8f8f0;
--foreground_script-brackets:#f8f8f0;
--foreground_cursor:#f8f8f0;
--selection:#575b61;
--counter:#90908a;
}
.content{
grid-column:content;
grid-row:1;
background-color:var(--background);
}
/* ну и т.д. */