//- Container
.container
	//-- Dark Button
	.darkButton
		.darkButton__indicator
	//-- Calculator
	.calculator
		//--- Output of Numbers
		.inputWrap
			input(type="text" class="inputWrap__result" readonly)
		//--- Buttons
		mixin buttonMix(buttonType, actionName, buttonName)
			.button(class=`_${buttonType}` action=`${actionName}`) #{buttonName}
		.buttonWrap
			.buttonWrap__row.clearfix
				+buttonMix('action', 'clear', 'AC')
				+buttonMix('action', 'negate')
				+buttonMix('action', 'percent')
				+buttonMix('action', 'divide')
			.buttonWrap__row.clearfix
				+buttonMix('number', '', '7')
				+buttonMix('number', '', '8')
				+buttonMix('number', '', '9')
				+buttonMix('action', 'multiplication')
			.buttonWrap__row.clearfix
				+buttonMix('number', '', '4')
				+buttonMix('number', '', '5')
				+buttonMix('number', '', '6')
				+buttonMix('action', 'minus')
			.buttonWrap__row.clearfix
				+buttonMix('number', '', '1')
				+buttonMix('number', '', '2')
				+buttonMix('number', '', '3')
				+buttonMix('action', 'plus')
			.buttonWrap__row.clearfix
				+buttonMix('number _double', '', '0')
				+buttonMix('action', 'point', '.')
				+buttonMix('action', 'equality')
				
//- Social links
.social
	ul.socialList
		li.socialList__item
			a.socialList__link(href="https://github.com/Kerthin?tab=overview&from=2021-05-01&to=2021-05-05" target="_blank")
				svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
					path(d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22")
		li.socialList__item
			a.socialList__link(href="https://codepen.io/Astap" target="_blank")
				svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
					polygon(points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2")
					line(x1="12" y1="22" x2="12" y2="15.5")
					polyline(points="22 8.5 12 15.5 2 8.5")
					polyline(points="2 15.5 12 8.5 22 15.5")
					line(x1="12" y1="2" x2="12" y2="8.5")
		li.socialList__item
			a.socialList__link(href="https://twitter.com/BelichenkoRoden" target="_blank")
				svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
					path(d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z")
View Compiled 
/*____________________________________________________________

# Auxiliary styles
# Container
	## Dark Button
	## Calculator
		### Output of Numbers
		### Buttons
# @media
	## @media 545px
	## @media 375px
	## @media 320px
	## @media Height 850px
	## @media Height 680px
	## @media Height 540px
# Social links

____________________________________________________________*/

/*____________________________________________________________
# Auxiliary styles
____________________________________________________________*/
* {
	padding: 0;
	margin: 0;
	outline: none;
	box-sizing: border-box;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
::-webkit-scrollbar {
	width: 0;
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/*____________________________________________________________
# Container
____________________________________________________________*/
.container {
	width: 100%;
	height: 100vh;
	background: linear-gradient(45deg,#FBCA88,#EF69AD);
}

/*____________________________________________________________
## Dark Button
____________________________________________________________*/
.darkButton {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 50px;
	height: 26px;
	border-radius: 50px;
	background-color: #f2f3f7;
	cursor: pointer;
	z-index: 2;
}
.darkButton__indicator {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50px;
	background-color: #facf6f;
	transition: all .3s;
}

.darkButton.darkButton_dark {
	background-color: #283245;

	.darkButton__indicator {
		left: 26px;
		background-color: #f2f3f7;
	}
}

.container.container_dark {
	background: linear-gradient(45deg,#476892,#59355D);

	.calculator {
		background-color: #283245;

		.inputWrap__result {
			color: #f2f3f7;
		}

		.button {
			background-color: #283245;

			color: #f2f3f7;
			box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.2),
						-6px -6px 10px -1px rgba(255,255,255,0.05);

			&[action="clear"] {
				color: #a9aeb3;
			}
			&[action="negate"] {
				background-image: url('https://rawcdn.githack.com/Kerthin/calculator-templateSait/dcdbbad6725e41b4e6ca2b55d40830cd1dfc92f6/app/image/negate_dark.png');
			}
			&[action="percent"] {
				background-image: url('https://rawcdn.githack.com/Kerthin/calculator-templateSait/dcdbbad6725e41b4e6ca2b55d40830cd1dfc92f6/app/image/percent_dark.png');
			}

			&:active {
				box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
							inset -4px -4px 6px -1px rgba(255,255,255,0.05),
							-0.5px -0.5px 0 rgba(0,0,0,0.1),
							0.5px 0.5px 0 rgba(0,0,0,0.15),
							0px 12px 10px -10px rgba(0,0,0,0.05);
				border: 1px solid rgba(0,0,0,0.01);
			}
		}
	}
}

/*____________________________________________________________
## Calculator
____________________________________________________________*/
.calculator {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 545px;
	height: 817px;
	transform: translate(-50%, -50%);
	border-radius: 50px;
	background-color: #f2f3f7;
	box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
	overflow: hidden;
}

/*____________________________________________________________
### Output of Numbers
____________________________________________________________*/
.inputWrap {
	position: absolute;
	bottom: 683px;
	width: 100%;

	&__result {
		padding: 0 30.6px;
		width: 100%;
		height: 100px;
		text-align: right;
		font-family: sans-serif;
		font-size: 90px;
		color: #000;
		border: 0;
		outline: none;
		background-color: transparent;
	}
}

/*____________________________________________________________
### Buttons
____________________________________________________________*/
.buttonWrap {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 483.8px;

	&__row {
		width: 100%;
	}
}

.button {
	display: block;
	float: left;
	margin-left: 30.6px;
	margin-bottom: 30.6px;
	width: 98px;
	height: 98px;
	text-align: center;
	font-family: sans-serif;
	font-size: 50px;
	line-height: 1.9;
	color: #000;
	box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.1),
							-6px -6px 10px -1px rgba(255,255,255,0.7);
	border: 1px solid rgba(0,0,0,0.0);
	border-radius: 30px;
	background-repeat: no-repeat;
	background-size: 35%;
	background-position: center;
	background-color: #f2f3f7;
	cursor: pointer;

	&._double {
		padding-left: 35px;
		width: 226.6px;
		text-align: left;
	}

	&[action="clear"] {
		color: #676d80;
	}
	&[action="negate"] {
		background-image: url('https://rawcdn.githack.com/Kerthin/calculator-templateSait/dcdbbad6725e41b4e6ca2b55d40830cd1dfc92f6/app/image/negate.png');
	}
	&[action="percent"] {
		background-image: url('https://rawcdn.githack.com/Kerthin/calculator-templateSait/dcdbbad6725e41b4e6ca2b55d40830cd1dfc92f6/app/image/percent.png');
	}
	&[action="divide"] {
		background-image: url('https://rawcdn.githack.com/Kerthin/calculator-templateSait/dcdbbad6725e41b4e6ca2b55d40830cd1dfc92f6/app/image/divide.png');
	}
	&[action="multiplication"] {
		background-image: url('https://rawcdn.githack.com/Kerthin/calculator-templateSait/dcdbbad6725e41b4e6ca2b55d40830cd1dfc92f6/app/image/multiplication.png');
	}
	&[action="minus"] {
		background-image: url('https://rawcdn.githack.com/Kerthin/calculator-templateSait/dcdbbad6725e41b4e6ca2b55d40830cd1dfc92f6/app/image/minus.png');
	}
	&[action="plus"] {
		background-image: url('https://rawcdn.githack.com/Kerthin/calculator-templateSait/dcdbbad6725e41b4e6ca2b55d40830cd1dfc92f6/app/image/plus.png');
	}
	&[action="equality"] {
		background-image: url('https://rawcdn.githack.com/Kerthin/calculator-templateSait/dcdbbad6725e41b4e6ca2b55d40830cd1dfc92f6/app/image/equality.png');
	}

	&:first-child {
		margin-left: 0;
	}

	&:active {
		box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
					inset -4px -4px 6px -1px rgba(255,255,255,0.7),
					-0.5px -0.5px 0 rgba(255,255,255,1),
					0.5px 0.5px 0 rgba(0,0,0,0.15),
					0px 12px 10px -10px rgba(0,0,0,0.05);
		border: 1px solid rgba(0,0,0,0.01);
	}
}

/*____________________________________________________________
# @media
____________________________________________________________*/
/*____________________________________________________________
## @media 545px
____________________________________________________________*/
@media screen and (max-width: 545px) {
	.calculator {
		width: 414px;
		height: 736px;
		border-radius: 0;
	}
	.inputWrap {
		bottom: 530px;

		&__result {
			padding: 0 23.3px;
			height: auto;
			font-size: 68.5px;
		}
	}
	.buttonWrap {
		width: 368px;
	}
	.button {
		margin-left: 23.3px;
		margin-bottom: 23.3px;
		width: 74.5px;
		height: 74.5px;
		font-size: 38px;
		border-radius: 22.8px;

		&._double {
			padding-left: 24px;
			width: 172.3px;
		}
	}
}

/*____________________________________________________________
## @media 375px
____________________________________________________________*/
@media screen and (max-width: 375px) {
	.calculator {
		width: 100%;
		height: 667px;
	}

	.inputWrap {
		bottom: 470px;

		&__result {
			padding: 0 20.6px;
			font-size: 62px;
		}
	}
	.buttonWrap {
		width: 333.8px;
	}
	.button {
		margin-left: 20.6px;
		margin-bottom: 20.6px;
		width: 68px;
		height: 68px;
		font-size: 35px;
		border-radius: 20px;

		&._double {
			padding-left: 24px;
			width: 156.6px;
		}
	}
}

/*____________________________________________________________
## @media 320px
____________________________________________________________*/
@media screen and (max-width: 320px) {
	.calculator {
		height: 568px;
	}
	.inputWrap {
		bottom: 400px;

		&__result {
			padding: 0 17.6px;
			height: auto;
			font-size: 53px;
		}
	}
	.buttonWrap {
		width: 284.8px;
	}
	.button {
		margin-left: 17.6px;
		margin-bottom: 17.6px;
		width: 58px;
		height: 58px;
		font-size: 30px;
		border-radius: 17px;

		&._double {
			padding-left: 20.5px;
			width: 133.6px;
		}
	}
}

/*____________________________________________________________
## @media Height 850px
____________________________________________________________*/
@media screen and (min-width: 545px) and (max-height: 850px) {
	.calculator {
		transform: translate(-50%, -50%) scale(.8);
	}
}

/*____________________________________________________________
## @media Height 680px
____________________________________________________________*/
@media screen and (min-width: 545px) and (max-height: 680px) {
	.calculator {
		transform: translate(-50%, -50%) scale(.6);
	}
}

/*____________________________________________________________
## @media Height 540px
____________________________________________________________*/
@media screen and (min-width: 545px) and (max-height: 540px) {
	.calculator {
		transform: translate(-50%, -50%) scale(.4);
	}
}

/*____________________________________________________________
# Social links
____________________________________________________________*/
.social {
	position: fixed;
	bottom: 0;
	left: 30px;
}
.socialList {
	list-style: none;
	
	&:after {
		content: '';
		display: block;
		margin: 0 auto;
		width: 1px;
		height: 40px;
		background: #f7e0b5;
	}
}
.socialList__item {
	margin-bottom: 10px;
	width: 20px;
	height: 20px;
	transition: transform .2s;
	
	&:hover {
		transform: translateY(-3px);
		
		.socialList__icon {
			stroke: #7dcbd8;
		}
	}
}

.socialList__icon {
	fill: none;
	stroke: #f7e0b5;
}
View Compiled 
// Dark Theme
var container = document.querySelector('.container');
var themeButton = document.querySelector('.darkButton');

themeButton.onclick = function (event) {
	this.classList.toggle("darkButton_dark");
	container.classList.toggle("container_dark");
};

// Calculator
var result = document.querySelector("input.inputWrap__result");
var number = document.querySelectorAll("._number");
var equality = document.querySelector("._action[action=equality]");
var clear = document.querySelector("._action[action=clear]");
var negate = document.querySelector("._action[action=negate]")
var point = document.querySelector("._action[action=point]")

number.forEach(function (elem) {
	var n = elem.innerText;
	elem.onclick = function (event) { return result.value = result.value + n; };
});

var buffer = [];

var evaluate = function (buffer) {
	var secondArgument = buffer.pop().value;
	var operator = buffer.pop().value;
	var firstArgument = buffer.pop().value;

	if (operator === "plus") {
		return firstArgument + secondArgument;
	}
	else if (operator === "minus") {
		return firstArgument - secondArgument;
	}
	else if (operator === "multiplication") {
		return firstArgument * secondArgument;
	}
	else if (operator === "divide") {
		return firstArgument / secondArgument;
	}
	else if (operator === "percent") {
		return firstArgument % secondArgument;
	}
};

var opCallback = function (actionName) {
	return function (event) {
		if (buffer && buffer.length) {
			buffer.push({ type: "value", value: parseFloat(result_1.value, 10) });

			var result_1 = evaluate(buffer);
			buffer.push({ type: "value", value: result_1 });
			buffer.push({ type: "action", value: actionName });
			result_1.value = "";
		}
		else {
			buffer.push({ type: "value", value: parseFloat(result.value, 10) });
			buffer.push({ type: "action", value: actionName });
			result.value = "";
		}
	};
};

for (var i = 0, mathAction = ["plus", "minus", "multiplication", "divide", "percent"]; i < mathAction.length; i++) {
	var actionName = mathAction[i];
	mathOperator = document.querySelector("._action[action=" + actionName + "]")
	mathOperator.onclick = opCallback(actionName);
}

equality.onclick = function (event) {
	buffer.push({ type: "value", value: parseFloat(result.value, 10) });
	result.value = evaluate(buffer).toString();
};

clear.onclick = function (event) {
	result.value = "";
	while (buffer.length)
		buffer.pop();
};

negate.onclick = function (event) {
	return result.value = -parseFloat(result.value, 10);
};
point.onclick = function (event) {
	return result.value = parseFloat(result.value) + '.';
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.